/* Corsa Privata — "The Standard": the credibility engine. Process + guarantees,
 * drawn from the brand's own principles. No fabricated metrics. Second dark band. */
const { Eyebrow } = window.CorsaPrivataDesignSystem_94a5c9;
const StdIcon = window.Icon;
const STD_PROCESS_ICONS = ['file-pen', 'pen-tool', 'package-check', 'infinity'];
const STD_GUAR_ICONS = ['gauge', 'gem', 'phone-call', 'shield-check'];

function Standard({ t }) {
  const s = t.standard;
  return (
    <section id="standard" className="cp-dark" style={{ position: 'relative', overflow: 'hidden', background: 'var(--cp-ink-900)', scrollMarginTop: 0 }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/imagery-telemetry.png)', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(9px) brightness(0.5)', transform: 'scale(1.15)', opacity: 0.3 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,17,18,0.95), rgba(15,17,18,0.97))' }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'rgba(255,255,255,0.08)' }} />

      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(76px,10vw,120px) 32px' }}>
        <div className="cp-reveal cp-std-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <Eyebrow tone="gold">{s.eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 'clamp(32px,4.4vw,52px)', lineHeight: 1.04, letterSpacing: '-0.03em', color: 'var(--cp-ivory)', margin: '16px 0 0', textWrap: 'balance' }}>
              {s.h2}
            </h2>
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--cp-ink-200)', margin: 0, maxWidth: '40ch', textWrap: 'pretty' }}>
            {s.sub}
          </p>
        </div>

        <div className="cp-reveal cp-std-process" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: 56, borderTop: '1px solid rgba(194,161,101,0.3)' }}>
          {s.process.map((p, i) => (
            <div key={p.v} className="cp-std-pcell" style={{ position: 'relative', padding: '26px 26px 26px 0', borderLeft: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.08)', paddingLeft: i === 0 ? 0 : 26 }}>
              <span style={{ position: 'absolute', top: -5, left: i === 0 ? 0 : 26, width: 9, height: 9, borderRadius: '50%', background: 'var(--cp-gold-500)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                <StdIcon name={STD_PROCESS_ICONS[i]} size={19} stroke={1.5} color="var(--cp-gold-400)" />
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)', fontSize: 20, letterSpacing: '-0.01em', color: 'var(--cp-ivory)' }}>{p.v}</span>
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--cp-ink-300)', margin: '12px 0 0' }}>{p.d}</p>
            </div>
          ))}
        </div>

        <div className="cp-reveal cp-std-guars" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', marginTop: 48, border: '1px solid rgba(255,255,255,0.1)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          {s.guarantees.map((g, i) => (
            <div key={g.h} className="cp-guar" style={{
              padding: 'clamp(22px,3vw,34px)',
              borderRight: i % 2 === 0 ? '1px solid rgba(255,255,255,0.1)' : 'none',
              borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.1)' : 'none',
              background: 'rgba(255,255,255,0.015)',
            }}>
              <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(194,161,101,0.12)', border: '1px solid rgba(194,161,101,0.3)' }}>
                <StdIcon name={STD_GUAR_ICONS[i]} size={19} stroke={1.5} color="var(--cp-gold-400)" />
              </span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)', fontSize: 'clamp(19px,2vw,23px)', letterSpacing: '-0.01em', color: 'var(--cp-ivory)', margin: '18px 0 0' }}>{g.h}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.58, color: 'var(--cp-ink-200)', margin: '8px 0 0', maxWidth: '40ch', textWrap: 'pretty' }}>{g.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Standard = Standard;