// landing-sections-3.jsx — HowItWorks, ScreensCarousel, Pricing, Testimonials, FAQ, FinalCTA

// ─────────────────────────────────────────────────────────────
// HOW IT WORKS — 3 steps
// ─────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Connect your cameras', d: 'Plug Camily into your existing DVR/NVR with one config. RTSP, ONVIF, Hikvision, Dahua, CP Plus — we speak all of them. No new hardware required.', visual: 'connect' },
    { n: '02', t: 'Camily watches', d: 'Our models work 24×7 in the cloud, classifying every frame. Theft, footfall, dwell, queues — all measured continuously, all encrypted in transit.', visual: 'watch' },
    { n: '03', t: 'You act on what matters', d: 'Mobile alerts the moment something needs you. WhatsApp digest at end-of-day. Plain-English insights every morning at 9.', visual: 'act' },
  ];
  return (
    <Section bg="var(--bg)" pad="140px 32px">
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 80px' }}>
        <Eyebrow>How it works</Eyebrow>
        <H2 style={{ fontSize: 64 }}>From plug-in to<br/>first alert in <em className="serif" style={{ fontWeight: 400, color: 'var(--brand)' }}>10 minutes</em>.</H2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            background: '#fff', borderRadius: 24, padding: 32,
            border: '1px solid var(--line)', position: 'relative',
            display: 'flex', flexDirection: 'column', minHeight: 460,
          }}>
            <div className="mono" style={{
              fontSize: 13, fontWeight: 700, color: 'var(--brand)', letterSpacing: 2, marginBottom: 24,
            }}>STEP {s.n}</div>
            {/* visual */}
            <div style={{
              height: 160, borderRadius: 14, marginBottom: 24, position: 'relative', overflow: 'hidden',
              background: i === 0 ? '#0F1524' : i === 1 ? 'var(--brand-soft)' : '#fff',
              border: i === 2 ? '1px solid var(--line)' : 'none',
              display: 'grid', placeItems: 'center',
            }}>
              {i === 0 && (
                <svg viewBox="0 0 280 160" width="100%" height="100%">
                  <rect x="20" y="60" width="80" height="50" rx="6" fill="#1A2234" stroke="#3F6BFF" strokeWidth="1"/>
                  <text x="60" y="92" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#A9BBFF">DVR</text>
                  <rect x="180" y="60" width="80" height="50" rx="6" fill="#3F6BFF"/>
                  <text x="220" y="92" textAnchor="middle" fontFamily="Inter" fontSize="13" fontWeight="700" fill="#fff">Camily</text>
                  <line x1="100" y1="85" x2="180" y2="85" stroke="#3F6BFF" strokeWidth="1.5" strokeDasharray="4 4">
                    <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.2s" repeatCount="indefinite"/>
                  </line>
                  <circle cx="60" cy="40" r="3" fill="#34D399"/><text x="70" y="44" fontFamily="JetBrains Mono" fontSize="10" fill="#fff">RTSP · ONVIF</text>
                </svg>
              )}
              {i === 1 && (
                <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                  <CCTVTile w="100%" h="100%" scene="aisle" label="Cam · 03" time="now" style={{ width: '100%', height: '100%', borderRadius: 0 }}
                    highlight={{ left: '50%', top: '30%', width: 50, height: 60 }}/>
                  <div style={{
                    position: 'absolute', top: 12, right: 12, padding: '4px 10px',
                    background: 'rgba(255,255,255,0.95)', borderRadius: 99, fontSize: 10.5, fontWeight: 700, color: 'var(--ink)',
                    fontFamily: 'JetBrains Mono',
                  }}>92.4% conf</div>
                </div>
              )}
              {i === 2 && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 18, width: '100%' }}>
                  <div style={{ display: 'flex', gap: 10, padding: '10px 12px', background: 'var(--red-soft)', borderRadius: 10, alignItems: 'center' }}>
                    <div style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--red)' }}/>
                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--red)' }}>Theft alert · Aisle 3</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginLeft: 'auto' }}>3:42 PM</div>
                  </div>
                  <div style={{ display: 'flex', gap: 10, padding: '10px 12px', background: 'var(--bg)', borderRadius: 10, alignItems: 'center' }}>
                    <div style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--purple)' }}/>
                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>Add staff at 6 PM</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginLeft: 'auto' }}>9:00 AM</div>
                  </div>
                  <div style={{ display: 'flex', gap: 10, padding: '10px 12px', background: 'var(--green-soft)', borderRadius: 10, alignItems: 'center' }}>
                    <div style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--green)' }}/>
                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--green)' }}>Sales up 12% today</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginLeft: 'auto' }}>9:30 PM</div>
                  </div>
                </div>
              )}
            </div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.6, color: 'var(--ink)', marginBottom: 10 }}>{s.t}</div>
            <div style={{ fontSize: 14, color: 'var(--text-mut)', lineHeight: 1.55, flex: 1 }}>{s.d}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// SCREENS CAROUSEL — show all 11 phones
