// ----- FAQ, Team/About, Final CTA, Footer -----

function FAQ() {
  const items = [
    { q: "Postet ihr automatisch auf meinem Instagram?", a: "Nein. Wir liefern dir fertige Werbevideos über WhatsApp — du gibst sie frei und postest selbst. Kein Login, kein Zugriff auf deinen Account." },
    { q: "Was muss ich liefern?", a: "Beim Start: dein Logo und (optional) deine Website-Adresse — daraus bauen wir dein Markenprofil. Danach reicht ein kurzer Text wie „Video: Wallbox-Aktion 50%“. Mehr brauchst du nicht — du musst nichts filmen." },
    { q: "Wie lange dauert ein Video?", a: "Ein Reel ist meist in 3–5 Minuten fertig — weil dahinter ein echtes KI-Video gerendert, mit Cinematic-Grade verfeinert und mit Title-Card + End-Card zusammengebaut wird. Wir schicken dir das fertige Video auf WhatsApp." },
    { q: "Kann ich nachher noch was \u00e4ndern?", a: "Ja. Tipp einfach \u201eText \u00e4ndern\u201c \u2014 das ist gratis und unbegrenzt, weil wir nur die Overlay-Schrift austauschen und das Video aus dem Cache wiederverwenden. Eine komplett neue visuelle Richtung (anderer Hook, andere Szene) z\u00e4hlt als neuer Auftrag und l\u00f6st einen Quota-Slot aus \u2014 schreib daf\u00fcr einfach \u201eVideo: neuer Wunsch\u201c." },
    { q: "Funktioniert das auch ohne eigenes Foto-Material?", a: "Ja, genau das ist der Punkt. Deine Reels werden komplett KI-generiert — du musst nichts filmen, nichts schneiden, keine Kamera in die Hand nehmen. Schöne Werbevideos zu bauen ist für Nicht-Techniker schwer; genau das nehmen wir dir ab." },
    { q: "Schriftart — wird meine Marke wirklich getroffen?", a: "Ja. Wir lesen beim Onboarding deine Website-Schrift aus (Google Fonts, CSS-Variablen, Inline-Deklarationen) und mounten die echte .woff2-Datei in jedes gerenderte Reel — sowohl Title-Card als auch End-Card laufen in deiner Brand-Schriftart, nicht in einer generischen System-Font. Fällt deine Schrift nicht in den Google-Fonts-Katalog, nehmen wir Inter als saubere Fallback-Sans." },
    { q: "Wie ist's mit DSGVO?", a: "Daten werden in der EU gespeichert. Wir speichern nur, was du uns aktiv schickst. AV-Vertrag bekommst du beim Onboarding. Auf Wunsch löschen wir alles." },
    { q: "Was, wenn die Videos nicht passen?", a: "Du gibst jedes Video frei — wir liefern erst, dann postest du. Sagt dir was nicht zu, ändern wir den Text gratis oder bauen ein neues Reel. Vertrag ist monatlich kündbar, ohne Begründung." },
    { q: "Macht ihr auch andere Plattformen?", a: "Aktuell Instagram. TikTok ist in der Pipeline, Facebook auf Anfrage." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad" id="faq">
      <div className="container" style={{maxWidth: 880}}>
        <div className="section-head">
          <span className="eyebrow">Häufige Fragen</span>
          <h2>Was du wissen willst, bevor du startest.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle"><Icon.Plus/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Team / About =====

function Team() {
  const people = [
    {
      name: "Peter Fehringer, MSc",
      role: "Gründer & Geschäftsführer",
      initials: "PF",
      photo: "assets/team/peter.png",
      bio: "MSc Data Science & Engineering. Hat zuletzt LLM-Anwendungen bei JAAS gebaut, davor Daten-Pipelines bei BMW Group IT, voestalpine und im Austrian Institute of Technology. Macht adaconda, weil Handwerk und KMU Marketing-Tools verdienen, die ihre Sprache sprechen — und nicht nach generischer KI klingen.",
    },
  ];
  return (
    <section className="section-pad" id="team" style={{background:"var(--bg-2)"}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Über uns</span>
          <h2>Klein, aber für euch da.</h2>
          <p>Wir wissen, wie wenig Zeit du für Instagram hast — und wie nervig Caption-Schreiben sein kann. Genau dafür bauen wir adaconda.</p>
        </div>
        <div className="targets" style={{gridTemplateColumns:"repeat(auto-fit, minmax(260px, 1fr))", gap:18, maxWidth: people.length === 1 ? 560 : "none", margin: people.length === 1 ? "0 auto" : 0}}>
          {people.map((p) => (
            <div className="target-card" key={p.name} style={{padding:28}}>
              <div style={{display:"flex", alignItems:"center", gap:14, marginBottom:8}}>
                {p.photo ? (
                  <img
                    src={p.photo}
                    alt={p.name}
                    style={{width:52, height:52, borderRadius:"50%", objectFit:"cover"}}
                  />
                ) : (
                  <div className="quote-avatar" style={{width:52, height:52, fontSize:16, background:"var(--accent)", color:"var(--accent-ink)"}}>{p.initials}</div>
                )}
                <div>
                  <h4 style={{fontSize:16}}>{p.name}</h4>
                  <div className="ex" style={{fontFamily:"var(--font-mono)", fontSize:11, color:"var(--ink-3)", letterSpacing:"0.05em", textTransform:"uppercase"}}>{p.role}</div>
                </div>
              </div>
              <p style={{fontSize:14, color:"var(--ink-2)", margin:0, lineHeight:1.55}}>{p.bio}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Final CTA =====

function FinalCTA() {
  return (
    <section className="section-pad">
      <div className="container">
        <div className="final-cta">
          <h2>
            Bereit?<br/>
            Schreib uns einfach.
          </h2>
          <p>Kein Account nötig. Keine Karte hinterlegen. Tarife ab 89&nbsp;€/Monat, monatlich kündbar.</p>
          <div className="hero-cta" style={{justifyContent:"center", marginBottom:0}}>
            <a href="/demo" className="btn btn-accent btn-lg hero-demo-btn">
              <span className="hero-demo-dot" aria-hidden="true"/>
              Gratis testen
            </a>
            <a href={window.waLink("Hi adaconda — ich will starten")} className="btn btn-lg" style={{background:"#fff", color:"#0d0d0f"}}>
              <Icon.WhatsApp style={{width:18, height:18}}/>
              Auf WhatsApp starten
            </a>
          </div>
          <div style={{marginTop:24, fontSize:13, color:"rgba(255,255,255,.5)", fontFamily:"var(--font-mono)"}}>
            +43 670 301 51 64 · 24/7 verfügbar
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-logo" style={{marginBottom:4}}>
              <Logo size={32}/>
              <span style={{fontSize:20, letterSpacing:"-0.02em"}}>adaconda</span>
            </div>
            <div style={{fontFamily:"var(--font-mono)", fontSize:12, color:"var(--ink-3)", letterSpacing:"0.04em", textTransform:"uppercase", marginBottom:6}}>trifft den richtigen Nerv</div>
            <p><strong>Dein KI-Video-Assistent per WhatsApp.</strong> Cinematische Werbevideos für Handwerks- und KMU-Betriebe im DACH-Raum — Reels auf Zuruf, Freigabe per Daumen hoch.</p>
          </div>
          <div className="footer-col">
            <h5>Produkt</h5>
            <ul>
              <li><a href="#how">So funktioniert's</a></li>
              <li><a href="#beispiele">Beispiele</a></li>
              <li><a href="#features">Features</a></li>
              <li><a href="#pricing">Preise</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Unternehmen</h5>
            <ul>
              <li><a href="#team">Team</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href={window.waLink()}>Kontakt</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Rechtliches</h5>
            <ul>
              <li><a href="/impressum">Impressum</a></li>
              <li><a href="/privacy">Datenschutz</a></li>
              <li><a href="/terms">AGB</a></li>
              <li><a href="/av-vertrag">AV-Vertrag</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 adaconda · Niederösterreich</span>
          <span>Made for Handwerk · Daten in der EU</span>
        </div>
      </div>
    </footer>
  );
}

window.FAQ = FAQ;
window.Team = Team;
window.FinalCTA = FinalCTA;
window.Footer = Footer;