// BoxMind marketing site — light/clean/teal, matching the app's design tokens.
// Reuses the app mock screens inside PhoneFrame for authentic screenshots.
// Shared chrome (colors, nav, footer, Wrap/H2/Lead/SectionTag/StoreBadge,
// useIsMobile) lives in site-chrome.jsx and is exposed on window — loaded first.

// Shared demo detections — mapped to assets/everything-drawer.webp (overhead junk-drawer photo)
// x/y/w/h are % of the photo; also used to crop list thumbnails.
const VISION_DETECTIONS = [
  { x: 20, y: 9,  w: 34, h: 29, label: 'Charging cables ×3', conf: '99%' },
  { x: 47, y: 13, w: 26, h: 20, label: 'AA batteries ×10', conf: '98%' },
  { x: 72, y: 16, w: 19, h: 13, label: 'Rubber bands', conf: '97%' },
  { x: 60, y: 29, w: 31, h: 16, label: 'Paper clips', conf: '97%' },
  { x: 44, y: 34, w: 21, h: 20, label: 'Pens ×3', conf: '98%' },
  { x: 27, y: 39, w: 17, h: 14, label: 'Packing tape', conf: '97%' },
  { x: 11, y: 33, w: 17, h: 26, label: 'Scissors', conf: '98%' },
  { x: 30, y: 52, w: 27, h: 17, label: 'Assorted screws', conf: '95%' },
  { x: 57, y: 41, w: 32, h: 31, label: 'Kraft envelopes ×4', conf: '96%' },
  { x: 4,  y: 66, w: 31, h: 17, label: 'Old smartphone', conf: '99%' },
  { x: 27, y: 68, w: 31, h: 22, label: 'Sticky notes', conf: '98%' },
  { x: 58, y: 73, w: 25, h: 19, label: 'Key ring ×6', conf: '94%' },
];
const VISION_PHOTO = window.DRAWER_SRC || 'assets/everything-drawer.webp';

// Square thumbnail cropped from the photo using a detection's bbox
function CropThumb({ d, size = 34 }) {
  const bgW = 100 / d.w * 100;
  const bgH = 100 / d.h * 100;
  const posX = d.w >= 100 ? 0 : d.x / (100 - d.w) * 100;
  const posY = d.h >= 100 ? 0 : d.y / (100 - d.h) * 100;
  return (
    <div style={{
      width: size, height: size, borderRadius: 8, flexShrink: 0,
      border: `1px solid ${W_SEP}`,
      backgroundImage: `url("${VISION_PHOTO}")`,
      backgroundSize: `${bgW}% ${bgH}%`,
      backgroundPosition: `${posX}% ${posY}%`,
      backgroundRepeat: 'no-repeat',
    }}/>
  );
}

