// KineSuite landing — comparison table + roadmap notify form.

const { useState: useNotifyS } = React;

function CompStatusIcon({ kind }) {
  const map = {
    yes:     { glyph: '✓', color: 'var(--semantic-green)', bg: 'var(--semantic-green-bg)' },
    partial: { glyph: '~', color: 'var(--semantic-yellow)', bg: 'var(--semantic-yellow-bg)' },
    no:      { glyph: '×', color: 'var(--semantic-red)', bg: 'var(--semantic-red-bg)' },
  };
  const s = map[kind] || map.no;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 22, height: 22, borderRadius: 6,
      background: s.bg, color: s.color,
      fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, fontSize: 12,
    }}>
      {s.glyph}
    </span>
  );
}

function CompHeaderCell({ name, muted, highlight }) {
  return (
    <div style={{
      padding: '20px 24px',
      background: highlight ? 'var(--primary)' : muted ? 'var(--gray-050)' : 'var(--paper)',
      borderBottom: '1px solid var(--gray-200)',
      color: highlight ? '#fff' : 'var(--gray-700)',
    }}>
      <div className="eyebrow" style={{ color: highlight ? 'rgba(255,255,255,0.75)' : undefined }}>
        {name}
      </div>
    </div>
  );
}

function CompareMobileCard({ row, t }) {
  const cols = [
    { key: 'paper', label: t.compareColPaper },
    { key: 'excel', label: t.compareColExcel },
    { key: 'ks', label: 'KineSuite', highlight: true },
  ];
  return (
    <article className="compare-mobile-card">
      <h3>{row.label}</h3>
      {cols.map(({ key, label, highlight }) => {
        const cell = row[key];
        return (
          <div
            key={key}
            className={highlight ? 'compare-mobile-row compare-mobile-row--ks' : 'compare-mobile-row'}
          >
            <span className="compare-mobile-label">{label}</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <CompStatusIcon kind={cell.kind} />
              {cell.label && (
                <span style={{
                  fontSize: 13,
                  color: highlight ? 'var(--ink)' : 'var(--gray-700)',
                  fontWeight: highlight ? 600 : 400,
                }}>
                  {cell.label}
                </span>
              )}
            </div>
          </div>
        );
      })}
    </article>
  );
}

