// landing-sections-1.jsx — Hero, Problem, Product Intro, Theft, Footfall

// ─────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(180deg, #fff 0%, #F5F6F8 100%)',
      padding: '80px 32px 60px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
        {/* Left: text */}
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px 6px 6px', background: 'var(--brand-soft)',
            borderRadius: 999, marginBottom: 28,
          }}>
            <span style={{
              padding: '3px 8px', background: 'var(--brand)', color: '#fff',
              fontSize: 10.5, fontWeight: 700, borderRadius: 99, letterSpacing: 0.4,
            }}>NEW</span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--brand-deep)', fontWeight: 500 }}>
              v2.4 · AI Co-pilot is now multilingual (Hindi, Tamil, Telugu)
            </span>
          </div>
          <h1 style={{
            fontSize: 84, fontWeight: 700, letterSpacing: -3.4, lineHeight: 0.98,
            margin: 0, color: 'var(--ink)',
          }}>
            Your CCTV is<br/>
            <span className="serif" style={{ fontStyle: 'italic', color: 'var(--brand)', fontWeight: 400 }}>recording</span>.
            <br/>Make it <em className="serif" style={{ fontWeight: 400 }}>think</em>.
          </h1>
          <p style={{
            fontSize: 20, lineHeight: 1.5, color: 'var(--text-mut)',
            margin: '28px 0 36px', maxWidth: 540,
          }}>
            Camily AI plugs into the cameras you already own and turns them into a
            real-time co-pilot for your store — catching theft, tracking footfall,
            and surfacing what to fix today.
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 32 }}>
            <Btn size="lg" kind="primary">Start free 14-day trial</Btn>
            <Btn size="lg" kind="ghost">▶ Watch 90-sec demo</Btn>
          </div>
          <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
            {[
              { n: '40+', l: 'stores live' },
              { n: '₹3.2L', l: 'avg shrinkage saved / yr' },
              { n: '< 10 min', l: 'to set up' },
            ].map((s, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span style={{ width: 1, height: 36, background: 'var(--line)' }}/>}
                <div>
                  <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.6 }}>{s.n}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-mut)', marginTop: 2 }}>{s.l}</div>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Right: phone + floating cctv tile + alert card */}
        <div style={{ position: 'relative', height: 720, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          {/* CCTV tile floating top-left */}
          <div style={{ position: 'absolute', top: 30, left: -10, transform: 'rotate(-3deg)', zIndex: 2 }}>
            <CCTVTile w={300} h={180} scene="aisle" label="Aisle 3 · Live" time="15:42:08"
              highlight={{ left: '38%', top: '34%', width: 60, height: 80 }}
              style={{ boxShadow: '0 30px 60px -20px rgba(15,21,36,0.4)' }}/>
          </div>
          {/* Phone */}
          <div style={{ position: 'relative', zIndex: 3, transform: 'translateX(40px)' }}>
            <PhoneFrame src="pngs/01-home.png" alt="Camily home" w={340}/>
          </div>
          {/* Floating alert card */}
          <div style={{
            position: 'absolute', bottom: 60, right: -10, zIndex: 4,
            background: '#fff', padding: 16, borderRadius: 16, width: 280,
            boxShadow: '0 20px 50px -10px rgba(15,21,36,0.25)', border: '1px solid var(--line)',
            transform: 'rotate(2deg)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 99, background: 'var(--red-soft)',
                display: 'grid', placeItems: 'center',
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#E11D48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 3l8 3v6c0 4.5-3.2 8.4-8 9-4.8-.6-8-4.5-8-9V6z"/>
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--red)' }}>Theft alert</div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-faint)' }}>3:42 PM · Aisle 3</div>
              </div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.45 }}>
              Item removed from shelf, no scan at counter for <b>4 min 18 sec</b>.
            </div>
            <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
              <button style={{ flex: 1, padding: '7px 10px', background: 'var(--ink)', color: '#fff', border: 'none', borderRadius: 8, fontSize: 12, fontWeight: 600, fontFamily: 'inherit' }}>View clip</button>
              <button style={{ flex: 1, padding: '7px 10px', background: '#fff', color: 'var(--text)', border: '1px solid var(--line)', borderRadius: 8, fontSize: 12, fontWeight: 600, fontFamily: 'inherit' }}>Dismiss</button>
            </div>
          </div>
          {/* Background grid */}
          <div style={{
            position: 'absolute', inset: -40, zIndex: 0, opacity: 0.5,
            backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
            backgroundSize: '40px 40px',
            maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)',
            WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)',
          }}/>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// PROBLEM