// ─────────────────────────────────────────────────────────────
function ScreensCarousel() {
  const screens = [
    { src: 'pngs/01-home.png', l: 'Today\'s summary' },
    { src: 'pngs/04-dashboard.png', l: 'Dashboard overview' },
    { src: 'pngs/05-footfall.png', l: 'Footfall' },
    { src: 'pngs/06-time.png', l: 'Avg. time spent' },
    { src: 'pngs/07-conversion.png', l: 'Conversion rate' },
    { src: 'pngs/08-insights.png', l: 'AI Insights' },
    { src: 'pngs/03-alerts.png', l: 'Real-time alerts' },
    { src: 'pngs/02-live.png', l: 'Live view' },
    { src: 'pngs/09-fast.png', l: 'Fast-selling' },
    { src: 'pngs/10-dead.png', l: 'Dead stock' },
    { src: 'pngs/11-more.png', l: 'Settings' },
  ];
  return (
    <Section bg="var(--ink)" pad="140px 0 80px" style={{ color: '#fff', overflow: 'hidden' }}>
      <div style={{ textAlign: 'center', padding: '0 32px', marginBottom: 56 }}>
        <Eyebrow color="#A9BBFF">The mobile app</Eyebrow>
        <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: -1.6, lineHeight: 1.04, margin: 0, color: '#fff' }}>
          11 screens. Your store,<br/><em className="serif" style={{ fontWeight: 400, color: '#A9BBFF' }}>in your pocket</em>.
        </h2>
        <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.6)', margin: '20px auto 0', maxWidth: 600 }}>
          The same insights as the web dashboard, optimized for the 30-second checks
          you make between meetings.
        </p>
      </div>
      <div style={{ display: 'flex', gap: 28, padding: '20px 60px', overflowX: 'auto', scrollbarWidth: 'none', WebkitOverflowScrolling: 'touch' }}>
        <style>{`section::-webkit-scrollbar{display:none}`}</style>
        {screens.map((s, i) => (
          <div key={i} style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <PhoneFrame src={s.src} alt={s.l} w={240}/>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', fontWeight: 500 }}>
              <span className="mono" style={{ color: 'rgba(255,255,255,0.4)', marginRight: 8 }}>{String(i+1).padStart(2,'0')}</span>
              {s.l}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// PRICING
// ─────────────────────────────────────────────────────────────
function Pricing() {
  const plans = [
    { n: 'Starter', p: '₹1,499', sub: '/store/month', d: 'For single-location kiranas getting started.', pop: false, feat: ['Up to 4 cameras', 'Theft + footfall alerts', 'Mobile app', 'WhatsApp digest', '7 days clip retention'] },
    { n: 'Growth', p: '₹3,999', sub: '/store/month', d: 'For supermarkets, pharmacies, mid-size stores.', pop: true, feat: ['Up to 12 cameras', 'Everything in Starter', 'AI Insights + heatmaps', 'Conversion tracking', 'Staff dashboards', '30 days clip retention'] },
    { n: 'Chain', p: 'Custom', sub: '', d: 'For 10+ stores, custom rules, dedicated support.', pop: false, feat: ['Unlimited cameras', 'Everything in Growth', 'Multi-store rollups', 'Custom alert rules', 'API + webhooks', 'Dedicated success manager'] },
  ];
  return (
    <Section bg="#fff" pad="140px 32px">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
        <Eyebrow>Pricing</Eyebrow>
        <H2 style={{ fontSize: 64 }}>Pays for itself by<br/>the <em className="serif" style={{ fontWeight: 400, color: 'var(--brand)' }}>second week</em>.</H2>
        <Lede style={{ margin: '0 auto', fontSize: 18 }}>
          Most stores recover the monthly fee in shrinkage caught in the first 14 days.
          14-day free trial. Cancel anytime. No hardware lock-in.
        </Lede>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {plans.map((pl, i) => (
          <div key={i} style={{
            background: pl.pop ? 'var(--ink)' : '#fff',
            color: pl.pop ? '#fff' : 'var(--text)',
            border: pl.pop ? '1px solid var(--ink)' : '1px solid var(--line)',
            borderRadius: 24, padding: 32, position: 'relative',
            display: 'flex', flexDirection: 'column',
          }}>
            {pl.pop && (
              <div style={{
                position: 'absolute', top: -10, right: 24,
                padding: '5px 12px', background: 'var(--brand)', color: '#fff',
                fontSize: 11, fontWeight: 700, borderRadius: 99, letterSpacing: 0.6,
              }}>MOST POPULAR</div>
            )}
            <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.2, color: pl.pop ? '#A9BBFF' : 'var(--brand)', marginBottom: 14 }}>{pl.n}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 12 }}>
              <div style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1.5 }}>{pl.p}</div>
              <div style={{ fontSize: 14, color: pl.pop ? 'rgba(255,255,255,0.55)' : 'var(--text-mut)' }}>{pl.sub}</div>
            </div>
            <div style={{ fontSize: 14, color: pl.pop ? 'rgba(255,255,255,0.7)' : 'var(--text-mut)', lineHeight: 1.55, marginBottom: 24 }}>{pl.d}</div>
            <Btn kind={pl.pop ? 'white' : 'primary'} size="lg" style={{ width: '100%' }}>
              {i === 2 ? 'Talk to sales' : 'Start free trial'}
            </Btn>
            <ul style={{ listStyle: 'none', padding: 0, marginTop: 24, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
              {pl.feat.map((f, j) => (
                <li key={j} style={{ display: 'flex', gap: 10, fontSize: 14, color: pl.pop ? 'rgba(255,255,255,0.85)' : 'var(--text)' }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={pl.pop ? '#A9BBFF' : 'var(--brand)'} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }}><path d="M5 12l5 5L20 7"/></svg>
                  {f}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// TESTIMONIALS
// ─────────────────────────────────────────────────────────────
function Testimonials() {
  const tests = [
    { q: 'In the first week, Camily showed me ₹4,600 of items leaving without scans. The system paid for a year of subscription that month.', a: 'Sharma ji', r: 'Owner · Sharma Kirana, Indore', initial: 'S' },
    { q: 'I used to staff Sundays based on feel. Now I know 6–9 PM is my window and I have two cashiers ready. Conversion jumped 18%.', a: 'Pooja R.', r: 'Manager · Fresh Daily Mart, Pune', initial: 'P' },
    { q: 'Set-up took 12 minutes on a Saturday morning. By Monday, I was getting WhatsApp summaries. The cameras were already there — Camily just made them useful.', a: 'Vikram T.', r: 'Founder · Apnaa Bazaar, Delhi NCR', initial: 'V' },
  ];
  return (
    <Section bg="var(--bg)" pad="140px 32px">
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
        <Eyebrow>What owners say</Eyebrow>
        <H2 style={{ fontSize: 56 }}>The kind of ROI<br/>that gets noticed.</H2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {tests.map((t, i) => (
          <div key={i} style={{
            background: '#fff', borderRadius: 20, padding: 32,
            border: '1px solid var(--line)', display: 'flex', flexDirection: 'column',
          }}>
            <div className="serif" style={{
              fontSize: 56, lineHeight: 1, color: 'var(--brand)', height: 30, marginBottom: 12,
            }}>“</div>
            <div style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink)', flex: 1, fontWeight: 500 }}>
              {t.q}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
              <div style={{
                width: 40, height: 40, borderRadius: 99, background: 'var(--brand-soft)', color: 'var(--brand-deep)',
                display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 16,
              }}>{t.initial}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)' }}>{t.a}</div>
                <div style={{ fontSize: 12, color: 'var(--text-mut)', marginTop: 2 }}>{t.r}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
    ['Do I need to buy new cameras?', 'No. Camily works with any IP camera or DVR/NVR that supports RTSP or ONVIF — that\'s 99% of CCTV systems sold in India in the last 8 years. Hikvision, Dahua, CP Plus, Honeywell, Bosch — we\'re all set.'],
    ['How long does setup take?', 'Most stores are live in under 10 minutes. You enter your DVR\'s IP and login, mark camera positions on a floor plan, and we start watching. No site visit required for most installations.'],
    ['Is my video footage private?', 'Yes. Footage is processed in encrypted form, retained only as long as your plan specifies (7–30 days), and deleted on schedule. We don\'t do facial recognition or store biometric data. SOC 2 Type II audit complete.'],
    ['What about my internet — is it enough?', 'Camily streams compressed metadata, not raw video. A 5 Mbps upload connection comfortably handles 8 cameras. If you lose internet, alerts buffer and resume on reconnect.'],
    ['Can I get alerts on WhatsApp?', 'Yes. You can route alerts to WhatsApp, SMS, the mobile app, or email — or all of them, with different rules per category. Most owners use WhatsApp for theft and email for daily digests.'],
    ['What if I have multiple stores?', 'The Chain plan is built for that. One dashboard rolls up all locations, ranks them by conversion / shrinkage / staffing, and lets you push rule changes to all stores at once.'],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section bg="#fff" pad="140px 32px">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80 }}>
        <div>
          <Eyebrow>FAQ</Eyebrow>
          <H2 style={{ fontSize: 48 }}>Questions<br/>owners ask.</H2>
          <p style={{ fontSize: 15, color: 'var(--text-mut)', lineHeight: 1.6, marginTop: 24 }}>
            Still curious? Drop us a line at <a href="mailto:hello@camily.ai" style={{ color: 'var(--brand)', fontWeight: 600 }}>hello@camily.ai</a> or
            book a 15-min walkthrough.
          </p>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {qs.map(([q, a], i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '24px 0', background: 'none', border: 'none',
                textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
              }}>
                <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--ink)', letterSpacing: -0.3 }}>{q}</div>
                <div style={{
                  width: 28, height: 28, borderRadius: 99, background: open === i ? 'var(--ink)' : 'var(--bg)',
                  color: open === i ? '#fff' : 'var(--ink)', display: 'grid', placeItems: 'center', flexShrink: 0,
                  fontSize: 16, fontWeight: 600, transition: 'all 0.2s',
                }}>{open === i ? '−' : '+'}</div>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 24, fontSize: 15, color: 'var(--text-mut)', lineHeight: 1.65, maxWidth: 640 }}>{a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// FINAL CTA
// ─────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section style={{ padding: '40px 32px 80px', background: '#fff' }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', borderRadius: 32, padding: '100px 80px',
        background: 'linear-gradient(135deg, #3F6BFF 0%, #2E52D6 100%)',
        position: 'relative', overflow: 'hidden', color: '#fff',
      }}>
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.1,
          backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)',
          backgroundSize: '50px 50px',
        }}/>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <h2 style={{
              fontSize: 72, fontWeight: 700, letterSpacing: -2.4, lineHeight: 0.98, margin: 0, color: '#fff',
            }}>
              Turn cameras<br/>into <em className="serif" style={{ fontWeight: 400 }}>intelligence</em>.
            </h2>
            <p style={{ fontSize: 19, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5, margin: '28px 0 36px', maxWidth: 540 }}>
              14 days free. No card. No hardware. Most stores see their first
              meaningful alert within 48 hours.
            </p>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <Btn size="lg" kind="white">Start free trial →</Btn>
              <button style={{
                padding: '14px 24px', fontSize: 15, fontWeight: 600,
                background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,0.3)',
                borderRadius: 999, cursor: 'pointer', fontFamily: 'inherit',
              }}>Book a demo</button>
            </div>
          </div>
          <div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                ['10 min', 'to set up'],
                ['Zero', 'new hardware'],
                ['14 days', 'free trial'],
                ['Cancel', 'anytime'],
              ].map(([k, v], i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'baseline', gap: 14,
                  padding: '16px 20px', background: 'rgba(255,255,255,0.08)',
                  borderRadius: 14, backdropFilter: 'blur(8px)',
                  border: '1px solid rgba(255,255,255,0.12)',
                }}>
                  <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.6, minWidth: 100 }}>{k}</div>
                  <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.8)' }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, ScreensCarousel, Pricing, Testimonials, FAQ, FinalCTA });