// Variation B — Contact Sheet · iPhone first
// Vertical 35mm strip, hero up top, taps to "develop" frames.
// Designed for ~390px width but scales to desktop.

const VarContact = () => {
  const [lit, setLit] = React.useState({}); // index -> bool
  const [hero, setHero] = React.useState(2); // current featured
  const frames = [
    { src: 'assets/photos/v-margarita.jpeg', cap: 'el rio · scarf, shades, lime' },
    { src: 'assets/photos/peace-sign.jpeg',  cap: 'backyard, peace sign' },
    { src: 'assets/photos/winery-cheek.jpeg', cap: 'winery, cheek to shoulder' },
    { src: 'assets/photos/in-v-we-trust.jpeg', cap: 'in v we trust 🙏' },
    { src: 'assets/photos/convertible-scarf.jpeg', cap: 'top down, scarf flying' },
  ];

  const toggle = (i) => {
    setLit(s => ({...s, [i]: !s[i]}));
    setHero(i);
  };

  return (
    <div className="vc-stage">
      <div className="vc-grain" />

      {/* top bar */}
      <div className="vc-top">
        <span>FOR V. · ROLL 38</span>
        <span style={{opacity:0.55}}>26·04·26</span>
      </div>

      {/* hero / title */}
      <header className="vc-hero">
        <div className="vc-kicker">· a small site, made by hand ·</div>
        <h1 className="vc-h1">
          happy<br/>
          <span className="vc-italic">birthday,</span> v.
        </h1>
        <p className="vc-sub">
          thirty-eight looks, frankly, ridiculous on you.
        </p>
      </header>

      {/* big featured frame */}
      <div className="vc-feature">
        <div className="vc-feature-inner">
          <img src={frames[hero].src} alt="" />
          <div className="vc-feature-meta">
            <span className="vc-num">{String(hero+33).padStart(2,'0')}</span>
            <span className="vc-cap">{frames[hero].cap}</span>
          </div>
        </div>
      </div>

      {/* prompt */}
      <div className="vc-prompt">
        <span className="vc-dot"/>
        tap a frame to develop it
      </div>

      {/* contact strip */}
      <div className="vc-strip">
        <div className="vc-sprockets vc-sprockets-top">
          {Array.from({length: 18}).map((_,i)=> <span key={i} className="vc-sprocket"/>)}
        </div>
        <div className="vc-frames">
          {frames.map((f, i) => (
            <button key={i}
              className={`vc-frame ${lit[i] ? 'lit' : ''} ${hero===i ? 'active' : ''}`}
              onClick={() => toggle(i)}>
              <span className="vc-frame-num">{String(i+33).padStart(2,'0')}</span>
              <img src={f.src} alt="" />
            </button>
          ))}
        </div>
        <div className="vc-sprockets vc-sprockets-bot">
          {Array.from({length: 18}).map((_,i)=> <span key={i} className="vc-sprocket"/>)}
        </div>
      </div>

      {/* nav cards (the inside pages) */}
      <nav className="vc-nav">
        <div className="vc-nav-label">inside · <span style={{opacity:0.6}}>five small things</span></div>
        <a className="vc-nav-card" href="contact/i-things.html">
          <span className="vc-nav-num">i.</span>
          <span className="vc-nav-text">things i've noticed about you</span>
          <span className="vc-nav-arrow">→</span>
        </a>
        <a className="vc-nav-card" href="contact/ii-mix.html">
          <span className="vc-nav-num">ii.</span>
          <span className="vc-nav-text">a small mix, made for you</span>
          <span className="vc-nav-arrow">→</span>
        </a>
        <a className="vc-nav-card" href="contact/iii-bandit.html">
          <span className="vc-nav-num">iii.</span>
          <span className="vc-nav-text">blossom bandit, evidence</span>
          <span className="vc-nav-arrow">→</span>
        </a>
        <a className="vc-nav-card" href="contact/iv-mcdonalds.html">
          <span className="vc-nav-num">iv.</span>
          <span className="vc-nav-text">mcdonald's, sneakily, a brief defense</span>
          <span className="vc-nav-arrow">→</span>
        </a>
        <a className="vc-nav-card" href="contact/v-cake.html">
          <span className="vc-nav-num">v.</span>
          <span className="vc-nav-text">cake (the dog), a brief cameo</span>
          <span className="vc-nav-arrow">→</span>
        </a>
      </nav>

      <footer className="vc-foot">
        <div style={{opacity:0.5}}>shot &amp; printed by</div>
        <div className="vc-sig">Zach</div>
        <div className="vc-cro">made by hand, for you.</div>
      </footer>
    </div>
  );
};

window.VarContact = VarContact;