/* TeamTipp — shared marketing components */

const { useState, useEffect, useRef } = React;

/* ---------------- Icons (inline, no external deps) ---------------- */
const Icon = {
  Apple: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" width={p.size||22} height={p.size||22} aria-hidden="true">
      <path d="M16.365 1.43c0 1.14-.46 2.23-1.21 3.04-.82.9-2.17 1.6-3.27 1.51-.13-1.1.42-2.25 1.16-3.03.83-.87 2.24-1.55 3.32-1.52zM20.5 17.04c-.55 1.27-.81 1.84-1.51 2.96-1 1.55-2.4 3.48-4.14 3.5-1.55.02-1.95-1.01-4.05-1-2.1.01-2.54 1.02-4.09 1-1.74-.02-3.07-1.77-4.07-3.32C.05 16.62-.32 11.4 1.79 8.68c1.5-1.94 3.86-3.07 6.08-3.07 2.26 0 3.68 1.24 5.54 1.24 1.81 0 2.92-1.24 5.53-1.24 1.98 0 4.07 1.08 5.56 2.94-4.88 2.68-4.09 9.65-3.99 8.49z"/>
    </svg>
  ),
  GooglePlay: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||22} height={p.size||22} aria-hidden="true">
      <path d="M3.6 1.5c-.4.3-.6.8-.6 1.4v18.2c0 .6.2 1.1.6 1.4l10.5-10.5L3.6 1.5z" fill="#00d7fe"/>
      <path d="M17.4 8.3 14.1 12l3.3 3.7 4.1-2.4c1-.6 1-2 0-2.6l-4.1-2.4z" fill="#feca00"/>
      <path d="M14.1 12 3.6 22.5c.4.3 1 .3 1.6 0L17.4 15.7 14.1 12z" fill="#ff3a44"/>
      <path d="M14.1 12 17.4 8.3 5.2 1.5c-.6-.3-1.2-.3-1.6 0L14.1 12z" fill="#00f076"/>
    </svg>
  ),
  Users: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||22} height={p.size||22}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
  ),
  Zap: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||22} height={p.size||22}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
  ),
  Trophy: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||22} height={p.size||22}><path d="M6 9H4a2 2 0 0 1-2-2V6h4"/><path d="M18 9h2a2 2 0 0 0 2-2V6h-4"/><path d="M6 22V11l-2-2V6h16v3l-2 2v11"/><line x1="6" y1="22" x2="18" y2="22"/><path d="M12 11v6"/></svg>
  ),
  Calendar: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||22} height={p.size||22}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
  ),
  Shield: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||22} height={p.size||22}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
  ),
  Devices: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||22} height={p.size||22}><rect x="2" y="3" width="14" height="11" rx="2"/><path d="M16 8h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-2"/><line x1="6" y1="18" x2="14" y2="18"/></svg>
  ),
  Football: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||22} height={p.size||22}><circle cx="12" cy="12" r="10"/><polygon points="12 7 16.5 10.5 14.5 16 9.5 16 7.5 10.5"/></svg>
  ),
  Check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" width={p.size||14} height={p.size||14}><polyline points="20 6 9 17 4 12"/></svg>
  ),
  Menu: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
  ),
  Close: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  ),
  Sun: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
  ),
  Moon: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
  ),
  Arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||16} height={p.size||16}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  ),
};

/* ---------------- Download buttons ---------------- */
function DownloadButtons({ size = "default" }) {
  return (
    <div className="stores">
      <a className="store-badge" href="#ios-download" aria-label="Download im App Store">
        <Icon.Apple size={26} />
        <div>
          <div className="label-small">Download on the</div>
          <div className="label-large">App Store</div>
        </div>
      </a>
      <a className="store-badge" href="#android-download" aria-label="Bei Google Play laden">
        <Icon.GooglePlay size={26} />
        <div>
          <div className="label-small">GET IT ON</div>
          <div className="label-large">Google Play</div>
        </div>
      </a>
    </div>
  );
}

/* ---------------- Brand + header ---------------- */
function Brand({ light = false }) {
  return (
    <a href="#/" className="brand" aria-label="TeamTipp Startseite">
      <img src="public/logo-circle.png" alt="" />
      <span style={{ color: light ? "#fff" : "var(--fg)" }}>TeamTipp</span>
    </a>
  );
}

