/* global React, Icon, useReveal */

/* ── How it Works (4 steps, editorial numbered) ────────────── */
function HowItWorks() {
  const ref = useReveal();

  const STEPS = [
    {
      n: '01',
      title: 'Drop a name or a photo',
      body: 'Type any product. Or upload a photo — vision goes through Sonnet 4.6.',
      tag: 'INPUT',
      icon: 'upload',
    },
    {
      n: '02',
      title: 'Claude reads the web',
      body: 'Resolution, scraping, summarization in parallel. Apify actors handle the heavy async paths.',
      tag: 'PIPELINE',
      icon: 'layers',
    },
    {
      n: '03',
      title: 'Scores land, validated',
      body: 'Zod-validated growth, demand, momentum. Plus metrics, competitors, pricing, trend stage.',
      tag: 'OUTPUT',
      icon: 'target',
    },
    {
      n: '04',
      title: 'Export, compare, repeat',
      body: 'Save to PDF with research appended. Compare side-by-side. History keeps your last 20 runs.',
      tag: 'SHIP',
      icon: 'arrowUp',
    },
  ];

  return (
    <section className="section how" id="how" ref={ref}>
      <div className="container-wide">
        <div className="how-head">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" />How it works</span>
            <h2 className="heading-l">
              Four steps. <em>About thirty seconds.</em>
            </h2>
          </div>
        </div>

        <ol className="how-list">
          {STEPS.map((s, i) => (
            <li key={s.n} className={`how-step reveal reveal-delay-${i + 1}`}>
              <div className="how-step-rail">
                <span className="how-step-num display">{s.n}</span>
                {i < STEPS.length - 1 && <span className="how-step-line" />}
              </div>
              <div className="how-step-body">
                <div className="row gap" style={{ marginBottom: 8 }}>
                  <span className="how-step-tag mono">{s.tag}</span>
                  <span className="how-step-icon"><Icon name={s.icon} size={13} /></span>
                </div>
                <h3 className="how-step-title display">{s.title}</h3>
                <p className="how-step-text muted">{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ── Features (expanded 6-grid) ────────────────────────────── */
function Features() {
  const ref = useReveal();

  const F = [
    {
      icon: 'sparkles',
      title: 'Product scorecard',
      body: 'Name or photo in. Growth, demand, momentum out — plus competitors, pricing, summary.',
      tag: 'CORE',
    },
    {
      icon: 'eye',
      title: 'Vision-aware',
      body: 'Upload a packshot, drop pins, annotate. Claude Sonnet 4.6 reads each region in context.',
      tag: 'VISION',
    },
    {
      icon: 'pdf',
      title: 'PDF export',
      body: 'One-click report with research appended. Designed for stakeholder slack-and-go.',
      tag: 'EXPORT',
    },
    {
      icon: 'shield',
      title: 'Schema-validated I/O',
      body: 'Zod schemas, three-layer parse fallback, no `any`. End-to-end TypeScript strict.',
      tag: 'INFRA',
    },
  ];

  return (
    <section className="section feats" id="how" ref={ref}>
      <div className="container-wide">
        <div className="feats-head">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" />The kit</span>
            <h2 className="heading-l">
              Built for product teams who <em>ship.</em>
            </h2>
          </div>
          <p className="lede reveal reveal-delay-1" style={{ maxWidth: 460 }}>
            Six surfaces. One bus. Everything routes through <code className="mono">lib/</code> —
            no route imports the Anthropic SDK directly.
          </p>
        </div>

        <div className="feats-grid">
          {F.map((f, i) => (
            <article key={f.title} className={`feat reveal reveal-delay-${(i % 3) + 1}`}>
              <div className="feat-shimmer" />
              <div className="row between" style={{ marginBottom: 18 }}>
                <span className="feat-icon"><Icon name={f.icon} size={18} /></span>
                <span className="feat-tag mono">{f.tag}</span>
              </div>
              <h3 className="feat-title">{f.title}</h3>
              <p className="feat-body muted">{f.body}</p>
              <div className="feat-foot">
                <span className="mono subtle">{String(i + 1).padStart(2, '0')} / 06</span>
                <Icon name="arrowR" size={14} className="feat-arrow" />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;
window.Features = Features;