/* how-trust-privacy.jsx — Sections 5, 6, 7 */

const htpStyles = `
  /* Section 5 — How it works */
  .steps {
    margin-top: 48px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  @media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
  .step {
    position: relative;
    padding: 28px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--paper);
    display: flex; flex-direction: column; gap: 14px;
    min-height: 240px;
  }
  .step-num {
    font-family: var(--font-head);
    font-size: 56px; font-weight: 300;
    line-height: 1;
    color: var(--terracotta);
    letter-spacing: -0.04em;
    font-feature-settings: "lnum";
  }
  .step h3 { font-size: 22px; min-height: 2.4em; }
  .step p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
  .step .marker { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.12em; text-transform: uppercase; }
  .steps-foot {
    margin-top: 28px;
    padding: 18px 22px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    color: var(--ink-soft); font-size: 14.5px; line-height: 1.5;
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap;
  }
  .steps-foot b { color: var(--ink); font-weight: 600; }
  .steps-foot .sf-icon {
    width: 42px; height: 42px; border-radius: 11px;
    background: color-mix(in oklab, var(--terracotta-soft) 55%, var(--cream));
    color: var(--terracotta-deep);
    display: grid; place-items: center; flex-shrink: 0;
  }
  .steps-foot .sf-text { flex: 1; min-width: 220px; }

  /* Section 6 — Trust */
  .trust-grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
    margin-top: 48px;
  }
  @media (max-width: 980px) { .trust-grid { grid-template-columns: 1fr; gap: 32px; } }

  .trust-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 8px; }
  @media (max-width: 600px) { .trust-stats { grid-template-columns: 1fr; } }
  .stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 22px 20px;
    color: var(--cream);
  }
  .stat .num {
    font-family: var(--font-head); font-weight: 400;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1;
    color: var(--terracotta-soft);
    letter-spacing: -0.03em;
  }
  .stat .lbl { margin-top: 10px; font-size: 14px; color: color-mix(in oklab, var(--cream) 75%, transparent); line-height: 1.4; }

  .founder-card {
    background: color-mix(in oklab, var(--cream) 8%, var(--ink));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 22px;
    padding: 36px 32px;
    color: var(--cream);
    position: relative;
    overflow: hidden;
  }
  .founder-row { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
  .founder-photo {
    width: 64px; height: 64px; border-radius: 50%;
    background:
      radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--terracotta-soft) 60%, transparent) 0%, transparent 60%),
      linear-gradient(135deg, #6c7e9b 0%, #2e3f5e 100%);
    display: grid; place-items: center;
    font-family: var(--font-head);
    font-size: 26px; color: var(--cream);
    border: 2px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
    overflow: hidden;
  }
  .founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .founder-meta b { display: block; font-size: 16px; color: var(--cream); font-weight: 600; }
  .founder-meta span { font-size: 13px; color: color-mix(in oklab, var(--cream) 70%, transparent); }
  .founder-quote {
    font-family: var(--font-head);
    font-size: 22px; line-height: 1.4; font-weight: 400;
    color: var(--cream);
    margin-bottom: 24px;
  }
  .founder-body { color: color-mix(in oklab, var(--cream) 80%, transparent); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
  .founder-sig {
    font-family: 'Sacramento', cursive; font-style: normal;
    font-size: 46px; font-weight: 400; color: var(--terracotta-soft);
    line-height: 1.05;
    margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px;
  }
  .founder-sig small { display: block; font-family: var(--font-body); font-style: normal; font-size: 12px; color: color-mix(in oklab, var(--cream) 60%, transparent); margin-top: 4px; letter-spacing: 0.04em; }

  /* Section 7 — Privacy */
  .privacy-card {
    margin-top: 40px;
    padding: clamp(40px, 6vw, 64px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 24px;
    display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center;
  }
  @media (max-width: 880px) { .privacy-card { grid-template-columns: 1fr; gap: 32px; padding: 32px 28px; } }
  .privacy-art {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    background: var(--ink);
    color: var(--cream);
    display: grid; place-items: center;
    position: relative; overflow: hidden;
  }
  .privacy-art svg { width: 60%; height: 60%; }
  .privacy-art .orbit {
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, transparent 40%, color-mix(in oklab, var(--terracotta) 50%, transparent) 41%, transparent 41.6%),
                radial-gradient(circle at center, transparent 55%, rgba(255,255,255,0.15) 56%, transparent 56.6%);
    animation: spin 30s linear infinite;
  }
  .privacy-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 14px; }
  .privacy-list li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 15.5px; color: var(--ink-soft); line-height: 1.5;
  }
  .privacy-list li b { color: var(--ink); font-weight: 600; }
  .privacy-list .dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: color-mix(in oklab, var(--terracotta-soft) 60%, var(--cream));
    color: var(--terracotta-deep);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
`;

function HowItWorksSection({ productName }) {
  return (
    <section id="how" className="band-paper" data-screen-label="05 How it works">
      <div className="wrap">
        <SectionHead
          eyebrow="How it works"
          title={<>Three steps.<br /><span style={{ fontStyle: 'italic', color: 'var(--terracotta-deep)' }}>That's the whole product.</span></>}
          lead="No hardware to swap. No app to fight with. Talk to it once, and it stays out of your way."
        />
        <div className="steps">
          <Reveal className="step">
            <span className="marker">Step 1</span>
            <div className="step-num">01</div>
            <h3>Set up your camera</h3>
            <p>Use the {productName} Cam, or run {productName} on a spare phone you already have.<br />Most recent phone models are supported.</p>
          </Reveal>
          <Reveal className="step" delay={100}>
            <span className="marker">Step 2</span>
            <div className="step-num">02</div>
            <h3>Tell {productName} what you care about</h3>
            <p>Use plain language.<br />{productName} will ask follow-up questions to make sure it understands what you mean.</p>
          </Reveal>
          <Reveal className="step" delay={200}>
            <span className="marker">Step 3</span>
            <div className="step-num">03</div>
            <h3>Only get notified when it matters</h3>
            <p>{productName} learns your routine, filters out the noise, and only pings you for the real events.</p>
          </Reveal>
        </div>
        <Reveal className="steps-foot" delay={300}>
          <span className="sf-icon" aria-hidden>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2.5" y="5.5" width="15" height="11" rx="3" stroke="currentColor" strokeWidth="1.5"/><circle cx="10" cy="11" r="3" stroke="currentColor" strokeWidth="1.5"/><path d="M7 5.5l1-2h4l1 2" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>
          </span>
          <span className="sf-text">Prefer dedicated hardware? Meet the <b>{productName} Cam</b>, our own camera.</span>
          <a href="#survey" className="btn ghost sm">Request beta access <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ marginLeft: 6 }}><path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg></a>
        </Reveal>
      </div>
      <style dangerouslySetInnerHTML={{ __html: htpStyles }} />
    </section>
  );
}