function Header({ route, theme, onToggleTheme }) {
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [route]);

  const isActive = (r) => route === r;
  const navItem = (href, label, match) => (
    <a href={href} className={isActive(match) ? "active" : ""}>{label}</a>
  );

  return (
    <nav className="nav" aria-label="Hauptnavigation">
      <div className="container">
        <div className="nav-inner">
          <Brand />
          <div className="nav-links">
            <a href="#/#features">Features</a>
            {navItem("#/pricing", "Preise", "/pricing")}
            {navItem("#/legal", "Rechtliches", "/legal")}
          </div>
          <div className="nav-spacer" />
          <div className="nav-right">
            <a className="nav-login" href="https://web.teamtipp.app" target="_blank" rel="noopener noreferrer">Login</a>
            <button
              className="theme-toggle"
              onClick={onToggleTheme}
              aria-label={theme === "dark" ? "Helles Design" : "Dunkles Design"}
              title={theme === "dark" ? "Helles Design" : "Dunkles Design"}
            >
              {theme === "dark" ? <Icon.Sun /> : <Icon.Moon />}
            </button>
            <a className="btn btn-primary btn-sm nav-cta-desktop" href="#ios-download">App laden</a>
            <button
              className="nav-menu-btn"
              onClick={() => setOpen(o => !o)}
              aria-expanded={open}
              aria-controls="mobile-menu"
              aria-label="Menü öffnen"
            >
              {open ? <Icon.Close /> : <Icon.Menu />}
            </button>
          </div>
        </div>
        <div id="mobile-menu" className={"mobile-menu" + (open ? " open" : "")}>
          <a href="#/#features">Features</a>
          <a href="#/pricing">Preise</a>
          <a href="#/legal">Rechtliches</a>
          <a href="#/imprint">Impressum</a>
          <a href="#/privacy">Datenschutz</a>
          <a href="https://web.teamtipp.app" target="_blank" rel="noopener noreferrer">Login</a>
          <a href="#ios-download" className="btn btn-primary" style={{ marginTop: 12 }}>App laden</a>
        </div>
      </div>
    </nav>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <div className="brand"><img src="public/logo-circle.png" alt="" /><span>TeamTipp</span></div>
            <p>Dein WM-Tipp. Gemeinsam. Einfach. Fair. Ein Tippspiel für Freunde, Kolleg:innen und Communities — ohne Wetten, ohne Einsätze.</p>
          </div>
          <div className="footer-col">
            <h4>Produkt</h4>
            <a href="#/#features">Features</a>
            <a href="#/#pro">TeamTipp Pro</a>
            <a href="#/pricing">Preise</a>
            <a href="https://web.teamtipp.app" target="_blank" rel="noopener noreferrer">Login</a>
          </div>
          <div className="footer-col">
            <h4>Rechtliches</h4>
            <a href="#/imprint">Impressum</a>
            <a href="#/privacy">Datenschutz</a>
            <a href="#/terms">AGB</a>
            <a href="#/legal">Hinweise</a>
            <a href="#/copyright">Urheberrecht</a>
          </div>
          <div className="footer-col">
            <h4>Download</h4>
            <a href="#ios-download">App Store</a>
            <a href="#android-download">Google Play</a>
            <a href="https://web.teamtipp.app" target="_blank" rel="noopener noreferrer">Web-Version</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 TeamTipp. Alle Rechte vorbehalten.</span>
          <span>Keine Sportwetten · Kein Einsatz · Kein Gewinnversprechen</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Phone mockup ---------------- */
function PhoneMockup() {
  return (
    <div className="phone-stage" aria-label="TeamTipp Smartphone-Vorschau">
      <img
        className="hero-trophy"
        src="public/wc-trophy.png"
        alt="FIFA World Cup Pokal"
        aria-hidden="true"
      />
      <div className="phone" role="img" aria-label="TeamTipp Startbildschirm">

        <div className="screen">
          <div className="notch" />
          <div className="status-bar">
            <span>9:41</span>
            <span>•••</span>
          </div>
          <div className="app-header">
            <div className="logo" />
            <div className="word">TeamTipp</div>
          </div>
          <div className="content">
            <div className="section-label">Nächstes Spiel</div>
            <div className="match-card">
              <div className="row-top">
                <span style={{ fontSize: 11, color: "#9ca3af", fontWeight: 600 }}>Gruppe C</span>
                <span className="pill">Sa 14. Juni · 18:00</span>
              </div>
              <div className="teams-row">
                <div className="team"><span className="flag">🇩🇪</span><span>Deutschland</span></div>
                <span className="vs">vs</span>
                <div className="team right"><span>Elfenbeinküste</span><span className="flag">🇨🇮</span></div>
              </div>
              <div className="pred-divider" />
              <div className="pred-row">
                <div>
                  <div className="label">Dein Tipp</div>
                  <div className="score">2 : 0</div>
                </div>
                <div className="tip-pills">
                  <div className="tip-pill">+🤔</div>
                  <div className="tip-pill">+🏆</div>
                </div>
              </div>
            </div>

            <div className="up-next">
              <div className="up-row">
                <div className="teams">
                  <span>🇺🇾 Uruguay</span>
                  <span style={{ color: "#9ca3af" }}>vs</span>
                  <span>Spanien 🇪🇸</span>
                </div>
                <div className="meta"><span>So 15. Juni · 21:00</span><span style={{ color: "#3b82f6" }}>Dein Tipp: 0 : 2</span></div>
              </div>
              <div className="up-row">
                <div className="teams">
                  <span>🇯🇵 Japan</span>
                  <span style={{ color: "#9ca3af" }}>vs</span>
                  <span>Schweden 🇸🇪</span>
                </div>
                <div className="meta"><span>Mo 16. Juni · 15:00</span><span style={{ color: "#9ca3af" }}>Noch kein Tipp</span></div>
              </div>
              <div className="up-row">
                <div className="teams">
                  <span>🇦🇷 Argentinien</span>
                  <span style={{ color: "#9ca3af" }}>vs</span>
                  <span>Österreich 🇦🇹</span>
                </div>
                <div className="meta"><span>Di 17. Juni · 21:00</span><span style={{ color: "#3b82f6" }}>Dein Tipp: 3 : 0</span></div>
              </div>
              <div className="up-row">
                <div className="teams">
                  <span>🇨🇭 Schweiz</span>
                  <span style={{ color: "#9ca3af" }}>vs</span>
                  <span>Kanada 🇨🇦</span>
                </div>
                <div className="meta"><span>Mi 18. Juni · 18:00</span><span style={{ color: "#9ca3af" }}>Noch kein Tipp</span></div>
              </div>
            </div>
          </div>
          <div className="tab-bar">
            <div className="tab active"><span>⌂</span><span>Home</span><span className="dot" /></div>
            <div className="tab"><span>⚽</span><span>Spiele</span><span className="dot" /></div>
            <div className="tab"><span>♛</span><span>Team</span><span className="dot" /></div>
            <div className="tab"><span>◔</span><span>Profil</span><span className="dot" /></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Reusable cards ---------------- */
function FeatureCard({ icon: I, title, children }) {
  return (
    <div className="feature">
      <div className="ico"><I size={22} /></div>
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
}

function ProFeatureCard({ title, children, plan = "Pro" }) {
  const isBusiness = plan === "Business";
  return (
    <div className="pro-feature">
      <div className="head">
        <div className="title-row">
          <span className="trophy" aria-hidden="true">🏆</span>
          <h3>{title}</h3>
        </div>
        <span className={isBusiness ? "pro-tag business-tag" : "pro-tag"}>{plan.toUpperCase()}</span>
      </div>
      <p>{children}</p>
      <span className="available">In TeamTipp {plan}</span>
    </div>
  );
}

function ScreenshotPlaceholder({ label }) {
  return (
    <div className="shot" role="img" aria-label={"Platzhalter Screenshot: " + label}>
      <span className="placeholder-mark">Screenshot</span>
      <div className="label">{label}</div>
    </div>
  );
}

function PricingCard({ name, price, unit, desc, features, featured, ctaLabel = "App laden", ctaHref = "#ios-download" }) {
  return (
    <div className={"price-card" + (featured ? " featured" : "")}>
      <span className="plan-name">{name}</span>
      <div className="price">
        <span className="amount">{price}</span>
        {unit && <span className="unit">{unit}</span>}
      </div>
      <p className="desc">{desc}</p>
      <ul>
        {features.map((f, i) => (
          <React.Fragment key={i}>
            <li className={f.pro || f.business ? "pro" : ""}>
              <span className="check"><Icon.Check size={12} /></span>
              <span>{f.text}</span>
            </li>
          </React.Fragment>
        ))}
      </ul>
      <a className={"btn " + (featured ? "btn-primary" : "btn-outline") + " price-cta"} href={ctaHref}>{ctaLabel}</a>
    </div>
  );
}

function Badge({ children, variant = "primary" }) {
  return <span className={"badge badge-" + variant}>{children}</span>;
}

/* ---------------- Legal page layout ---------------- */
function LegalPageLayout({ title, lead, sections }) {
  return (
    <>
      <section className="legal-hero">
        <div className="container">
          <h1>{title}</h1>
          {lead && <p className="lead">{lead}</p>}
        </div>
      </section>
      <div className="container">
        <div className="legal-body">
          <aside className="legal-toc" aria-label="Inhaltsverzeichnis">
            <h5>Auf dieser Seite</h5>
            {sections.map(s => <a key={s.id} href={"#" + s.id}>{s.title}</a>)}
          </aside>
          <article className="legal-content">
            {sections.map(s => (
              <section key={s.id} id={s.id}>
                <h2>{s.title}</h2>
                {s.body}
              </section>
            ))}
          </article>
        </div>
      </div>
    </>
  );
}

Object.assign(window, {
  Icon, DownloadButtons, Brand, Header, Footer, PhoneMockup,
  FeatureCard, ProFeatureCard, ScreenshotPlaceholder, PricingCard, Badge,
  LegalPageLayout,
});
