// How it works — 3 steps with interactive mini-mockups.

const ToothChart = ({ selected, onToggle }) => {
  // simplified upper jaw FDI 11-18 + 21-28
  const upperRight = [18, 17, 16, 15, 14, 13, 12, 11];
  const upperLeft = [21, 22, 23, 24, 25, 26, 27, 28];
  const Tooth = ({ n }) => {
    const sel = selected.includes(n);
    return (
      <button
        onClick={() => onToggle(n)}
        style={{
          width: 26, height: 32,
          borderRadius: '50% 50% 30% 30%',
          background: sel ? 'var(--gold)' : 'var(--card-solid)',
          border: '1px solid ' + (sel ? 'var(--gold-deep)' : 'var(--line-strong)'),
          color: sel ? '#1A1A1A' : 'var(--fg-mute)',
          fontSize: 9,
          fontFamily: 'Geist Mono',
          cursor: 'pointer',
          padding: 0,
          transition: 'all 0.15s ease',
          boxShadow: sel ? '0 4px 12px -4px rgba(184,146,74,0.4)' : 'none',
        }}>
        {n}
      </button>
    );
  };
  return (
    <div style={{ display: 'flex', gap: 6, justifyContent: 'center', padding: '24px 0' }}>
      {upperRight.map((n) => <Tooth key={n} n={n} />)}
      <div style={{ width: 1, background: 'var(--line)', margin: '0 4px' }}></div>
      {upperLeft.map((n) => <Tooth key={n} n={n} />)}
    </div>
  );
};

