/* problem-difference.jsx — Sections 2 & 3 */

const pdStyles = `
  .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
  @media (max-width: 880px) { .quote-grid { grid-template-columns: 1fr; } }
  .quote-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px 26px 24px;
    position: relative;
    display: flex; flex-direction: column; gap: 16px;
    min-height: 240px;
  }
  .quote-card::before {
    content: "\\201C";
    font-family: var(--font-head);
    font-size: 80px;
    line-height: 0.6;
    position: absolute; top: 24px; left: 22px;
    color: var(--terracotta);
    opacity: 0.45;
  }
  .quote-card .body {
    font-family: var(--font-head);
    font-size: 19px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--ink);
    margin-top: 28px;
    position: relative;
    z-index: 1;
  }
  .quote-card .src {
    font-size: 13px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    padding-top: 14px;
    display: flex; align-items: center; gap: 10px;
    margin-top: auto;
  }
  .quote-card .src .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 999px;
    background: color-mix(in oklab, var(--terracotta-soft) 50%, transparent);
    color: var(--terracotta-deep);
    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  }

  .problem-lead {
    max-width: 720px; font-size: clamp(22px, 2vw, 28px);
    font-family: var(--font-head); font-weight: 400; line-height: 1.3;
    color: var(--ink); letter-spacing: -0.01em;
  }
  .problem-lead em { font-style: italic; color: var(--terracotta-deep); }
  .problem-close {
    margin-top: 36px; padding: 22px 26px;
    background: color-mix(in oklab, var(--ink) 96%, var(--terracotta));
    color: var(--cream);
    border-radius: 16px;
    display: flex; align-items: center; gap: 16px;
    font-size: 16px; line-height: 1.5;
  }
  .problem-close .num {
    font-family: var(--font-head); font-size: 44px; line-height: 1;
    color: var(--terracotta-soft); font-weight: 400; letter-spacing: -0.02em;
    min-width: 84px;
  }
  @media (max-width: 600px) {
    .problem-close { flex-direction: column; align-items: flex-start; }
    .problem-close .num { min-width: 0; }
  }

  /* Section 3 — Difference */
  .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; align-items: stretch; }
  @media (max-width: 880px) { .diff-grid { grid-template-columns: 1fr; } }
  .diff-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 0;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .diff-card .hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--line);
  }
  .diff-card .hd .tag {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500;
  }
  .diff-card.then .hd { background: color-mix(in oklab, var(--cream-2) 80%, var(--cream)); }
  .diff-card.now  .hd { background: color-mix(in oklab, var(--terracotta-soft) 65%, var(--cream)); }
  .diff-card.now  .hd .tag { color: var(--terracotta-deep); }
  .diff-card .body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
  .diff-card .cap { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 14px; }

  /* The 'then' camera-app screenshot */
  .legacy-shot {
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: 10px;
    border: 1px solid var(--line);
  }

  /* The 'now' conversation */
  .convo {
    display: flex; flex-direction: column; gap: 12px;
    font-size: 15px;
    line-height: 1.5;
  }
  .convo .row { display: flex; gap: 10px; align-items: flex-start; }
  .convo .row.r-you { justify-content: flex-end; }
  .convo .msg {
    padding: 11px 15px;
    border-radius: 16px;
    max-width: 85%;
    border: 1px solid var(--line);
    background: var(--cream);
  }
  .convo .row.r-you .msg { background: var(--ink); color: var(--cream); border-color: var(--ink); border-bottom-right-radius: 6px; }
  .convo .row.r-sense .msg { background: var(--paper); border-bottom-left-radius: 6px; }
  .convo .who { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-deep); font-weight: 500; margin-bottom: 4px; }
  .convo .row.r-you .who { color: var(--terracotta-soft); text-align: right; }

  .convo .row { opacity: 0; transform: translateY(8px); transition: all .5s ease; }
  .convo .row.show { opacity: 1; transform: none; }

  .footnote {
    margin-top: 36px; padding: 20px 22px;
    background: color-mix(in oklab, var(--cream-2) 70%, var(--cream));
    border-radius: 14px;
    font-size: 15px; color: var(--ink-soft);
    display: flex; gap: 14px; align-items: flex-start;
    border-left: 3px solid var(--terracotta);
  }
  .footnote svg { flex-shrink: 0; color: var(--terracotta-deep); }
`;

function QuoteCard({ body, who, vendor }) {
  return (
    <Reveal className="quote-card">
      <div className="body">{body}</div>
      <div className="src">
        <span className="badge">{vendor}</span>
        <span>{who}</span>
      </div>
    </Reveal>
  );
}

