// Alquie · Landing v2 EN

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('en-US', {
          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">Platform</a></li>
        <li><a href="#pedagogy">Pedagogy</a></li>
        <li><a href="#schools">Teacher & student</a></li>
        <li><a href="#pricing">Pricing</a></li>
      </ul>
      <div className="aq-nav__cta">
        <div className="aq-lang">
          <span className="aq-lang__current">EN</span>
          <div className="aq-lang__menu">
            <a href="/es">Español</a>
            <a href="/en" className="is-active">English</a>
            <a href="/de">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)' }}>Log in</a>
        <a className="aq-btn aq-btn--navy aq-btn--md" href="/signup/en">Start free</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>
          Gamified learning platform
        </div>
        <h1 className="aq-h1 aq-hero__h1 aq-alchemy" data-delay="2">
          <AlchemyText text="Learning that feels" />
          <br />
          <span style={{ whiteSpace: 'nowrap' }}>
            <AlchemyText text="like an " startDelay={0.9} />
            <span className="accent">
              <i>adventure</i>
              <Doodle variant="underline" color="var(--coral)" />
            </span>
            <AlchemyText text=" worth taking." startDelay={1.6} />
          </span>
        </h1>
        <p className="aq-lead aq-hero__lead aq-reveal" data-delay="3">
          Alquie is an active-learning platform where every question matters, every student takes part, and every class leaves a mark — without adding complexity to your day.
        </p>
        <div className="aq-hero__ctas aq-reveal" data-delay="4">
          <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup/en">Start free</a>
          <a className="aq-btn aq-btn--ghost-light aq-btn--lg" href="#demo">
            <span className="aq-btn-play">▶</span>
            See a class in action
          </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 in class" />
        </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 answering</div>
          <div className="aq-glass-card__bar"><div className="aq-glass-card__bar-fill" /></div>
          <div className="aq-glass-card__meta">
            <span>Quiz · Grade 6</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">Today in class</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">points earned by the class</div>
        </div>
      </div>
    </div>
  </section>
);

