/* TeamTipp — Landing page */

function LandingPage() {
  return (
    <>
      {/* Hero */}
      <section className="hero">
        <div className="hero-bg" aria-hidden="true" />
        <div className="container">
          <div className="hero-grid">
            <div>
              <span className="hero-badge">
                <span className="dot">⚽</span>
                <span>Bereit für die FIFA WM 2026</span>
              </span>
              <h1>
                Deine Tipprunde<br />
                <span className="accent">zur WM 2026.</span>
              </h1>
              <p className="lead">
                Erstelle ein privates Team, lade andere per Link ein und tippt gemeinsam alle Spiele der WM.
                TeamTipp macht Punkte, Regeln und Ranglisten einfach.
              </p>
              <div className="hero-cta">
                <DownloadButtons />
              </div>
              <div style={{ marginTop: 18 }}>
                <a className="hero-secondary" href="https://web.teamtipp.app" target="_blank" rel="noopener noreferrer">
                  Zur Web-Version <Icon.Arrow size={14} />
                </a>
              </div>
            </div>
            <PhoneMockup />
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section className="trust" aria-label="Rechtlicher Hinweis">
        <div className="container">
          <div className="trust-row">
            <div className="trust-item"><span className="x">✓</span>Kein Wettspiel</div>
            <div className="trust-item"><span className="x">✓</span>Keine Einsätze</div>
            <div className="trust-item"><span className="x">✓</span>Keine Quoten</div>
            <div className="trust-item"><span className="x">✓</span>Keine Auszahlungen</div>
            <div className="trust-item" style={{ color: "var(--fg-muted)" }}>Reine Unterhaltung & Tippspaß</div>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="section" id="how">
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">So funktioniert's</span>
            <h2 className="display-2">In drei Schritten zum Team-Champion</h2>
            <p className="lead">Du brauchst keinen Account-Marathon. Team erstellen, Code teilen, lostippen.</p>
          </div>
          <div className="steps">
            <div className="step">
              <div className="visual" aria-hidden="true">
                <StepIllustration kind="create" />
              </div>
              <div className="num"><span className="dot">1</span><span>Schritt eins</span></div>
              <h3>Team erstellen</h3>
              <p>Lege in unter einer Minute ein privates Team an — für Freunde, das Büro oder den Verein.</p>
            </div>
            <div className="step">
              <div className="visual" aria-hidden="true">
                <StepIllustration kind="invite" />
              </div>
              <div className="num"><span className="dot">2</span><span>Schritt zwei</span></div>
              <h3>Freunde einladen</h3>
              <p>Teile einen Einladungslink oder einen 8-stelligen Code. Beitritt ohne App-Konto-Hürden.</p>
            </div>
            <div className="step">
              <div className="visual" aria-hidden="true">
                <StepIllustration kind="play" />
              </div>
              <div className="num"><span className="dot">3</span><span>Schritt drei</span></div>
              <h3>Tippen & Rangliste verfolgen</h3>
              <p>Tippe Ergebnisse in Sekunden. Punkte und Rangliste aktualisieren sich live nach jedem Spiel.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Core features */}
      <section className="section" id="features" style={{ paddingTop: 24 }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Features</span>
            <h2 className="display-2">Alles, was ein gutes Tippspiel braucht</h2>
            <p className="lead">Schnell, fair, transparent. Auf jedem Gerät, das du gerade in der Hand hast.</p>
          </div>
          <div className="features">
            <FeatureCard icon={Icon.Users} title="Private Teams">
              Erstelle ein Team und lade andere per Einladungslink oder Code ein. Wer rein darf, entscheidest du.
            </FeatureCard>
            <FeatureCard icon={Icon.Zap} title="Schnell tippen">
              Ergebnisse in Sekunden tippen — direkt aus der Match-Übersicht, ohne Umwege.
            </FeatureCard>
            <FeatureCard icon={Icon.Trophy} title="Rangliste">
              Punkte und Platzierungen aktualisieren sich live, sobald ein Spiel zu Ende ist.
            </FeatureCard>
            <FeatureCard icon={Icon.Calendar} title="WM 2026 ready">
              Spielplan, Gruppen und K.-o.-Phase der FIFA Fußball-WM 2026 sind direkt eingebaut.
            </FeatureCard>
            <FeatureCard icon={Icon.Shield} title="Fair & transparent">
              Klare Punkteregeln: 3 Punkte für die exakte Vorhersage, 1 Punkt für die Tendenz. Keine versteckten Multiplikatoren.
            </FeatureCard>
            <FeatureCard icon={Icon.Devices} title="Cross-platform">
              Verfügbar auf iOS, Android und im Web — du wechselst nahtlos zwischen Geräten.
            </FeatureCard>
          </div>
        </div>
      </section>

      {/* Screenshot strip */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">App-Vorschau</span>
            <h2 className="display-2">Klar, schnell, ohne Schnickschnack</h2>
            <p className="lead">Drei Screens, die du in der App am meisten siehst. (Platzhalter — echte Screenshots folgen.)</p>
          </div>
          <div className="shots">
            <ScreenshotPlaceholder label="Home — Nächstes Spiel & deine offenen Tipps" />
            <ScreenshotPlaceholder label="Spiele — Gruppenphase & K.-o.-Runde" />
            <ScreenshotPlaceholder label="Team — Rangliste mit deinem Stand" />
          </div>
        </div>
      </section>

      {/* Pro section */}
      <section className="section pro-section" id="pro">
        <div className="container">
          <div className="section-head">
            <span className="pro-tag" style={{ marginBottom: 8 }}>🏆 TeamTipp Pro</span>
            <h2 className="display-2">Mehr Spaß mit TeamTipp Pro</h2>
            <p className="lead">
              Pro ist ein einmaliger Kauf pro Team — kein Abo. Schaltet zusätzliche Tipp-Modi, eigene Regeln und größere Teams frei.
            </p>
          </div>
          <div className="features">
            <ProFeatureCard title="ProTipps für Spielereignisse">
              Tippe ausgewählte Events wie gelbe/rote Karten, Elfmeter, Eigentore oder Auswechslungen — und sammle Bonuspunkte.
            </ProFeatureCard>
            <ProFeatureCard title="Eigene Punkteregeln">
              Team-Admins passen Punkte für exaktes Ergebnis, Tendenz und ProTipps frei an. Du gestaltest dein Tippspiel.
            </ProFeatureCard>
            <ProFeatureCard title="Größere Teams">
              Bis zu 25 Spieler:innen pro Team. Genug Platz für die ganze Mannschaft, den Verein oder die WG-Etage.
            </ProFeatureCard>
            <ProFeatureCard title="Business-ready" plan="Business">
              Branding deiner Firma oder deines Teams und größere Gruppen — vorbereitet für den Business-Einsatz.
            </ProFeatureCard>
          </div>
        </div>
      </section>

      {/* Pricing teaser */}
      <section className="section" id="pricing-teaser">
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">Preise</span>
            <h2 className="display-2">Einmal zahlen pro Team. Nie wieder.</h2>
            <p className="lead">
              Free reicht für die meisten Freundeskreise. Pro & Business gibt's als <strong>einmaligen Kauf pro Team</strong>.
            </p>
          </div>
          <div className="pricing-grid">
            <PricingCard
              name="Free"
              price="€0"
              desc="Perfekt für kleine Freundeskreise."
              features={[
                { text: "Einladung per Link oder Code" },
                { text: "Bis zu 8 Spieler:innen" },
                { text: "Tipps für jedes Spiel" },
                { text: "Punkte für Ergebnis und Tendenz 3/1/0" },
              ]}
              ctaLabel="Kostenlos starten"
            />
            <PricingCard
              name="Pro"
              price="€4,99"
              unit="einmalig / Team"
              desc="Für ambitionierte Tipp-Runden."
              featured
              features={[
                { text: "Alle Free-Features" },
                { text: "Bis zu 25 Spieler:innen" , pro: true},
                { text: "Eigene Punkteregeln", pro: true },
                { text: "ProTipps für Spielereignisse", pro: true },
              ]}
              ctaLabel="Pro freischalten"
            />
            <PricingCard
              name="Business"
              price="€39,99"
              unit="einmalig / Team"
              desc="Für Firmen und große Communities."
              features={[
                { text: "Alle Pro-Features" },
                { text: "Bis zu 100 Spieler:innen" , business: true},
                { text: "Branding-Platzhalter (Logo, Farben)", business: true },
                { text: "SSO / JIT vorbereitet (geplant)", business: true },
              ]}
              ctaLabel="Business anfragen"
              ctaHref="#/pricing"
            />
          </div>
          <p className="pricing-note">
            <strong>Wichtig:</strong> Zahlungen beziehen sich ausschließlich auf App-Funktionen. TeamTipp bietet keine Wetten, Quoten,
            Einsätze, Auszahlungen oder Gewinnabwicklung an.
          </p>
        </div>
      </section>

      {/* Final CTA */}
      <section className="section-tight">
        <div className="container">
          <div className="cta-section">
            <span style={{ color: "rgba(255,255,255,0.8)", fontWeight: 700, fontSize: 12, letterSpacing: 1.4, textTransform: "uppercase" }}>
              Jetzt laden
            </span>
            <h2>Dein Team wartet schon auf deinen Tipp.</h2>
            <p>Lade TeamTipp auf iOS oder Android und starte dein eigenes WM-Tippspiel in unter zwei Minuten.</p>
            <DownloadButtons />
            <a className="hero-secondary" href="https://web.teamtipp.app" target="_blank" rel="noopener noreferrer" style={{ color: "rgba(255,255,255,0.85)" }}>
              Oder direkt zur Web-Version <Icon.Arrow size={14} />
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

/* Small inline SVG illustrations for the "how it works" steps */
function StepIllustration({ kind }) {
  const primary = "var(--primary)";
  const fg = "var(--fg-secondary)";
  if (kind === "create") {
    return (
      <svg width="170" height="100" viewBox="0 0 170 100" fill="none">
        <rect x="20" y="20" width="130" height="60" rx="12" fill="var(--bg-surface)" stroke="var(--border)" />
        <rect x="32" y="32" width="50" height="8" rx="3" fill={fg} opacity="0.4" />
        <rect x="32" y="46" width="80" height="6" rx="2" fill={fg} opacity="0.25" />
        <rect x="32" y="58" width="60" height="6" rx="2" fill={fg} opacity="0.25" />
        <rect x="100" y="56" width="38" height="14" rx="7" fill={primary} />
        <text x="119" y="66" fontSize="9" fontWeight="700" fill="#fff" textAnchor="middle">Team +</text>
      </svg>
    );
  }
  if (kind === "invite") {
    return (
      <svg width="170" height="100" viewBox="0 0 170 100" fill="none">
        <rect x="22" y="34" width="92" height="32" rx="8" fill="var(--bg-surface)" stroke="var(--border)" />
        <text x="32" y="55" fontSize="13" fontWeight="700" fill="var(--fg)" fontFamily="ui-monospace, monospace">WM-2026-A4</text>
        <circle cx="138" cy="50" r="14" fill={primary} />
        <path d="M132 50l4 4 8-8" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        <circle cx="40" cy="22" r="6" fill={primary} opacity="0.3" />
        <circle cx="60" cy="84" r="5" fill={primary} opacity="0.2" />
        <circle cx="118" cy="22" r="4" fill={primary} opacity="0.25" />
      </svg>
    );
  }
  return (
    <svg width="170" height="100" viewBox="0 0 170 100" fill="none">
      <rect x="20" y="20" width="130" height="60" rx="10" fill="var(--bg-surface)" stroke="var(--border)" />
      <rect x="32" y="32" width="14" height="36" rx="3" fill={primary} opacity="0.85" />
      <rect x="52" y="42" width="14" height="26" rx="3" fill={primary} opacity="0.65" />
      <rect x="72" y="50" width="14" height="18" rx="3" fill={primary} opacity="0.5" />
      <rect x="92" y="38" width="14" height="30" rx="3" fill={primary} opacity="0.7" />
      <rect x="112" y="46" width="14" height="22" rx="3" fill={primary} opacity="0.55" />
      <text x="85" y="92" fontSize="9" fontWeight="600" fill={fg} textAnchor="middle">Rangliste · Live</text>
    </svg>
  );
}

Object.assign(window, { LandingPage });