/* Créapeiron maison — editorial home sections (hero → collectors). */
const CPDS = window.CrApeironELYSIENDesignSystem_f7a37f;
const { Eyebrow: CPEyebrow, Button: CPBtn, Divider: CPDivider, EditionCard: CPEditionCard, SpecList: CPSpecList, EditionBadge: CPEditionBadge } = CPDS;

const PAD = { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' };
const WIDE = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };

/* ---------- HERO ---------- */
function Hero({ onNavigate }) {
  const [hideCue, setHideCue] = React.useState(false);
  React.useEffect(() => {
    const update = () => setHideCue(window.scrollY > 24 || window.innerHeight < 760);
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    update();
    return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, []);
  return (
    <section id="top" className="cp-hero" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
      <Pic src="assets/photos/elysien_hero_black.jpg" alt="ELYSIEN" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
        objectPosition: 'center', opacity: 0.92,
      }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 80% at 70% 40%, transparent 0%, rgba(8,8,10,0.55) 70%, rgba(8,8,10,0.95) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(8,8,10,0.9) 0%, transparent 45%)' }} />

      <div className="cp-hero-inner" style={{ ...WIDE, position: 'relative', paddingBottom: 'clamp(64px, 10vh, 120px)', width: '100%' }}>
        <div data-reveal className="cp-hero-content" style={{ maxWidth: '760px' }}>
          <Eyebrowless />
          <h1 style={{
            margin: '0 0 28px', fontFamily: 'var(--font-serif)', fontWeight: 300,
            fontSize: 'var(--fs-display-1)', lineHeight: 'var(--lh-display)', letterSpacing: 'var(--ls-display)',
            color: 'var(--cp-stone)', textWrap: 'balance',
          }}>
            The first <br className="cp-mobile-br" />firearm<br />with <span style={{ fontStyle: 'italic', color: 'var(--cp-gold-glow)' }}>a <br className="cp-mobile-br" />soul.</span>
          </h1>
          <p className="cp-hero-tagline" style={{
            margin: '0 0 44px', fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase',
            color: 'var(--text-secondary)', lineHeight: 2,
          }}>Created.<span className="cp-eyb-sep">&nbsp;&nbsp;</span><br className="cp-mobile-br" />Not manufactured.</p>
          <div style={{ display: 'flex', gap: '18px', flexWrap: 'wrap' }}>
            <CPBtn variant="champagne" size="md" onClick={() => onNavigate('collection')}>Discover ELYSIEN</CPBtn>
            <CPBtn variant="ghost" size="md" onClick={() => onNavigate('manifesto')}>The Manifesto</CPBtn>
          </div>
        </div>
      </div>

      <div aria-hidden="true" style={{ position: 'absolute', bottom: '34px', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', opacity: hideCue ? 0 : 1, pointerEvents: 'none', transition: 'opacity var(--dur-slow) var(--ease-cinema)' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Scroll</span>
        <span style={{ width: '1px', height: '46px', background: 'linear-gradient(var(--accent), transparent)' }} />
      </div>
    </section>
  );
}
function Eyebrowless() {
  return (
    <div className="cp-hero-eyebrow" style={{ marginBottom: '34px', display: 'flex', alignItems: 'center', gap: '16px' }}>
      <span style={{ width: '48px', height: '1px', background: 'var(--accent)' }} />
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>Créapeiron<span className="cp-eyb-sep"> · </span><br className="cp-mobile-br" />Czechia</span>
    </div>
  );
}

/* ---------- MANIFESTO ---------- */
function Manifesto() {
  return (
    <section id="manifesto" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={PAD}>
        <div data-reveal style={{ marginBottom: 'var(--sp-9)' }}>
          <CPEyebrow index="01">The Manifesto</CPEyebrow>
        </div>
        <p data-reveal style={{
          margin: 0, maxWidth: '14ch', fontFamily: 'var(--font-serif)', fontWeight: 300,
          fontSize: 'var(--fs-display-2)', lineHeight: 1.1, letterSpacing: 'var(--ls-display)',
          color: 'var(--text-primary)',
        }}>
          Craftsmanship cannot be mass produced.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-8)', marginTop: 'var(--sp-9)', maxWidth: '880px', marginLeft: 'auto' }} className="cp-two">
          <p data-reveal className="cp-body" style={{ fontSize: 'var(--fs-body-lg)' }}>
            Perfection requires time. Every ELYSIEN is individually assembled, inspected and finished by a single pair of hands — patience measured not in hours, but in intention.
          </p>
          <p data-reveal className="cp-body" style={{ fontSize: 'var(--fs-body-lg)' }}>
            This is a philosophy before it is a product. The owner does not purchase a firearm. They acquire a rare object with a story — one that will outlive the hand that shaped it.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ---------- CRAFTSMANSHIP ---------- */
function Craftsmanship() {
  const stages = [
    ['Forging', 'Billet steel, brought to temperature and pressure until the grain runs true.'],
    ['Engraving', 'The meander cut by hand — a single line, never broken, around the frame.'],
    ['Finishing', 'Brushed to a low lustre. Measured in microns, judged by eye.'],
  ];
  return (
    <section id="craft" style={{ background: 'var(--surface-void)', padding: 'var(--section-y) 0' }}>
      <div style={WIDE}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 'var(--sp-9)', alignItems: 'center' }} className="cp-split">
          <div data-reveal style={{ borderRadius: 'var(--r-md)', overflow: 'hidden', background: 'var(--cp-black)', alignSelf: 'center' }}>
            <Pic src="assets/photos/elysien_hero_black.jpg" alt="ELYSIEN — hand-finished" style={{ display: 'block', width: '100%', height: 'auto' }} />
          </div>
          <div>
            <div data-reveal><CPEyebrow index="02">Craftsmanship</CPEyebrow></div>
            <h2 data-reveal style={{ margin: '26px 0 22px', fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'var(--fs-display-3)', lineHeight: 1.1, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Steel remembers every hand<br />that shaped it.
            </h2>
            <p data-reveal className="cp-body" style={{ maxWidth: '46ch', marginBottom: 'var(--sp-7)' }}>
              We work the way a watchmaker works — slowly, and only by hand. Nothing leaves the bench until it is right.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {stages.map(([t, d], i) => (
                <div data-reveal key={t} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: '24px', padding: '26px 0', borderTop: '1px solid var(--border-hairline)' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--ls-wider)', color: 'var(--text-accent)' }}>{'0' + (i + 1)}</span>
                  <div>
                    <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-primary)' }}>{t}</h3>
                    <p className="cp-body" style={{ margin: 0, fontSize: 'var(--fs-body-sm)' }}>{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- MECHANISM (triangle self-lock barrel) ---------- */
function Mechanism() {
  const points = [
    ['Three planes', 'The barrel seats against three faces, not one — a triangular lock-up with nowhere left to move.'],
    ['One position', 'It returns to the exact same place after every shot. Repeatable to the micron, by geometry alone.'],
    ['No compromise', 'Mechanical accuracy that does not drift, wear loose, or ask anything of the hand that holds it.'],
  ];
  return (
    <section id="mechanism" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={WIDE}>
        <div data-reveal style={{ marginBottom: '20px' }}>
          <CPEyebrow index="03">The Mechanism</CPEyebrow>
        </div>
        <h2 data-reveal style={{ margin: '0 0 var(--sp-9)', fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'var(--fs-display-2)', lineHeight: 1.04, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
          Two world firsts, in one object.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.92fr', gap: 'var(--sp-8)', alignItems: 'flex-end', marginBottom: 'var(--sp-8)' }} className="cp-split">
          <div>
            <div data-reveal style={{ marginBottom: '18px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-on-metal)', background: 'var(--grad-champagne)', padding: '5px 12px', borderRadius: 'var(--r-pill)' }}>World first</span>
            </div>
            <h3 data-reveal style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'var(--fs-display-3)', lineHeight: 1.08, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Triangle self-lock barrel.
            </h3>
          </div>
          <div>
            <p data-reveal style={{ margin: '0 0 16px', fontFamily: 'var(--font-serif)', fontWeight: 300, fontStyle: 'italic', fontSize: 'var(--fs-body-lg)', lineHeight: 1.4, letterSpacing: 'var(--ls-display)', color: 'var(--text-accent)' }}>
              Accuracy without compromise.
            </p>
            <p data-reveal className="cp-body" style={{ margin: 0, maxWidth: '50ch' }}>
              The world’s first triangular barrel lock. Where a conventional pistol lets the barrel settle differently with every shot, the ELYSIEN seats it against three planes at once — and returns it to precisely the same position, round after round.
            </p>
          </div>
        </div>
        <div data-reveal style={{ position: 'relative', aspectRatio: '16/9', borderRadius: 'var(--r-md)', overflow: 'hidden', background: 'var(--grad-void)', marginBottom: 'var(--sp-8)' }}>
          <video src="assets/TSL_mechanism.mp4" autoPlay muted loop playsInline preload="metadata" aria-label="ELYSIEN — triangle self-lock barrel in motion" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}></video>
          <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true" style={{ position: 'absolute', right: 'clamp(18px, 3vw, 34px)', bottom: 'clamp(18px, 3vw, 34px)', width: 'clamp(56px, 6vw, 88px)', height: 'auto', opacity: 0.9, pointerEvents: 'none' }}>
            <polygon points="50,8 90,86 10,86" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinejoin="round" />
            <circle cx="50" cy="8" r="3.4" fill="var(--accent)" />
            <circle cx="90" cy="86" r="3.4" fill="var(--accent)" />
            <circle cx="10" cy="86" r="3.4" fill="var(--accent)" />
          </svg>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--sp-7)' }} className="cp-three">
          {points.map(([t, d], i) => (
            <div data-reveal key={t} style={{ display: 'grid', gridTemplateRows: 'auto auto', gap: '10px', paddingTop: '24px', borderTop: '1px solid var(--border-hairline)' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: '16px' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-eyebrow)', letterSpacing: 'var(--ls-wider)', color: 'var(--text-accent)' }}>{'0' + (i + 1)}</span>
                <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-primary)' }}>{t}</h3>
              </div>
              <p className="cp-body" style={{ margin: 0, fontSize: 'var(--fs-body-sm)' }}>{d}</p>
            </div>
          ))}
        </div>

        <div data-reveal style={{ height: '1px', background: 'var(--border-hairline)', margin: 'var(--sp-10) 0' }}></div>

        <div style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 'var(--sp-9)', alignItems: 'center' }} className="cp-split">
          <div data-reveal style={{ position: 'relative', aspectRatio: '9/16', borderRadius: 'var(--r-md)', overflow: 'hidden', background: 'var(--grad-void)', width: '100%', maxWidth: '420px', margin: '0 auto' }}>
            <video src="assets/MagneticGrips.mp4" autoPlay muted loop playsInline preload="metadata" aria-label="ELYSIEN — magnetic grips installation" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}></video>
          </div>
          <div>
            <div data-reveal style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-5)', marginBottom: '22px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-on-metal)', background: 'var(--grad-champagne)', padding: '5px 12px', borderRadius: 'var(--r-pill)' }}>World first</span>
            </div>
            <h2 data-reveal style={{ margin: '0 0 16px', fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'var(--fs-display-3)', lineHeight: 1.08, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Magnetic grips.
            </h2>
            <p data-reveal style={{ margin: '0 0 var(--sp-6)', fontFamily: 'var(--font-serif)', fontWeight: 300, fontStyle: 'italic', fontSize: 'var(--fs-body-lg)', lineHeight: 1.4, letterSpacing: 'var(--ls-display)', color: 'var(--text-accent)' }}>
              No screws. No tools. No play.
            </p>
            <p data-reveal className="cp-body" style={{ maxWidth: '46ch', marginBottom: 'var(--sp-7)' }}>
              The world’s first magnetic grip system. The panels seat by magnetic force alone — held rock-solid, yet changed in seconds, by hand. No screws to strip, no tools to carry, nothing to work loose.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--sp-5) var(--sp-7)' }}>
              {[['No screws', 'Nothing to strip or lose'], ['Tool-free', 'Changed in seconds, by hand'], ['Locked solid', 'No play, no rattle, no drift']].map(([t, d]) => (
                <div data-reveal key={t} style={{ display: 'flex', flexDirection: 'column', gap: '6px', minWidth: '150px', paddingTop: '18px', borderTop: '1px solid var(--border-hairline)' }}>
                  <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-primary)' }}>{t}</h3>
                  <p className="cp-body" style={{ margin: 0, fontSize: 'var(--fs-body-sm)' }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- SPECIFICATIONS ---------- */
function Specs() {
  const left = [
    { label: 'Caliber', value: '9 × 19 · 19 rounds' },
    { label: 'Barrel length', value: '125 mm' },
    { label: 'Dimensions (H×W×L)', value: '148 × 25/35 × 223 mm' },
    { label: 'Weight', value: '1150 g' },
  ];
  const right = [
    { label: 'Sight radius', value: '160 mm' },
    { label: 'Trigger pull', value: '10–15 N · SAO' },
    { label: 'Reset length', value: '2.5–3.5 mm' },
    { label: 'IPSC divisions', value: 'Standard · Standard Optics · Open' },
  ];
  return (
    <section id="specs" style={{ background: 'var(--surface-void)', padding: 'var(--section-y) 0' }}>
      <div style={WIDE}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'var(--sp-9)', alignItems: 'start' }} className="cp-split">
          <div>
            <div data-reveal><CPEyebrow index="04">Specifications</CPEyebrow></div>
            <h2 data-reveal style={{ margin: '26px 0 22px', fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'var(--fs-display-3)', lineHeight: 1.08, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Measured by the micron.
            </h2>
            <p data-reveal className="cp-body" style={{ margin: 0, maxWidth: '34ch', fontSize: 'var(--fs-body-sm)' }}>
              One caliber, one purpose. Every figure is held to the same tolerance as the hand that finishes it.
            </p>
          </div>
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-4) var(--sp-9)' }} className="cp-two">
              <div data-reveal><CPSpecList items={left} /></div>
              <div data-reveal><CPSpecList items={right} /></div>
            </div>
            <p data-reveal style={{ margin: 'var(--sp-7) 0 0', paddingTop: 'var(--sp-5)', borderTop: '1px solid var(--border-hairline)', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
              Manual safety · hammer safety notch · trigger lock
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- COLLECTION ---------- */
function Collection({ onNavigate }) {
  const editions = [
    { code: 'MFG', name: 'Meant for Gods', line: 'Genesis edition', mark: 'assets/marks/edition_meant-for-gods.png', run: 'Seven · 01–07', debut: 'IWA Germany 2024' },
    { code: 'FCHO', name: 'For Chosen Ones', sub: 'Soul edition', mark: 'assets/marks/edition_for-chosen-ones.png', run: 'Limited to 99', debut: 'IWA Germany 2024 · Adihex Abu Dhabi 2025' },
    { code: 'FOE', name: 'Flare of Eternity', line: 'Golden edition', mark: 'assets/marks/edition_flare-of-eternity.png', run: 'Limited to 8', debut: 'IWA Germany 2025' },
    { code: '7D', name: 'Seven Diamonds', line: 'Brilliance set in metal.', mark: 'assets/marks/edition_seven-diamonds.png', run: 'Limited to 7', debut: 'Mehex Dubai 2025' },
    { code: 'EAGLE', name: 'Eagle', line: 'The black edition.', mark: 'assets/marks/edition_eagle.png', run: 'Limited to 50', debut: 'SHOT Show 2026' },
  ];
  return (
    <section id="collection" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={WIDE}>
        <div data-reveal style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: '24px', marginBottom: 'var(--sp-9)' }}>
          <div>
            <CPEyebrow index="05">The Collection</CPEyebrow>
            <h2 style={{ margin: '24px 0 0', fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'var(--fs-display-2)', lineHeight: 1.06, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Every edition, a piece of art.
            </h2>
          </div>
          <CPBtn variant="text" onClick={() => onNavigate('collection')}>Enquire about an edition</CPBtn>
        </div>
        <div data-reveal style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--sp-8)', alignItems: 'center', padding: 'var(--sp-8)', marginBottom: 'var(--sp-6)', background: 'var(--surface-void)', border: '1px solid var(--border-metal)', borderRadius: 'var(--r-md)', overflow: 'hidden' }} className="cp-split">
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--sp-5)' }}>
            <Pic src="assets/logo/ELYSIEN_white.png" alt="ELYSIEN" style={{ width: 'min(320px, 80%)', height: 'auto', opacity: 0.95 }} />
            <div>
              <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)' }}>ELYSIEN — Signature</h3>
              <span style={{ display: 'block', marginTop: 'var(--sp-3)', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>Germany · IWA 2026</span>
            </div>
            <p style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(1.1rem, 1.5vw, 1.4rem)', lineHeight: 1.35, letterSpacing: 'var(--ls-display)', color: 'var(--text-secondary)', textWrap: 'pretty' }}>
              The piece every edition returns to — now in standard production. Made to order, by the same hands, to the same standard.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-6)', flexWrap: 'wrap' }}>
              <CPBtn variant="champagne" as="a" href="configurator/index.html">Configure your finish</CPBtn>
              <CPBtn variant="text" onClick={() => onNavigate('collection')}>Enquire about the Signature</CPBtn>
            </div>
          </div>
          <figure style={{ margin: 0, borderRadius: 'var(--r-sm)', overflow: 'hidden' }}>
            <Pic src="assets/photos/elysien_signature_trio.jpg" alt="ELYSIEN Signature — three finishes" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', aspectRatio: '3 / 2' }} />
          </figure>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 'var(--sp-5)' }} className="cp-editions">
          {editions.map((e) => (
            <div data-reveal key={e.code}><EditionSeal {...e} /></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function EditionSeal({ code, name, sub, line, mark, run, debut }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
        padding: 'var(--sp-7) var(--sp-4) var(--sp-6)',
        background: 'var(--surface-void)',
        border: `1px solid ${hover ? 'var(--border-metal)' : 'var(--border-hairline)'}`,
        borderRadius: 'var(--r-md)',
        transition: 'border-color var(--dur-slow) var(--ease-cinema), transform var(--dur-slow) var(--ease-cinema)',
        transform: hover ? 'translateY(-4px)' : 'none',
        height: '100%',
      }}
    >
      <div style={{ height: '96px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 'var(--sp-5)' }}>
        <Pic src={mark} alt={name} style={{
          maxHeight: '96px', maxWidth: '100%', width: 'auto', objectFit: 'contain',
          filter: 'brightness(0) invert(0.86)',
          opacity: hover ? 1 : 0.78,
          transition: 'opacity var(--dur-slow) var(--ease-cinema)',
        }} />
      </div>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', color: 'var(--text-accent)', marginBottom: 'var(--sp-3)' }}>{code}</span>
      <h3 style={{ margin: '0 0 var(--sp-3)', fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: '1.35rem', lineHeight: 1.1, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>{name}</h3>
      {sub && (
        <span style={{ margin: '0 0 var(--sp-4)', fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 'var(--fs-caption)', lineHeight: 1.55, color: 'var(--text-secondary)' }}>{sub}</span>
      )}
      {line && (
        <p style={{ margin: '0 0 var(--sp-4)', fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 'var(--fs-caption)', lineHeight: 1.55, color: 'var(--text-secondary)' }}>{line}</p>
      )}
      <div style={{ marginTop: 'auto', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: '10px', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{run}</span>
        {debut && (
          <span style={{ marginTop: 'var(--sp-3)', paddingTop: 'var(--sp-3)', borderTop: '1px solid var(--border-hairline)', width: '100%', minHeight: '60px', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', boxSizing: 'border-box', fontFamily: 'var(--font-display)', fontSize: '10px', lineHeight: 1.5, letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>{debut}</span>
        )}
      </div>
    </div>
  );
}

/* ---------- PHILOSOPHY ---------- */
function Philosophy() {
  return (
    <section id="philosophy" style={{ background: 'var(--surface-void)', padding: 'var(--section-y) 0' }}>
      <div style={{ ...PAD, maxWidth: '980px', textAlign: 'center' }}>
        <div data-reveal style={{ display: 'flex', justifyContent: 'center', marginBottom: 'var(--sp-7)' }}>
          <CPEyebrow tick={false} align="center">The Philosophy</CPEyebrow>
        </div>
        <blockquote data-reveal style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 300, fontStyle: 'italic', fontSize: 'var(--fs-display-3)', lineHeight: 1.22, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)', textWrap: 'balance' }}>
          “Objects can have a soul. True luxury begins where mass production ends — in patience, in rarity, in the single hand that refuses to hurry.”
        </blockquote>
        <div data-reveal style={{ marginTop: 'var(--sp-7)', display: 'flex', justifyContent: 'center' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-micro)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Créapeiron · Founding Maker</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- GALLERY ---------- */
function Gallery() {
  const shots = [
    { src: 'assets/photos/foe_gold_square.jpg', span: 5, h: '54vh' },
    { src: 'assets/photos/gal_eagle_black.jpg', span: 7, h: '54vh' },
    { src: 'assets/photos/gal_chameleon.jpg', span: 7, h: '54vh' },
    { src: 'assets/photos/gal_black_hero.jpg', span: 5, h: '54vh' },
    { src: 'assets/photos/gal_blue.jpg', span: 6, h: '48vh' },
    { src: 'assets/photos/gal_titanium.jpg', span: 6, h: '48vh' },
  ];
  return (
    <section id="gallery" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={WIDE}>
        <div data-reveal style={{ marginBottom: 'var(--sp-8)' }}><CPEyebrow index="07">Gallery</CPEyebrow></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 'var(--sp-4)' }} className="cp-gallery">
          {shots.map((s, i) => (
            <figure data-reveal key={i} style={{ margin: 0, gridColumn: 'span ' + s.span, height: s.h, borderRadius: 'var(--r-md)', overflow: 'hidden', background: 'var(--grad-void)' }} className="cp-gfig">
              <Pic src={s.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- COLLECTORS ---------- */
function Collectors({ onNavigate }) {
  return (
    <section id="collectors" style={{ background: 'var(--surface-void)', padding: 'var(--section-y) 0', position: 'relative' }}>
      <div style={WIDE}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--sp-9)', alignItems: 'center' }} className="cp-split">
          <div>
            <div data-reveal><CPEyebrow index="08">Collectors</CPEyebrow></div>
            <h2 data-reveal style={{ margin: '26px 0 24px', fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'var(--fs-display-2)', lineHeight: 1.06, letterSpacing: 'var(--ls-display)', color: 'var(--text-primary)' }}>
              Few will ever<br />hold one.
            </h2>
            <p data-reveal className="cp-body" style={{ maxWidth: '46ch', marginBottom: 'var(--sp-6)', fontSize: 'var(--fs-body-lg)' }}>
              Ownership is an introduction, not a transaction. Each ELYSIEN passes into a small and quiet circle — collectors, connoisseurs, those who understand that the rarest things are never offered loudly.
            </p>
            <div data-reveal><CPBtn variant="ghost" onClick={() => onNavigate('concierge')}>Request an introduction</CPBtn></div>
          </div>
          <div data-reveal style={{ borderRadius: 'var(--r-md)', overflow: 'hidden', background: 'var(--surface-void)', alignSelf: 'center' }}>
            <Pic src="assets/photos/collector_portrait.jpg" alt="A collector" style={{ display: 'block', width: '100%', height: 'auto' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Manifesto, Craftsmanship, Mechanism, Specs, Collection, Philosophy, Gallery, Collectors });
