# Tech Shop

## Projektbeskrivelse

I dette projekt skal du bygge en produktside for en tech-butik. Du får et screenshot af det færdige resultat og skal bruge det som reference. Produktdata håndteres med PHP arrays og udskrives dynamisk med en foreach-løkke. Projektet kombinerer PHP-logik med HTML og CSS til at vise et produktkatalog med tilbudspriser.

## Specifikationer

- Titel: Tech Shop
- Sværhedsgrad: Begynder
- Type: Projekt
- Sprog: PHP, HTML, CSS
- Teknologi: PHP

## Mappe- og filstruktur

```
php-tech-shop/
  images/
  index.php
  style.css
```

- Al CSS skal skrives i `style.css` og linkes til fra `index.php`
- Produktbilleder skal ligge i mappen `images/`

## Assets

Download de 8 produktbilleder og placer dem i `images/` mappen:

- [Trådløse Høretelefoner](https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400)
- [Smart Watch](https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400)
- [Bluetooth Højttaler](https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=400)
- [Trådløs opladning](https://images.unsplash.com/photo-1693279504914-d08266ecbe66?w=400)
- [Mekanisk Tastatur](https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=400)
- [Gaming Mus](https://images.unsplash.com/photo-1527814050087-3793815479db?w=400)
- [Digital Pen](https://images.unsplash.com/photo-1660820936253-f636cfc17b8b?w=400)
- [Ekstern SSD](https://images.unsplash.com/photo-1531492746076-161ca9bcad58?w=400)

## Kravspecifikation

### Data

- Produktdata skal defineres i et PHP array øverst i filen med følgende struktur per produkt:

```php
$products = [
    [
        'title' => 'Trådløse Høretelefoner',
        'description' => 'Premium lyd med aktiv støjreduktion',
        'image' => 'images/hoeretelefoner.jpg',
        'retail_price' => 899,
        'sale_price' => 699
    ],
    // flere produkter...
];
```

- Arrayet skal indeholde mindst 6 produkter
- Produktbilleder skal hentes fra unsplash.com, som er gratis at bruge
- Nogle produkter skal have en `sale_price`, andre skal have `null` som værdi

### PHP-funktion

- Du skal lave en funktion kaldet `calculateDiscount` der beregner og returnerer rabattens størrelse i procent ud fra `retail_price` og `sale_price`
- Funktionen skal bruges i visningen af produktkort, hvor der er en `sale_price`

### Produktvisning

- Produkter skal udskrives med en `foreach`-løkke
- Hvert produkt skal vise billede, titel, beskrivelse og pris
- Produkter med `sale_price` skal vise tilbudsprisen og den originale pris
- Produkter med `sale_price` skal vise en badge med rabatprocenten beregnet via `calculateDiscount`
- Produkter uden `sale_price` skal kun vise den almindelige pris

### Styleguide

- Baggrundsfarve (body): `#f5f5f5`
- Kortfarve (baggrund): `#ffffff`
- Primær tekstfarve: `#333333`
- Sekundær tekstfarve: `#666666`
- Tilbudspris og badge: `#e74c3c`
- Overskriften bruger skriftstørrelse `3.5rem`
- Produktgrid bruger CSS Grid med `auto-fill` og minimum kolonnebredde på `280px`
- Max indholdbredde: `1200px`, centreret