// Alquie · Landing v2 DE

const { useState, useEffect, useRef } = React;

function useReveal() {
  useEffect(() => {
    const triggerCounter = (el) => {
      const target = parseFloat(el.dataset.to);
      const suffix = el.dataset.suffix || '';
      const decimals = parseInt(el.dataset.decimals || '0');
      const dur = 1800;
      const start = performance.now();
      const tick = (t) => {
        const p = Math.min((t - start) / dur, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        const v = target * eased;
        el.textContent = v.toLocaleString('de-DE', {
          minimumFractionDigits: decimals,
          maximumFractionDigits: decimals
        }) + suffix;
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };
    const activate = (el) => {
      el.classList.add('is-in');
      if (el.classList.contains('aq-counter')) triggerCounter(el);
    };
    const els = document.querySelectorAll('.aq-reveal, .aq-draw, .aq-glass-card, .aq-counter');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          activate(e.target);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.05 });
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      const inView = r.top < window.innerHeight && r.bottom > 0;
      if (inView) activate(el);
      else io.observe(el);
    });
    return () => io.disconnect();
  }, []);
}

function useParallax() {
  useEffect(() => {
    const els = document.querySelectorAll('[data-parallax]');
    const onScroll = () => {
      const y = window.scrollY;
      els.forEach(el => {
        const speed = parseFloat(el.dataset.parallax) || 0.1;
        el.style.transform = `translateY(${y * speed}px)`;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
}

const Doodle = ({ variant, color = "currentColor", className }) => {
  if (variant === "wave")
    return (<svg className={className} viewBox="0 0 90 30" fill="none"><path className="aq-draw" d="M3 18 Q 18 4, 30 18 T 56 18 T 84 12" stroke={color} strokeWidth="2.6" strokeLinecap="round" /></svg>);
  if (variant === "arrow")
    return (<svg className={className} viewBox="0 0 130 60" fill="none"><path className="aq-draw" d="M4 50 Q 30 6, 60 28 T 120 14" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeDasharray="2 7" /><path className="aq-draw" d="M110 6 L120 14 L114 24" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg>);
  if (variant === "underline")
    return (<svg className={className} viewBox="0 0 200 14" preserveAspectRatio="none" fill="none"><path className="aq-draw" d="M2 9 Q 50 2, 100 7 T 198 5" stroke={color} strokeWidth="3" strokeLinecap="round" /></svg>);
  if (variant === "spark")
    return (<svg className={className} viewBox="0 0 24 24" fill={color}><path d="M12 0 L13.5 10.5 L24 12 L13.5 13.5 L12 24 L10.5 13.5 L0 12 L10.5 10.5 Z" /></svg>);
  return null;
};

const AlchemyText = ({ text, startDelay = 0 }) => (
  <>
    {text.split('').map((ch, i) => (
      <span key={i} className="aq-alch-letter" style={{ animationDelay: `${startDelay + i * 0.035}s` }}>
        {ch === ' ' ? '\u00A0' : ch}
      </span>
    ))}
  </>
);

const Brand = ({ light = false }) => (
  <div className={light ? "aq-footer__brand" : "aq-nav__brand"}>
    <img src={light ? "assets/logo-blanco.png" : "assets/logo-azul.png"} alt="Alquie" className={light ? "aq-footer__logo-img" : "aq-nav__logo-img"} />
  </div>
);

const Nav = () => (
  <div className="aq-nav-wrap">
    <nav className="aq-nav">
      <Brand />
      <ul className="aq-nav__links">
        <li><a href="#solution">Plattform</a></li>
        <li><a href="#pedagogy">Pädagogik</a></li>
        <li><a href="#schools">Lehrer & Schüler</a></li>
        <li><a href="#pricing">Preise</a></li>
      </ul>
      <div className="aq-nav__cta">
        <div className="aq-lang">
          <span className="aq-lang__current">DE</span>
          <div className="aq-lang__menu">
            <a href="/es">Español</a>
            <a href="/en">English</a>
            <a href="/de" className="is-active">Deutsch</a>
            <a href="/fr">Français</a>
          </div>
        </div>
        <a href="https://app.alquie.com/login" style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)' }}>Anmelden</a>
        <a className="aq-btn aq-btn--navy aq-btn--md" href="/signup/de">Kostenlos starten</a>
      </div>
    </nav>
  </div>
);

const Hero = () => (
  <section className="aq-hero">
    <div className="aq-hero__aurora" />
    <div className="aq-hero__noise" />
    <div className="aq-hero__inner">
      <div className="aq-hero__copy">
        <div className="aq-hero__eyebrow aq-reveal" data-delay="1">
          <span className="aq-hero__eyebrow-dot">✦</span>
          Gamifizierte Lernplattform
        </div>
        <h1 className="aq-h1 aq-hero__h1 aq-alchemy" data-delay="2">
          <AlchemyText text="Lernen, das sich wie" />
          <br />
          <span style={{ whiteSpace: 'nowrap' }}>
            <AlchemyText text="ein " startDelay={0.9} />
            <span className="accent">
              <i>Abenteuer</i>
              <Doodle variant="underline" color="var(--coral)" />
            </span>
            <AlchemyText text=" anfühlt." startDelay={1.6} />
          </span>
        </h1>
        <p className="aq-lead aq-hero__lead aq-reveal" data-delay="3">
          Alquie ist eine Plattform für aktives Lernen, in der jede Frage zählt, jeder Schüler mitmacht und jede Stunde Spuren hinterlässt — ohne dass dein Alltag komplizierter wird.
        </p>
        <div className="aq-hero__ctas aq-reveal" data-delay="4">
          <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup/de">Kostenlos starten</a>
          <a className="aq-btn aq-btn--ghost-light aq-btn--lg" href="#demo">
            <span className="aq-btn-play">▶</span>
            Eine Stunde live sehen
          </a>
        </div>
      </div>

      <div className="aq-hero__stage aq-reveal" data-delay="3">
        <div className="aq-hero__orb aq-hero__orb--1" />
        <div className="aq-hero__orb aq-hero__orb--2" />
        <div className="aq-hero__orb aq-hero__orb--3" />
        <Doodle variant="wave" color="var(--peach)" className="aq-hero__doodle aq-hero__doodle--1" />
        <Doodle variant="arrow" color="rgba(255,255,255,0.4)" className="aq-hero__doodle aq-hero__doodle--2" />

        <div className="aq-hero__photo aq-hero__photo--filled">
          <img src="assets/photos/hero.png" alt="Alquie im Klassenzimmer" />
        </div>

        <div className="aq-glass-card aq-glass-card--quiz">
          <div className="aq-glass-card__eyebrow">Live</div>
          <div className="aq-glass-card__title">22 / 30 antworten</div>
          <div className="aq-glass-card__bar"><div className="aq-glass-card__bar-fill" /></div>
          <div className="aq-glass-card__meta">
            <span>Quiz · 6. Klasse</span>
            <span className="aq-glass-card__pill">+72%</span>
          </div>
        </div>

        <div className="aq-glass-card aq-glass-card--xp">
          <div className="aq-glass-card__eyebrow">Heute im Unterricht</div>
          <div className="aq-glass-card__big"><i>+</i><span className="aq-counter" data-to="1240">0</span></div>
          <div className="aq-glass-card__sub">Punkte für die Klasse</div>
        </div>
      </div>
    </div>
  </section>
);

const Problem = () => {
  const issues = [
    { t: "Geringes Engagement", d: "Die meisten Schüler sitzen den Unterricht ab, ohne aktiv mitzumachen." },
    { t: "Passive Schüler", d: "Zuhören ist nicht Lernen. Beteiligung konzentriert sich auf dieselben 4 oder 5 Köpfe." },
    { t: "Zerstreute Aufmerksamkeit", d: "Das Klassenzimmer konkurriert mit Notifications, Feeds und einer schnelleren Welt." },
    { t: "Material, das nicht fesselt", d: "Aktivitäten zu bauen, die wirklich packen, kostet Stunden, die Lehrkräfte nicht haben." }
  ];
  return (
    <div className="aq-problem-wrap">
      <section className="aq-section">
        <div className="aq-section__head aq-section__head--center">
          <div className="aq-eyebrow aq-reveal">Das Problem</div>
          <h2 className="aq-h2 aq-reveal" data-delay="1">
            Unterricht konkurriert heute mit allem, was <i>ablenkt</i>.
          </h2>
          <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
            Lehrkräfte brauchen nicht mehr Inhalt. Sie brauchen Stunden, die sich die Aufmerksamkeit zurückholen, die ihnen zusteht.
          </p>
        </div>
        <div className="aq-problem__grid">
          {issues.map((i, idx) => (
            <div key={i.t} className="aq-problem__card aq-reveal" data-delay={idx + 1}>
              <div className="aq-problem__num">0{idx + 1}</div>
              <h3 className="aq-h4">{i.t}</h3>
              <p className="aq-body" style={{ marginTop: 6 }}>{i.d}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

const Solution = () => {
  const mechanics = [
    { title: "Duell-Arena", desc: "Zwei Schüler treten in schnellen Duellen an. Die ganze Klasse schaut zu, stimmt ab und lernt mit.", visual: "coral", icon: "assets/icons/arena.png", shot: "assets/screens/duelo-arena.png" },
    { title: "Treasure Hunt", desc: "Hinweisbasierte Quests, die Logik, Lesen und Gruppenarbeit aktivieren.", visual: "teal", icon: "assets/icons/treasure-hunt.png", shot: "assets/screens/treasurehunt.png" },
    { title: "Raidboss", desc: "Die ganze Klasse besiegt gemeinsam einen Boss — du gewinnst nur, wenn ihr gut antwortet, zusammen.", visual: "mint", icon: "assets/icons/raidboss.png", shot: "assets/screens/raidboss.png", mod: "raid" },
    { title: "Trank-Quiz", desc: "Ein interaktives Quiz, in dem jede richtige Antwort eine Zutat für einen Trank ist. Sofortiges Feedback, sichtbare Streaks.", visual: "peach", icon: "assets/icons/quiz-pociones.png", shot: "assets/screens/quiz-pociones.png" }
  ];
  return (
    <section id="solution" className="aq-section">
      <div className="aq-section__head">
        <div className="aq-eyebrow aq-reveal">Die Lösung</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Mechaniken, die <i>fesseln</i>. Ziele, die erreicht werden.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Alquie bringt strukturierte Beteiligungssysteme ins Klassenzimmer. Jede Mechanik dient dem Lernen — niemals umgekehrt.
        </p>
      </div>

      <div className="aq-solution__more">
        {mechanics.map((m, i) => (
          <div key={m.title} className={`aq-mech-card aq-reveal${m.mod ? ' aq-mech-card--' + m.mod : ''}`} data-delay={i + 1}>
            <div className={`aq-mech-card__icon aq-mech-card__icon--${m.visual}`}>
              <img src={m.icon} alt="" />
            </div>
            <h4 className="aq-h4">{m.title}</h4>
            <p className="aq-body-sm">{m.desc}</p>
            <div className="aq-mech-card__hover">
              <img src={m.shot} alt="" loading="lazy" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const HowItWorks = () => {
  const steps = [
    { glyph: "1", eyebrow: "Schritt 01", t: "Eine Geschichte aufbauen", d: "Bevor sie das Material öffnen, treten Schüler in eine Erzählung ein, die das Lernen rahmt. Inhalt ist nicht mehr 'die Hausaufgabe', sondern Teil einer Welt.", shot: "assets/screens/actividades.png", shotAlt: "Aktivitätsnarrativ im Lehrer-Dashboard" },
    { glyph: "2", eyebrow: "Schritt 02", t: "Deine Schüler machen mit", d: "An der Seite ihres Charakters lesen die Schüler die Erzählung und tauchen in eine Lernwelt ein, die sie weiter erkunden wollen — Stunde für Stunde.", shot: "assets/screens/actividades2.png", shotAlt: "Schüler in einer narrativen Aktivität" },
    { glyph: "3", eyebrow: "Schritt 03", t: "Fortschritt wird Motivation", d: "Level, Münzen und Ranglisten machen Fortschritt fühlbar. Motivation ist kein Problem mehr.", shot: "assets/screens/dashboard-alumno.png", shotAlt: "Schüler-Dashboard mit Fortschritt" }
  ];
  const [activeStep, setActiveStep] = useState(0);
  const sectionRef = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const rect = sectionRef.current.getBoundingClientRect();
      const totalScrollable = rect.height - window.innerHeight;
      if (totalScrollable <= 0) return;
      const progress = Math.max(0, Math.min(1, -rect.top / totalScrollable));
      const idx = Math.min(steps.length - 1, Math.floor(progress * steps.length));
      setActiveStep(idx);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="aq-how-sticky" ref={sectionRef}>
      <div className="aq-how-sticky__inner">
        <div className="aq-how-sticky__pin">
          <div className="aq-how-sticky__copy">
            <div className="aq-eyebrow aq-reveal">So funktioniert es</div>
            <h2 className="aq-h2 aq-reveal" data-delay="1">
              Drei Schritte. <i>Null</i> Lernkurve.
            </h2>
            <p className="aq-lead aq-reveal" data-delay="2" style={{ marginTop: 16, marginBottom: 36 }}>
              Von der ersten Aktivität bis zur gefesselten Klasse — ohne Handbuch, ohne Vortraining.
            </p>
            <ol className="aq-how-sticky__steps">
              {steps.map((s, i) => (
                <li key={s.glyph} className={`aq-how-sticky__step ${i === activeStep ? 'is-active' : ''} ${i < activeStep ? 'is-past' : ''}`}>
                  <div className="aq-how-sticky__num"><span>{s.glyph}</span></div>
                  <div className="aq-how-sticky__step-body">
                    <div className="aq-how-sticky__step-eyebrow">{s.eyebrow}</div>
                    <h3 className="aq-h3">{s.t}</h3>
                    <p className="aq-body">{s.d}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
          <div className="aq-how-sticky__stage">
            {steps.map((s, i) => (
              <div key={s.glyph} className={`aq-how-sticky__shot ${i === activeStep ? 'is-active' : ''}`} aria-hidden={i !== activeStep}>
                <div className="aq-how-sticky__shot-frame"><img src={s.shot} alt={s.shotAlt} /></div>
                <div className="aq-how-sticky__shot-tag">
                  <span className="aq-how-sticky__shot-dot" />
                  {s.eyebrow} · {s.t}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Pedagogy = () => {
  const pillars = [
    { eb: "Motivation", t: "Autonomie, Kompetenz, Verbundenheit", d: "Basierend auf der Selbstbestimmungstheorie. Schüler wählen Wege, sehen echten Fortschritt und gehören zu einer Gruppe.", ref: "Deci & Ryan, Self-Determination Theory" },
    { eb: "Aktives Lernen", t: "Mitmachen statt zuhören", d: "Die Evidenz ist klar: aktive Beteiligung schlägt passive Instruktion bei Behaltensleistung und Verständnis.", ref: "Freeman et al., 2014 · PNAS" },
    { eb: "Sofortiges Feedback", t: "In Sekunden wissen, ob's saß", d: "Quizze, Duelle und Raids geben Feedback in Sekunden. Das Gehirn schließt den Lernkreis genau dann, wenn es zählt.", ref: "Hattie & Timperley" }
  ];
  return (
    <section id="pedagogy" className="aq-section">
      <div className="aq-section__head">
        <div className="aq-eyebrow aq-reveal">Pädagogische Grundlage</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Gebaut darauf, <i>wie Schüler wirklich lernen</i>.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Keine Unterhaltung mit pädagogischem Anstrich. Ein strukturiertes Engagement-Framework, evidenzbasiert.
        </p>
      </div>
      <div className="aq-pedagogy__grid">
        {pillars.map((p, i) => (
          <article key={p.eb} className="aq-pedagogy__card aq-reveal" data-delay={i + 1}>
            <div className="aq-pedagogy__eyebrow">{p.eb}</div>
            <h3 className="aq-h3">{p.t}</h3>
            <p className="aq-body">{p.d}</p>
            <div className="aq-pedagogy__ref">↳ {p.ref}</div>
          </article>
        ))}
      </div>
    </section>
  );
};

const ForSchools = () => {
  const tabs = [
    {
      key: 'profesores', label: 'Lehrkräfte', eyebrow: 'Für Lehrkräfte',
      h: <>Gebaut für das <i>echte Klassenzimmer</i>, nicht für eine Demo.</>,
      lead: "Wir wissen, wie Montag um 8 Uhr aussieht. Alquie ist gebaut, um genau dort zu funktionieren — nicht in einem Idealszenario.",
      shot: 'assets/screens/dashboard-profesor.png', shotAlt: 'Lehrer-Dashboard in Alquie',
      points: [
        { t: "Kein Gaming-Hintergrund nötig", d: "Du musst nie ein RPG gespielt haben. Wenn du eine Stunde planen kannst, kannst du Alquie führen." },
        { t: "5 Minuten zum Start", d: "Code-basiertes Onboarding. Lade dein Material hoch, lade deine Schüler ein — und sie spielen ab der nächsten Stunde." },
        { t: "Funktioniert in echten Klassen", d: "Getestet in Schulen mit und ohne Tablets. Dein Klassenzimmer, ihre Handys, ein Beamer — das reicht." },
        { t: "Lehrplan-aligned", d: "Dein Inhalt, deine Bewertungsraster, dein Tempo. Alquie ist die Maschine; du bleibst der Designer." }
      ]
    },
    {
      key: 'estudiantes', label: 'Schüler', eyebrow: 'Für Schüler',
      h: <>Lernen fühlt sich nicht mehr nach <i>Pflicht</i> an.</>,
      lead: "Jeder Schüler baut seinen Charakter, levelt auf und tritt gegen Mitschüler an. Schule fängt an, sich nach dem Spiel anzufühlen, das sie wirklich öffnen wollen.",
      shot: 'assets/screens/dashboard-alumno.png', shotAlt: 'Schüler-Dashboard in Alquie',
      points: [
        { t: "Dein eigener Charakter", d: "Personalisiere deinen Avatar, wähle deinen Clan und levele auf, während du lernst." },
        { t: "Sichtbarer Fortschritt", d: "Level, Münzen und Streaks lassen Fortschritt fühlbar werden — und bleiben." },
        { t: "Gesunder Wettbewerb", d: "Duelle und Ranglisten mit Mitschülern: soziale Motivation, kein Druck." },
        { t: "Spielend lernen", d: "Tränke, Karten und Raids sind der Stoff. Ohne Tarnung." }
      ]
    }
  ];
  const [active, setActive] = useState('profesores');
  const tab = tabs.find(t => t.key === active);
  return (
    <section id="schools" className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Für Lehrkräfte und Schüler</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">Eine Plattform, <i>zwei Perspektiven</i>.</h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Wechsle die Perspektive: was jede Rolle sieht, was ihr wichtig ist und wie Alquie sie unterstützt.
        </p>
      </div>

      <div className="aq-tabs aq-reveal" role="tablist">
        {tabs.map(t => (
          <button key={t.key} role="tab" aria-selected={active === t.key} className={`aq-tab ${active === t.key ? 'is-active' : ''}`} onClick={() => setActive(t.key)}>{t.label}</button>
        ))}
      </div>

      <div className="aq-schools__split" key={tab.key}>
        <div>
          <div className="aq-section__head" style={{ marginBottom: 32 }}>
            <div className="aq-eyebrow">{tab.eyebrow}</div>
            <h2 className="aq-h2">{tab.h}</h2>
            <p className="aq-lead" style={{ marginTop: 16 }}>{tab.lead}</p>
          </div>
          <div className="aq-schools__points">
            {tab.points.map((p) => (
              <div key={p.t} className="aq-schools__point">
                <div className="aq-schools__check">✓</div>
                <div>
                  <h4 className="aq-h4">{p.t}</h4>
                  <p className="aq-body-sm" style={{ marginTop: 4 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="aq-schools__shot">
          <img src={tab.shot} alt={tab.shotAlt} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
        </div>
      </div>
    </section>
  );
};

const SocialProof = () => {
  const quotes = [
    { n: "Name der Lehrkraft", r: "Position", q: "Hier kommt das Zitat der Lehrkraft." },
    { n: "Name der Lehrkraft", r: "Position", q: "Hier kommt das Zitat der Lehrkraft." },
    { n: "Name der Lehrkraft", r: "Position", q: "Hier kommt das Zitat der Lehrkraft." }
  ];
  return (
    <section className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Lehrkräfte, die zuerst da waren</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">Erste Stimmen von <i>denen, die mit Alquie unterrichten</i>.</h2>
      </div>
      <div className="aq-social__grid">
        {quotes.map((q, i) => (
          <figure key={i} className="aq-quote aq-reveal" data-delay={i + 1} style={{ margin: 0 }}>
            <div className="aq-quote__mark">"</div>
            <blockquote className="aq-quote__q">{q.q}</blockquote>
            <figcaption className="aq-quote__by">
              <div className="aq-quote__avatar" style={{ background: 'rgba(0,53,88,0.08)', color: 'var(--ink-soft)' }}>—</div>
              <div>
                <div className="aq-quote__name">{q.n}</div>
                <div className="aq-quote__role">{q.r}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

const Pricing = ({ onContact }) => {
  const plans = [
    { eb: "Basis-Plan", name: "Lehrkraft", price: "Gratis", sub: "Für immer · ohne Kreditkarte",
      bullets: ["1 Klasse","Bis zu 40 Schüler","Charaktere, Level und Münzen","Aktivitäts-Karten","Alle Kernfunktionen","Ticket-Support"],
      cta: "Kostenloses Konto erstellen", featured: false },
    { eb: "Beliebt", name: "Lehrkraft Pro", price: "6.99", suffix: "USD / Monat", sub: "Alles aus Basis, erweitert — plus:",
      bullets: ["Unbegrenzte Klassen · keine Schülergrenze","Trank-Quiz","Treasure Hunt","Duell-Arena","Kollaborativer Raidboss","Priority-Support"],
      cta: "Zu Pro wechseln", featured: true }
  ];
  return (
    <section id="pricing" className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Preise für Lehrkräfte</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1"><i>Kostenlos</i> starten. Wechseln, wann du willst.</h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Der Basis-Plan deckt schon das Wesentliche ab. Pro bringt die fortgeschrittenen Mechaniken, die jede Stunde zum Event machen.
        </p>
      </div>
      <div className="aq-pricing__row">
        {plans.map((p, i) => (
          <div key={p.name} className={`aq-pricing__card ${p.featured ? "aq-pricing__card--featured" : ""} aq-reveal`} data-delay={i + 1}>
            <div className="aq-pricing__head">
              <div>
                <div className="aq-eyebrow" style={{ marginBottom: 8 }}>{p.eb}</div>
                <h3 className="aq-pricing__name">{p.name}</h3>
              </div>
              <div className="aq-pricing__price">
                <span className="aq-pricing__amount">{p.suffix ? "€" : ""}{p.price}</span>
                {p.suffix && <span className="aq-pricing__suffix">{p.suffix}</span>}
              </div>
            </div>
            <div className="aq-pricing__sub">{p.sub}</div>
            <ul className="aq-pricing__list">
              {p.bullets.map(b => (<li key={b}><span className="aq-pricing__check">✓</span>{b}</li>))}
            </ul>
            <a href="#" className={`aq-btn ${p.featured ? "aq-btn--navy" : "aq-btn--ghost"}`}>{p.cta}</a>
          </div>
        ))}
      </div>
      <div className="aq-pricing__schools aq-reveal">
        <div>
          <div className="aq-eyebrow">Für Schulen und Netzwerke</div>
          <h4 className="aq-h4" style={{ marginTop: 6 }}>Schul-Plan · zugeschnitten auf eure Größe und Bedürfnisse</h4>
        </div>
        <button className="aq-btn aq-btn--ghost" type="button" onClick={() => onContact('sales')}>Sales kontaktieren</button>
      </div>
    </section>
  );
};

const FinalCTA = ({ onContact }) => (
  <section className="aq-finalcta">
    <div className="aq-finalcta__inner">
      <div className="aq-eyebrow aq-reveal" style={{ color: 'var(--peach)', justifyContent: 'center', marginBottom: 18 }}>Eine letzte Sache</div>
      <h2 className="aq-h2 aq-reveal" data-delay="1">Mach dein Klassenzimmer zu einem Ort, an den sie <i>zurückkommen wollen</i>.</h2>
      <div className="aq-finalcta__ctas aq-reveal" data-delay="3">
        <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup/de">Kostenlos mit deiner Klasse starten</a>
        <button className="aq-btn aq-btn--ghost-light aq-btn--lg" type="button" onClick={onContact}>Demo an deiner Schule buchen</button>
      </div>
    </div>
  </section>
);

const Footer = ({ onContact }) => {
  const cols = [
    { h: "Plattform", l: ["Plattform","Onboarding","Hilfe-Center"] },
    { h: "Unternehmen", l: ["Über Alquie","Karriere","Datenschutz","AGB"] }
  ];
  return (
    <footer className="aq-footer">
      <div className="aq-footer__inner">
        <div className="aq-footer__top">
          <div>
            <Brand light />
            <p style={{ marginTop: 14, maxWidth: 280, color: 'rgba(255,255,255,0.6)', fontSize: 14 }}>
              Lernplattform für Lehrkräfte und Schulen. Mit Sorgfalt in Chile gemacht.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.h} className="aq-footer__col">
              <h4>{c.h}</h4>
              <ul>{c.l.map(i => (
              <li key={i}>
                {i === 'Hilfe-Center'
                  ? <a href="#" onClick={e => { e.preventDefault(); onContact('support'); }}>{i}</a>
                  : <a href="#">{i}</a>}
              </li>
            ))}</ul>
            </div>
          ))}
        </div>
        <div className="aq-footer__bottom">
          <span>© 2026 Alquie · Alle Rechte vorbehalten</span>
          <span>hola@alquie.com</span>
        </div>
      </div>
    </footer>
  );
};


const SUPABASE_URL = 'https://ntuzvjmqdlehsjhgidzg.supabase.co';
const SUPABASE_ANON_KEY = 'sb_publishable_Sbw_p3mZBkWCWIncpFbfcw_8u0QQtFE';

const CONTACT_TOPICS = [
  { value: 'general', label: 'Allgemeine Anfrage' },
  { value: 'support', label: 'Technischer Support' },
  { value: 'sales', label: 'Pläne & Vertrieb' },
];
const CONTACT_FIELDS = {
  title: 'Schreib uns', topicLabel: 'Thema',
  name: 'Vollständiger Name', email: 'E-Mail-Adresse',
  school: 'Schule oder Institution (optional)', message: 'Nachricht',
  send: 'Nachricht senden', sending: 'Wird gesendet…',
  success: `Nachricht gesendet! Wir melden uns bald.`,
  error: `Fehler beim Senden. Bitte erneut versuchen.`,
  lang: 'de',
};

const ContactModal = ({ open, topic, onClose }) => {
  const [selTopic, setSelTopic] = React.useState(topic || 'general');
  const [name, setName]         = React.useState('');
  const [email, setEmail]       = React.useState('');
  const [school, setSchool]     = React.useState('');
  const [message, setMessage]   = React.useState('');
  const [status, setStatus]     = React.useState('idle');

  React.useEffect(() => { if (open) setSelTopic(topic || 'general'); }, [open, topic]);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  if (!open) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch(`${SUPABASE_URL}/functions/v1/send-contact-email`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${SUPABASE_ANON_KEY}` },
        body: JSON.stringify({ name, email, school, message, topic: selTopic, lang: CONTACT_FIELDS.lang }),
      });
      if (!res.ok) throw new Error('error');
      setStatus('success');
    } catch { setStatus('error'); }
  };

  const F = CONTACT_FIELDS;
  return (
    <div className="aq-modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="aq-modal">
        <button className="aq-modal__close" onClick={onClose} aria-label="Close">×</button>
        {status === 'success' ? (
          <div className="aq-modal__success">
            <div className="aq-modal__success-icon">✓</div>
            <p>{F.success}</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit}>
            <h3 className="aq-modal__title">{F.title}</h3>
            <div className="aq-modal__field">
              <label>{F.topicLabel}</label>
              <select value={selTopic} onChange={e => setSelTopic(e.target.value)}>
                {CONTACT_TOPICS.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
              </select>
            </div>
            <div className="aq-modal__row">
              <div className="aq-modal__field">
                <label>{F.name}</label>
                <input required value={name} onChange={e => setName(e.target.value)} />
              </div>
              <div className="aq-modal__field">
                <label>{F.email}</label>
                <input type="email" required value={email} onChange={e => setEmail(e.target.value)} />
              </div>
            </div>
            <div className="aq-modal__field">
              <label>{F.school}</label>
              <input value={school} onChange={e => setSchool(e.target.value)} />
            </div>
            <div className="aq-modal__field">
              <label>{F.message}</label>
              <textarea required rows={4} value={message} onChange={e => setMessage(e.target.value)} />
            </div>
            {status === 'error' && <p className="aq-modal__error">{F.error}</p>}
            <button type="submit" className="aq-btn aq-btn--coral aq-btn--lg" disabled={status === 'sending'} style={{width:'100%'}}>
              {status === 'sending' ? F.sending : F.send}
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

function App() {
  useReveal();
  useParallax();
  const [contactOpen, setContactOpen] = React.useState(false);
  const [contactTopic, setContactTopic] = React.useState('general');
  const openContact = (topic) => { setContactTopic(topic); setContactOpen(true); };
  return (
    <div className="aq-root">
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Solution />
        <HowItWorks />
        <Pedagogy />
        <ForSchools />
        <SocialProof />
        <Pricing onContact={openContact} />
        <FinalCTA onContact={() => openContact('sales')} />
      </main>
      <Footer onContact={openContact} />
      <ContactModal open={contactOpen} topic={contactTopic} onClose={() => setContactOpen(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);