'use client';

import { useEffect, useState } from 'react';
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
import {
  Sparkles,
  ShieldCheck,
  BookOpenText,
  Calculator,
  FlaskConical,
  Feather,
  Check,
  Wallet,
  Zap,
  ChevronDown,
  Volume2,
  Ban,
  UserX,
  Link2Off,
  Menu,
  X,
  ArrowRight,
  Smartphone,
} from 'lucide-react';
import { AGE_BANDS } from '@/lib/types';
import Mascot from '../Mascot';
import DemoBadge from '../DemoBadge';
import SubscribeModal from '../SubscribeModal';
import LiveDemo from './LiveDemo';
import ParentPreview from './ParentPreview';
import FeatureModal from './FeatureModal';
import { FEATURES, type FeatureDetail } from './features';
import Marquee from './Marquee';
import PhonePreview from './PhonePreview';
import BeforeAfter from './BeforeAfter';
import ScrollCompanion from './ScrollCompanion';
import Footer from './Footer';

const NAV_LINKS = [
  { href: '#features', label: 'ফিচার' },
  { href: '#learn', label: 'শেখা' },
  { href: '#pricing', label: 'দাম' },
  { href: '#faq', label: 'প্রশ্ন' },
];

const PRIMARY_CTA = '৩০ সেকেন্ডে শুরু করো';

export default function Landing({ unsubscribed = false }: { unsubscribed?: boolean }) {
  const [modalOpen, setModalOpen] = useState(false);
  const [modalMode, setModalMode] = useState<'phone' | 'login'>('phone');
  const [showBanner, setShowBanner] = useState(unsubscribed);
  const [activeFeature, setActiveFeature] = useState<FeatureDetail | null>(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (unsubscribed) {
      const t = setTimeout(() => setShowBanner(false), 6000);
      return () => clearTimeout(t);
    }
  }, [unsubscribed]);

  const openSubscribe = () => {
    setModalMode('phone');
    setModalOpen(true);
  };
  const openLogin = () => {
    setModalMode('login');
    setModalOpen(true);
  };

  const reveal = reduce
    ? {}
    : {
        initial: { opacity: 0, y: 24 },
        whileInView: { opacity: 1, y: 0 },
        viewport: { once: true, amount: 0.3 },
        transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const },
      };

  return (
    <div id="top" className="dot-grid min-h-dvh overflow-x-hidden bg-cream">
      {showBanner && (
        <div className="bg-leaf-500 px-4 py-2.5 text-center text-sm font-semibold text-white">
          সাবস্ক্রিপশন বাতিল হয়েছে। যেকোনো সময় আবার ফিরে আসতে পারো!
        </div>
      )}

      {/* nav */}
      <header className="sticky top-0 z-40 px-3 pt-3 sm:px-4">
        <nav className="mx-auto flex h-14 max-w-6xl items-center justify-between rounded-full border-2 border-ink bg-cream-50 px-3 pl-4 shadow-hard-sm">
          <div className="flex items-center gap-2">
            <Mascot size={32} />
            <span className="font-heading text-lg font-extrabold text-ink">WonderKids</span>
            <DemoBadge className="ml-1 hidden md:inline-flex" />
          </div>

          {/* desktop links */}
          <div className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-1 lg:flex">
            {NAV_LINKS.map((l) => (
              <a
                key={l.href}
                href={l.href}
                className="rounded-full px-4 py-2 text-sm font-semibold text-ink-soft transition hover:bg-cream-200 hover:text-ink"
              >
                {l.label}
              </a>
            ))}
          </div>

          <div className="flex items-center gap-1.5">
            <button
              onClick={openLogin}
              className="hidden rounded-full px-4 py-2 text-sm font-semibold text-ink-soft transition hover:bg-cream-200 sm:block"
            >
              লগইন
            </button>
            <button
              onClick={openSubscribe}
              className="btn-push rounded-full border-2 border-ink bg-mango-500 px-4 py-2 text-sm font-bold text-white shadow-hard-sm"
            >
              শুরু করো
            </button>
            <button
              onClick={() => setMenuOpen((v) => !v)}
              aria-label="মেনু"
              className="rounded-full p-2 text-ink-soft transition hover:bg-cream-200 lg:hidden"
            >
              {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </button>
          </div>
        </nav>

        {/* mobile dropdown */}
        <AnimatePresence>
          {menuOpen && (
            <motion.div
              initial={{ opacity: 0, y: -8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              className="mx-auto mt-2 max-w-6xl overflow-hidden rounded-3xl border border-cream-200 bg-cream-50 p-2 shadow-soft lg:hidden"
            >
              {NAV_LINKS.map((l) => (
                <a
                  key={l.href}
                  href={l.href}
                  onClick={() => setMenuOpen(false)}
                  className="block rounded-2xl px-4 py-3 font-semibold text-ink transition hover:bg-cream-200"
                >
                  {l.label}
                </a>
              ))}
              <button
                onClick={() => {
                  setMenuOpen(false);
                  openLogin();
                }}
                className="block w-full rounded-2xl px-4 py-3 text-left font-semibold text-ink-soft transition hover:bg-cream-200 sm:hidden"
              >
                লগইন
              </button>
            </motion.div>
          )}
        </AnimatePresence>
      </header>

      <main>
        {/* ===================== HERO (asymmetric) ===================== */}
        <section className="relative mx-auto max-w-6xl px-4 pb-14 pt-10 sm:px-6 lg:pb-24 lg:pt-16">
          <div className="grid items-center gap-10 lg:grid-cols-12 lg:gap-8">
            {/* left: content framed like a device box */}
            <div className="relative rounded-[2.5rem] border-[5px] border-ink bg-cream-50 px-6 py-8 shadow-hard-lg sm:px-8 sm:py-10 lg:col-span-6">
              <div className="absolute left-1/2 top-2.5 h-1.5 w-16 -translate-x-1/2 rounded-full bg-ink/30" />
              <span className="inline-flex items-center gap-1.5 rounded-full border-2 border-ink bg-sun-500 px-3 py-1 text-sm font-bold text-ink shadow-hard-sm">
                <Sparkles className="h-4 w-4" />
                ৩-১৪ বছরের বাচ্চাদের জন্য
              </span>
              <h1 className="mt-5 font-heading text-4xl font-extrabold leading-[1.05] tracking-tight text-ink sm:text-5xl">
                স্ক্রিনে সময় কাটুক,
                <br />
                <span className="relative inline-block">
                  <span className="relative z-10">শেখার আনন্দে</span>
                  <span className="absolute inset-x-0 bottom-1 z-0 h-4 -rotate-1 rounded-sm bg-mango-200" />
                </span>
              </h1>
              <p className="mt-5 max-w-md text-lg leading-relaxed text-ink-soft">
                খেলতে খেলতে শিখবে বর্ণমালা থেকে গণিত, সাথে AI বন্ধু তারা। ছোটরা পড়তে না
                পারলে তারা পড়ে শোনাবে।
              </p>
              <p className="mt-5 border-l-4 border-mango-400 pl-3 font-heading text-base font-extrabold text-ink">
                Turn Screen Time into Learning Time.
              </p>
              <div className="mt-7 flex flex-col gap-3 sm:flex-row">
                <button
                  onClick={openSubscribe}
                  className="btn-push flex items-center justify-center gap-2 rounded-2xl border-[3px] border-ink bg-mango-500 px-6 py-4 text-base font-extrabold text-white shadow-hard"
                >
                  <Zap className="h-5 w-5" />
                  {PRIMARY_CTA}
                </button>
                <button
                  onClick={openLogin}
                  className="btn-push rounded-2xl border-[3px] border-ink bg-white px-6 py-4 text-base font-extrabold text-ink shadow-hard"
                >
                  আগে সাবস্ক্রাইব করেছি
                </button>
              </div>
              <div className="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
                <span className="flex items-center gap-1.5 font-semibold text-ink-soft">
                  <Check className="h-4 w-4 text-leaf-600" /> দিনে মাত্র ৫.৫৬৳ <span className="font-normal text-ink-faint">(vat+sc+sd)</span>
                </span>
                <span className="flex items-center gap-1.5 text-ink-soft">
                  <Smartphone className="h-4 w-4 text-leaf-600" />
                  <span className="rounded-md border-2 border-ink bg-white px-2 py-0.5 text-xs font-bold text-mango-600">Robi 018</span>
                  <span className="rounded-md border-2 border-ink bg-white px-2 py-0.5 text-xs font-bold text-leaf-600">Cirkle 016</span>
                </span>
              </div>
            </div>

            {/* product-first: real app in a clean comic scene */}
            <div className="relative mx-auto flex max-w-sm items-center justify-center py-8 lg:col-span-6">
              {/* single soft blob behind the phone (depth, not clutter) */}
              <div className="absolute h-72 w-72 rounded-full bg-sun-200/60 blur-[2px]" />

              {/* mascot peeking from top-right, clearly on top */}
              <motion.div
                animate={reduce ? {} : { y: [0, -8, 0] }}
                transition={{ duration: 3.4, repeat: Infinity, ease: 'easeInOut' }}
                className="absolute -top-2 right-2 z-20 sm:right-0"
              >
                <Mascot mood="happy" size={84} />
              </motion.div>

              {/* the phone */}
              <div className="relative z-10 rotate-2">
                <PhonePreview />
              </div>

              {/* one letter sticker + price sticker */}
              <motion.span
                animate={reduce ? {} : { y: [0, -8, 0] }}
                transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
                className="absolute left-0 top-8 z-20 flex h-14 w-14 -rotate-6 items-center justify-center rounded-2xl border-[3px] border-ink bg-sun-500 font-heading text-2xl font-extrabold text-ink shadow-hard"
              >
                অ
              </motion.span>
              <motion.div
                initial={reduce ? {} : { scale: 0, rotate: -20 }}
                animate={reduce ? {} : { scale: 1, rotate: -8 }}
                transition={{ type: 'spring', stiffness: 200, damping: 12, delay: 0.3 }}
                className="absolute -bottom-1 left-2 z-20 rounded-2xl border-[3px] border-ink bg-mango-500 px-4 py-2 text-center shadow-hard sm:left-0"
              >
                <p className="font-heading text-2xl font-extrabold leading-none text-white">৫.৫৬৳</p>
                <p className="text-[11px] font-bold text-mango-50">/ দিন</p>
              </motion.div>
            </div>
          </div>

          {/* subject/letter marquee */}
          <div className="mt-8">
            <Marquee />
          </div>
        </section>

        {/* ===================== STAT BAND (comic sticker stats) ===================== */}
        <section
          data-companion="৪ বিষয়, ৩০টা করে লেভেল, সব বাংলায়!"
          className="relative -mt-8 rounded-t-[2.5rem] bg-cream-100 px-4 pb-16 pt-14 sm:px-6 sm:pb-20 sm:pt-16"
        >
          <div className="mx-auto grid max-w-5xl grid-cols-2 gap-4 sm:grid-cols-4">
            {[
              { n: '৪', l: 'বিষয়', bg: 'bg-mango-100', fg: 'text-mango-600', tilt: '-rotate-2' },
              { n: '৩০+', l: 'লেভেল প্রতি বিষয়', bg: 'bg-leaf-100', fg: 'text-leaf-600', tilt: 'rotate-1' },
              { n: '৫', l: 'AI বন্ধু ফিচার', bg: 'bg-sun-100', fg: 'text-sun-600', tilt: '-rotate-1' },
              { n: 'সব', l: 'বাংলায়, পড়ে শোনায়', bg: 'bg-mango-100', fg: 'text-mango-600', tilt: 'rotate-2' },
            ].map((s, i) => (
              <motion.div
                key={s.l}
                initial={reduce ? {} : { opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.08 }}
                whileHover={{ rotate: 0, y: -4 }}
                className={`rounded-3xl border-[3px] border-ink ${s.bg} px-3 py-5 text-center shadow-hard ${s.tilt}`}
              >
                <p className={`font-heading text-4xl font-extrabold sm:text-5xl ${s.fg}`}>{s.n}</p>
                <p className="mt-1 text-sm font-semibold text-ink-soft">{s.l}</p>
              </motion.div>
            ))}
          </div>
        </section>

        {/* ===================== LIVE DEMO (leaf block) ===================== */}
        <section className="relative -mt-8 rounded-t-[2.5rem] bg-leaf-50 px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto grid max-w-6xl items-center gap-12 lg:gap-16 lg:grid-cols-12">
            <motion.div {...reveal} className="lg:col-span-5">
              <h2 className="mt-3 font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
                সাইন আপের আগেই
                <br />
                একবার খেলো
              </h2>
              <ul className="mt-6 space-y-3">
                {['সঠিক উত্তরে তারা, কনফেটি আর মজার সাউন্ড', 'ভুল হলেও কখনো বকা নয়, শুধু উৎসাহ', 'প্রতিটা প্রশ্ন পড়ে শোনানো যায়'].map((t) => (
                  <li key={t} className="flex items-start gap-2.5 font-medium text-ink-soft">
                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-leaf-500 text-white">
                      <Check className="h-3.5 w-3.5" />
                    </span>
                    {t}
                  </li>
                ))}
              </ul>
            </motion.div>
            <motion.div {...reveal} className="lg:col-span-7">
              <div className="mx-auto max-w-md -rotate-1">
                <LiveDemo onCta={openSubscribe} />
              </div>
            </motion.div>
          </div>
        </section>

        {/* ===================== PHONE PREVIEW (real UI, white) ===================== */}
        <section
          data-companion="অ্যাপটা ভেতরে ঠিক এমন দেখতে!"
          className="relative -mt-8 rounded-t-[2.5rem] bg-white px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28"
        >
          <div className="mx-auto grid max-w-6xl items-center gap-12 lg:gap-16 lg:grid-cols-12">
            <motion.div {...reveal} className="lg:col-span-6">
              <h2 className="font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
                অ্যাপটা ভেতরে
                <br />
                <span className="text-leaf-600">এমন দেখতে</span>
              </h2>
              <p className="mt-4 max-w-md text-ink-soft">
                রঙিন, সহজ, বড় বাটন। বাচ্চা নিজেই ঘুরে ঘুরে শিখবে, বড় কারো সাহায্য ছাড়াই।
              </p>
              <ul className="mt-6 space-y-3">
                {['বিষয় বেছে নিয়ে সরাসরি শেখা', 'স্টার, কয়েন ও streak চোখের সামনে', 'AI বন্ধু তারা এক ট্যাপ দূরে'].map((t) => (
                  <li key={t} className="flex items-start gap-2.5 font-medium text-ink-soft">
                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-leaf-500 text-white">
                      <Check className="h-3.5 w-3.5" />
                    </span>
                    {t}
                  </li>
                ))}
              </ul>
            </motion.div>
            <motion.div {...reveal} className="lg:col-span-6">
              <div className="rotate-1">
                <PhonePreview />
              </div>
            </motion.div>
          </div>
        </section>

        {/* ===================== FEATURES (interactive, cream) ===================== */}
        <section id="features" data-companion="টাচ করে প্রতিটা ফিচার দেখো!" className="relative -mt-8 scroll-mt-20 rounded-t-[2.5rem] bg-cream px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto max-w-6xl">
            <motion.div {...reveal} className="max-w-2xl">
              <h2 className="font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
                ভেতরে কী কী আছে,
                <br />
                <span className="text-mango-600">টাচ করে দেখো</span>
              </h2>
              <p className="mt-4 max-w-xl text-ink-soft">
                প্রতিটা ফিচারে ট্যাপ করলে বিস্তারিত দেখা যাবে। শুধু কুইজ নয়, একটা
                পুরো শেখার সঙ্গী।
              </p>
            </motion.div>

            <div className="mt-12 grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-5">
              {FEATURES.map((f) => (
                <motion.button
                  key={f.id}
                  {...reveal}
                  whileHover={{ rotate: 0, y: -5 }}
                  whileTap={{ scale: 0.97 }}
                  onClick={() => setActiveFeature(f)}
                  className={`group flex flex-col items-start gap-2 rounded-3xl border-[3px] border-ink bg-white p-4 text-left shadow-hard transition ${f.tilt}`}
                >
                  <div className={`flex h-11 w-11 items-center justify-center rounded-2xl ${f.bg} ${f.fg}`}>
                    <f.icon className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-heading text-sm font-bold leading-tight text-ink">{f.title}</h3>
                    <p className="mt-0.5 text-[11px] text-ink-faint">{f.tagline}</p>
                  </div>
                  <span className="mt-auto flex items-center gap-1 text-[11px] font-semibold text-mango-600">
                    বিস্তারিত <ArrowRight className="h-3 w-3 transition group-hover:translate-x-0.5" />
                  </span>
                </motion.button>
              ))}
            </div>
          </div>
        </section>

        {/* ===================== BEFORE / AFTER (sun block) ===================== */}
        <section
          data-companion="একই সময়, এবার কাজে লাগবে!"
          className="relative -mt-8 rounded-t-[2.5rem] bg-sun-50 px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28"
        >
          <div className="mx-auto max-w-5xl">
            <motion.h2 {...reveal} className="max-w-2xl font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
              একই Screen Time.
              <br />
              <span className="text-mango-600">দুই রকম Result.</span>
            </motion.h2>
            <motion.p {...reveal} className="mt-4 font-heading text-xl font-bold text-ink-soft sm:text-2xl">
              আপনি কোনটা বেছে নেবেন?
            </motion.p>
            <div className="mt-10">
              <BeforeAfter />
            </div>
          </div>
        </section>

        {/* ===================== VOICE + AGE (mango block) ===================== */}
        <section data-companion="আমি Lumi! চলো একসাথে শিখি 👋" className="relative -mt-8 rounded-t-[2.5rem] bg-mango-50 px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto grid max-w-6xl items-center gap-12 lg:gap-16 lg:grid-cols-12">
            <motion.div {...reveal} className="lg:col-span-6">
              <h2 className="mt-3 font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
                Meet{' '}
                <span className="relative inline-block">
                  <span className="relative z-10">Lumi</span>
                  <span className="absolute inset-x-0 bottom-1 z-0 h-4 -rotate-1 rounded-sm bg-mango-200" />
                </span>{' '}
                👋
                <span className="mt-2 block font-heading text-2xl font-bold text-ink-soft sm:text-3xl">
                  আপনার বাচ্চার <span className="text-mango-600">AI Learning Buddy</span>
                </span>
              </h2>
              <p className="mt-5 max-w-md text-ink-soft">
                গল্প বলবে, পড়ে শোনাবে, প্রশ্নের উত্তর দেবে—আর খেলতে খেলতেই শেখাবে নতুন
                নতুন জিনিস।
              </p>
              <div className="mt-6 flex flex-wrap gap-2.5">
                {AGE_BANDS.map((b, i) => (
                  <span
                    key={b.id}
                    className={`flex items-center gap-2 rounded-2xl border-[3px] border-ink bg-white px-4 py-2.5 font-heading text-base font-bold text-ink shadow-hard-sm ${
                      i % 2 ? 'rotate-1' : '-rotate-1'
                    }`}
                  >
                    <span className="text-xl" aria-hidden>{b.emoji}</span> {b.label}
                  </span>
                ))}
              </div>
            </motion.div>

            <motion.div {...reveal} className="flex justify-center lg:col-span-6">
              <div className="relative flex aspect-square w-full max-w-sm items-center justify-center rounded-[2.5rem] border-[3px] border-ink bg-white shadow-hard-lg">
                <Mascot mood="happy" size={170} />
                <div className="absolute left-5 top-8 flex -rotate-6 items-center gap-1.5 rounded-2xl border-2 border-ink bg-leaf-500 px-3 py-2 text-sm font-bold text-white shadow-hard-sm">
                  <Volume2 className="h-4 w-4" /> শুনে শেখা
                </div>
                <div className="absolute bottom-8 right-5 rotate-6 rounded-2xl border-2 border-ink bg-mango-500 px-3 py-2 font-heading text-lg font-extrabold text-white shadow-hard-sm">
                  ৩০ লেভেল
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        {/* ===================== OUTCOMES (sticker shelf, white) ===================== */}
        <section id="learn" className="relative -mt-8 scroll-mt-20 rounded-t-[2.5rem] bg-white px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto max-w-6xl">
            <motion.div {...reveal} className="max-w-xl">
              <h2 className="mt-3 font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
                কী শিখবে আপনার বাচ্চা
              </h2>
              <p className="mt-4 text-ink-soft">
                ভাসাভাসা প্রতিশ্রুতি নয়—প্রতিদিনের শেখায় তৈরি হবে সত্যিকারের দক্ষতা।
              </p>
            </motion.div>

            <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {[
                { icon: BookOpenText, bg: 'bg-mango-100', fg: 'text-mango-600', title: '৫০+ বর্ণ', body: 'স্বরবর্ণ-ব্যঞ্জনবর্ণ চিনবে ও শব্দে মেলাবে।', tilt: '-rotate-1' },
                { icon: Calculator, bg: 'bg-leaf-100', fg: 'text-leaf-600', title: 'যোগ-বিয়োগ', body: 'গোনা থেকে দুই অঙ্কের যোগ-বিয়োগ।', tilt: 'rotate-1' },
                { icon: FlaskConical, bg: 'bg-sun-100', fg: 'text-sun-600', title: 'বিজ্ঞান', body: 'সূর্য, গাছ, পানি, প্রাণী নিয়ে মজার প্রশ্ন।', tilt: '-rotate-1' },
                { icon: Feather, bg: 'bg-mango-100', fg: 'text-mango-600', title: 'গল্প পড়া', body: 'ছোট গল্প বুঝবে, শব্দভাণ্ডার বাড়বে।', tilt: 'rotate-1' },
              ].map((o) => (
                <motion.div
                  key={o.title}
                  {...reveal}
                  whileHover={{ rotate: 0, y: -4 }}
                  className={`rounded-3xl border-[3px] border-ink bg-cream-50 p-6 shadow-hard ${o.tilt}`}
                >
                  <div className={`flex h-12 w-12 items-center justify-center rounded-2xl ${o.bg} ${o.fg}`}>
                    <o.icon className="h-6 w-6" />
                  </div>
                  <h3 className="mt-3 font-heading text-lg font-bold text-ink">{o.title}</h3>
                  <p className="mt-1 text-sm leading-relaxed text-ink-soft">{o.body}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* ===================== PARENT PREVIEW (sun block) ===================== */}
        <section className="relative -mt-8 rounded-t-[2.5rem] bg-sun-50 px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto grid max-w-6xl items-center gap-12 lg:gap-16 lg:grid-cols-12">
            <motion.div {...reveal} className="order-2 flex justify-center lg:order-1 lg:col-span-6">
              <div className="rotate-1">
                <ParentPreview />
              </div>
            </motion.div>
            <motion.div {...reveal} className="order-1 lg:order-2 lg:col-span-6">
              <h2 className="mt-3 font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
                আপনার বাচ্চার Learning Journey—
                <br />
                এক নজরেই সবকিছু
              </h2>
              <p className="mt-5 max-w-md text-ink-soft">
                প্রতিদিন কী শিখছে, কোথায় এগোচ্ছে আর কোন জায়গায় আরও Practice দরকার—সবকিছু
                সহজেই দেখুন। পাশের ছবিটা একটা নমুনা।
              </p>
              <ul className="mt-5 space-y-3">
                {['দৈনিক screen-time সীমা সেট করা', 'কোন বিষয় দেখবে তা নিয়ন্ত্রণ', 'AI চালু/বন্ধ ও কথোপকথন রিভিউ'].map((t) => (
                  <li key={t} className="flex items-start gap-2.5 font-medium text-ink-soft">
                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-mango-500 text-white">
                      <Check className="h-3.5 w-3.5" />
                    </span>
                    {t}
                  </li>
                ))}
              </ul>
            </motion.div>
          </div>
        </section>

        {/* ===================== TRUST (inline strip, cream) ===================== */}
        <section className="relative -mt-8 rounded-t-[2.5rem] bg-cream px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto max-w-5xl">
            <motion.h2 {...reveal} className="max-w-2xl font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
              বাচ্চার শেখা হোক নিশ্চিন্ত, নিরাপদ ও <span className="text-leaf-600">আনন্দের—Happy Learning</span>
            </motion.h2>
            <div className="mt-10 grid gap-4 sm:grid-cols-3">
              {[
                { icon: Ban, title: 'কোনো বিজ্ঞাপন নেই', body: 'একটাও ad নেই, in-app কেনাকাটা নেই।' },
                { icon: UserX, title: 'অচেনা কেউ নেই', body: 'কোনো stranger chat বা মেসেজ নেই।' },
                { icon: Link2Off, title: 'বাইরের link নেই', body: 'অ্যাপের বাইরে কোথাও যাবে না।' },
              ].map((t) => (
                <motion.div key={t.title} {...reveal} className="flex items-start gap-3 rounded-3xl border-[3px] border-ink bg-white p-6 shadow-hard">
                  <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-leaf-100 text-leaf-600">
                    <t.icon className="h-5 w-5" />
                  </span>
                  <div>
                    <h3 className="font-heading text-base font-bold text-ink">{t.title}</h3>
                    <p className="mt-0.5 text-sm text-ink-soft">{t.body}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* ===================== PRICING (ticket sticker, leaf block) ===================== */}
        <section id="pricing" data-companion="দিনে মাত্র ৫.৫৬ টাকা, চকলেটের চেয়েও কম!" className="relative -mt-8 scroll-mt-20 rounded-t-[2.5rem] bg-leaf-50 px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto max-w-5xl">
            <div className="grid items-center gap-8 lg:grid-cols-12">
              <motion.div {...reveal} className="lg:col-span-5">
                <h2 className="mt-3 font-heading text-4xl font-extrabold leading-tight text-ink sm:text-5xl">
                  একটা চকলেটের
                  <br />
                  দামের চেয়েও কম
                </h2>
                <p className="mt-4 max-w-sm text-ink-soft">
                  bdapps দিয়ে মোবাইল ব্যালেন্স থেকেই চার্জ হবে। কার্ড লাগবে না, যেকোনো সময়
                  এক ক্লিকে বন্ধ।
                </p>
              </motion.div>

              <motion.div {...reveal} className="lg:col-span-7">
                <div className="overflow-hidden rounded-4xl border-[3px] border-ink bg-white shadow-hard-lg">
                  <div className="flex items-center justify-between bg-mango-500 px-7 py-6 text-white">
                    <div>
                      <p className="text-sm font-semibold opacity-90">দিনে মাত্র</p>
                      <p className="font-heading text-5xl font-extrabold leading-none">৫.৫৬৳</p>
                      <p className="mt-1 text-xs font-semibold opacity-90">(vat+sc+sd)</p>
                    </div>
                    <div className="flex items-center gap-2 rounded-2xl bg-white/20 px-3 py-2 text-sm font-bold">
                      <Wallet className="h-5 w-5" /> মাসে ~১৬৭৳
                    </div>
                  </div>
                  <div className="px-7 py-6">
                    <ul className="space-y-3">
                      {[
                        'সব বিষয়, ৩০টা করে লেভেল, সব গেম আনলক',
                        '৫টা AI ফিচার (গল্প, প্র্যাকটিস, বন্ধু, আঁকা, উচ্চারণ)',
                        'কার্ড লাগবে না, শুধু মোবাইল নাম্বার',
                        'যেকোনো সময় এক ক্লিকে বন্ধ',
                      ].map((f) => (
                        <li key={f} className="flex items-start gap-3">
                          <Check className="mt-0.5 h-5 w-5 shrink-0 text-leaf-500" />
                          <span className="text-ink-soft">{f}</span>
                        </li>
                      ))}
                    </ul>
                    <button
                      onClick={openSubscribe}
                      className="mt-6 flex w-full items-center justify-center gap-2 btn-push rounded-2xl border-[3px] border-ink bg-mango-500 px-6 py-4 text-base font-extrabold text-white shadow-hard"
                    >
                      <Zap className="h-5 w-5" />
                      {PRIMARY_CTA}
                    </button>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </section>

        {/* ===================== FAQ (white) ===================== */}
        <section id="faq" className="relative -mt-8 scroll-mt-20 rounded-t-[2.5rem] bg-white px-4 pb-24 pt-20 sm:px-6 sm:pb-32 sm:pt-28">
          <div className="mx-auto max-w-2xl">
            <motion.h2 {...reveal} className="font-heading text-4xl font-extrabold text-ink sm:text-5xl">
              প্রশ্ন-উত্তর
            </motion.h2>
            <div className="mt-8 space-y-3">
              <Faq q="AI বাচ্চাদের জন্য নিরাপদ তো?" a="একদম। AI ডিফল্টে বন্ধ থাকে, বাবা-মা Parent Panel থেকে চালু করে দিলে তবেই কাজ করে। প্রতিটা প্রশ্ন-উত্তর ফিল্টার হয়, দৈনিক সীমা দেওয়া যায়, আর তুমি চাইলে পুরো কথোপকথন দেখতে পারো।" />
              <Faq q="আমার বাচ্চা এখনো পড়তে পারে না, চলবে?" a="চলবে। লেসন, প্রশ্ন আর গল্প সব বাংলায় পড়ে শোনানো যায়। ৩-৫ বছরের জন্য এটা নিজে নিজেই পড়ে দেয়, তাই না পড়তে পারলেও শেখা যায়।" />
              <Faq q="বন্ধ করতে চাইলে কীভাবে করব?" a="যেকোনো সময় প্রোফাইল বা Parent Panel থেকে এক ক্লিকে Unsubscribe করা যাবে। সাথে সাথে দৈনিক চার্জ বন্ধ হয়ে যাবে, কোনো ফোন কল বা ঝামেলা লাগবে না।" />
              <Faq q="শুরু করতে কী লাগবে?" a="শুধু একটা মোবাইল নাম্বার। নাম্বার দিয়ে একটা OTP verify করলেই হয়ে যাবে, কোনো কার্ড বা ইমেইল লাগবে না। ৩০ সেকেন্ডেই শুরু।" />
            </div>
          </div>
        </section>

        {/* ===================== FINAL CTA (sun band) ===================== */}
        <section className="relative -mt-8 rounded-t-[2.5rem] bg-sun-50 px-4 pb-20 pt-14 text-center sm:px-6 sm:pb-24 sm:pt-16">
          <motion.div {...reveal} className="mx-auto max-w-2xl">
            <Mascot mood="happy" size={72} className="mx-auto" />
            <h2 className="mt-3 font-heading text-3xl font-extrabold text-ink sm:text-4xl">
              আজই শুরু হোক শেখার মজা
            </h2>
            <p className="mx-auto mt-2 max-w-md text-ink-soft">
              WonderKids নতুন লঞ্চ হয়েছে। প্রথম দিন থেকেই তোমার বাচ্চা খেলতে খেলতে শিখুক।
            </p>
            <button
              onClick={openSubscribe}
              className="mt-6 inline-flex items-center gap-2 btn-push rounded-2xl border-[3px] border-ink bg-mango-500 px-7 py-3.5 text-base font-extrabold text-white shadow-hard"
            >
              <Zap className="h-5 w-5" />
              {PRIMARY_CTA}
            </button>
          </motion.div>
        </section>

        <Footer onStart={openSubscribe} onLogin={openLogin} />
      </main>

      {/* sticky mobile CTA */}
      <div className="fixed inset-x-0 bottom-0 z-30 border-t border-cream-200 bg-cream/95 px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] backdrop-blur lg:hidden">
        <button
          onClick={openSubscribe}
          className="flex w-full items-center justify-center gap-2 btn-push rounded-2xl border-[3px] border-ink bg-mango-500 px-6 py-3.5 font-extrabold text-white shadow-hard"
        >
          <Zap className="h-5 w-5" />
          {PRIMARY_CTA}
        </button>
      </div>

      <ScrollCompanion />

      <FeatureModal
        feature={activeFeature}
        onClose={() => setActiveFeature(null)}
        onStart={() => {
          setActiveFeature(null);
          openSubscribe();
        }}
      />

      <SubscribeModal open={modalOpen} onClose={() => setModalOpen(false)} initialMode={modalMode} />
    </div>
  );
}

/* ------------------------------ small bits ------------------------------ */
function HeroScene() {
  const reduce = useReducedMotion();
  const tokens = [
    { label: 'অ', accent: 'bg-mango-100 text-mango-600', pos: 'left-0 top-4 -rotate-6' },
    { label: '৭', accent: 'bg-leaf-100 text-leaf-600', pos: 'right-2 top-10 rotate-6' },
    { label: '★', accent: 'bg-sun-100 text-sun-600', pos: 'left-4 bottom-10 rotate-3' },
    { label: 'ক', accent: 'bg-leaf-100 text-leaf-600', pos: 'right-6 bottom-4 -rotate-6' },
  ];
  return (
    <div className="relative mx-auto flex aspect-square w-full max-w-md items-center justify-center">
      <div className="absolute inset-4 rounded-[3rem] bg-gradient-to-br from-sun-100 via-cream-100 to-leaf-100" />
      <Mascot mood="happy" size={200} className="relative z-10" />
      {tokens.map((t, i) => (
        <motion.div
          key={t.label}
          className={`absolute z-20 flex h-14 w-14 items-center justify-center rounded-2xl border-2 border-white font-heading text-2xl font-extrabold shadow-card ${t.accent} ${t.pos}`}
          animate={reduce ? {} : { y: [0, -10, 0] }}
          transition={{ duration: 3 + i * 0.4, repeat: Infinity, ease: 'easeInOut' }}
        >
          {t.label}
        </motion.div>
      ))}
    </div>
  );
}

function Faq({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="overflow-hidden rounded-2xl border border-cream-200 bg-cream-50">
      <button
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center justify-between gap-3 px-5 py-4 text-left"
        aria-expanded={open}
      >
        <span className="font-semibold text-ink">{q}</span>
        <ChevronDown className={`h-5 w-5 shrink-0 text-ink-faint transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>
      <motion.div initial={false} animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }} className="overflow-hidden">
        <p className="px-5 pb-4 text-sm leading-relaxed text-ink-soft">{a}</p>
      </motion.div>
    </div>
  );
}