function ProblemSection() {
  return (
    <section id="problem" data-screen-label="02 Problem">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">The problem</div>
        </Reveal>
        <Reveal delay={60}>
          <h2 style={{ marginTop: 14, maxWidth: 820 }}>
            Most home cameras notify you about <em style={{ fontStyle: 'italic', color: 'var(--terracotta-deep)' }}>everything.</em>
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p className="problem-lead" style={{ marginTop: 16 }}>
            So you stop checking.<br />
            Then you miss what mattered.
          </p>
        </Reveal>

        <div className="quote-grid">
          <QuoteCard
            body={`"It's 11pm and a red car drove past. I got four notifications. I felt watched in my own house."`}
            who="Anonymous user"
            vendor="R***"
          />
          <QuoteCard
            body={`"Sunlight through the trees moves. My camera screams 'person detected' every afternoon at 4pm. I disabled alerts a month ago."`}
            who="Anonymous user"
            vendor="N***"
          />
          <QuoteCard
            body={`"Setting up zones took 40 minutes. Drew three. Still get pizza-delivery alerts every night."`}
            who="Anonymous user"
            vendor="A***"
          />
        </div>

        <Reveal className="problem-close" delay={200}>
          <div className="num">≈ all</div>
          <div>
            Recognize any of these?<br />
            <b style={{ color: 'var(--cream)', fontWeight: 600 }}>Among the people we talked to, nearly every one of them disabled notifications within 90 days.</b>
          </div>
        </Reveal>
      </div>
      <style dangerouslySetInnerHTML={{ __html: pdStyles }} />
    </section>
  );
}

function LegacyMock() {
  return (
    <img className="legacy-shot" src="images/legacy-app.jpg" alt="A traditional camera app, full of zones, sliders and settings" />
  );
}

const CONVO_LINES = [
  { who: 'you',   text: 'Tell me when someone approaches the garage before I get home.' },
  { who: 'sense', text: 'Got it. What time do you usually get home?' },
  { who: 'you',   text: 'Around 6pm on weekdays.' },
  { who: 'sense', text: 'Should I include your usual delivery people, or only unfamiliar visitors?' },
  { who: 'you',   text: 'Only unfamiliar ones.' },
  { who: 'sense', text: "Done. I'll watch the garage and let you know." },
];

function AnimatedConvo() {
  const [shown, setShown] = React.useState(1);
  React.useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i += 1;
      setShown((s) => Math.min(s + 1, CONVO_LINES.length));
      if (i >= CONVO_LINES.length - 1) clearInterval(id);
    }, 900);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="convo">
      {CONVO_LINES.map((l, i) => (
        <div key={i} className={`row r-${l.who} ${i < shown ? 'show' : ''}`} style={{ transitionDelay: `${i * 30}ms` }}>
          <div className="msg">
            <div className="who">{l.who === 'you' ? 'You' : 'Care'}</div>
            {l.text}
          </div>
        </div>
      ))}
    </div>
  );
}

function DifferenceSection() {
  return (
    <section id="difference" className="band-paper" data-screen-label="03 Difference">
      <div className="wrap">
        <SectionHead
          eyebrow="The difference"
          title={<>Stop tuning your camera.<br /><span style={{ fontStyle: 'italic', color: 'var(--terracotta-deep)' }}>Just tell it what you want.</span></>}
          lead="The old way: zone-drawing, slider-tuning, schedule-stacking, and still false alarms. The new way is a conversation."
        />
        <div className="diff-grid">
          <Reveal className="diff-card then">
            <div className="hd">
              <span className="tag">Then · CamHome 2024</span>
              <span style={{ fontSize: 12, color: 'var(--ink-soft)' }}>40+ minutes of setup</span>
            </div>
            <div className="body">
              <LegacyMock />
              <p className="cap">You drew zones, set schedules, tuned sensitivity.<br />Then dialed it down because false alarms drove you crazy.</p>
            </div>
          </Reveal>
          <Reveal className="diff-card now" delay={120}>
            <div className="hd">
              <span className="tag">Now · Care</span>
              <span style={{ fontSize: 12, color: 'var(--terracotta-deep)', fontWeight: 500 }}>~40 seconds</span>
            </div>
            <div className="body">
              <AnimatedConvo />
              <p className="cap">Plain language.<br />Care asks the follow-ups.<br />You're done before the kettle boils.</p>
            </div>
          </Reveal>
        </div>

        <Reveal className="footnote" delay={160}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2 L12 8 L18 8 L13 12 L15 18 L10 14 L5 18 L7 12 L2 8 L8 8 Z" fill="currentColor" /></svg>
          <div>
            Care asks the right questions because it learned from <b style={{ color: 'var(--ink)' }}>real-world safety monitoring, not guesswork.</b> It knows what matters and what doesn't.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { ProblemSection, DifferenceSection });