// Ofertas — three layout variants exposed via prop:
//   'list'  → editorial accordion (default)
//   'grid'  → 2x2 card grid
//   'table' → dense comparison table
function Ofertas({ variant = 'list' }) {
  const [lang] = useLang();
  const [region, setRegion] = React.useState('latam'); // latam | us
  const [open, setOpen] = React.useState('diagnostico');
  const C = window.FUSE_CONTENT.ofertas;
  const items = C.items;
  const [pre, emph, post] = C.h2[lang];

  const RegionToggle = ({ darkChrome = false }) => (
    <div className={`pill-toggle ${darkChrome ? 'on-dark' : ''}`} role="group" aria-label="Pricing region">
      <button onClick={() => setRegion('latam')} aria-pressed={region === 'latam'}>{C.pricing_toggle_label[lang][0]}</button>
      <button onClick={() => setRegion('us')} aria-pressed={region === 'us'}>{C.pricing_toggle_label[lang][1]}</button>
    </div>
  );

  return (
    <section id="ofertas" className="section" style={{ background: 'var(--bone)', position: 'relative' }} data-screen-label="ofertas">
      <div className="container">
        <header className="reveal" style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24,
          borderBottom: '1px solid var(--ink)', paddingBottom: 24, marginBottom: 32, flexWrap: 'wrap',
        }}>
          <div>
            <div className="kicker kicker-accent">{C.kicker[lang]}</div>
            <h2 className="h-section" style={{ marginTop: 12, maxWidth: '18ch' }}>
              {pre} <span className="mk-emph">{emph}</span>{post}
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-end' }}>
            <span className="kicker">{lang === 'es' ? 'Precio según mercado' : 'Pricing by market'}</span>
            <RegionToggle />
          </div>
        </header>

        {variant === 'list' && (
          <ListVariant
            items={items} lang={lang} region={region}
            open={open} setOpen={setOpen}
          />
        )}
        {variant === 'grid' && <GridVariant items={items} lang={lang} region={region} />}
        {variant === 'table' && <TableVariant items={items} lang={lang} region={region} />}

        <p className="reveal" data-delay="6" style={{
          marginTop: 56, fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontSize: 20, color: 'var(--ink-2)', textAlign: 'center', maxWidth: '56ch', marginInline: 'auto',
        }}>
          {lang === 'es'
            ? 'En la mayoría de los casos, el diagnóstico conduce naturalmente a una implementación. No es necesario — pero suele ser la mejor entrada.'
            : 'In most cases, the diagnostic naturally leads into an implementation. Not required — but usually the best entry point.'}
        </p>
      </div>
    </section>
  );
}

function ListVariant({ items, lang, region, open, setOpen }) {
  return (
    <div className="offers-list">
      {items.map((o, i) => {
        const isOpen = open === o.id;
        return (
          <div
            key={o.id}
            className="offer-row reveal"
            data-delay={i + 1}
            data-open={isOpen}
            onClick={() => setOpen(isOpen ? null : o.id)}
            role="button"
            aria-expanded={isOpen}
          >
            <div className="o-num">{o.num}</div>
            <div>
              <div className="o-title">{o.title[lang]}</div>
              <div className="o-type">§ {o.type[lang]}</div>
            </div>
            <p className="o-summary">{o.summary[lang]}</p>
            <div className="o-price">
              <b>{o.price[region]}</b>
              <span>{region === 'latam' ? 'Latam' : 'US'}</span>
            </div>
            <div className="o-toggle" aria-hidden>+</div>

            {isOpen && (
              <div className="offer-expanded" onClick={e => e.stopPropagation()}>
                <div>
                  <h5>{lang === 'es' ? 'Duración' : 'Duration'}</h5>
                  <div className="o-duration">{o.duration[lang]}</div>
                  <h5 style={{ marginTop: 24 }}>{lang === 'es' ? 'Precio' : 'Price'}</h5>
                  <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 28, color: 'var(--accent)', letterSpacing: '-0.01em' }}>
                    {o.price[region]}
                  </div>
                  <div className="caption" style={{ marginTop: 4 }}>{region === 'latam' ? 'Latam' : 'United States'}</div>
                </div>
                <div>
                  <h5>{lang === 'es' ? 'Entregables' : 'Deliverables'}</h5>
                  <ul>
                    {o.deliverables[lang].map((d, j) => <li key={j}>{d}</li>)}
                  </ul>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function GridVariant({ items, lang, region }) {
  return (
    <div className="offers-grid">
      {items.map((o, i) => (
        <article key={o.id} className="offer-card reveal" data-delay={i + 1}>
          <div className="oc-head">
            <div className="oc-num">{o.num}</div>
            <span className="oc-type">§ {o.type[lang]}</span>
          </div>
          <h3>{o.title[lang]}</h3>
          <div className="oc-dur">{o.duration[lang]}</div>
          <p className="oc-summary">{o.summary[lang]}</p>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {o.deliverables[lang].slice(0, 3).map((d, j) => (
              <li key={j} style={{ fontSize: 13, color: 'var(--ink-2)', paddingLeft: 18, position: 'relative' }}>
                <span style={{ position: 'absolute', left: 0, color: 'var(--accent)' }}>→</span>
                {d}
              </li>
            ))}
            {o.deliverables[lang].length > 3 && (
              <li style={{ fontSize: 12, color: 'var(--fg-mute)', paddingLeft: 18, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
                + {o.deliverables[lang].length - 3} {lang === 'es' ? 'entregables más' : 'more deliverables'}
              </li>
            )}
          </ul>
          <div className="oc-price">
            <small>{region === 'latam' ? 'Latam' : 'US'}</small>
            {o.price[region]}
          </div>
        </article>
      ))}
    </div>
  );
}

function TableVariant({ items, lang, region }) {
  return (
    <table className="offers-table reveal">
      <thead>
        <tr>
          <th></th>
          <th>{lang === 'es' ? 'Oferta' : 'Offering'}</th>
          <th>{lang === 'es' ? 'Tipo' : 'Type'}</th>
          <th>{lang === 'es' ? 'Duración' : 'Duration'}</th>
          <th style={{ textAlign: 'right' }}>{lang === 'es' ? 'Precio' : 'Price'}</th>
        </tr>
      </thead>
      <tbody>
        {items.map((o, i) => (
          <React.Fragment key={o.id}>
            <tr>
              <td className="t-num">{o.num}</td>
              <td className="t-title">
                {o.title[lang]}
                <div style={{ marginTop: 6, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--ink-2)', maxWidth: '52ch', lineHeight: 1.5, fontStyle: 'normal' }}>
                  {o.summary[lang]}
                </div>
              </td>
              <td><span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.04em' }}>{o.type[lang]}</span></td>
              <td><span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-2)' }}>{o.duration[lang]}</span></td>
              <td className="t-price">{o.price[region]}</td>
            </tr>
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

window.Ofertas = Ofertas;
window.ListVariant = ListVariant;
window.GridVariant = GridVariant;
window.TableVariant = TableVariant;