# BreakPilot Website

Marketing- und Pricing-Website fuer BreakPilot mit Stripe Checkout Integration.

## Tech Stack

- **Framework:** Next.js 15.1.6
- **Styling:** Tailwind CSS 3.4
- **Language:** TypeScript 5.7
- **Payment:** Stripe Checkout (via Billing Service)

## Lokale Entwicklung

### Voraussetzungen

- Node.js 20+
- npm oder yarn

### Installation

```bash
cd website
npm install
npm run dev
```

Website ist dann unter http://localhost:3000 erreichbar.

## Docker

### Build

```bash
docker build -t breakpilot-website \
  --build-arg NEXT_PUBLIC_BILLING_API_URL=http://localhost:8083 \
  --build-arg NEXT_PUBLIC_APP_URL=http://localhost:8000 \
  .
```

### Run

```bash
docker run -p 3000:3000 breakpilot-website
```

### Mit Docker Compose

```bash
# Aus dem Root-Verzeichnis
docker compose up -d website
```

## Umgebungsvariablen

| Variable | Beschreibung | Default |
|----------|--------------|---------|
| `NEXT_PUBLIC_BILLING_API_URL` | URL zum Billing Service | `http://localhost:8083` |
| `NEXT_PUBLIC_APP_URL` | URL zur BreakPilot App | `http://localhost:8000` |
| `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` | Stripe Public Key | - |

### Build-Zeit vs. Runtime

NEXT_PUBLIC_* Variablen werden zur Build-Zeit eingebettet. Fuer Docker:

```bash
docker build \
  --build-arg NEXT_PUBLIC_BILLING_API_URL=https://api.breakpilot.de \
  --build-arg NEXT_PUBLIC_APP_URL=https://app.breakpilot.de \
  --build-arg NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx \
  .
```

## Stripe Integration

### Flow

1. Nutzer waehlt Plan auf der Pricing-Seite
2. Nutzer gibt E-Mail ein
3. Website ruft `POST /api/v1/billing/trial/start` am Billing Service auf
4. Billing Service erstellt Stripe Checkout Session
5. Nutzer wird zu Stripe Checkout weitergeleitet
6. Nach Zahlung: Redirect zu `/success?session_id=xxx`
7. Success-Seite zeigt Bestaetigung und leitet zur App weiter

### API Endpunkt

```
POST /api/v1/billing/trial/start
Content-Type: application/json

{
  "plan_id": "basic" | "standard" | "premium",
  "email": "user@example.com"
}

Response:
{
  "checkout_url": "https://checkout.stripe.com/..."
}
```

## Seiten

| Route | Beschreibung |
|-------|--------------|
| `/` | Landing Page mit Hero, Pricing, Trust-Sektion |
| `/success` | Erfolgsseite nach Stripe Checkout |
| `/cancel` | Abbruchseite wenn Checkout abgebrochen |

## Produktion

### Empfohlene Konfiguration

```env
NEXT_PUBLIC_BILLING_API_URL=https://api.breakpilot.de
NEXT_PUBLIC_APP_URL=https://app.breakpilot.de
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx
```

### SSL/TLS

Fuer Produktion sollte ein Reverse Proxy (nginx, Traefik) mit SSL verwendet werden.

## Projektstruktur

```
website/
├── app/
│   ├── globals.css      # Tailwind + Custom Styles
│   ├── layout.tsx       # Root Layout
│   ├── page.tsx         # Landing Page
│   ├── success/
│   │   └── page.tsx     # Checkout Erfolgsseite
│   └── cancel/
│       └── page.tsx     # Checkout Abbruchseite
├── components/
│   ├── Header.tsx       # Navigation
│   ├── PricingSection.tsx # Pricing Cards + Modal
│   └── Footer.tsx       # Footer
├── Dockerfile           # Multi-stage Docker Build
├── next.config.mjs      # Next.js Konfiguration
├── tailwind.config.ts   # Tailwind mit BreakPilot Farben
└── package.json
```