// ----- Sections of the adaconda landing page — "adaconda trifft den richtigen Nerv" -----
const { useState: useS } = React;

// Single source of truth for every "Schreib uns" / "Auf WhatsApp starten" CTA on the page.
// Format: no `+`, country code first (wa.me convention).
const WHATSAPP_NUMBER = "436703015164";
const waLink = (text) =>
  `https://wa.me/${WHATSAPP_NUMBER}${text ? `?text=${encodeURIComponent(text)}` : ""}`;

function Logo({ size = 28 }) {
  // Real adaconda mark — packaged under public/assets/adaconda-logo.png.
  // Drop the raster cobra-on-dark-circle file there; we render it at any
  // size from a single source. Same image works for light + dark themes
  // because the dark navy backplate is part of the logo, not the page.
  return (
    <img
      src="assets/adaconda-logo.png"
      width={size}
      height={size}
      alt="adaconda"
      style={{display:"block", borderRadius: Math.round(size * 0.22)}}
    />
  );
}

function Nav({ tone }) {
  const [scrolled, setScrolled] = useS(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo">
          <Logo size={30}/>
          <span style={{display:"flex", flexDirection:"column", lineHeight:1.05}}>
            <span style={{fontSize:18, letterSpacing:"-0.02em"}}>adaconda</span>
            <span className="nav-tagline">Video-Assistent fürs Handwerk</span>
          </span>
        </a>
        <div className="nav-links">
          <a href="#how">So funktioniert's</a>
          <a href="#beispiele">Beispiele</a>
          <a href="#features">Features</a>
          <a href="#pricing">Preise</a>
          <a href="#faq">FAQ</a>
          <a href="#team">Team</a>
        </div>
        <div className="nav-cta">
          <a href="/demo" className="btn btn-ghost nav-demo-btn">
            <span className="nav-demo-dot" aria-hidden="true"/>
            Gratis testen
          </a>
          <a href={waLink()} className="btn btn-accent">
            <Icon.WhatsApp style={{width:16,height:16}}/>
            Auf WhatsApp starten
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ heroVariant }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        {heroVariant === "split" && <HeroSplit/>}
        {heroVariant === "centered" && <HeroCentered/>}
        {heroVariant === "editorial" && <HeroEditorial/>}
      </div>
    </section>
  );
}

function HeroBadge() {
  return (
    <div className="hero-tag">
      <span className="pip"><Icon.WhatsApp style={{width:12,height:12}}/></span>
      <span><b>WhatsApp-basiert.</b> Keine App, kein Login.</span>
    </div>
  );
}

// Prominent brand-lockup sitting above the hero title — wordmark + slogan
// in one line. The slogan ``trifft den richtigen Nerv.`` is the short
// form (the brand name is right above it, so no need to repeat
// ``adaconda``).
function HeroBrand() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 14,
        marginBottom: 18,
      }}
    >
      <Logo size={44}/>
      <div style={{display: "flex", flexDirection: "column", lineHeight: 1.1}}>
        <span style={{fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em"}}>
          adaconda
        </span>
        <span style={{fontSize: 15, color: "var(--ink-2)", marginTop: 2}}>
          trifft den richtigen Nerv.
        </span>
      </div>
    </div>
  );
}

function HeroCTAs() {
  return (
    <>
      <div className="hero-cta">
        <a href="/demo" className="btn btn-accent btn-lg hero-demo-btn">
          <span className="hero-demo-dot" aria-hidden="true"/>
          Gratis testen: zeig mir meine Marken-DNA
        </a>
        <a href={waLink()} className="btn btn-dark btn-lg">
          <Icon.WhatsApp style={{width:18,height:18}}/>
          Auf WhatsApp starten
        </a>
      </div>
      <div className="hero-meta">
        <span className="hero-meta-item"><Icon.Check/> Gratis-Demo, keine Karte nötig</span>
        <span className="hero-meta-item"><Icon.Check/> Tarife ab 89&nbsp;€/Monat</span>
        <span className="hero-meta-item"><Icon.Check/> Monatlich kündbar</span>
      </div>
    </>
  );
}

