/* Créapeiron maison — "The Vault": the milled-aluminium case with biometric lock. */
const CPDSCase = window.CrApeironELYSIENDesignSystem_f7a37f;
const { Eyebrow: CaseEyebrow, Button: CaseBtn } = CPDSCase;

function TheCase({ onNavigate }) {
  const WIDE = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };
  const features = [
    ['One block', 'Milled from a single billet of aircraft-grade aluminium. No seams, no joints — one object.'],
    ['Your fingerprint', 'A biometric lock, machined flush into the lid. The case opens to one hand, and one hand only.'],
    ['Fitted to the piece', 'An interior cut to the exact geometry of the ELYSIEN, the magazines and the optic. Each name engraved — SOUL NAME.'],
  ];
  return (
    <section id="case" data-screen-label="case" style={{ background: 'var(--surface-void)', padding: 'var(--section-y) 0', position: 'relative' }}>
      <div style={WIDE}>
        {/* Header */}
        <div data-reveal style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', alignItems: 'flex-end', gap: 'var(--sp-7)', marginBottom: 'var(--sp-8)' }} className="cp-dealers-head">
          <div>
            <CaseEyebrow index="06">The Vault</CaseEyebrow>
            <h2 style={{ margin: '24px 0 0', fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'var(--fs-display-2)', lineHeight: 1.04, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Milled from a<br />single block.
            </h2>
          </div>
          <p style={{ margin: 0, maxWidth: '40ch', fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 'var(--fs-body)', lineHeight: 1.7, color: 'var(--text-secondary)' }}>
            The ELYSIEN does not arrive in a box. It arrives in an object of its own — a vault carved from one piece of aluminium, opened by your fingerprint alone.
          </p>
        </div>
      </div>

      {/* Cinematic full-bleed closed case */}
      <div data-reveal style={{ position: 'relative', margin: 'var(--sp-6) 0 0', height: 'clamp(380px, 60vh, 720px)', overflow: 'hidden', background: '#000' }}>
        <Pic src="assets/photos/case_hero_black.jpg" alt="The ELYSIEN vault — milled aluminium case" style={{ width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(8,8,10,0.85) 0%, rgba(8,8,10,0.1) 42%, transparent 70%)' }} />
        <div style={{ position: 'absolute', left: 'var(--gutter)', bottom: 'clamp(28px,5vh,56px)', maxWidth: '30ch' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>Aluminium · biometric · engraved</span>
        </div>
      </div>

      {/* Feature ticks */}
      <div style={WIDE}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--sp-7)', marginTop: 'var(--sp-8)' }} className="cp-three">
          {features.map(([t, d], i) => (
            <div data-reveal key={t} style={{ display: 'flex', flexDirection: 'column', gap: '14px', paddingTop: 'var(--sp-4)', borderTop: '1px solid var(--border-hairline)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', color: 'var(--text-accent)' }}>{'0' + (i + 1)}</span>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'clamp(1.4rem, 2vw, 1.9rem)', lineHeight: 1.1, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>{t}</h3>
              <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 'var(--fs-body-sm)', lineHeight: 1.65, color: 'var(--text-secondary)', textWrap: 'pretty' }}>{d}</p>
            </div>
          ))}
        </div>

        {/* Open display image */}
        <figure data-reveal style={{ margin: 'var(--sp-9) 0 0', position: 'relative', borderRadius: 'var(--r-md)', overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
          <Pic src="assets/photos/case_open_web.jpg" alt="The vault, open — pistol, holster and accessories presented on the milled tray" style={{ width: '100%', height: 'auto', display: 'block' }} />
          <figcaption style={{ position: 'absolute', left: '0', right: '0', bottom: '0', padding: 'var(--sp-7) var(--sp-6) var(--sp-5)', background: 'var(--grad-scrim)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: '12px' }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(1.1rem,1.6vw,1.5rem)', color: 'var(--cp-stone)' }}>Opened, it becomes the stage.</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>For Chosen Ones · Soul Edition</span>
          </figcaption>
        </figure>

        {/* Fitted interior — Eagle edition */}
        <figure data-reveal style={{ margin: 'var(--sp-6) 0 0', position: 'relative', borderRadius: 'var(--r-md)', overflow: 'hidden', border: '1px solid var(--border-hairline)' }}>
          <Pic src="assets/photos/case_open_eagle.jpg" alt="The vault interior, cut to the exact geometry of the ELYSIEN, magazines and optic" style={{ width: '100%', height: 'auto', display: 'block' }} />
          <figcaption style={{ position: 'absolute', left: '0', right: '0', bottom: '0', padding: 'var(--sp-7) var(--sp-6) var(--sp-5)', background: 'var(--grad-scrim)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: '12px' }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(1.1rem,1.6vw,1.5rem)', color: 'var(--cp-stone)' }}>Cut to the exact geometry of the piece.</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Eagle · Limited 50</span>
          </figcaption>
        </figure>

        <div data-reveal style={{ marginTop: 'var(--sp-7)' }}>
          <CaseBtn variant="text" onClick={() => onNavigate && onNavigate('concierge')}>Commission your vault</CaseBtn>
        </div>
      </div>
    </section>
  );
}

window.TheCase = TheCase;