// ─────────────────────────────────────────────────────────────
function Problem() {
  const problems = [
    { t: 'Theft goes unnoticed', d: 'A few items disappear every week. By month-end, it adds up to lakhs — and nobody knows where the leak is.', k: '~₹3L/yr', kl: 'avg shrinkage' },
    { t: 'Staff performance is invisible', d: 'You can’t be in the store 14 hours a day. Idle staff during peak hours = lost sales nobody is measuring.', k: '38%', kl: 'idle time at peaks' },
    { t: 'Peak hours are guesswork', d: 'Should you put one cashier or two on a Sunday at 7 PM? Most owners answer with gut feel, not data.', k: '5–7 PM', kl: 'most missed window' },
  ];
  return (
    <Section bg="#fff" pad="140px 32px">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, marginBottom: 80 }}>
        <div>
          <Eyebrow color="var(--red)">The problem</Eyebrow>
          <H2>
            Most stores run on<br/>
            <span className="serif" style={{ fontStyle: 'italic', color: 'var(--text-mut)', fontWeight: 400 }}>trust</span>,
            not data.
          </H2>
        </div>
        <div style={{ paddingTop: 12 }}>
          <Lede style={{ fontSize: 22, color: 'var(--text)', maxWidth: 'none' }}>
            Indian retail loses an estimated <b>₹65,000 crore</b> a year to shrinkage,
            inefficiency, and missed peaks. The cameras to catch it are already on the
            ceiling — they just aren't <em className="serif">looking</em> for anything.
          </Lede>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {problems.map((p, i) => (
          <div key={i} style={{
            border: '1px solid var(--line)', borderRadius: 20, padding: 28,
            background: i === 0 ? 'var(--red-soft)' : '#fff',
            position: 'relative', overflow: 'hidden',
          }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 16, letterSpacing: 1 }}>
              {String(i+1).padStart(2,'0')} / 03
            </div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.5, marginBottom: 12, color: 'var(--ink)' }}>{p.t}</div>
            <div style={{ fontSize: 14.5, color: 'var(--text-mut)', lineHeight: 1.55, marginBottom: 24 }}>{p.d}</div>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 8,
              borderTop: '1px solid var(--line)', paddingTop: 16,
            }}>
              <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -1, color: i === 0 ? 'var(--red)' : 'var(--ink)' }}>{p.k}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-mut)' }}>{p.kl}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// PRODUCT INTRO — big editorial moment