// HeroReel — das vollflächige Auto-Play-Reel als Hero-Visual. Für Insta-DM-
// Traffic, der das Produkt SOFORT sehen will, schlägt das fertige Werbevideo
// die animierte Chat-Demo (die lebt jetzt weiter unten in OnboardingDemo +
// SalePromo + Revision). 9:16-Phone-Frame, autoplay+muted+loop, JPG-Poster.
function HeroReel() {
  return (
    <div className="hero-reel">
      <div className="hero-reel-frame">
        <video
          className="hero-reel-video"
          src="examples/demo-reel-1.mp4"
          poster="examples/demo-reel-1.jpg"
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
        />
        <span className="tile-badge reel" style={{top:14, left:14}}>▶ Reel</span>
        <div className="hero-reel-caption">
          <span className="hero-reel-dot" aria-hidden="true"/>
          In ~2 Min fertig — direkt auf WhatsApp
        </div>
      </div>
    </div>
  );
}

function HeroSplit() {
  return (
    <div className="hero-grid">
      <div style={{position:"relative", zIndex:1}}>
        <HeroBrand/>
        <HeroBadge/>
        <div className="eyebrow" style={{margin:"0 0 12px"}}>Der WhatsApp-Video-Assistent fürs Handwerk</div>
        <h1 className="display hero-title">
          Dein KI-Video-Assistent. <br/>
          Per <span className="accent-mark">WhatsApp.</span>
        </h1>
        <p className="hero-sub">
          Cinematische Kampagnen-Reels für dein Handwerk — du schreibst, was du heute gemacht hast,
          dein Assistent liefert das fertige Reel mit Caption, Hashtags und Posting-Empfehlung.
          Posten tust du selbst, alles auf Freigabe. Für Handwerk und KMU im DACH-Raum.
        </p>
        <HeroCTAs/>
      </div>
      <div style={{position:"relative"}}>
        <HeroReel/>
        <DecoPlanes/>
      </div>
    </div>
  );
}

function HeroCentered() {
  return (
    <div style={{textAlign:"center", maxWidth:880, margin:"0 auto"}}>
      <div style={{display:"flex", justifyContent:"center"}}><HeroBadge/></div>
      <h1 className="display hero-title" style={{fontSize:"clamp(48px, 8vw, 110px)"}}>
        Schreib's uns. <br/>
        Wir machen dich <span className="accent-mark">sichtbar</span>.
      </h1>
      <p className="hero-sub" style={{margin:"0 auto 36px"}}>
        Cinematische Werbevideos für deinen Betrieb — komplett über WhatsApp. Caption, Hashtags und
        Posting-Empfehlung inklusive. Du gibst frei, du postest. Du musst nichts filmen.
      </p>
      <div style={{display:"flex", justifyContent:"center"}}><HeroCTAs/></div>
      <div style={{marginTop:64}}>
        <ChatDemo/>
      </div>
    </div>
  );
}

function HeroEditorial() {
  return (
    <div>
      <HeroBadge/>
      <h1 className="display" style={{fontSize:"clamp(56px, 11vw, 180px)", lineHeight:0.92, margin:"24px 0 32px", letterSpacing:"-0.045em"}}>
        Du chattest. <br/>
        <span className="accent-mark">Wir liefern.</span>
      </h1>
      <div className="hero-grid" style={{gridTemplateColumns:"1.4fr 1fr", alignItems:"start"}}>
        <div>
          <p className="hero-sub" style={{fontSize:20, maxWidth:600}}>
            adaconda ist dein KI-Video-Assistent für Handwerks- und KMU-Betriebe. Du schickst eine
            Sprachnachricht oder schreibst kurz, was du heute gemacht hast — wir bauen daraus
            cinematische Werbevideos. Mit Caption, Hashtags und Posting-Empfehlung. Gepostet wird nichts
            automatisch — du gibst jedes Video frei und postest selbst.
          </p>
          <HeroCTAs/>
        </div>
        <ChatDemo/>
      </div>
    </div>
  );
}

function DecoPlanes() {
  return null; // kept simple per default aesthetic
}

// ===== How it works =====

// ===== Onboarding-Demo =====
//
// Zweiter ChatDemo direkt nach „So funktioniert's". Zeigt den ersten Kontakt:
// adaconda crawlt die Website, extrahiert Logo, Fotos, Slogan und Tonalität.
// Spiegelt den realen Felix → Robert → Clara-Pipeline-Output (siehe
// docs/architecture.md §3 Onboarding-State-Machine + app/services/bot.py
// PROFILE_READY_ACK / PROFILE_READY_PREVIEW_INTRO).

