// PORQUÉ + PAQUETES — i18n

const PorQue = () => {
  const { t } = window.useT();
  const p = t.porque;
  return (
    <section data-screen-label="04 PorQue" style={{ padding: '120px 0 80px', position: 'relative' }}>
      <div className="container">
        <SectionHead num={p.head} title={p.title} kicker={p.kicker} />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, border: '1px solid var(--ink)', borderRadius: 24, overflow: 'hidden' }}>
          {p.reasons.map((r, i) => (
            <div key={i} style={{
              padding: '32px 22px',
              borderRight: i < 4 ? '1px solid var(--rule)' : 'none',
              minHeight: 380,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              background: i === 2 ? 'var(--accent)' : 'transparent',
              color: i === 2 ? 'var(--paper)' : 'var(--ink)',
              transition: 'background 0.3s',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span className="mono" style={{ opacity: 0.6 }}>{p.no} {String(i+1).padStart(2,'0')}</span>
                <span style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontSize: 64, lineHeight: 0.8, color: i === 2 ? 'var(--paper)' : 'var(--accent)' }}>{r.big}</span>
              </div>
              <div>
                <h3 className="serif" style={{ fontSize: 26, fontStyle: 'italic', fontWeight: 400, lineHeight: 1.05, marginBottom: 12, letterSpacing: '-0.01em' }}>{r.t}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.45, opacity: 0.85 }}>{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Paquetes = () => {
  const { t } = window.useT();
  const pk = t.pkg;
  const prices = [
    { setup: '1.490', monthly: '190', featured: false },
    { setup: '2.990', monthly: '390', featured: true },
    { setup: '5.990', monthly: '890', featured: false },
    { setup: '12.000+', monthly: '1.500–2.500', featured: false },
  ];

  return (
    <section id="paquetes" data-screen-label="05 Paquetes" style={{ padding: '120px 0 80px', background: 'var(--paper-2)', position: 'relative' }}>
      <div className="container">
        <SectionHead num={pk.head} title={pk.title} kicker={pk.kicker} />

        <div className="grid-12" style={{ alignItems: 'stretch' }}>
          {pk.list.map((p, i) => {
            const pr = prices[i];
            return (
              <div key={i} style={{ gridColumn: 'span 3' }}>
                <div className={`pkg ${pr.featured ? 'featured' : ''}`} style={{ height: '100%' }}>
                  {pr.featured && (
                    <span style={{
                      position: 'absolute', top: -12, left: 24,
                      background: 'var(--accent)', color: 'var(--paper)',
                      padding: '4px 12px', borderRadius: 999,
                      fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                    }}>{pk.popular}</span>
                  )}
                  <span className="mono" style={{ opacity: 0.6 }}>{pk.plan} {String(i+1).padStart(2,'0')}</span>
                  <h3 className="serif" style={{ fontSize: 30, fontStyle: 'italic', fontWeight: 400, marginTop: 14, lineHeight: 1.05 }}>{p.name}</h3>
                  <p style={{ fontSize: 13, opacity: 0.7, marginTop: 6 }}>{p.sub}</p>

                  <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid currentColor' }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                      <span className="serif" style={{ fontSize: 48, fontStyle: 'italic', lineHeight: 1 }}>€{pr.setup}</span>
                      <span className="mono" style={{ opacity: 0.6 }}>{pk.setup}</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                      <span className="serif" style={{ fontSize: 26, lineHeight: 1 }}>€{pr.monthly}</span>
                      <span className="mono" style={{ opacity: 0.6 }}>{pk.monthly}</span>
                    </div>
                  </div>

                  <ul style={{ listStyle: 'none', marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                    {p.bullets.map((b, j) => (
                      <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13, lineHeight: 1.4 }}>
                        <span style={{ marginTop: 6, width: 4, height: 4, background: pr.featured ? 'var(--accent-2)' : 'var(--accent)', borderRadius: 999, flexShrink: 0 }} />
                        {b}
                      </li>
                    ))}
                  </ul>

                  <button className="btn" style={{
                    marginTop: 24,
                    background: pr.featured ? 'var(--accent)' : 'var(--ink)',
                    color: 'var(--paper)',
                    borderColor: pr.featured ? 'var(--accent)' : 'var(--ink)',
                    justifyContent: 'space-between', width: '100%',
                  }}>{pk.cta}<Arrow /></button>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 32, textAlign: 'center', padding: 18, border: '1px dashed var(--ink)', borderRadius: 999, display: 'inline-flex', gap: 12, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
          <span className="serif" style={{ fontStyle: 'italic', fontSize: 22 }}>{pk.footer}</span>
          <span className="mono" style={{ opacity: 0.6 }}>{pk.footerSub}</span>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PorQue, Paquetes });