const Step1Card = () => {
  const [query, setQuery] = useState('imp');
  const options = [
    { id: 'implant', label: 'Single tooth implant', tag: 'Surgery', hot: true },
    { id: 'impla-multi', label: 'Multi-tooth implant bridge', tag: 'Surgery' },
    { id: 'imp-immediate', label: 'Immediate implant placement', tag: 'Surgery' },
    { id: 'impacted', label: 'Impacted tooth extraction', tag: 'Surgery' },
  ];
  return (
    <div style={{ padding: 24, height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderRadius: 10, background: 'var(--card-solid)', border: '1px solid var(--line-strong)', marginBottom: 12 }}>
        <Icon name="spark" size={14} />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', font: 'inherit', color: 'var(--fg)' }}
        />
        <kbd style={{ fontFamily: 'Geist Mono', fontSize: 10, padding: '2px 6px', background: 'var(--bg-soft)', borderRadius: 4, border: '1px solid var(--line)', color: 'var(--fg-faint)' }}>↵</kbd>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {options.map((o) => (
          <div key={o.id} style={{
            padding: '10px 12px',
            borderRadius: 8,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            background: o.hot ? 'color-mix(in oklab, var(--gold) 12%, transparent)' : 'transparent',
            border: '1px solid ' + (o.hot ? 'color-mix(in oklab, var(--gold) 30%, transparent)' : 'transparent'),
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="tooth" size={14} />
              <span style={{ fontSize: 13, color: 'var(--fg)' }}>{o.label}</span>
            </div>
            <span className="mono" style={{ fontSize: 10, color: 'var(--fg-faint)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              {o.tag}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

const Step2Card = () => {
  const [selected, setSelected] = useState([14, 15]);
  const toggle = (n) => setSelected((s) => s.includes(n) ? s.filter(x => x !== n) : [...s, n]);
  return (
    <div style={{ padding: 24, height: '100%' }}>
      <div style={{ fontSize: 11, color: 'var(--fg-faint)', fontFamily: 'Geist Mono', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>
        UPPER · FDI NOTATION
      </div>
      <ToothChart selected={selected} onToggle={toggle} />
      <div style={{ padding: '12px 14px', borderRadius: 10, background: 'var(--card-solid)', border: '1px solid var(--line)' }}>
        <div style={{ fontSize: 11, color: 'var(--fg-faint)', textTransform: 'uppercase', letterSpacing: '0.06em', fontFamily: 'Geist Mono', marginBottom: 6 }}>
          Optional context
        </div>
        <div style={{ fontSize: 13, color: 'var(--fg-mute)', lineHeight: 1.5 }}>
          Patient is anxious about surgery. Heavy smoker — discuss healing
          implications.
        </div>
      </div>
      <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 12, color: 'var(--fg-mute)' }}>
          {selected.length} {selected.length === 1 ? 'tooth' : 'teeth'} selected
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {selected.map((n) => (
            <span key={n} className="chip" style={{ background: 'var(--gold)', color: '#1A1A1A', border: 'none', padding: '4px 10px', fontSize: 11 }}>#{n}</span>
          ))}
        </div>
      </div>
    </div>
  );
};

const Step3Card = () => {
  return (
    <div style={{ padding: 24, height: '100%' }}>
      <div style={{
        padding: '14px 16px',
        borderRadius: 12,
        background: 'var(--card-solid)',
        border: '1px solid var(--line-strong)',
        display: 'flex',
        alignItems: 'center',
        gap: 12,
        marginBottom: 14,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 8,
          background: 'var(--gold)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#1A1A1A', fontFamily: 'Noto Sans JP', fontWeight: 700,
        }}>日</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, color: 'var(--fg-faint)' }}>Plan for Marcus Chen · ready</div>
          <div style={{ fontSize: 13, color: 'var(--fg)', fontFamily: 'Geist Mono', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            hinata.health/r/k4n2-pl0a
          </div>
        </div>
        <button style={{
          border: '1px solid var(--line-strong)',
          background: 'var(--bg-soft)',
          padding: '6px 10px',
          borderRadius: 6,
          fontSize: 11,
          color: 'var(--fg)',
          fontFamily: 'inherit',
          cursor: 'pointer',
        }}>Copy</button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { icon: 'whatsapp', label: 'WhatsApp', sub: 'Most patients open within 4 min' },
          { icon: 'sms', label: 'SMS', sub: 'Falls back to plain link' },
          { icon: 'mail', label: 'Email', sub: 'With your clinic header' },
        ].map((c) => (
          <button key={c.label} style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            padding: '12px 14px',
            borderRadius: 10,
            border: '1px solid var(--line)',
            background: 'transparent',
            color: 'var(--fg)',
            textAlign: 'left',
            cursor: 'pointer',
            fontFamily: 'inherit',
          }}>
            <div style={{ width: 28, height: 28, borderRadius: 7, background: 'var(--bg-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={c.icon} size={14} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{c.label}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-faint)' }}>{c.sub}</div>
            </div>
            <Icon name="arrow-right" size={14} />
          </button>
        ))}
      </div>
    </div>
  );
};

const HowItWorks = () => {
  const steps = [
    { n: 1, title: 'Pick a procedure', desc: 'Search a library of specialist procedures with clinical-grade taxonomy. Combine procedures into one plan.', Card: Step1Card, time: '~15s' },
    { n: 2, title: 'Click the teeth', desc: 'Tap an interactive FDI chart, drop any free-text context — Hinata factors smoking, anxiety, age into the narrative.', Card: Step2Card, time: '~30s' },
    { n: 3, title: 'Share the link', desc: 'AI generates the full patient-facing experience. Send it where your patient actually is — WhatsApp, SMS, or email.', Card: Step3Card, time: '~10s' },
  ];
  return (
    <section id="how">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>
          <div className="reveal" style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>How it works</div>
            <h2 style={{ marginBottom: 24 }}>
              From chart-side to patient inbox in <span className="serif" style={{ color: 'var(--gold-deep)' }}>under two minutes</span>.
            </h2>
            <p className="lede">
              Hinata is built for the treatment coordinator who has six things
              open and a patient at the desk. Three steps. No PMS integration. No
              training day.
            </p>
          </div>
          <div className="chip reveal" style={{ alignSelf: 'flex-end' }}>
            <span className="chip-dot"></span>
            Average time to send: 1:47
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 24 }}>
          {steps.map(({ n, title, desc, Card, time }, i) => (
            <div key={n} className="reveal" style={{
              border: '1px solid var(--line)',
              borderRadius: 'var(--radius-lg)',
              background: 'var(--card-solid)',
              overflow: 'hidden',
              display: 'flex',
              flexDirection: 'column',
              transitionDelay: `${i * 80}ms`,
            }}>
              {/* Mini interactive card */}
              <div style={{
                background: 'var(--bg-soft)',
                borderBottom: '1px solid var(--line)',
                minHeight: 280,
                display: 'flex',
                flexDirection: 'column',
              }}>
                <Card />
              </div>
              {/* Description */}
              <div style={{ padding: '24px 24px 28px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                    <span className="step-num">{String(n).padStart(2, '0')}</span>
                    <h3 style={{ fontSize: 20 }}>{title}</h3>
                  </div>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-faint)' }}>{time}</span>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.55 }}>{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks });