/* global React */

/* "Writers Everywhere" — documentary photo essay. Each card is a
   stylized gradient "location" with a caption. Placeholders ready
   for real photography drop-in. */
const LOCATIONS = [
  {
    id: 'sea',
    loc: 'ocean',
    overlays: ['loc-overlay-sky', 'loc-horizon'],
    code: 'N 02°14\'  W 158°11\'',
    place: 'Pacific crossing',
    caption: 'On a sloop between Hawai\'i and the Line Islands, eleven days from land.',
    tag: 'Sailboat · Offline since day three',
    span: 'tall',
  },
  {
    id: 'arctic',
    loc: 'arctic',
    overlays: ['loc-overlay-sky'],
    code: 'N 78°55\'  E 11°56\'',
    place: 'Ny-Ålesund, Svalbard',
    caption: 'A climate researcher writing a novel between ice-core shifts.',
    tag: 'Polar station',
  },
  {
    id: 'forest',
    loc: 'forest',
    overlays: ['loc-horizon'],
    code: 'S 03°28\'  W 62°11\'',
    place: 'Amazonas, Brazil',
    caption: 'Field notes, draft chapters, and a solar panel strapped to a pack.',
    tag: 'Rainforest canopy',
    span: 'wide',
  },
  {
    id: 'desert',
    loc: 'desert',
    overlays: ['loc-overlay-sky', 'loc-horizon'],
    code: 'S 24°37\'  W 69°18\'',
    place: 'Atacama, Chile',
    caption: 'The driest place on earth, and a memoir that needed the space to breathe.',
    tag: 'Desert',
  },
  {
    id: 'camper',
    loc: 'camper',
    overlays: ['loc-horizon'],
    code: 'N 37°12\'  W 115°48\'',
    place: 'Nevada backcountry',
    caption: 'A screenwriter on the road, rewriting the third act in a camper at dusk.',
    tag: 'Overlanding',
  },
  {
    id: 'night',
    loc: 'night',
    overlays: ['loc-stars', 'loc-horizon'],
    code: 'N 32°46\'  W 105°49\'',
    place: 'Sacramento Mountains',
    caption: 'An astronomer\'s cabin. The sky is the thing to write about, and it\'s out.',
    tag: 'Night sky',
    span: 'tall',
  },
  {
    id: 'alpine',
    loc: 'alpine',
    overlays: ['loc-overlay-sky'],
    code: 'N 46°32\'  E 08°05\'',
    place: 'Eiger north face, Switzerland',
    caption: 'A hut at 3,250 metres. A draft of something quiet and terrifying.',
    tag: 'Alpine summit',
  },
  {
    id: 'shinkansen',
    loc: 'shinkansen',
    overlays: ['loc-overlay-sky'],
    code: 'Tōkyō → Kyōto',
    place: 'Tōkaidō Shinkansen',
    caption: 'Two hours and eighteen minutes of perfect writing light.',
    tag: 'Train window',
    span: 'wide',
  },
];

function PhotoCard({ item, size = 'normal' }) {
  const spanClass = item.span === 'wide' ? 'pe-wide' : item.span === 'tall' ? 'pe-tall' : '';
  return (
    <figure className={`pe-card ${spanClass}`} data-reveal>
      <div className={`photo-ph photo-ph-grain loc-${item.loc} ${(item.overlays || []).join(' ')}`}
           style={{ height: '100%', minHeight: 280, borderRadius: 12 }}>
        <div className="pe-badge">
          <span className="pe-badge-dot"/>
          <span>{item.tag}</span>
        </div>
        <div className="pe-gps">{item.code}</div>
      </div>
      <figcaption className="pe-cap">
        <span className="pe-place">{item.place}</span>
        <span className="pe-caption">{item.caption}</span>
      </figcaption>
    </figure>
  );
}

function PhotoEssay() {
  return (
    <section className="sec" id="photo-essay" style={{ background: 'var(--paper-deep)', color: 'var(--ink-on-deep)' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'end', marginBottom: 64 }}>
          <div data-reveal>
            <span className="eyebrow" style={{ color: 'var(--ink-on-deep-3)' }}>
              <span className="eyebrow-dot" style={{ background: 'var(--ink-on-deep)' }}/> Writers everywhere
            </span>
          </div>
          <div data-reveal data-reveal-delay="1">
            <h2 className="headline" style={{ color: 'var(--ink-on-deep)', marginBottom: 24 }}>
              The people we built this for don't always have <em style={{ color: 'var(--spice-saffron)' }}>five bars and a cappuccino.</em>
            </h2>
            <p className="subhead" style={{ color: 'var(--ink-on-deep-2)', maxWidth: '60ch' }}>
              Writing happens in the places you actually are. We built Story Builder so the work — and the understanding of the work — goes with you.
            </p>
          </div>
        </div>

        <div className="pe-grid">
          {LOCATIONS.map(item => <PhotoCard key={item.id} item={item}/>)}
        </div>

        <p data-reveal style={{
          marginTop: 72,
          textAlign: 'center',
          font: '400 clamp(18px, 2vw, 26px)/1.4 var(--font-serif-literary)',
          fontStyle: 'italic',
          color: 'var(--ink-on-deep-2)',
          maxWidth: '48ch',
          marginLeft: 'auto',
          marginRight: 'auto',
        }}>
          Every one of these writers gets the same full Story Builder — the outline, the inspector, the diffs, the understanding — without a single byte crossing a network.
        </p>
      </div>
    </section>
  );
}

window.PhotoEssay = PhotoEssay;