/* usecases.jsx — Section 4 */

const ucStyles = `
  .uc-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }
  /* 5 cards: 2-2-1 large or asymmetrical. We use spans: A:3, B:3, C:2, D:2, E:2 */
  .uc-card:nth-child(1) { grid-column: span 3; }
  .uc-card:nth-child(2) { grid-column: span 3; }
  .uc-card:nth-child(3) { grid-column: span 2; }
  .uc-card:nth-child(4) { grid-column: span 2; }
  .uc-card:nth-child(5) { grid-column: span 2; }
  @media (max-width: 1080px) {
    .uc-grid { grid-template-columns: repeat(2, 1fr); }
    .uc-card:nth-child(n) { grid-column: span 1; }
    .uc-card:nth-child(5) { grid-column: span 2; }
  }
  @media (max-width: 640px) {
    .uc-grid { grid-template-columns: 1fr; }
    .uc-card:nth-child(n) { grid-column: span 1; }
  }

  .uc-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 26px 26px 22px;
    display: flex; flex-direction: column;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
    min-height: 340px;
    text-align: left;
    color: inherit;
    font-family: inherit;
  }
  .uc-card:hover { transform: translateY(-3px); border-color: var(--terracotta); }
  .uc-card.selected {
    background: var(--ink); color: var(--cream); border-color: var(--ink);
  }
  .uc-card.selected h3 { color: var(--cream); }
  .uc-card.selected .uc-quote { color: var(--cream); }
  .uc-card.selected .uc-desc { color: color-mix(in oklab, var(--cream) 80%, transparent); }
  .uc-card.selected .uc-tag { background: rgba(255,255,255,0.12); color: var(--terracotta-soft); border-color: rgba(255,255,255,0.18); }
  .uc-card.selected .uc-cta { background: var(--terracotta); color: #fff; }

  .uc-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in oklab, var(--terracotta-soft) 55%, var(--cream));
    color: var(--terracotta-deep);
    display: grid; place-items: center;
    margin-bottom: 18px;
    flex-shrink: 0;
  }
  .uc-card.selected .uc-icon { background: rgba(255,255,255,0.08); color: var(--terracotta-soft); }
  .uc-photo {
    display: block;
    width: calc(100% + 52px);
    height: 190px;
    object-fit: cover;
    margin: -26px -26px 18px;
  }
  .uc-tag {
    position: absolute; top: 22px; right: 22px;
    padding: 4px 10px;
    background: color-mix(in oklab, var(--cream-2) 70%, var(--cream));
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  }
  .uc-card h3 { margin-top: 4px; }
  .uc-quote {
    font-family: var(--font-head);
    font-size: 17px; font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
    font-style: italic;
    margin: 14px 0 14px;
    padding-left: 14px;
    border-left: 2px solid var(--terracotta);
    quote-wrap: pretty;
  }
  .uc-desc {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .uc-cta {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13.5px; font-weight: 500;
    color: var(--ink);
    transition: background .25s ease, color .25s ease;
  }
  .uc-card:hover .uc-cta { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
  .uc-continue { margin-top: 32px; display: flex; justify-content: center; }
`;

