// Examples page hero (v3): full-bleed photograph + quiet caption.
// La Villa for body. Celestial Guardian only for the giant headline.
// No italics anywhere.

function ExHero() {
  return (
    <section className="ps-section ex-hero" data-mobile-pad="true" data-mobile-y="md" style={{
      position: 'relative',
      background: '#1B1612',
      color: 'var(--cream)',
      minHeight: '62vh',
      overflow: 'hidden',
      display: 'flex', alignItems: 'flex-end'
    }}>
      <img
        src="assets/hero-examples.jpg"
        alt=""
        aria-hidden="true"
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'center 35%',
          filter: 'brightness(0.78)'
        }} />
      
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to right, rgba(15,12,10,0.62) 0%, rgba(15,12,10,0.28) 38%, rgba(15,12,10,0) 65%)'
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to top, rgba(15,12,10,0.45) 0%, rgba(15,12,10,0) 38%)'
      }} />

      <div className="ex-hero-content" style={{
        position: 'relative', maxWidth: 1320, width: '100%',
        margin: '0 auto', padding: '0 48px 96px'
      }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
          color: 'rgba(242,236,228,0.74)', marginBottom: 28, fontWeight: 500
        }}>
          <span style={{
            display: 'inline-block', width: 24, height: 1, background: 'rgba(242,236,228,0.74)',
            verticalAlign: 'middle', marginRight: 14
          }}></span>
          Examples · Vol. 01
        </div>

        <h1 className="celestial" style={{
          fontSize: 'clamp(48px,6.2vw,118px)',
          color: 'var(--cream)', margin: 0, lineHeight: 0.92,
          maxWidth: 820
        }}>
          Six recipes,<br />from the studio.
        </h1>

        <p style={{
          marginTop: 32, maxWidth: 540,
          fontFamily: '"La Villa", sans-serif',
          fontSize: 16, lineHeight: 1.6,
          color: 'rgba(242,236,228,0.86)'
        }}>A flat product placed in a real scene. A wardrobe rewritten on set. A single rose, photographed once and reframed twice. Each chapter shows the ingredients we gave Product Studio and the output it returned.

        </p>
      </div>

      <style>{`
        @media (max-width: 700px) {
          .ex-hero { min-height: 56vh !important; }
          .ex-hero-content { padding: 0 24px 48px !important; }
        }
      `}</style>
    </section>);

}

// Chapter contents — La Villa for everything (no Celestial here).
function ExIndex({ items }) {
  return (
    <nav aria-label="Examples chapters" style={{
      background: 'var(--cream)', padding: '120px 48px'
    }} data-mobile-pad="true">
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: 'var(--fg-2)', marginBottom: 32, fontWeight: 500
        }}>Contents</div>
        <ol style={{
          listStyle: 'none', padding: 0, margin: 0,
          display: 'flex', flexDirection: 'column',
          borderTop: '1px solid var(--border-1)'
        }}>
          {items.map((it, i) =>
          <li key={it.href} style={{ borderBottom: '1px solid var(--border-1)' }}>
              <a href={it.href}
            className="ex-index-row"
            onMouseEnter={(e) => {e.currentTarget.style.background = 'var(--cream-deep)';}}
            onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';}}
            style={{
              display: 'grid',
              gridTemplateColumns: '70px 1fr auto',
              gap: 28, alignItems: 'baseline',
              padding: '24px 12px',
              color: 'var(--cocoa)',
              transition: 'background 200ms',
              fontFamily: '"La Villa", sans-serif'
            }}>
                <span className="ex-index-num" style={{
                fontSize: 11, letterSpacing: '0.24em',
                color: 'var(--fg-2)', fontWeight: 500
              }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span className="ex-index-label" style={{
                fontSize: 'clamp(20px,2vw,26px)', lineHeight: 1.25, fontWeight: 500,
                letterSpacing: '-0.005em'
              }}>
                  {it.label}
                </span>
                <span className="ex-index-kicker" style={{
                fontSize: 11, letterSpacing: '0.22em',
                color: 'var(--fg-2)', textTransform: 'uppercase', fontWeight: 500
              }}>
                  {it.kicker}
                </span>
              </a>
            </li>
          )}
        </ol>
      </div>

      <style>{`
        @media (max-width: 780px) {
          nav[aria-label="Examples chapters"] { padding: 56px 20px !important; }
          .ex-index-row {
            grid-template-columns: 32px 1fr !important;
            grid-template-rows: auto auto !important;
            gap: 4px 14px !important;
            padding: 16px 4px !important;
            align-items: start !important;
          }
          .ex-index-num { grid-row: 1 / 3 !important; align-self: start !important; padding-top: 4px !important; }
          .ex-index-label { font-size: 17px !important; line-height: 1.3 !important; }
          .ex-index-kicker { font-size: 9.5px !important; letter-spacing: 0.2em !important; opacity: 0.85 !important; }
        }
      `}</style>
    </nav>);

}

// Final CTA — cocoa, calm, no italics.
function ExCTA() {
  return (
    <section className="ps-section" data-mobile-pad="true" data-mobile-y="lg" style={{
      background: 'var(--cocoa)', color: 'var(--cream)', padding: '160px 48px'
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: 'rgba(242,236,228,0.62)', marginBottom: 28, fontWeight: 500
        }}>
          Vol. 02 · your turn
        </div>
        <h2 className="celestial" style={{
          fontSize: 'clamp(56px,7vw,128px)', color: 'var(--cream)', margin: 0, lineHeight: 0.95
        }}>
          Make your own.
        </h2>
        <p style={{
          fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.65,
          color: 'rgba(242,236,228,0.78)', maxWidth: 560, margin: '36px auto 48px'
        }}>
          Open the studio, pick a Vault Stock photograph, drop in your product, generate.
        </p>
        <div className="ps-cta-row" style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="https://productstudio.thevaultstock.com/" target="_blank" rel="noopener" style={{
            background: 'var(--cream)', color: 'var(--cocoa)',
            padding: '16px 32px', borderRadius: 999,
            fontFamily: '"La Villa", sans-serif', fontSize: 12, letterSpacing: '0.22em',
            textTransform: 'uppercase', fontWeight: 500,
            display: 'inline-block'
          }}>Open Product Studio →</a>
          <a href="Product Studio.html#pricing" style={{
            background: 'transparent', color: 'var(--cream)',
            padding: '16px 32px', borderRadius: 999,
            fontFamily: '"La Villa", sans-serif', fontSize: 12, letterSpacing: '0.22em',
            textTransform: 'uppercase', fontWeight: 500,
            display: 'inline-block',
            border: '1px solid rgba(242,236,228,0.42)'
          }}>See pricing</a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { ExHero, ExIndex, ExCTA });