function WhyTrustSection({ productName }) {
  return (
    <section id="trust" className="band-ink" data-screen-label="06 Why we built this">
      <div className="wrap">
        <Reveal><div className="eyebrow">Why we built this</div></Reveal>
        <div className="trust-grid">
          <Reveal className="stack" style={{ gap: 22 }}>
            <h2 style={{ maxWidth: 580 }}>
              We've been doing this for <span style={{ color: 'var(--terracotta-soft)', fontStyle: 'italic' }}>years</span>. Just not in homes.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, maxWidth: 540 }}>
              For years, our team built AI that watches over public spaces.<br />
              We helped catch elderly falls, spot when a child got hurt, and keep public places safe.<br />
              That work has saved lives.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, maxWidth: 540, marginTop: 8 }}>
              But every home has those same needs.<br />
              The products that watch over them are scattered across a dozen apps.<br />
              So we built one that does all of it.
            </p>
          </Reveal>

          <Reveal className="founder-card" delay={150}>
            <div className="founder-row">
              <div className="founder-photo"><img src="images/founder.jpg" alt="Elena" /></div>
              <div className="founder-meta">
                <b>Elena</b>
                <span>Founder · {productName}</span>
              </div>
            </div>
            <div className="founder-quote">
              "I'm caring for my parents and my kids at the same time.<br />
              I built {productName} because I needed it myself."
            </div>
            <div className="founder-body">
              I tried every camera and app, and none of them worked together.<br />
              {productName} is the one thing I wished already existed.
            </div>
            <div className="founder-sig">
              Elena
              <small>FOUNDER &nbsp;·&nbsp; {productName.toUpperCase()}</small>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PrivacySection({ productName }) {
  return (
    <section id="privacy" data-screen-label="07 Privacy">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">Privacy &amp; trust</div>
        </Reveal>
        <Reveal delay={60}>
          <h2 style={{ marginTop: 14, maxWidth: 760 }}>
            Your home is yours.<br /><span style={{ fontStyle: 'italic', color: 'var(--terracotta-deep)' }}>Your footage is yours.</span>
          </h2>
        </Reveal>
        <Reveal className="privacy-card" delay={120}>
          <div className="privacy-art" aria-hidden>
            <div className="orbit" />
            <svg viewBox="0 0 60 60" fill="none">
              <path d="M30 4 L50 14 v18 c0 12-10 20-20 24 -10-4-20-12-20-24 V14 Z" stroke="var(--terracotta-soft)" strokeWidth="2" strokeLinejoin="round"/>
              <path d="M22 30 l6 6 12-12" stroke="var(--cream)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <h3 style={{ fontSize: 26, lineHeight: 1.2 }}>
              Held to a standard most home cameras never meet.
            </h3>
            <p style={{ marginTop: 14, color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.55 }}>
              {productName}'s footage storage and security are built to meet ISO 27001, the international standard for information security.
            </p>
            <ul className="privacy-list">
              <li>
                <span className="dot"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <span><b>72-hour clips by default.</b> Save what matters; the rest deletes itself.</span>
              </li>
              <li>
                <span className="dot"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <span><b>Never used to train other models.</b> Your home's data stays your home's.</span>
              </li>
              <li>
                <span className="dot"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <span><b>One-tap delete, anytime.</b> No support email, no waiting period.</span>
              </li>
            </ul>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- Section: Early testers ---- */
const tmStyles = `
  .tm-grid {
    margin-top: 44px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  }
  @media (max-width: 880px) { .tm-grid { grid-template-columns: 1fr; } }
  .tm-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px 26px 22px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .tm-stars { display: flex; gap: 3px; color: var(--terracotta); }
  .tm-quote {
    font-family: var(--font-head);
    font-size: 18px; line-height: 1.5; font-weight: 400;
    color: var(--ink);
  }
  .tm-who {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto;
    border-top: 1px solid var(--line); padding-top: 16px;
  }
  .tm-av {
    width: 40px; height: 40px; border-radius: 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }
  .tm-card:nth-child(1) .tm-av { background-image: url('images/tm-1.jpg'); }
  .tm-card:nth-child(2) .tm-av { background-image: url('images/tm-2.jpg'); }
  .tm-card:nth-child(3) .tm-av { background-image: url('images/tm-3.jpg'); }
  .tm-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
  .tm-tag { font-size: 12.5px; color: var(--ink-soft); }
`;

const TESTIMONIALS = [
  {
    initials: 'MR', name: 'Maya R.', tag: 'Watching over a parent',
    quote: 'I used to open the camera app five times a day. Now I get one note if Dad hasn\'t been up by nine. I check it less, and I worry less.',
  },
  {
    initials: 'TK', name: 'Tom K.', tag: 'Home with a cat',
    quote: 'My old camera buzzed every time the cat moved. Care only tells me if she\'s somewhere she shouldn\'t be. The quiet is the whole point.',
  },
  {
    initials: 'PN', name: 'Priya N.', tag: 'Parents of two',
    quote: 'Two kids, a sitter, three cameras that never agreed. Care is the first thing that just handles it. I told it what mattered once.',
  },
];

function TestimonialsSection() {
  return (
    <section id="voices" data-screen-label="08 Early testers">
      <div className="wrap">
        <SectionHead
          eyebrow="Early testers"
          title={<>The first homes are<br /><span style={{ fontStyle: 'italic', color: 'var(--terracotta-deep)' }}>already quieter.</span></>}
          lead="A few notes from the first households living with Care. Different homes, same relief: it slips into the day."
        />
        <div className="tm-grid">
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={i} className="tm-card" delay={i * 90}>
              <div className="tm-stars" aria-hidden>
                {[0, 1, 2, 3, 4].map((s) => (
                  <svg key={s} width="15" height="15" viewBox="0 0 15 15" fill="currentColor"><path d="M7.5 1.2l1.7 3.8 4.1.4-3 2.8.8 4-3.6-2-3.6 2 .8-4-3-2.8 4.1-.4z" /></svg>
                ))}
              </div>
              <div className="tm-quote">
                {t.quote.split(/(?<=[.?!])\s+/).map((s, j, arr) => (
                  <React.Fragment key={j}>
                    {j > 0 && <br />}
                    {(j === 0 ? '“' : '') + s + (j === arr.length - 1 ? '”' : '')}
                  </React.Fragment>
                ))}
              </div>
              <div className="tm-who">
                <div className="tm-av" aria-hidden />
                <div>
                  <div className="tm-name">{t.name}</div>
                  <div className="tm-tag">{t.tag}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style dangerouslySetInnerHTML={{ __html: tmStyles }} />
    </section>
  );
}

Object.assign(window, { HowItWorksSection, WhyTrustSection, PrivacySection, TestimonialsSection });