const USE_CASES = [
  {
    id: 'A', tag: 'Elderly care',
    img: 'images/uc-parents.jpg?v=12',
    title: 'For your parents',
    icon: (<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="7" r="4" stroke="currentColor" strokeWidth="1.5"/><path d="M3 19c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>),
    quote: '"If grandma stays in the bathroom longer than usual, alert me. Not if it\'s just a normal visit."',
    desc: 'Care asks how long is normal, watches for the rare exception, and only pings you when it\'s actually unusual.',
  },
  {
    id: 'B', tag: 'Pets',
    img: 'images/uc-pets.jpg?v=12',
    title: 'For your pets',
    icon: (<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M5 15c0-3.3 2.7-6 6-6s6 2.7 6 6v3H5v-3z" stroke="currentColor" strokeWidth="1.5"/><circle cx="7" cy="6" r="2" stroke="currentColor" strokeWidth="1.5"/><circle cx="15" cy="6" r="2" stroke="currentColor" strokeWidth="1.5"/><circle cx="3" cy="11" r="1.6" stroke="currentColor" strokeWidth="1.5"/><circle cx="19" cy="11" r="1.6" stroke="currentColor" strokeWidth="1.5"/></svg>),
    quote: '"If the dog has an accident while I\'m out, save the video so I know which spot to clean."',
    desc: 'Care watches for the specific behavior, captures the moment, skips the 99% of the time when nothing happens.',
  },
  {
    id: 'C', tag: 'Security',
    img: 'images/uc-home.jpg?v=12',
    title: 'For your home',
    icon: (<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 2 L19 7v8c0 3-3.5 5-8 5s-8-2-8-5V7z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/><path d="M8 12l2.5 2.5L15 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>),
    quote: '"If someone I don\'t know approaches the garage between 5-7pm, ping me. Otherwise stay quiet."',
    desc: 'No motion zones. No schedules. No red-car false alarms. Just the alerts you actually wanted.',
  },
  {
    id: 'D', tag: 'Kids',
    img: 'images/uc-baby.jpg?v=12',
    title: 'For your kids',
    icon: (<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="8" r="4.5" stroke="currentColor" strokeWidth="1.5"/><path d="M11 12c-3.3 0-7 1.5-7 5v3h14v-3c0-3.5-3.7-5-7-5z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>),
    quote: '"If the baby is crying for more than 2 minutes and no one\'s gone to them, alert me."',
    desc: 'Care combines audio, motion, and time, so you only hear about it when it\'s actually needed.',
  },
  {
    id: 'E', tag: 'Audio',
    img: 'images/uc-night.jpg?v=12',
    title: 'When sound matters more than sight',
    icon: (<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M4 14V8h4l6-5v16l-6-5H4z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/><path d="M17 8c1.3 1 2 2 2 3s-.7 2-2 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>),
    quote: '"If the smoke alarm goes off while I\'m out, call me immediately. If glass breaks at night, alert everyone."',
    desc: 'Care listens too, for the things video can\'t show.',
  },
];

function UseCasesSection({ selected, setSelected, scrollToSurvey }) {
  const selectedUc = USE_CASES.find((u) => u.id === selected);
  return (
    <section id="use-cases" data-screen-label="04 Use cases">
      <div className="wrap">
        <SectionHead
          eyebrow="Built for real life · choose what fits"
          title={<>What would you tell <span style={{ fontStyle: 'italic', color: 'var(--terracotta-deep)' }}>your</span> camera to watch for?</>}
          lead="Pick the one that sounds most like your home. We'll personalize the questions we ask."
        />
        <div className="uc-grid">
          {USE_CASES.map((uc) => (
            <Reveal
              key={uc.id}
              as="button"
              className={`uc-card ${selected === uc.id ? 'selected' : ''}`}
              onClick={() => setSelected(uc.id)}
            >
              <img className="uc-photo" src={uc.img} alt="" />
              <span className="uc-tag">{uc.tag}</span>
              <h3>{uc.title}</h3>
              <div className="uc-quote">{uc.quote}</div>
              <div className="uc-desc">{uc.desc}</div>
              <div className="uc-cta">
                <span>{selected === uc.id ? 'Selected' : 'Choose this'}</span>
                {selected === uc.id
                  ? <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7.5l3.5 3.5L12 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  : <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
              </div>
            </Reveal>
          ))}
        </div>
        <div className="uc-continue">
          <button
            type="button"
            className="btn accent"
            disabled={!selectedUc}
            onClick={() => selectedUc && scrollToSurvey(selectedUc)}
            style={{ opacity: selectedUc ? 1 : 0.5 }}
          >
            Continue
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
      <style dangerouslySetInnerHTML={{ __html: ucStyles }} />
    </section>
  );
}

Object.assign(window, { UseCasesSection, USE_CASES });