function OnboardingDemo() {
  return (
    <section className="section-pad" id="onboarding" style={{background:"var(--bg-2)"}}>
      <div className="container">
        <div className="hero-grid" style={{alignItems:"center"}}>
          <div>
            <span className="eyebrow">Beim Start</span>
            <h2 className="display" style={{fontSize:"clamp(36px, 5vw, 56px)", margin:"16px 0 20px", letterSpacing:"-0.03em"}}>
              Du gibst <span className="accent-mark">deine Website</span>.<br/>
              Wir bauen den Rest.
            </h2>
            <p className="hero-sub" style={{maxWidth: 520}}>
              Logo, Fotos, Slogan, Tonalität und Markenfarben — adaconda liest deine Website durch
              und legt das alles in einem sauberen Markenprofil ab. Du musst nichts ausfüllen, kein
              Formular, kein Onboarding-Termin. Dauert keine fünf Minuten.
            </p>
            <ul style={{listStyle:"none", padding:0, margin:"24px 0 0", display:"flex", flexDirection:"column", gap:10}}>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                Logo wird automatisch erkannt
              </li>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                Schriftart von eurer Website wird übernommen
              </li>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                Slogan, Markenfarben + Tonalität werden extrahiert
              </li>
              <li style={{display:"flex", alignItems:"center", gap:10, color:"var(--ink-2)", fontSize:15}}>
                <Icon.Check style={{width:18, height:18, color:"var(--accent)"}}/>
                Keine Website? Wir fragen 2 Sätze ab — passt auch.
              </li>
            </ul>
            <div className="onboarding-demo-cta">
              <a href="/demo" className="btn btn-accent btn-lg">
                Probier's live — gib uns deine URL
                <span aria-hidden="true" style={{marginLeft: 4}}>→</span>
              </a>
              <p style={{margin:"12px 0 0", fontSize:13, color:"var(--ink-3)"}}>
                Ohne Anmeldung, ohne WhatsApp. Dauert 30 Sekunden.
              </p>
            </div>
          </div>
          <OnboardingChatDemo/>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", icon: <Icon.Chat/>, title: "Schreib uns auf WhatsApp", body: "Foto, Sprachnachricht oder Text. So wie du eh deinen Kollegen schreibst." },
    { n: "02", icon: <Icon.Sparkle/>, title: "Wir bauen Post & Reel", body: "Unsere KI macht Caption, Hashtags und Posting-Empfehlung. Im Stil deines Betriebs." },
    { n: "03", icon: <Icon.Check/>, title: "Du gibst frei", body: "Passt's? Daumen hoch. Soll was anders? Sag's, wir bauen um." },
    { n: "04", icon: <Icon.Send/>, title: "Posten tust du selbst", body: "Wir laden nichts hoch. Du copy-pastest in Instagram. Volle Kontrolle." },
  ];
  return (
    <section className="section-pad" id="how">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">So funktioniert's</span>
          <h2>Vier Schritte. Mehr nicht.</h2>
          <p>Kein Login, keine App, kein Onboarding-Termin. Du chattest mit uns wie mit einem Kollegen — wir kümmern uns um den Rest.</p>
        </div>
        <div className="steps">
          {steps.map((s) => (
            <div className="step" key={s.n}>
              <div className="step-num">SCHRITT {s.n}</div>
              <div className="step-icon">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Sticky bottom CTA bar — mobile only (CSS shows it ≤720px). Keeps the
// primary "Gratis testen" + WhatsApp always one tap away while scrolling.
function StickyCTA() {
  return (
    <div className="sticky-cta">
      <a href="/demo" className="btn btn-accent sticky-cta-primary">
        <span className="hero-demo-dot" aria-hidden="true"/>
        Gratis testen
      </a>
      <a href={waLink()} className="btn btn-dark sticky-cta-wa" aria-label="Auf WhatsApp starten">
        <Icon.WhatsApp style={{width:20,height:20}}/>
      </a>
    </div>
  );
}

window.StickyCTA = StickyCTA;
window.Nav = Nav;
window.Hero = Hero;
window.Logo = Logo;
window.HowItWorks = HowItWorks;
window.OnboardingDemo = OnboardingDemo;
window.WHATSAPP_NUMBER = WHATSAPP_NUMBER;
window.waLink = waLink;