const Problem = () => {
  const issues = [
    { t: "Low engagement", d: "Most students sit through class without actively taking part." },
    { t: "Passive students", d: "Listening isn't learning. Participation concentrates on the same 4 or 5 kids." },
    { t: "Fragmented attention", d: "The classroom competes with notifications, social feeds, and a faster world." },
    { t: "Material that doesn't engage", d: "Building activities that grab attention takes hours teachers don't have." }
  ];
  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">The problem</div>
          <h2 className="aq-h2 aq-reveal" data-delay="1">
            Teaching today competes with everything that <i>distracts</i>.
          </h2>
          <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
            Teachers don't need more content. They need their classes to recapture the attention they deserve.
          </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: "Duel Arena", desc: "Two students face off in quick duels. The whole class watches, votes, and learns.", visual: "coral", icon: "assets/icons/arena.png", shot: "assets/screens/duelo-arena.png" },
    { title: "Treasure Hunt", desc: "Clue-driven quests that activate reasoning, reading, and group exploration.", visual: "teal", icon: "assets/icons/treasure-hunt.png", shot: "assets/screens/treasurehunt.png" },
    { title: "Raidboss", desc: "The whole class teams up to defeat a boss — you only win by answering well, together.", visual: "mint", icon: "assets/icons/raidboss.png", shot: "assets/screens/raidboss.png", mod: "raid" },
    { title: "Potion Quiz", desc: "An interactive quiz where every right answer is an ingredient to brew a potion. Instant feedback, visible 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">The solution</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Mechanics that <i>hook</i>, goals that get met.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Alquie brings structured participation systems into the classroom. Every mechanic serves the learning — never the other way around.
        </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: "Step 01", t: "Build a narrative", d: "Before opening the material, students step into a story that frames what they're about to learn. Content stops being 'the homework' and becomes part of a world.", shot: "assets/screens/actividades.png", shotAlt: "Activity narrative in the teacher dashboard" },
    { glyph: "2", eyebrow: "Step 02", t: "Your students take part", d: "Alongside their character, students read the narrative and dive into a learning world they want to keep exploring — class after class.", shot: "assets/screens/actividades2.png", shotAlt: "Student entering a narrative activity" },
    { glyph: "3", eyebrow: "Step 03", t: "Progress becomes motivation", d: "Levels, coins, and rankings make progress feel real. Motivation stops being a problem.", shot: "assets/screens/dashboard-alumno.png", shotAlt: "Student dashboard showing progress" }
  ];
  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">How it works</div>
            <h2 className="aq-h2 aq-reveal" data-delay="1">
              Three steps. <i>Zero</i> learning curve.
            </h2>
            <p className="aq-lead aq-reveal" data-delay="2" style={{ marginTop: 16, marginBottom: 36 }}>
              From building your first activity to seeing your room hooked — no manuals, no prior training.
            </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: "Autonomy, competence, relatedness", d: "Built on Self-Determination Theory. Students choose paths, see real progress, and belong to a group.", ref: "Deci & Ryan, Self-Determination Theory" },
    { eb: "Active learning", t: "Take part, don't just listen", d: "The evidence is clear: active participation beats passive instruction on retention and understanding.", ref: "Freeman et al., 2014 · PNAS" },
    { eb: "Immediate feedback", t: "Know in seconds whether you got it", d: "Quizzes, duels, and raids return feedback in seconds. The brain closes the learning loop when it matters.", ref: "Hattie & Timperley" }
  ];
  return (
    <section id="pedagogy" className="aq-section">
      <div className="aq-section__head">
        <div className="aq-eyebrow aq-reveal">Pedagogical foundation</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">
          Built on <i>how students actually learn</i>.
        </h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Not entertainment with an educational coat of paint. A structured engagement framework, anchored in evidence.
        </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: 'Teachers', eyebrow: 'For teachers',
      h: <>Built for the <i>real classroom</i>, not for a demo.</>,
      lead: "We know what 8 a.m. on a Monday looks like. Alquie is built to hold up there — not in an ideal scenario.",
      shot: 'assets/screens/dashboard-profesor.png', shotAlt: 'Teacher dashboard in Alquie',
      points: [
        { t: "No gaming background needed", d: "You don't need to have ever played an RPG. If you can plan a class, you can run Alquie." },
        { t: "5 minutes to start", d: "Code-based onboarding. Upload your material, invite your students, and they're playing by the next class." },
        { t: "Works in real classrooms", d: "Tested in schools with and without tablets. Your room, their phones, a projector — enough." },
        { t: "Curriculum-aligned", d: "Your content, your rubrics, your timing. Alquie is the engine; you're still the designer." }
      ]
    },
    {
      key: 'estudiantes', label: 'Students', eyebrow: 'For students',
      h: <>Studying stops feeling like a <i>chore</i>.</>,
      lead: "Each student builds their character, levels up, and competes with classmates. School starts to feel like the game they actually want to open.",
      shot: 'assets/screens/dashboard-alumno.png', shotAlt: 'Student dashboard in Alquie',
      points: [
        { t: "Your own character", d: "Customize your avatar, pick your clan, and level up while you learn." },
        { t: "Visible progress", d: "Levels, coins, and streaks make progress feel — and stick." },
        { t: "Healthy competition", d: "Duels and rankings with classmates: social motivation, not pressure." },
        { t: "Learn by playing", d: "Potions, maps, and raids are the subject. No disguise." }
      ]
    }
  ];
  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">For teachers and students</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">One platform, <i>two perspectives</i>.</h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          Switch perspectives: what each role sees, what matters to them, and how Alquie supports them.
        </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: "Teacher name", r: "Teacher position", q: "Teacher review goes here." },
    { n: "Teacher name", r: "Teacher position", q: "Teacher review goes here." },
    { n: "Teacher name", r: "Teacher position", q: "Teacher review goes here." }
  ];
  return (
    <section className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Teachers who got there first</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">First voices from <i>those who teach with Alquie</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: "Basic plan", name: "Teacher", price: "Free", sub: "Forever · no credit card",
      bullets: ["1 class","Up to 40 students","Characters, levels, and coins","Activity maps","All core features","Ticket support"],
      cta: "Create free account", featured: false },
    { eb: "Most popular", name: "Teacher Pro", price: "6.99", suffix: "USD / month", sub: "Everything in Basic, extended — plus:",
      bullets: ["Unlimited classes · no student cap","Potion Quiz","Treasure Hunt","Duel Arena","Collaborative Raidboss","Priority support"],
      cta: "Switch to Pro", featured: true }
  ];
  return (
    <section id="pricing" className="aq-section">
      <div className="aq-section__head aq-section__head--center">
        <div className="aq-eyebrow aq-reveal">Pricing for teachers</div>
        <h2 className="aq-h2 aq-reveal" data-delay="1">Start <i>free</i>. Upgrade when you want.</h2>
        <p className="aq-lead aq-mw-md aq-reveal" data-delay="2">
          The Basic plan already covers the essentials. Pro adds the advanced mechanics that turn every class into an event.
        </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">For schools and networks</div>
          <h4 className="aq-h4" style={{ marginTop: 6 }}>School plan · tailored to your size and support needs</h4>
        </div>
        <button className="aq-btn aq-btn--ghost" type="button" onClick={() => onContact('sales')}>Talk to sales</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 }}>One last thing</div>
      <h2 className="aq-h2 aq-reveal" data-delay="1">Make your classroom a place they <i>want</i> to come back to.</h2>
      <div className="aq-finalcta__ctas aq-reveal" data-delay="3">
        <a className="aq-btn aq-btn--coral aq-btn--lg" href="/signup/en">Start free with your class</a>
        <button className="aq-btn aq-btn--ghost-light aq-btn--lg" type="button" onClick={onContact}>Book a demo at your school</button>
      </div>
    </div>
  </section>
);

const Footer = ({ onContact }) => {
  const cols = [
    { h: "Platform", l: ["Platform","Onboarding","Help center"] },
    { h: "Company", l: ["About Alquie","Careers","Privacy","Terms"] }
  ];
  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 }}>
              Learning platform for teachers and schools. Made with care in Chile.
            </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 === 'Help 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 · All rights reserved</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: 'General inquiry' },
  { value: 'support', label: 'Technical support' },
  { value: 'sales', label: 'Plans & sales' },
];
const CONTACT_FIELDS = {
  title: 'Get in touch', topicLabel: 'Topic',
  name: 'Full name', email: 'Email address',
  school: 'School or institution (optional)', message: 'Message',
  send: 'Send message', sending: 'Sending…',
  success: `Message sent! We'll be in touch soon.`,
  error: `Something went wrong. Please try again.`,
  lang: 'en',
};

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 />);