/* Corsa Privata — "The House": four disciplines as an interactive explorer.
 * A selectable rail drives an editorial folio (typographic, hairline-ruled),
 * not a software card: no icon chip, no image header, no check bullets. */
const { Button } = window.CorsaPrivataDesignSystem_94a5c9;
const PillarIcon = window.Icon;

function Pillars({ go, t }) {
  const [active, setActive] = React.useState(0);
  const data = t.pillars;
  const p = data.items[active];

  return (
    <section id="house" style={{ background: 'var(--surface-page)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(72px, 9vw, 112px) 32px' }}>
        <div className="cp-reveal" style={{ maxWidth: 640 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.06, letterSpacing: '-0.03em', color: 'var(--text-strong)', margin: 0, textWrap: 'balance' }}>
            {data.heading}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(16px,1.4vw,18px)', lineHeight: 1.6, color: 'var(--text-body)', margin: '16px 0 0', maxWidth: '56ch', textWrap: 'pretty' }}>
            {data.sub}
          </p>
        </div>

        <div className="cp-pillars-grid cp-reveal" style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 40, marginTop: 48, alignItems: 'stretch' }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {data.items.map((item, i) => {
              const on = i === active;
              return (
                <button key={item.name} onClick={() => setActive(i)}
                  className="cp-pillar-row"
                  style={{
                    textAlign: 'left', cursor: 'pointer', background: on ? 'var(--surface-card)' : 'transparent',
                    border: 'none', borderTop: '1px solid var(--border-hairline)',
                    boxShadow: 'none',
                    borderRadius: on ? 'var(--radius-sm)' : 0,
                    padding: on ? '22px 22px' : '22px 12px',
                    display: 'flex', alignItems: 'center', gap: 18, width: '100%',
                    transition: 'background var(--dur-base) var(--ease-standard), padding var(--dur-base) var(--ease-standard)',
                  }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wide)', color: on ? 'var(--cp-gold-700)' : 'var(--text-faint)', width: 22, flex: 'none' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)', fontSize: 'clamp(19px,2vw,23px)', letterSpacing: '-0.01em', color: 'var(--text-strong)' }}>{item.name}</span>
                    <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 4 }}>{item.desc}</span>
                  </span>
                  <PillarIcon name={on ? 'arrow-right' : 'plus'} size={18} stroke={1.6} color={on ? 'var(--cp-gold-700)' : 'var(--text-faint)'} />
                </button>
              );
            })}
            <div style={{ borderTop: '1px solid var(--border-hairline)' }} />
          </div>

          <div style={{ position: 'relative', background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-sm)', display: 'flex', flexDirection: 'column' }}>
            <div key={p.name} className="cp-pillar-detail" style={{ position: 'relative', padding: 'clamp(30px, 3.4vw, 46px)', display: 'flex', flexDirection: 'column', flex: 1 }}>
              {/* folio number, like a printed page, not a UI chip */}
              <span aria-hidden="true" style={{ position: 'absolute', top: 26, right: 30, fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 46, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--cp-ink-100)', userSelect: 'none' }}>
                {String(active + 1).padStart(2, '0')}
              </span>
              <span aria-hidden="true" style={{ display: 'block', width: 28, height: 2, background: 'var(--cp-gold-500)' }} />
              <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 'clamp(26px, 2.8vw, 34px)', letterSpacing: '-0.02em', color: 'var(--text-strong)', marginTop: 20 }}>{p.name}</span>
              <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--cp-gold-700)', marginTop: 8 }}>{p.desc}</span>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.62, color: 'var(--text-body)', margin: '20px 0 0', textWrap: 'pretty', maxWidth: '54ch' }}>{p.body}</p>
              <div className="cp-pillar-items" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 32px', marginTop: 28 }}>
                {p.items.map((it) => (
                  <div key={it} style={{ display: 'flex', alignItems: 'baseline', gap: 10, padding: '11px 0', borderTop: '1px solid var(--border-hairline)' }}>
                    <span aria-hidden="true" style={{ width: 12, height: 1, background: 'var(--cp-gold-600)', flex: 'none', transform: 'translateY(-3.5px)' }} />
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.45, color: 'var(--text-body)' }}>{it}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 'auto', paddingTop: 26 }}>
                {/* Unified CTA: the open discipline travels with the visitor to #begin */}
                <Button variant="ghost"
                  onClick={() => {
                    window.dispatchEvent(new CustomEvent('cp:interest', { detail: { name: p.name } }));
                    go('begin');
                  }}
                  style={{ paddingLeft: 0, paddingRight: 0 }}>
                  {data.cta} &nbsp;&rarr;
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pillars = Pillars;