// ─────────────────────────────────────────────────────────────
function ProductIntro() {
  return (
    <section style={{
      background: 'var(--ink)', color: '#fff', padding: '160px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* faint grid */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06,
        backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)',
        backgroundSize: '60px 60px',
      }}/>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <Eyebrow color="#A9BBFF">The product</Eyebrow>
        <h2 style={{
          fontSize: 96, fontWeight: 700, letterSpacing: -3.6, lineHeight: 0.95,
          margin: '0 0 32px',
        }}>
          Traditional CCTV <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'rgba(255,255,255,0.4)' }}>records</span>.<br/>
          Camily <span style={{ color: '#A9BBFF' }}>understands</span>.
        </h2>
        <p style={{ fontSize: 21, color: 'rgba(255,255,255,0.65)', lineHeight: 1.5, maxWidth: 720, margin: '0 auto 60px' }}>
          We're an AI co-pilot for retail. We watch every camera, every minute —
          spotting theft, idle staff, shelf gaps, and unhappy customers — and pinging
          your phone the moment something needs you.
        </p>
        {/* before / after split */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderRadius: 24, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)' }}>
          <div style={{ padding: 32, background: 'rgba(255,255,255,0.02)', textAlign: 'left', borderRight: '1px solid rgba(255,255,255,0.1)' }}>
            <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 14 }}>Before · Yesterday</div>
            <CCTVTile w="100%" h={200} scene="entrance" label="Camera 01" time="14:22:00" style={{ width: '100%' }}/>
            <div style={{ marginTop: 18, fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6 }}>
              4TB DVR. Tape gets reviewed only after something goes wrong. By then it's too late.
            </div>
          </div>
          <div style={{ padding: 32, background: 'rgba(63,107,255,0.06)', textAlign: 'left' }}>
            <div className="mono" style={{ fontSize: 11, color: '#A9BBFF', textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 14 }}>After · Today</div>
            <div style={{ position: 'relative' }}>
              <CCTVTile w="100%" h={200} scene="entrance" label="Camera 01" time="14:22:00"
                highlight={{ left: '40%', top: '20%', width: 70, height: 110 }} style={{ width: '100%' }}/>
              <div style={{
                position: 'absolute', bottom: 12, left: 12, right: 12,
                background: 'rgba(11,18,32,0.85)', backdropFilter: 'blur(8px)',
                padding: '10px 12px', borderRadius: 10, display: 'flex', gap: 8, alignItems: 'center',
              }}>
                <div style={{ width: 8, height: 8, borderRadius: 99, background: '#FB7185' }}/>
                <div style={{ fontSize: 12, color: '#fff', fontWeight: 600 }}>Suspicious behavior · 92% confidence</div>
                <div style={{ marginLeft: 'auto', fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>flagged</div>
              </div>
            </div>
            <div style={{ marginTop: 18, fontSize: 13, color: 'rgba(255,255,255,0.75)', lineHeight: 1.6 }}>
              Same camera. Now it texts you the moment it sees what matters.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FEATURE 1 — Theft & Loss Prevention
// ─────────────────────────────────────────────────────────────
function FeatureTheft() {
  return (
    <Section bg="#fff" pad="140px 32px" style={{ borderTop: '1px solid var(--line-soft)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow color="var(--red)">Feature 01 · Theft &amp; loss prevention</Eyebrow>
          <H2>Catch the leak<br/>before month-end.</H2>
          <Lede style={{ fontSize: 18, marginBottom: 36 }}>
            Our models are trained on thousands of hours of Indian retail footage — they know
            the difference between a customer comparing two SKUs and one quietly pocketing them.
            You get a notification within seconds, with the exact clip attached.
          </Lede>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['Real-time alerts', 'Push to your phone the moment behavior is flagged.'],
              ['Item-not-billed detection', 'Cross-checks pickup events against POS scans at the counter.'],
              ['Evidence clip + box', 'Every alert ships with 8 sec of footage and a bounding box.'],
              ['Zero false-alarm fatigue', 'Confidence threshold per store. We learn your shoppers.'],
            ].map(([t, d], i) => (
              <li key={i} style={{ display: 'flex', gap: 14 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 6, background: 'var(--red-soft)', color: 'var(--red)',
                  display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2,
                }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)' }}>{t}</div>
                  <div style={{ fontSize: 14, color: 'var(--text-mut)', lineHeight: 1.5, marginTop: 3 }}>{d}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
        {/* visual */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          <div style={{ position: 'relative' }}>
            <CCTVTile w={460} h={280} scene="aisle2" label="Aisle 3 · 15:42:08" time="REC" style={{ boxShadow: '0 30px 60px -20px rgba(15,21,36,0.3)' }}
              highlight={{ left: '32%', top: '28%', width: 90, height: 140 }}>
              <div style={{
                position: 'absolute', left: 32, bottom: 18, padding: '8px 12px',
                background: 'rgba(225,29,72,0.95)', borderRadius: 10, color: '#fff',
                fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4"><path d="M12 3l10 17H2z"/><path d="M12 10v4M12 17h.01"/></svg>
                Pocketing detected · 92%
              </div>
            </CCTVTile>
            {/* phone overlapping */}
            <div style={{ position: 'absolute', right: -120, top: 100 }}>
              <PhoneFrame src="pngs/03-alerts.png" alt="Alerts screen" w={240}/>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// FEATURE 2 — Footfall & Peak Hours
// ─────────────────────────────────────────────────────────────
function FeatureFootfall() {
  return (
    <Section bg="var(--bg)" pad="140px 32px">
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 80, alignItems: 'center' }}>
        {/* visual on left */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          <PhoneFrame src="pngs/05-footfall.png" alt="Footfall screen" w={320}/>
          {/* floating callout */}
          <div style={{
            position: 'absolute', top: 60, left: -30, background: '#fff',
            padding: '14px 16px', borderRadius: 14, boxShadow: '0 20px 40px -10px rgba(15,21,36,0.18)',
            border: '1px solid var(--line)', transform: 'rotate(-2deg)',
          }}>
            <div className="mono" style={{ fontSize: 10.5, color: 'var(--purple)', textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 4 }}>Peak detected</div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.5 }}>6 PM – 9 PM</div>
            <div style={{ fontSize: 12, color: 'var(--text-mut)', marginTop: 2 }}>Sunday is busiest · +42%</div>
          </div>
          <div style={{
            position: 'absolute', bottom: 80, right: -10, background: '#fff',
            padding: '14px 16px', borderRadius: 14, boxShadow: '0 20px 40px -10px rgba(15,21,36,0.18)',
            border: '1px solid var(--line)', transform: 'rotate(2deg)', width: 180,
          }}>
            <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-faint)', marginBottom: 6 }}>Visitors today</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.6 }}>124</div>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--green)' }}>↑ 16%</div>
            </div>
          </div>
        </div>
        <div>
          <Eyebrow color="var(--purple)">Feature 02 · Footfall &amp; peak hours</Eyebrow>
          <H2>Stop staffing<br/>by gut feel.</H2>
          <Lede style={{ fontSize: 18, marginBottom: 36 }}>
            Camily counts every visitor, separates new from returning, and learns your store's
            rhythm. So you know exactly when to add a cashier — and when to send someone home.
          </Lede>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              ['Live visitor count', 'Updated every minute. Compare today vs last 7 days.'],
              ['Heatmaps', 'See which aisles get traffic and which get ignored.'],
              ['New vs returning', 'Built from anonymized re-identification. No PII stored.'],
              ['Sunday vs weekday', 'Every chart, every metric, sliced by day-of-week.'],
            ].map(([t, d], i) => (
              <div key={i} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, padding: 18 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--ink)', marginBottom: 6 }}>{t}</div>
                <div style={{ fontSize: 13, color: 'var(--text-mut)', lineHeight: 1.5 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Hero, Problem, ProductIntro, FeatureTheft, FeatureFootfall });
