// landing-sections-2.jsx — Conversion, Staff, Insights, UseCases, VsTraditional

// ─────────────────────────────────────────────────────────────
// FEATURE 3 — Conversion Rate
// ─────────────────────────────────────────────────────────────
function FeatureConversion() {
  return (
    <Section bg="#fff" pad="140px 32px">
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow color="var(--amber)">Feature 03 · Conversion &amp; time spent</Eyebrow>
          <H2>The gap between<br/>walked-in and<br/>walked-out-buying.</H2>
          <Lede style={{ fontSize: 18, marginBottom: 36 }}>
            Camily knows how many people came in, how long they browsed, and whether they
            actually bought. The delta is your <em className="serif">lost revenue</em> — and
            we tell you exactly which hour and aisle leaked it.
          </Lede>
          <div style={{
            background: 'var(--bg)', borderRadius: 18, padding: 28,
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
            border: '1px solid var(--line)',
          }}>
            {[
              ['Visitors', '124', null, 'var(--ink)'],
              ['Buyers', '47', null, 'var(--ink)'],
              ['Conversion', '38%', '↓ 5%', 'var(--red)'],
              ['Lost sales', '₹4,200', null, 'var(--red)'],
            ].map(([l, v, d, col], i) => (
              <div key={i}>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 6 }}>{l}</div>
                <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, color: col }}>{v}</div>
                {d && <div style={{ fontSize: 11.5, color: col, fontWeight: 600, marginTop: 2 }}>{d} vs yesterday</div>}
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', alignItems: 'flex-end' }}>
          <PhoneFrame src="pngs/06-time.png" alt="Time spent" w={250} style={{ transform: 'rotate(-3deg) translateY(20px)' }}/>
          <PhoneFrame src="pngs/07-conversion.png" alt="Conversion" w={280} style={{ transform: 'rotate(2deg)' }}/>
        </div>
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// FEATURE 4 — Staff Efficiency (no screenshot, custom illustration)
// ─────────────────────────────────────────────────────────────
function FeatureStaff() {
  const staff = [
    { name: 'Ramesh K.', role: 'Cashier', busy: 78, idle: 22, on: true },
    { name: 'Priya S.', role: 'Floor', busy: 64, idle: 36, on: true },
    { name: 'Akash M.', role: 'Stocking', busy: 41, idle: 59, on: true, flag: true },
    { name: 'Neha P.', role: 'Floor', busy: 71, idle: 29, on: true },
  ];
  return (
    <Section bg="var(--ink)" pad="140px 32px" style={{ color: '#fff' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow color="#A9BBFF">Feature 04 · Staff efficiency</Eyebrow>
          <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: -1.6, lineHeight: 1.04, margin: '0 0 24px' }}>
            See where the<br/>day went.
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,0.65)', maxWidth: 560, margin: 0 }}>
            Anonymous person-tracking gives every staff member a busy-vs-idle timeline. No
            badges, no clock-ins, no spreadsheets — Camily watches and reports at end-of-day.
          </p>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['Idle time per shift', 'See who was helping customers and who was on their phone.'],
              ['Coverage at peaks', 'Camily flags when peak-hour aisles went unattended.'],
              ['Coaching, not surveillance', 'Aggregate views; no facial recognition required.'],
            ].map(([t, d], i) => (
              <div key={i} style={{ display: 'flex', gap: 14 }}>
                <div className="mono" style={{ fontSize: 12, color: '#A9BBFF', minWidth: 28, paddingTop: 3 }}>0{i+1}</div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{t}</div>
                  <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.55)', lineHeight: 1.5 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* dashboard mock */}
        <div style={{ background: 'var(--ink-2)', borderRadius: 20, padding: 28, border: '1px solid rgba(255,255,255,0.08)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Staff · today</div>
            <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>Mon, 24 May · 18:42</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {staff.map((s, i) => (
              <div key={i} style={{
                background: s.flag ? 'rgba(245,158,11,0.08)' : 'rgba(255,255,255,0.03)',
                border: s.flag ? '1px solid rgba(245,158,11,0.25)' : '1px solid rgba(255,255,255,0.06)',
                borderRadius: 12, padding: 14, display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 99, background: 'rgba(255,255,255,0.08)',
                  display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700, color: '#fff',
                }}>{s.name.split(' ').map(x => x[0]).join('')}</div>
                <div style={{ minWidth: 150 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{s.name}</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{s.role}</div>
                </div>
                {/* timeline bar */}
                <div style={{ flex: 1, height: 10, borderRadius: 99, background: 'rgba(255,255,255,0.06)', overflow: 'hidden', display: 'flex' }}>
                  <div style={{ width: `${s.busy}%`, background: s.flag ? 'var(--amber)' : '#34D399' }}/>
                </div>
                <div style={{ minWidth: 70, textAlign: 'right' }}>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{s.busy}%</div>
                  <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.5)' }}>active</div>
                </div>
                {s.flag && (
                  <div className="mono" style={{
                    fontSize: 10, color: 'var(--amber)', padding: '3px 8px',
                    background: 'rgba(245,158,11,0.1)', borderRadius: 99, fontWeight: 600,
                  }}>FLAG</div>
                )}
              </div>
            ))}
          </div>
          {/* hourly heat */}
          <div style={{ marginTop: 22, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>Hourly coverage · last 12h</div>
            <div style={{ display: 'flex', gap: 4 }}>
              {[2,3,3,4,4,3,2,3,4,4,3,1].map((v, i) => (
                <div key={i} style={{
                  flex: 1, height: 28, borderRadius: 4,
                  background: `rgba(63,107,255,${0.15 + v * 0.18})`,
                }}/>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
              <div className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)' }}>9 AM</div>
              <div className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)' }}>9 PM</div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// FEATURE 5 — AI Insights
// ─────────────────────────────────────────────────────────────
function FeatureInsights() {
  const insights = [
    { tone: 'green', t: 'High footfall, low conversion', d: 'You had 38 visitors between 5–7 PM but only 9 bought. Add a second cashier next Sunday.', tag: 'Action' },
    { tone: 'amber', t: 'Two SKUs picked but never billed', d: 'Maggi 70g and Lays Magic Masala were touched 14× today, scanned only 6×. Worth checking placement.', tag: 'Investigate' },
    { tone: 'purple', t: 'Aisle 4 is dead space', d: 'Average dwell time 0.4 sec. Consider moving snacks here from Aisle 6 (your highest-traffic).', tag: 'Layout' },
    { tone: 'blue', t: 'Re-order before Friday', d: 'Bru coffee 100g sells 12 units/day. Current stock: 38 units. You\'ll run out by Friday morning.', tag: 'Stock' },
  ];
  return (
    <Section bg="#fff" pad="140px 32px">
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 60px' }}>
        <Eyebrow color="var(--brand)">Feature 05 · AI Insights</Eyebrow>
        <H2 style={{ fontSize: 64 }}>The store manager<br/>that <em className="serif" style={{ fontWeight: 400, color: 'var(--brand)' }}>never sleeps</em>.</H2>
        <Lede style={{ margin: '0 auto', fontSize: 19 }}>
          Every night, Camily summarizes the day and tells you the 3 things to fix tomorrow.
          No dashboards to interpret — just plain-English nudges in the language you prefer.
        </Lede>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {insights.map((ins, i) => {
            const palette = {
              green:  { bg: 'var(--green-soft)',  fg: 'var(--green)' },
              amber:  { bg: 'var(--amber-soft)',  fg: 'var(--amber)' },
              purple: { bg: 'var(--purple-soft)', fg: 'var(--purple)' },
              blue:   { bg: 'var(--brand-soft)',  fg: 'var(--brand)' },
            }[ins.tone];
            return (
              <div key={i} style={{
                border: '1px solid var(--line)', borderRadius: 16, padding: 20,
                display: 'flex', gap: 16, alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, background: palette.bg, color: palette.fg,
                  display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 18, fontWeight: 700,
                }}>
                  {i+1}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                    <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink)' }}>{ins.t}</div>
                    <div className="mono" style={{
                      fontSize: 10, padding: '3px 8px', background: palette.bg, color: palette.fg,
                      borderRadius: 99, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase',
                    }}>{ins.tag}</div>
                  </div>
                  <div style={{ fontSize: 14, color: 'var(--text-mut)', lineHeight: 1.55 }}>{ins.d}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <PhoneFrame src="pngs/08-insights.png" alt="Insights" w={340}/>
        </div>
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// USE CASES
// ─────────────────────────────────────────────────────────────
function UseCases() {
  const cases = [
    { tag: 'Kirana &amp; convenience', t: 'Catch the ₹50 packet', d: 'Small high-margin items disappear daily. Camily watches every shelf even when you\'re at the counter.', stat: '₹3.2L', stl: 'avg saved / yr' },
    { tag: 'Supermarkets', t: 'Staff the right aisles', d: 'Heatmaps + footfall make Sunday-evening staffing a calendar invite, not a panic.', stat: '+18%', stl: 'peak-hour conversion' },
    { tag: 'Pharmacies', t: 'No prescription, no item', d: 'Custom rules ensure Schedule-H items only leave after the right scan.', stat: '0', stl: 'audit findings YTD' },
    { tag: 'Apparel &amp; accessories', t: 'Trial-room intelligence', d: 'Track items in vs items out at the trial room — without a single human watching tape.', stat: '< 4hr', stl: 'evidence ready' },
    { tag: 'QSR &amp; cafés', t: 'Queue too long?', d: 'Camily pings the manager when the line crosses 4 — before customers walk out.', stat: '−42%', stl: 'walkaways' },
    { tag: 'Multi-store chains', t: 'Compare every branch', d: 'One dashboard for 5 stores or 500. Rank by conversion, not just revenue.', stat: '1 view', stl: '5 → 500 stores' },
  ];
  return (
    <Section bg="var(--bg)" pad="140px 32px">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, marginBottom: 56, alignItems: 'end' }}>
        <div>
          <Eyebrow>Built for Indian retail</Eyebrow>
          <H2>One platform.<br/>Every kind of store.</H2>
        </div>
        <div>
          <Lede style={{ fontSize: 18, maxWidth: 'none' }}>
            From a 200 sq.ft. kirana to a 50-store regional chain — Camily ships with rules
            and dashboards tuned to how each format actually loses (and makes) money.
          </Lede>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {cases.map((c, i) => (
          <div key={i} style={{
            background: '#fff', borderRadius: 20, padding: 28,
            border: '1px solid var(--line)', display: 'flex', flexDirection: 'column',
            minHeight: 260,
          }}>
            <div className="mono" dangerouslySetInnerHTML={{ __html: c.tag }} style={{
              fontSize: 11, color: 'var(--brand)', textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 16,
            }}/>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.6, color: 'var(--ink)', marginBottom: 10 }}>{c.t}</div>
            <div style={{ fontSize: 14, color: 'var(--text-mut)', lineHeight: 1.55, flex: 1 }}>{c.d}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 24, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -1, color: 'var(--ink)' }}>{c.stat}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-mut)' }}>{c.stl}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ─────────────────────────────────────────────────────────────
// VS TRADITIONAL — comparison table
// ─────────────────────────────────────────────────────────────
function VsTraditional() {
  const rows = [
    ['Setup time', '2–3 days, electrician + cabling', '< 10 min, software only'],
    ['Hardware', 'New cameras, NVR, cables', 'Works with your existing CCTV'],
    ['What it sees', 'Only what tape captures', 'Counts, classifies, flags in real time'],
    ['When you find out', 'After-the-fact, on review', 'Push notification within seconds'],
    ['Footfall &amp; conversion', 'Manual count', 'Automatic, 24×7'],
    ['Staff coverage', 'Roster guesswork', 'Hourly heatmaps'],
    ['Storage cost', '4 TB DVR + replacement', 'Cloud included'],
    ['Reports', 'Print-out monthly', 'Live mobile app + WhatsApp digest'],
  ];
  return (
    <Section bg="#fff" pad="140px 32px">
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
        <Eyebrow>The difference</Eyebrow>
        <H2 style={{ fontSize: 64 }}>Same camera. Different<br/>kind of <em className="serif" style={{ fontWeight: 400, color: 'var(--brand)' }}>answer</em>.</H2>
      </div>
      <div style={{
        border: '1px solid var(--line)', borderRadius: 20, overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr',
      }}>
        <div style={{ padding: '20px 24px', background: 'var(--bg)', borderBottom: '1px solid var(--line)' }}/>
        <div style={{ padding: '20px 24px', background: 'var(--bg)', borderBottom: '1px solid var(--line)', borderLeft: '1px solid var(--line)' }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--text-mut)', textTransform: 'uppercase', letterSpacing: 1.2 }}>Traditional</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>CCTV + DVR</div>
        </div>
        <div style={{ padding: '20px 24px', background: 'var(--ink)', color: '#fff', borderBottom: '1px solid var(--line)' }}>
          <div className="mono" style={{ fontSize: 11, color: '#A9BBFF', textTransform: 'uppercase', letterSpacing: 1.2 }}>With Camily AI</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>Same cameras</div>
        </div>
        {rows.map((r, i) => (
          <React.Fragment key={i}>
            <div style={{
              padding: '18px 24px', fontSize: 14, fontWeight: 600, color: 'var(--ink)',
              borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--line)',
              background: i % 2 ? 'var(--bg)' : '#fff',
            }} dangerouslySetInnerHTML={{ __html: r[0] }}/>
            <div style={{
              padding: '18px 24px', fontSize: 14, color: 'var(--text-mut)',
              borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--line)',
              borderLeft: '1px solid var(--line)',
              background: i % 2 ? 'var(--bg)' : '#fff',
            }} dangerouslySetInnerHTML={{ __html: r[1] }}/>
            <div style={{
              padding: '18px 24px', fontSize: 14, color: 'var(--text)',
              borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--line)',
              fontWeight: 500,
              background: i % 2 ? 'rgba(63,107,255,0.04)' : 'rgba(63,107,255,0.025)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{
                width: 18, height: 18, borderRadius: 99, background: 'var(--brand)',
                display: 'inline-grid', placeItems: 'center', flexShrink: 0,
              }}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
              </span>
              <span dangerouslySetInnerHTML={{ __html: r[2] }}/>
            </div>
          </React.Fragment>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { FeatureConversion, FeatureStaff, FeatureInsights, UseCases, VsTraditional });