function ComparisonSection({ t }) {
  const rows = t.compareRows;
  return (
    <section id="comparativa" style={{ background: 'var(--bone)' }}>
      <div className="container">
        <div className="section-intro">
          <Eyebrow>{t.compareEyebrow}</Eyebrow>
          <h2 className="section-title">{t.compareTitle}</h2>
          <p className="lead">{t.compareSub}</p>
        </div>

        <div className="compare-desktop compare-table">
          <div style={{ padding: '20px 24px', background: 'var(--gray-050)', borderBottom: '1px solid var(--gray-200)' }}>
            <div className="eyebrow">{t.compareCriterion}</div>
          </div>
          <CompHeaderCell name={t.compareColPaper} muted />
          <CompHeaderCell name={t.compareColExcel} muted />
          <CompHeaderCell name="KineSuite" highlight />

          {rows.map((row, i) => {
            const last = i === rows.length - 1;
            const border = last ? 'none' : '1px solid var(--gray-200)';
            return (
              <React.Fragment key={i}>
                <div style={{
                  padding: '22px 24px', borderBottom: border,
                  display: 'flex', flexDirection: 'column', gap: 4,
                }}>
                  <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--ink)' }}>{row.label}</div>
                </div>
                <div style={{ padding: '22px 24px', borderBottom: border, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <CompStatusIcon kind={row.paper.kind} />
                  {row.paper.label && <span style={{ fontSize: 13, color: 'var(--gray-700)' }}>{row.paper.label}</span>}
                </div>
                <div style={{ padding: '22px 24px', borderBottom: border, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <CompStatusIcon kind={row.excel.kind} />
                  {row.excel.label && <span style={{ fontSize: 13, color: 'var(--gray-700)' }}>{row.excel.label}</span>}
                </div>
                <div style={{
                  padding: '22px 24px', borderBottom: border,
                  background: 'var(--primary-050)',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <CompStatusIcon kind={row.ks.kind} />
                  {row.ks.label && <span style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>{row.ks.label}</span>}
                </div>
              </React.Fragment>
            );
          })}
        </div>

        <div className="compare-mobile" role="list">
          {rows.map((row, i) => (
            <CompareMobileCard key={i} row={row} t={t} />
          ))}
        </div>

        <p style={{ marginTop: 24, fontSize: 13, color: 'var(--gray-500)', maxWidth: '70ch' }}>
          {t.compareFootnote}
        </p>
      </div>
    </section>
  );
}

function NotifySection({ t }) {
  const [email, setEmail] = useNotifyS('');
  const [scaleId, setScaleId] = useNotifyS(t.notifyScales[0].id);
  const [done, setDone] = useNotifyS(false);
  const [error, setError] = useNotifyS(false);

  const scale = t.notifyScales.find((s) => s.id === scaleId) || t.notifyScales[0];

  const submit = (e) => {
    e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!ok) { setError(true); return; }
    setError(false);
    try {
      localStorage.setItem('kinesuite-notify', JSON.stringify({ email: email.trim(), scaleId, at: Date.now() }));
    } catch {}
    setDone(true);
  };

  return (
    <section id="notify">
      <div className="container" style={{ maxWidth: 560 }}>
        <Eyebrow>{t.notifyEyebrow}</Eyebrow>
        <h2 className="section-title">{t.notifyTitle}</h2>
        <p className="lead" style={{ marginBottom: 32 }}>{t.notifySub}</p>

        {done ? (
          <div className="card" style={{ padding: 28 }}>
            <h3 style={{ fontSize: 22, marginBottom: 8 }}>{t.notifyDoneTitle}</h3>
            <p>{t.notifyDoneBody.replace('{scale}', scale.label)}</p>
            <button type="button" className="btn btn-ghost" style={{ marginTop: 16 }}
              onClick={() => { setDone(false); setEmail(''); }}>
              {t.notifyAnother}
            </button>
          </div>
        ) : (
          <form className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 18 }} onSubmit={submit}>
            <label style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, fontWeight: 600 }}>
              {t.notifyEmailLabel}
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder={t.notifyEmailPlaceholder}
                style={{
                  padding: '12px 14px', borderRadius: 10,
                  border: `1px solid ${error ? 'var(--semantic-red)' : 'var(--gray-300)'}`,
                  fontSize: 15, fontFamily: 'inherit',
                }}
              />
            </label>
            {error && <p style={{ color: 'var(--semantic-red)', fontSize: 13, margin: 0 }}>{t.notifyError}</p>}
            <label style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, fontWeight: 600 }}>
              {t.notifyScaleLabel}
              <select
                value={scaleId}
                onChange={(e) => setScaleId(e.target.value)}
                style={{
                  padding: '12px 14px', borderRadius: 10,
                  border: '1px solid var(--gray-300)',
                  fontSize: 15, fontFamily: 'inherit', background: 'var(--paper)',
                }}
              >
                {t.notifyScales.map((s) => (
                  <option key={s.id} value={s.id}>{s.label} · {s.area}</option>
                ))}
              </select>
            </label>
            <button type="submit" className="btn btn-primary" style={{ alignSelf: 'stretch', width: '100%' }}>
              {t.notifyCta}
            </button>
            <p style={{ fontSize: 12, color: 'var(--gray-500)', margin: 0 }}>{t.notifyFinePrint}</p>
            <p style={{ fontSize: 12, color: 'var(--gray-400)', margin: 0, fontFamily: 'JetBrains Mono, monospace' }}>
              {t.notifyTrustNoSpam}
            </p>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, {
  ComparisonSection, NotifySection,
});