function Phone({ screen, scale = 0.62, moving = false, dark = false, bg }) {
  const w = 393, h = 852;
  return (
    <div style={{ width: w * scale, height: h * scale, flexShrink: 0 }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: 'top left' }}>
        <PhoneFrame dark={dark} moving={moving} bg={bg}>{screen}</PhoneFrame>
      </div>
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────────────
function Hero() {
  // Stack a little earlier than other sections — two side-by-side phones need room.
  const m = useIsMobile(900);
  return (
    <header style={{ overflow: 'hidden', background: `linear-gradient(180deg, #F0FAFA 0%, #FAFBFC 65%)` }}>
      <Wrap style={{ display: 'flex', flexDirection: m ? 'column' : 'row', alignItems: 'center', gap: m ? 8 : 64, padding: m ? '36px 20px 0' : '72px 32px 0', textAlign: m ? 'center' : 'left' }}>
        <div style={{ flex: m ? 'none' : 1, width: m ? '100%' : 'auto', paddingBottom: m ? 20 : 72 }}>
          <SectionTag><Icons.Radio size={14} color={W_TEAL}/> Tap. See. Organize.</SectionTag>
          <h1 style={{ fontSize: m ? 36 : 58, fontWeight: 700, letterSpacing: m ? -1 : -2, lineHeight: 1.08, color: W_TEXT, margin: '22px 0 20px' }}>
            Know what's in <span style={{ color: W_TEAL }}>every box</span>
          </h1>
          <Lead style={{ fontSize: m ? 16.5 : 18, maxWidth: 460, margin: m ? '0 auto 28px' : '0 0 32px' }}>
            Stick an NFC tag on a box, tap it with your phone, and see everything inside — without opening it. Snap one photo and <b style={{ color: W_TEXT }}>AI vision catalogs every item it sees</b>, so you never lose track of anything again.
          </Lead>
          <div id="download" style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: m ? 'center' : 'flex-start' }}>
            <StoreBadge kind="apple"/>
            <StoreBadge kind="play"/>
          </div>
          <div style={{ display: 'flex', gap: m ? 14 : 24, marginTop: 28, fontSize: 13.5, color: W_TEXT_2, flexWrap: 'wrap', justifyContent: m ? 'center' : 'flex-start' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icons.Check size={15} color={W_TEAL}/> Free to start</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icons.Check size={15} color={W_TEAL}/> Works offline</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icons.Check size={15} color={W_TEAL}/> iOS &amp; Android</span>
          </div>
        </div>
        {m ? (
          <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 12 }}>
            <Phone screen={<DashboardScreen/>} scale={0.62}/>
          </div>
        ) : (
          <div style={{ display: 'flex', gap: 28, alignItems: 'flex-start', paddingTop: 24 }}>
            <div style={{ marginTop: 48 }}>
              <Phone screen={<BoxesScreen/>} scale={0.56}/>
            </div>
            <Phone screen={<DashboardScreen/>} scale={0.62}/>
          </div>
        )}
      </Wrap>
    </header>
  );
}

// ─── How it works ────────────────────────────────────────────
function HowItWorks() {
  const m = useIsMobile();
  const steps = [
    { n: '01', icon: <Icons.Radio size={24} color={W_AMBER}/>, bg: W_AMBER_LIGHT, title: 'Scan', body: 'Stick an NFC tag or QR label on any box and register it with one tap. From then on, tapping the box shows you what’s inside.' },
    { n: '02', icon: <Icons.Camera size={24} color={W_TEAL}/>, bg: W_TEAL_LIGHT, title: 'Catalog', body: 'Add items your way — snap a photo and AI detects every item, dictate a list by voice, scan barcodes, or just type.' },
    { n: '03', icon: <Icons.Search size={24} color={W_PURPLE}/>, bg: W_PURPLE_LIGHT, title: 'Find', body: 'Search across every box in your home. BoxMind tells you exactly which box and which room — down to the shelf.' },
  ];
  return (
    <section id="how" style={{ padding: m ? '56px 0' : '96px 0' }}>
      <Wrap>
        <div style={{ textAlign: 'center', maxWidth: 560, margin: '0 auto 56px' }}>
          <SectionTag>How it works</SectionTag>
          <H2 style={{ margin: '18px 0 14px' }}>Three steps to a searchable home</H2>
          <Lead>Set up your first box in under a minute.</Lead>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr 1fr', gap: 24 }}>
          {steps.map(s => (
            <div key={s.n} style={{ background: '#fff', borderRadius: 20, padding: 32, boxShadow: '0 1px 3px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.04)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
                <div style={{ width: 52, height: 52, borderRadius: 16, background: s.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{s.icon}</div>
                <span style={{ fontSize: 14, fontWeight: 700, color: W_SEP, letterSpacing: 1 }}>{s.n}</span>
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, marginBottom: 10 }}>{s.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: W_TEXT_2 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

// ─── Feature rows (alternating) ──────────────────────────────
function FeatureRow({ flip = false, tag, tagColor, tagBg, title, body, bullets, phone }) {
  const m = useIsMobile();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: m ? 32 : 72, flexDirection: m ? 'column' : (flip ? 'row-reverse' : 'row'), padding: m ? '36px 0' : '56px 0' }}>
      <div style={{ flex: m ? 'none' : 1, width: m ? '100%' : 'auto' }}>
        <SectionTag color={tagColor} bg={tagBg}>{tag}</SectionTag>
        <H2 style={{ fontSize: 34, margin: '16px 0 14px' }}>{title}</H2>
        <Lead style={{ fontSize: 16.5, marginBottom: 24 }}>{body}</Lead>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {bullets.map((b, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <div style={{ width: 22, height: 22, borderRadius: 11, background: W_TEAL_LIGHT, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                <Icons.Check size={13} color={W_TEAL}/>
              </div>
              <span style={{ fontSize: 15, lineHeight: 1.55, color: W_TEXT }}>{b}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>{phone}</div>
    </div>
  );
}

function Features() {
  const m = useIsMobile();
  return (
    <section id="features" style={{ background: '#fff', padding: m ? '32px 0 40px' : '48px 0 64px', borderTop: `1px solid ${W_SEP}`, borderBottom: `1px solid ${W_SEP}` }}>
      <Wrap>
        <FeatureRow
          tag={<><Icons.Radio size={14} color={W_AMBER}/> NFC + QR scanning</>}
          tagColor={W_AMBER} tagBg={W_AMBER_LIGHT}
          title="Tap a box, see inside"
          body="Cheap NFC stickers or printable QR labels turn every box into a smart box. No batteries, no hubs — just tap with your phone."
          bullets={[
            'Works with any NTAG-compatible sticker (about 20¢ each)',
            'Print QR label sheets for boxes NFC can’t reach',
            'Scanning works completely offline',
          ]}
          phone={<Phone screen={<ScanScreen state="success"/>} dark bg="#000" scale={0.58}/>}
        />
        <FeatureRow flip
          tag={<><Icons.Camera size={14} color={W_TEAL}/> Effortless capture</>}
          tagColor={W_TEAL} tagBg={W_TEAL_LIGHT}
          title="Catalog a whole box in seconds"
          body="Photograph the contents and AI lists every item it sees. Or dictate out loud while you pack. Or scan product barcodes. Typing is the last resort."
          bullets={[
            'Photo capture — AI detects each item automatically',
            'Voice input — speak a list, get separate items',
            'Barcode lookup fills in product names for you',
          ]}
          phone={<Phone screen={<PhotoCaptureRealScreen photoSrc={VISION_PHOTO} detections={VISION_DETECTIONS}/>} scale={0.58}/>}
        />
        <FeatureRow
          tag={<><Icons.HandReach size={14} color={W_TEAL}/> Search &amp; lending</>}
          tagColor={W_TEAL} tagBg={W_TEAL_LIGHT}
          title="Find anything. Get it back, too."
          body="Search every box at once and jump straight to the right one. Lent your drill to a neighbor? Track who has what, with due-date reminders."
          bullets={[
            'Instant search across all boxes and rooms',
            'Loan tracking with return reminders',
            'Overdue alerts so nothing disappears for good',
          ]}
          phone={<Phone screen={<SearchScreen state="results"/>} scale={0.58}/>}
        />
        <FeatureRow flip
          tag={<><Icons.Truck size={14} color="#EA580C"/> Moving Mode</>}
          tagColor="#EA580C" tagBg="#FEF3E2"
          title="Built for moving day"
          body="Flip on Moving Mode and the whole app shifts into gear: track each box from packed to in-transit to unpacked, with progress you can see."
          bullets={[
            'Per-box status: packed · in transit · unpacked',
            'Live unpacking progress on your dashboard',
            'Nothing gets left behind on the truck',
          ]}
          phone={<Phone screen={<DashboardScreen moving/>} moving scale={0.58}/>}
        />
      </Wrap>
    </section>
  );
}

// ─── AI spotlight ────────────────────────────────────────────
function VisionShowcase() {
  const m = useIsMobile();
  return (
    <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', alignItems: 'center', gap: m ? 32 : 72, marginBottom: m ? 48 : 72 }}>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <Phone screen={<PhotoCaptureRealScreen photoSrc={VISION_PHOTO} detections={VISION_DETECTIONS}/>} scale={0.62}/>
      </div>
      <div style={{ flex: m ? 'none' : 1, width: m ? '100%' : 'auto' }}>
        <SectionTag color={W_PURPLE} bg="#fff"><Icons.Camera size={14} color={W_PURPLE}/> AI Vision</SectionTag>
        <H2 style={{ fontSize: 36, margin: '16px 0 14px' }}>One photo. Every item, cataloged.</H2>
        <Lead style={{ fontSize: 16.5, marginBottom: 26 }}>
          Point your camera at an open box — or a whole tabletop of stuff — and BoxMind's vision AI identifies each item, names it, counts it, and files it into the box. No typing, no tapping through forms.
        </Lead>
        {/* Detected-items mock — what the AI returns from one photo */}
        <div style={{ background: '#fff', borderRadius: 18, border: `1px solid ${W_SEP}`, boxShadow: '0 8px 28px rgba(15,23,42,0.07)', overflow: 'hidden', maxWidth: m ? '100%' : 430 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 18px', borderBottom: `1px solid ${W_SEP}`, background: W_PURPLE_LIGHT }}>
            <Icons.Sparkles size={15} color={W_PURPLE}/>
            <span style={{ fontSize: 13.5, fontWeight: 700, color: W_PURPLE }}>12 items detected in 1 photo</span>
            <span style={{ marginLeft: 'auto', fontSize: 12, color: W_TEXT_2 }}>2.1s</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 4px', padding: '6px 10px 10px' }}>
            {VISION_DETECTIONS.map((d, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 8px' }}>
                <CropThumb d={d}/>
                <span style={{ fontSize: 13, color: W_TEXT, flex: 1, lineHeight: 1.25 }}>{d.label}</span>
                <span style={{ fontSize: 11, fontWeight: 600, color: W_TEXT_2, background: '#FAFBFC', border: `1px solid ${W_SEP}`, borderRadius: 999, padding: '1px 6px' }}>{d.conf}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function AISpotlight() {
  const m = useIsMobile();
  const cards = [
    { icon: <Icons.Camera size={20} color={W_PURPLE}/>, title: 'Vision capture', body: 'Photograph a box’s contents and AI itemizes everything it sees — names, quantities, ready to save.' },
    { icon: <Icons.Sparkles size={20} color={W_PURPLE}/>, title: 'Smart tips', body: 'Organisation coaching tailored to your actual boxes: what to declutter, what to move, what to store together.' },
    { icon: <Icons.HelpCircle size={20} color={W_PURPLE}/>, title: 'Ask AI', body: '“Where are my winter gloves?” Ask in plain language and get an answer based on your real inventory.' },
    { icon: <Icons.ClipboardCheck size={20} color={W_PURPLE}/>, title: 'Inventory audit', body: 'AI reviews your whole catalog and flags duplicates, misplaced items, and boxes worth consolidating.' },
  ];
  return (
    <section id="ai" style={{ padding: m ? '56px 0' : '96px 0', background: `linear-gradient(180deg, #FAFBFC 0%, ${W_PURPLE_LIGHT}55 50%, #FAFBFC 100%)` }}>
      <Wrap>
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 56px' }}>
          <SectionTag color={W_PURPLE} bg={W_PURPLE_LIGHT}><Icons.Sparkles size={14} color={W_PURPLE}/> AI Coach</SectionTag>
          <H2 style={{ margin: '18px 0 14px' }}>An organisation coach in your pocket</H2>
          <Lead>BoxMind doesn't just store your inventory — it helps you improve it.</Lead>
        </div>
        <VisionShowcase/>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: 20, maxWidth: 880, margin: '0 auto' }}>
          {cards.map((c, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 18, padding: 28, boxShadow: '0 1px 3px rgba(15,23,42,0.06)', border: `1px solid ${W_SEP}`, display: 'flex', gap: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: W_PURPLE_LIGHT, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{c.icon}</div>
              <div>
                <h3 style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.2, marginBottom: 6 }}>{c.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: W_TEXT_2 }}>{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

// ─── Testimonials ────────────────────────────────────────────
function Testimonials() {
  const m = useIsMobile();
  const quotes = [
    { text: 'We moved cross-country with 60 boxes. I could tell the movers which room every single one went to without opening any of them.', name: 'Placeholder — real quote here', role: 'Moved with BoxMind' },
    { text: 'The photo capture is magic. I emptied a junk drawer onto the table, took one picture, and had 23 items cataloged.', name: 'Placeholder — real quote here', role: 'Home organizer' },
    { text: 'My garage is finally searchable. Tapped a box I hadn’t opened in 3 years and there were the camping stakes.', name: 'Placeholder — real quote here', role: 'Weekend camper' },
  ];
  return (
    <section style={{ padding: m ? '56px 0' : '80px 0', background: '#fff', borderTop: `1px solid ${W_SEP}` }}>
      <Wrap>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr 1fr', gap: 24 }}>
          {quotes.map((q, i) => (
            <div key={i} style={{ background: '#FAFBFC', borderRadius: 18, padding: 28, border: `1px solid ${W_SEP}` }}>
              <div style={{ display: 'flex', gap: 2, marginBottom: 14 }}>
                {[...Array(5)].map((_, s) => <span key={s} style={{ color: W_AMBER, fontSize: 15 }}>★</span>)}
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.65, color: W_TEXT, marginBottom: 18 }}>"{q.text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 34, height: 34, borderRadius: 17, background: W_TEAL_LIGHT, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icons.User size={16} color={W_TEAL}/>
                </div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{q.name}</div>
                  <div style={{ fontSize: 12.5, color: W_TEXT_2 }}>{q.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

// ─── Pricing ─────────────────────────────────────────────────
function Pricing() {
  const m = useIsMobile();
  const tiers = [
    {
      name: 'Free', price: '$0', per: 'forever',
      desc: 'Everything you need to start.',
      feats: ['5 boxes · 50 items', 'NFC + QR scanning', '3 smart tips / month', '2 photo scans / month', '3 active loans'],
      cta: 'Download free', primary: false,
    },
    {
      name: 'Pro', price: '$4.99', per: '/ month',
      desc: 'For whole-home inventories.',
      feats: ['Unlimited boxes & items', 'Moving Mode', 'Cloud backup & restore', '25 smart tips / month', '20 photo scans / month', 'PDF export & QR label sheets'],
      cta: 'Go Pro', primary: true, badge: 'Most popular',
    },
    {
      name: 'Premium', price: '$9.99', per: '/ month',
      desc: 'Every AI feature, unlocked.',
      feats: ['Everything in Pro', 'Unlimited smart tips', 'Ask AI about your inventory', 'AI inventory audits', 'Priority support'],
      cta: 'Go Premium', primary: false,
    },
  ];
  return (
    <section id="pricing" style={{ padding: m ? '56px 0' : '96px 0' }}>
      <Wrap>
        <div style={{ textAlign: 'center', maxWidth: 520, margin: '0 auto 56px' }}>
          <SectionTag>Pricing</SectionTag>
          <H2 style={{ margin: '18px 0 14px' }}>Start free. Upgrade when you outgrow it.</H2>
          <Lead>No account required to try it. Cancel anytime.</Lead>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr 1fr', gap: 24, alignItems: 'stretch' }}>
          {tiers.map((tier) => (
            <div key={tier.name} style={{
              background: '#fff', borderRadius: 22, padding: 32, position: 'relative',
              border: tier.primary ? `2px solid ${W_TEAL}` : `1px solid ${W_SEP}`,
              boxShadow: tier.primary ? '0 12px 40px rgba(13,115,119,0.14)' : '0 1px 3px rgba(15,23,42,0.05)',
              display: 'flex', flexDirection: 'column',
            }}>
              {tier.badge && (
                <div style={{ position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)', background: W_TEAL, color: '#fff', fontSize: 12, fontWeight: 700, padding: '5px 14px', borderRadius: 999, letterSpacing: 0.3 }}>{tier.badge}</div>
              )}
              <div style={{ fontSize: 15, fontWeight: 700, color: tier.primary ? W_TEAL : W_TEXT_2, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>{tier.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
                <span style={{ fontSize: 42, fontWeight: 700, letterSpacing: -1.5 }}>{tier.price}</span>
                <span style={{ fontSize: 14.5, color: W_TEXT_2 }}>{tier.per}</span>
              </div>
              <p style={{ fontSize: 14.5, color: W_TEXT_2, marginBottom: 22 }}>{tier.desc}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11, flex: 1, marginBottom: 26 }}>
                {tier.feats.map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                    <Icons.Check size={15} color={W_TEAL} style={{ flexShrink: 0, marginTop: 2 }}/>
                    <span style={{ fontSize: 14.5, lineHeight: 1.5 }}>{f}</span>
                  </div>
                ))}
              </div>
              <a href="/#download" style={{
                display: 'block', textAlign: 'center', borderRadius: 999, padding: '13px 0', fontSize: 15, fontWeight: 600,
                background: tier.primary ? W_TEAL : W_TEAL_LIGHT, color: tier.primary ? '#fff' : W_TEAL, textDecoration: 'none',
              }}>{tier.cta}</a>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'What NFC tags do I need?', a: 'Any NTAG213/215/216 sticker works — the same tags used for tap-to-share. They cost about 20¢ each in packs of 50 online. No batteries, no pairing; your phone powers them when it taps.' },
    { q: 'Does my phone support NFC scanning?', a: 'Every iPhone since the XS (2018) and virtually every modern Android phone can read NFC tags. If your phone can do tap-to-pay, it can scan BoxMind tags. QR labels work on anything with a camera.' },
    { q: 'Does it work offline?', a: 'Yes. Your inventory lives on your device — scanning, searching, and editing all work with no connection. AI features (photo detection, smart tips, Ask AI) and cloud backup need internet.' },
    { q: 'What happens to my data?', a: 'It stays on your phone by default. Cloud backup (Pro) is encrypted and only used to restore your inventory. You can export everything to CSV or PDF at any time, and delete your account and all cloud data in one tap.' },
    { q: 'Can I share my inventory with family?', a: 'Household sharing is on the roadmap. Today, you can export a full PDF inventory or print QR label sheets so anyone in the house can scan a box and see a snapshot of its contents.' },
    { q: 'What if I stop paying for Pro?', a: 'Your data is never held hostage. You keep everything you cataloged — you just can’t add beyond the free limits (5 boxes, 50 items) until you upgrade again or trim down.' },
  ];
  return (
    <section id="faq" style={{ padding: '0 0 96px' }}>
      <Wrap style={{ maxWidth: 760 }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <SectionTag>FAQ</SectionTag>
          <H2 style={{ margin: '18px 0 0', fontSize: 34 }}>Questions, answered</H2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} onClick={() => setOpen(isOpen ? -1 : i)} style={{ background: '#fff', border: `1px solid ${isOpen ? W_TEAL : W_SEP}`, borderRadius: 16, padding: '20px 24px', cursor: 'pointer', transition: 'border-color 0.15s' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
                  <span style={{ fontSize: 16.5, fontWeight: 600, color: W_TEXT }}>{item.q}</span>
                  <div style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', flexShrink: 0 }}>
                    <Icons.ChevronD size={18} color={isOpen ? W_TEAL : W_TEXT_2}/>
                  </div>
                </div>
                {isOpen && <p style={{ fontSize: 15, lineHeight: 1.65, color: W_TEXT_2, marginTop: 12, maxWidth: 640 }}>{item.a}</p>}
              </div>
            );
          })}
        </div>
      </Wrap>
    </section>
  );
}

// ─── Final CTA + footer ──────────────────────────────────────
function FinalCTA() {
  const m = useIsMobile();
  return (
    <section style={{ padding: '0 0 96px' }}>
      <Wrap>
        <div style={{ background: `linear-gradient(135deg, ${W_TEAL_DARK} 0%, ${W_TEAL} 100%)`, borderRadius: 28, padding: m ? '48px 24px' : '64px 48px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 220, height: 220, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }}/>
          <div style={{ position: 'absolute', bottom: -60, left: -30, width: 180, height: 180, borderRadius: '50%', background: 'rgba(255,255,255,0.05)' }}/>
          <h2 style={{ fontSize: m ? 27 : 38, fontWeight: 700, letterSpacing: -1, color: '#fff', marginBottom: 14 }}>Your boxes are about to get smarter</h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.85)', marginBottom: 32, maxWidth: 440, margin: '0 auto 32px' }}>Download BoxMind free and set up your first box in under a minute.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <StoreBadge kind="apple"/>
            <StoreBadge kind="play"/>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

function Site() {
  return (
    <div>
      <SiteNav/>
      <Hero/>
      <HowItWorks/>
      <Features/>
      <AISpotlight/>
      <Testimonials/>
      <Pricing/>
      <FAQ/>
      <FinalCTA/>
      <SiteFooter/>
    </div>
  );
}

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