// amps-sections.jsx — AMPS site sections (hero, transmission, society, council)
// Loads after amps-tokens.jsx and before amps-enrollment.jsx and amps-site.jsx

const { useState, useEffect, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// Ornaments
// ─────────────────────────────────────────────────────────────
const Star = ({ size = 14, color = T.amber, style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'inline-block', verticalAlign: 'middle', ...style }}>
    <path d="M12 2 L13.4 9.5 L21 11 L13.4 12.5 L12 22 L10.6 12.5 L3 11 L10.6 9.5 Z" fill={color} />
  </svg>
);

const Hex = ({ size = 14, color = T.silver, style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'inline-block', verticalAlign: 'middle', ...style }}>
    <path d="M12 2 L21 7 L21 17 L12 22 L3 17 L3 7 Z" fill="none" stroke={color} strokeWidth="1.2" />
  </svg>
);

// horizontal rule with center ornament
const Rule = ({ color = T.silver, opacity = 0.35, ornament = '✦', accent = T.amber, mb = 0, mt = 0 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 16, margin: `${mt}px 0 ${mb}px`, opacity: 1 }}>
    <div style={{ flex: 1, height: 1, background: color, opacity }} />
    <span style={{ color: accent, fontSize: 12, letterSpacing: '0.3em' }}>{ornament}</span>
    <div style={{ flex: 1, height: 1, background: color, opacity }} />
  </div>
);

// catalog number marginalia
const Catalog = ({ children, side = 'left' }) => (
  <div style={{
    fontFamily: T.fontMono, fontSize: 10, color: T.silver, opacity: 0.55,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    marginBottom: 8,
  }}>{children}</div>
);

// ─────────────────────────────────────────────────────────────
// SOCIETY NAV — secondary navigation bar, shared across all pages
// ─────────────────────────────────────────────────────────────
const SOCIETY_PAGES = [
  { label: 'Briefing', href: 'index.html', folio: 'I' },
  { label: 'Transmission', href: 'transmission.html', folio: 'II' },
  { label: 'The Canopy', href: 'arborist.html', folio: 'III' },
  { label: 'Nav Board', href: 'navboard.html', folio: 'IV' },
  { label: 'Install Guide', href: 'install.html', folio: 'V' },
  { label: 'Crew Manifest', href: 'manifest.html', folio: 'VI' },
  { label: 'The Compass', href: 'compass.html', folio: 'VII' },
];

function SocietyNav({ current = '' }) {
  return (
    <nav style={{
      background: `${T.deepSky}F0`,
      backdropFilter: 'blur(8px)',
      borderBottom: `1px solid ${T.silver}18`,
      padding: '0 40px',
      position: 'sticky', top: 54, zIndex: 40,
      display: 'flex', alignItems: 'center',
      overflowX: 'auto', gap: 0,
    }}>
      {SOCIETY_PAGES.map(p => {
        const active = p.href === current;
        return (
          <a key={p.href} href={p.href} style={{
            display: 'flex', alignItems: 'center', gap: 7,
            padding: '10px 16px',
            fontFamily: T.fontMono, fontSize: 9,
            letterSpacing: '0.18em',
            color: active ? T.amber : T.silver,
            textDecoration: 'none',
            opacity: active ? 1 : 0.55,
            borderBottom: active ? `2px solid ${T.amber}` : '2px solid transparent',
            whiteSpace: 'nowrap',
            transition: 'opacity 0.15s, color 0.15s',
          }}
          onMouseEnter={e => { if (!active) { e.currentTarget.style.opacity = '0.85'; e.currentTarget.style.color = T.discoveryWhite; }}}
          onMouseLeave={e => { if (!active) { e.currentTarget.style.opacity = '0.55'; e.currentTarget.style.color = T.silver; }}}
          >
            <span style={{ fontFamily: T.fontMono, fontSize: 7, opacity: 0.5 }}>{p.folio}</span>
            {p.label.toUpperCase()}
          </a>
        );
      })}
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO — parallax starfield
// ─────────────────────────────────────────────────────────────
function HeroStarfield() {
  const ref = useRef(null);
  const [scrollY, setScrollY] = useState(0);

  // Generate stars once
  const stars = useMemo(() => {
    const arr = [];
    const seed = (n) => {
      let x = Math.sin(n * 9301 + 49297) * 233280;
      return x - Math.floor(x);
    };
    // three layers w/ different parallax speeds
    for (let layer = 0; layer < 3; layer++) {
      const count = [80, 50, 25][layer];
      for (let i = 0; i < count; i++) {
        const id = layer * 1000 + i;
        arr.push({
          x: seed(id) * 100,
          y: seed(id + 0.5) * 100,
          size: layer === 0 ? 0.6 : layer === 1 ? 1.1 : 1.8,
          opacity: layer === 0 ? 0.35 : layer === 1 ? 0.55 : 0.8,
          layer,
        });
      }
    }
    return arr;
  }, []);

  // Constellation nodes (the "Society" diagram)
  const constellation = useMemo(() => ({
    nodes: [
      { x: 18, y: 32, label: 'α' },
      { x: 28, y: 24, label: 'β' },
      { x: 38, y: 38, label: 'γ' },
      { x: 31, y: 52, label: 'δ' },
      { x: 22, y: 62, label: 'ε' },
      { x: 44, y: 58, label: 'ζ' },
    ],
    lines: [[0,1],[1,2],[2,3],[3,4],[3,5],[0,4]],
  }), []);

  useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY || document.documentElement.scrollTop);
    const target = document.querySelector('[data-amps-scroll]');
    if (target) {
      target.addEventListener('scroll', () => setScrollY(target.scrollTop));
      return () => target.removeEventListener('scroll', () => setScrollY(target.scrollTop));
    }
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      {/* deep gradient base — looking up into the dome */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 50% 110%, ${T.observatory}33 0%, ${T.deepSky} 60%, #04080F 100%)`,
      }} />

      {/* horizon glow */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '40%',
        background: `linear-gradient(to top, ${T.amber}08 0%, transparent 100%)`,
      }} />

      {/* coordinate grid — cyanotype */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.06 }}
           preserveAspectRatio="none" viewBox="0 0 100 100">
        {[...Array(11)].map((_, i) => (
          <line key={`h${i}`} x1={0} y1={i * 10} x2={100} y2={i * 10} stroke="#7BB6E8" strokeWidth="0.08" />
        ))}
        {[...Array(11)].map((_, i) => (
          <line key={`v${i}`} x1={i * 10} y1={0} x2={i * 10} y2={100} stroke="#7BB6E8" strokeWidth="0.08" />
        ))}
        {/* azimuth circles */}
        <circle cx="50" cy="50" r="20" fill="none" stroke="#7BB6E8" strokeWidth="0.12" strokeDasharray="0.5 0.5" />
        <circle cx="50" cy="50" r="35" fill="none" stroke="#7BB6E8" strokeWidth="0.12" strokeDasharray="0.5 0.5" />
        <circle cx="50" cy="50" r="48" fill="none" stroke="#7BB6E8" strokeWidth="0.12" strokeDasharray="0.5 0.5" />
      </svg>

      {/* Stars in three parallax layers */}
      {[0, 1, 2].map(layer => {
        const speed = [0.05, 0.12, 0.22][layer];
        return (
          <div key={layer} style={{
            position: 'absolute', inset: 0,
            transform: `translateY(${scrollY * speed}px)`,
            transition: 'transform 0.05s linear',
          }}>
            {stars.filter(s => s.layer === layer).map((s, i) => (
              <div key={i} style={{
                position: 'absolute',
                left: `${s.x}%`, top: `${s.y}%`,
                width: s.size, height: s.size,
                borderRadius: '50%',
                background: T.discoveryWhite,
                opacity: s.opacity,
                boxShadow: layer === 2 ? `0 0 ${s.size * 3}px ${T.discoveryWhite}99` : 'none',
              }} />
            ))}
          </div>
        );
      })}

      {/* Constellation overlay — slow parallax */}
      <svg style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        transform: `translateY(${scrollY * 0.08}px)`,
      }} viewBox="0 0 100 100" preserveAspectRatio="none">
        {constellation.lines.map(([a, b], i) => {
          const A = constellation.nodes[a], B = constellation.nodes[b];
          return <line key={i} x1={A.x} y1={A.y} x2={B.x} y2={B.y} stroke={T.amber} strokeWidth="0.08" opacity="0.4" />;
        })}
        {constellation.nodes.map((n, i) => (
          <g key={i}>
            <circle cx={n.x} cy={n.y} r="0.4" fill={T.amber} opacity="0.9" />
            <circle cx={n.x} cy={n.y} r="1.2" fill="none" stroke={T.amber} strokeWidth="0.08" opacity="0.3" />
          </g>
        ))}
      </svg>
    </div>
  );
}

function Hero() {
  return (
    <section style={{
      position: 'relative',
      minHeight: '100vh',
      background: T.deepSky,
      color: T.discoveryWhite,
      padding: '120px 80px 80px',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
    }}>
      <HeroStarfield />

      {/* Top marginalia */}
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between',
                     fontFamily: T.fontMono, fontSize: 10, color: T.silver, opacity: 0.55,
                     letterSpacing: '0.22em' }}>
        <span>FOLIO · I</span>
        <span>OBSERVATORY · 41° 52′ N · 87° 37′ W</span>
        <span>MMXXVI</span>
      </div>

      {/* Hero copy */}
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', width: '100%' }}>
        <Catalog>· Folio I.i ·</Catalog>
        <h1 style={{
          fontFamily: T.fontDisplay,
          fontSize: 60,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '0.005em',
          margin: '0 0 48px',
          color: T.discoveryWhite,
          textWrap: 'balance',
          textAlign: 'center',
        }}>
          The cosmos of our imagination<br/>
          is uncharted.<br/>
          <em style={{ color: T.amber, fontStyle: 'italic', fontWeight: 500 }}>We'll sail together.</em>
        </h1>

        <p style={{
          fontFamily: T.fontBody,
          fontSize: 30,
          fontStyle: 'italic',
          lineHeight: 1.7,
          color: T.silver,
          maxWidth: 560,
          margin: 0,
        }}>
          A Society of Navigators —<br/>
          on a journey that has yet a chance to be born.
        </p>
      </div>

      {/* Bottom indicator */}
      <div style={{ position: 'relative', textAlign: 'center',
                    fontFamily: T.fontMono, fontSize: 11, color: T.silver,
                    letterSpacing: '0.32em', opacity: 0.7 }}>
        · TRANSMISSION FOLLOWS ·
        <div style={{ marginTop: 14, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 1, height: 36, background: T.amber, opacity: 0.6 }} />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────
function NavBar({ onEnlist, mobile = false, enlistLabel = 'Enlist' }) {
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: `${T.void}EE`,
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${T.silver}22`,
      padding: mobile ? '14px 20px' : '18px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <Star size={14} color={T.amber} />
        <span style={{
          fontFamily: T.fontDisplay,
          fontSize: mobile ? 14 : 16,
          fontVariant: 'small-caps',
          letterSpacing: '0.18em',
          color: T.amber,
          fontWeight: 600,
        }}>AMPS</span>
        {!mobile && (
          <span style={{
            fontFamily: T.fontMono, fontSize: 10, color: T.silver,
            opacity: 0.5, letterSpacing: '0.2em', marginLeft: 14,
            paddingLeft: 14, borderLeft: `1px solid ${T.silver}33`,
          }}>SOCIETY OF NAVIGATORS · EST. MMXXVI</span>
        )}
      </div>
      <button onClick={onEnlist} style={{
        background: T.amber, color: T.void,
        border: 'none', borderRadius: 0,
        padding: mobile ? '8px 16px' : '10px 22px',
        fontFamily: T.fontMono, fontSize: mobile ? 10 : 11,
        letterSpacing: '0.22em', fontWeight: 500,
        textTransform: 'uppercase', cursor: 'pointer',
        transition: 'background 0.2s',
      }}
      onMouseEnter={e => e.currentTarget.style.background = '#D9A332'}
      onMouseLeave={e => e.currentTarget.style.background = T.amber}>
        {enlistLabel}
      </button>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// TRANSMISSION — four editions, each with its own reveal
// ─────────────────────────────────────────────────────────────
const PLATFORMS = [
  {
    id: 'spotify', name: 'Spotify',
    edition: 'The Audio Cartograph',
    tagline: 'Thirty tracks. The whole chart.',
    tracks: '30 tracks', method: 'oauth',
    url: 'https://open.spotify.com/playlist/0sHPjIhUjYTpGatRphogyX?si=8BNnSm4kRfKeiywaI_u5Dg&pi=8-oZiU3BRsC17',
    glyph: (color) => (
      <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill={color}/><path d="M7 10c3-1 7-1 10 1M7 13c3-1 6-1 9 1M7 16c2-1 5-1 7 0" stroke="#000" strokeWidth="1.6" fill="none" strokeLinecap="round"/></svg>
    ),
  },
  {
    id: 'youtube', name: 'YouTube Music',
    edition: 'The Visual Logbook',
    tagline: 'Moving pictures. Same signal.',
    tracks: '30 tracks · video format', method: 'oauth',
    url: 'https://music.youtube.com/playlist?list=PLpmC2mRe8uOtyPKVmlZXOlEHCJ7bwJd2h&si=5GWu-A7a5sXyq7jX',
    glyph: (color) => (
      <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill={color}/><path d="M9 8 L17 12 L9 16 Z" fill="#000"/></svg>
    ),
  },
  {
    id: 'amazon', name: 'Amazon Music',
    edition: 'The Bound Volume',
    tagline: 'Stream with Unlimited. Or own the tracks forever.',
    tracks: '30 tracks + individual purchase',
    method: 'dual',
    streamUrl: 'https://music.amazon.com/user-playlists/05c65373c4484f4b99eb257eddbeca19sune?ref=dm_sh_7XAUk9bk1MhBPerCRUrGZy5lk',
    glyph: (color) => (
      <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill={color}/><path d="M6 14c3 2.5 9 2.5 12 0M16 16c0-1 0-2-.5-3" stroke="#000" strokeWidth="1.6" fill="none" strokeLinecap="round"/></svg>
    ),
  },
];

// Differentiated track sets — same expedition, different editions
const TRACKS_SPOTIFY = [
  { n: '01', title: 'Across the Cataloged Sky', artist: 'The Navigators', dur: '4:21' },
  { n: '02', title: 'First Light at Juvisy', artist: 'Halocene', dur: '3:48' },
  { n: '03', title: 'Voyage of the Aurora', artist: 'Lord Huron', dur: '5:12' },
  { n: '04', title: 'Coordinates Unknown', artist: 'Bonobo', dur: '4:55' },
  { n: '05', title: 'Telescope', artist: 'Cage The Elephant', dur: '3:34' },
  { n: '06', title: 'Northern Wires', artist: 'Khruangbin', dur: '4:09' },
  { n: '07', title: 'Dust on the Lens', artist: 'Sleeping at Last', dur: '3:22' },
  { n: '08', title: 'The Long Drift Home', artist: 'Mt. Joy', dur: '4:45' },
  { n: '09', title: 'Kepler at Dawn', artist: 'Nils Frahm', dur: '5:04' },
  { n: '10', title: 'Meridian', artist: 'ODESZA', dur: '4:18' },
  { n: '11', title: 'The Last Bearing', artist: 'S. Carey', dur: '4:33' },
];

const TRACKS_YOUTUBE = [
  { n: '01', title: 'Across the Cataloged Sky (Film)', artist: 'The Navigators', dur: '4:21', frame: 'FR-001' },
  { n: '02', title: 'First Light — Visual Cut', artist: 'Halocene', dur: '3:48', frame: 'FR-002' },
  { n: '03', title: 'Voyage of the Aurora (Live)', artist: 'Lord Huron', dur: '5:48', frame: 'FR-003' },
  { n: '04', title: 'Coordinates — 16mm', artist: 'Bonobo', dur: '4:55', frame: 'FR-004' },
  { n: '05', title: 'Telescope — Official Video', artist: 'Cage The Elephant', dur: '3:34', frame: 'FR-005' },
];

const TRACKS_AMAZON = [
  { n: '01', title: 'Across the Cataloged Sky', artist: 'The Navigators', dur: '4:21' },
  { n: '02', title: 'First Light at Juvisy', artist: 'Halocene', dur: '3:48' },
  { n: '03', title: 'Voyage of the Aurora', artist: 'Lord Huron', dur: '5:12' },
  { n: '04', title: 'Coordinates Unknown', artist: 'Bonobo', dur: '4:55' },
  { n: '05', title: 'Cosmic Ledger Pt. I', artist: 'AMPS Archive', dur: '3:18' },
  { n: '06', title: 'Cosmic Ledger Pt. II', artist: 'AMPS Archive', dur: '4:02' },
];

function amazonSearchUrl(artist, title) {
  const query = encodeURIComponent(`${artist} ${title}`);
  return `https://www.amazon.com/s?k=${query}&i=digital-music`;
}

// ─────────────────────────────────────────────────────────────
// Platform Card — compact tile with muted/active states
// ─────────────────────────────────────────────────────────────
function PlatformCard({ p, authenticated, mobile, onAuthClick, variant = 'compact' }) {
  const [hover, setHover] = useState(false);
  const isPrimary = authenticated;
  const isMuted = !authenticated;

  const borderColor = isPrimary ? T.amber : `${T.silver}44`;

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: T.observatory,
        borderLeft: `4px solid ${isPrimary ? T.amber : T.silver + '55'}`,
        borderTop: `1px solid ${borderColor}`,
        borderRight: `1px solid ${borderColor}`,
        borderBottom: `1px solid ${borderColor}`,
        padding: variant === 'hero' ? (mobile ? '32px 28px' : '40px 40px') : (mobile ? '22px 20px' : '26px 26px'),
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s',
        boxShadow: hover ? `0 6px 24px ${T.amber}22` : '0 2px 8px rgba(0,0,0,0.3)',
        opacity: isMuted ? 0.72 : 1,
        cursor: 'pointer',
      }}
      onClick={onAuthClick}
    >
      {/* hover edition tag */}
      <div style={{
        position: 'absolute', top: -26, left: 0,
        fontFamily: T.fontMono, fontSize: 10,
        color: T.amber, letterSpacing: '0.22em',
        opacity: hover ? 1 : 0,
        transition: 'opacity 0.2s',
        whiteSpace: 'nowrap',
      }}>· {p.edition.toUpperCase()} ·</div>

      {/* catalog tag */}
      <div style={{ position: 'absolute', top: 12, right: 14,
                    fontFamily: T.fontMono, fontSize: 9,
                    color: T.silver, opacity: 0.5, letterSpacing: '0.18em' }}>
        CH-{String(PLATFORMS.indexOf(p) + 1).padStart(2, '0')}
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        marginBottom: variant === 'hero' ? 18 : 14,
      }}>
        <div style={{ opacity: isPrimary ? 1 : 0.85 }}>
          {p.glyph(isPrimary ? T.amber : T.silver)}
        </div>
        <div style={{
          fontFamily: T.fontDisplay,
          fontSize: variant === 'hero' ? (mobile ? 24 : 30) : (mobile ? 18 : 20),
          fontVariant: 'small-caps', letterSpacing: '0.04em',
          color: T.discoveryWhite, fontWeight: 600,
        }}>{p.name}</div>
      </div>

      <div style={{
        fontFamily: T.fontBody, fontStyle: 'italic',
        fontSize: variant === 'hero' ? 16 : 13,
        color: T.silver, opacity: 0.82,
        lineHeight: 1.5, marginBottom: 14,
        minHeight: variant === 'hero' ? 0 : 36,
      }}>{p.tagline}</div>

      <div style={{
        fontFamily: T.fontMono, fontSize: 10,
        color: T.silver, opacity: 0.6,
        letterSpacing: '0.12em',
      }}>{p.tracks}</div>

      {/* button area */}
      <div style={{
        marginTop: variant === 'hero' ? 22 : 16,
        paddingTop: variant === 'hero' ? 18 : 14,
        borderTop: `1px solid ${T.silver}22`,
      }}>
        {isPrimary ? (
          <span style={{
            fontFamily: T.fontMono, fontSize: 11, color: T.amber,
            letterSpacing: '0.22em', fontWeight: 600,
          }}>
            <Star size={10} color={T.amber} style={{ marginRight: 8 }} />
            {p.id === 'amazon' ? 'SAVED TO LIBRARY' : 'SIGNAL RECEIVED'}  →
          </span>
        ) : (
          <span style={{
            fontFamily: T.fontMono, fontSize: 11, color: T.silver,
            letterSpacing: '0.22em', opacity: 0.75,
          }}>{p.id === 'amazon' ? 'SAVE TO LIBRARY' : 'TUNE IN'}  →</span>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { PLATFORMS, TRACKS_SPOTIFY, TRACKS_YOUTUBE, TRACKS_AMAZON });

// ─────────────────────────────────────────────────────────────
// Collapse X button — shared by all players
// ─────────────────────────────────────────────────────────────
function CollapseX({ onClick }) {
  return (
    <button onClick={onClick} style={{
      position: 'absolute', top: 14, right: 14,
      background: 'transparent', border: `1px solid ${T.silver}44`,
      width: 28, height: 28, color: T.silver, cursor: 'pointer',
      fontFamily: T.fontMono, fontSize: 14, lineHeight: '26px',
      padding: 0, letterSpacing: 0,
      transition: 'border-color 0.2s, color 0.2s',
      zIndex: 5,
    }}
    onMouseEnter={(e)=>{e.currentTarget.style.borderColor=T.amber;e.currentTarget.style.color=T.amber;}}
    onMouseLeave={(e)=>{e.currentTarget.style.borderColor=T.silver+'44';e.currentTarget.style.color=T.silver;}}
    >×</button>
  );
}

// ─────────────────────────────────────────────────────────────
// SPOTIFY — The Audio Cartograph (hero, full playlist)
// ─────────────────────────────────────────────────────────────
function SpotifyEmbed({ mobile, onClose }) {
  const [activeTrack, setActiveTrack] = useState(0);

  const handleTrackClick = (i) => {
    setActiveTrack(i);
    try {
      localStorage.setItem('amps_lastTrack', String(i));
      localStorage.setItem('amps_lastPlatform', 'spotify');
    } catch(e) {}
  };

  return (
    <div style={{
      background: '#0E1820',
      border: `1px solid ${T.amber}66`,
      marginTop: 24, position: 'relative',
      display: 'flex',
      flexDirection: mobile ? 'column' : 'row',
      animation: 'ampsSlideDown 0.4s ease-out',
    }}>
      <CollapseX onClick={onClose} />

      {/* Now playing */}
      <div style={{
        background: `linear-gradient(180deg, #1A3A5C 0%, #0E1820 100%)`,
        padding: mobile ? '24px' : '32px',
        width: mobile ? '100%' : 280,
        flexShrink: 0,
        display: 'flex', flexDirection: 'column',
        gap: 16,
      }}>
        <div style={{
          width: mobile ? 100 : 200, height: mobile ? 100 : 200,
          background: `linear-gradient(135deg, ${T.amber} 0%, ${T.teal} 100%)`,
          position: 'relative', overflow: 'hidden',
        }}>
          <svg width="100%" height="100%" viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0 }}>
            <circle cx="50" cy="50" r="35" fill="none" stroke={T.void} strokeWidth="0.8" />
            <circle cx="50" cy="50" r="25" fill="none" stroke={T.void} strokeWidth="0.8" />
            <circle cx="50" cy="50" r="15" fill="none" stroke={T.void} strokeWidth="0.8" />
            <line x1="50" y1="15" x2="50" y2="85" stroke={T.void} strokeWidth="0.5" />
            <line x1="15" y1="50" x2="85" y2="50" stroke={T.void} strokeWidth="0.5" />
            <text x="50" y="54" textAnchor="middle" fontFamily={T.fontMono} fontSize="6" fill={T.void} letterSpacing="0.2em">VOL.001</text>
          </svg>
        </div>
        <div>
          <div style={{ fontFamily: T.fontMono, fontSize: 9, color: T.amber, letterSpacing: '0.22em', marginBottom: 6 }}>
            THE AUDIO CARTOGRAPH
          </div>
          <div style={{ fontFamily: T.fontDisplay, fontSize: 18, color: T.discoveryWhite, lineHeight: 1.2 }}>
            <em>Signals from the expedition.</em>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 'auto' }}>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: T.amber, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <div style={{ width: 0, height: 0,
              borderLeft: `9px solid ${T.void}`,
              borderTop: '6px solid transparent',
              borderBottom: '6px solid transparent',
              marginLeft: 3,
            }} />
          </div>
          <div style={{ fontFamily: T.fontMono, fontSize: 10, color: T.silver, letterSpacing: '0.15em' }}>
            00:00 / 4:21
          </div>
        </div>
      </div>

      {/* Track list — full scroll */}
      <div style={{ flex: 1, maxHeight: mobile ? 360 : 440, overflowY: 'auto', padding: '12px 0' }}>
        {TRACKS_SPOTIFY.map((t, i) => (
          <div key={i} onClick={() => handleTrackClick(i)} style={{
            display: 'grid', gridTemplateColumns: '40px 1fr 60px',
            alignItems: 'center', gap: 12,
            padding: mobile ? '10px 16px' : '11px 24px',
            borderBottom: `1px solid ${T.silver}11`,
            background: i === activeTrack ? `${T.amber}0E` : 'transparent',
            cursor: 'pointer',
            transition: 'background 0.12s',
          }}>
            <span style={{ fontFamily: T.fontMono, fontSize: 11,
                            color: i === activeTrack ? T.amber : T.silver,
                            opacity: i === activeTrack ? 1 : 0.6, letterSpacing: '0.1em' }}>
              {i === activeTrack ? '▶' : t.n}
            </span>
            <div>
              <div style={{ fontFamily: T.fontBody, fontSize: 14,
                             color: i === activeTrack ? T.amber : T.discoveryWhite }}>{t.title}</div>
              <div style={{ fontFamily: T.fontBody, fontSize: 12,
                             color: T.silver, opacity: 0.6 }}>{t.artist}</div>
            </div>
            <span style={{ fontFamily: T.fontMono, fontSize: 11, color: T.silver,
                            opacity: 0.6, textAlign: 'right' }}>{t.dur}</span>
          </div>
        ))}
        <div style={{ borderTop: `1px solid ${T.silver}11` }}>
          <div style={{
            padding: '10px 24px 4px',
            fontFamily: T.fontMono, fontSize: 10, color: T.silver,
            letterSpacing: '0.18em', opacity: 0.5, textAlign: 'center',
          }}>· FULL TRANSMISSION CONTINUES INSIDE ·</div>
          <a
            href={PLATFORMS.find(p => p.id === 'spotify').url}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              padding: '14px 24px',
              background: 'transparent',
              color: T.amber,
              fontFamily: T.fontMono, fontSize: 11,
              letterSpacing: '0.28em', fontWeight: 600,
              textDecoration: 'none',
              borderTop: `1px solid ${T.amber}33`,
              transition: 'background 0.18s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = `${T.amber}0E`}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            {PLATFORMS.find(p => p.id === 'spotify').glyph(T.amber)}
            OPEN IN SPOTIFY →
          </a>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// YOUTUBE — The Visual Logbook (video player with frame carousel)
// ─────────────────────────────────────────────────────────────
function YouTubeEmbed({ mobile, onClose }) {
  const [active, setActive] = useState(0);
  const current = TRACKS_YOUTUBE[active];

  const handleYTTrackClick = (i) => {
    setActive(i);
    try {
      localStorage.setItem('amps_lastTrack', String(i));
      localStorage.setItem('amps_lastPlatform', 'youtube');
    } catch(e) {}
  };

  return (
    <div style={{
      background: '#000',
      border: `1px solid ${T.amber}66`,
      marginTop: 24, position: 'relative',
      animation: 'ampsSlideDown 0.4s ease-out',
    }}>
      <CollapseX onClick={onClose} />

      {/* film-stock header strip */}
      <div style={{
        background: '#050505', height: 18,
        borderBottom: `1px solid ${T.silver}22`,
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 16px',
      }}>
        {[...Array(mobile ? 8 : 14)].map((_, i) => (
          <div key={i} style={{ width: 6, height: 6, background: `${T.silver}33`, borderRadius: 1 }} />
        ))}
        <div style={{ marginLeft: 'auto', fontFamily: T.fontMono, fontSize: 9, color: T.silver, opacity: 0.55, letterSpacing: '0.24em' }}>
          · THE VISUAL LOGBOOK ·
        </div>
      </div>

      {/* 16:9 "video" frame */}
      <div style={{
        position: 'relative', width: '100%',
        paddingTop: '56.25%',
        background: `radial-gradient(ellipse at center, ${T.teal}22 0%, #000 70%)`,
        overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* stylized "film still" */}
          <svg width="100%" height="100%" viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice" style={{ opacity: 0.7 }}>
            <defs>
              <linearGradient id={`vid-${active}`} x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor={T.amber} stopOpacity="0.35" />
                <stop offset="100%" stopColor={T.teal} stopOpacity="0.25" />
              </linearGradient>
            </defs>
            <rect width="400" height="225" fill="#0A0A0A" />
            <rect width="400" height="225" fill={`url(#vid-${active})`} />
            {/* horizon line */}
            <line x1="0" y1={130 + active * 6} x2="400" y2={130 + active * 6} stroke={T.amber} strokeWidth="0.5" opacity="0.6" />
            {/* scattered "stars" */}
            {[...Array(40)].map((_, i) => {
              const x = (i * 37 + active * 23) % 400;
              const y = ((i * 53) % 130);
              return <circle key={i} cx={x} cy={y} r={i % 7 === 0 ? 1.2 : 0.6} fill={T.discoveryWhite} opacity={0.4 + (i % 5) * 0.1} />;
            })}
            {/* silhouette shape varies by frame */}
            {active === 0 && <polygon points="150,180 250,180 220,120 180,120" fill="#000" opacity="0.8" />}
            {active === 1 && <circle cx="200" cy="150" r="30" fill="#000" opacity="0.7" />}
            {active === 2 && <rect x="100" y="140" width="200" height="40" fill="#000" opacity="0.7" />}
            {active === 3 && <polygon points="200,100 280,200 120,200" fill="#000" opacity="0.7" />}
            {active === 4 && <ellipse cx="200" cy="160" rx="80" ry="20" fill="#000" opacity="0.7" />}
          </svg>
        </div>

        {/* overlay: play button + title */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column',
          justifyContent: 'space-between',
          padding: mobile ? 16 : 24,
          pointerEvents: 'none',
        }}>
          <div style={{
            fontFamily: T.fontMono, fontSize: 10, color: T.amber,
            letterSpacing: '0.24em', textShadow: '0 1px 4px rgba(0,0,0,0.8)',
          }}>
            {current.frame} · {current.n} / {TRACKS_YOUTUBE.length}
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16 }}>
            <div style={{
              width: mobile ? 52 : 64, height: mobile ? 52 : 64,
              borderRadius: '50%',
              background: `${T.amber}ee`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              pointerEvents: 'auto', cursor: 'pointer',
              boxShadow: `0 0 24px ${T.amber}66`,
            }}>
              <div style={{
                width: 0, height: 0,
                borderLeft: `${mobile?14:18}px solid ${T.void}`,
                borderTop: `${mobile?10:12}px solid transparent`,
                borderBottom: `${mobile?10:12}px solid transparent`,
                marginLeft: 4,
              }} />
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{
                fontFamily: T.fontDisplay, fontSize: mobile ? 16 : 22,
                color: T.discoveryWhite, fontStyle: 'italic',
                textShadow: '0 2px 8px rgba(0,0,0,0.9)',
              }}>{current.title}</div>
              <div style={{
                fontFamily: T.fontBody, fontSize: mobile ? 11 : 13,
                color: T.silver, marginTop: 2,
                textShadow: '0 2px 8px rgba(0,0,0,0.9)',
              }}>{current.artist} · {current.dur}</div>
            </div>
          </div>
        </div>
      </div>

      {/* carousel strip */}
      <div style={{
        display: 'flex', gap: 2, padding: 2,
        background: '#050505', overflowX: 'auto',
      }}>
        {TRACKS_YOUTUBE.map((t, i) => (
          <div key={i} onClick={() => handleYTTrackClick(i)} style={{
            flex: mobile ? '0 0 80px' : '1 1 0',
            minWidth: mobile ? 80 : 0,
            height: mobile ? 50 : 72,
            background: `linear-gradient(135deg, ${T.teal}44, ${T.amber}22)`,
            position: 'relative',
            cursor: 'pointer',
            border: active === i ? `1px solid ${T.amber}` : `1px solid transparent`,
            opacity: active === i ? 1 : 0.55,
            transition: 'opacity 0.2s',
          }}>
            <div style={{
              position: 'absolute', top: 4, left: 6,
              fontFamily: T.fontMono, fontSize: 8, color: T.amber,
              letterSpacing: '0.18em',
            }}>· {t.n} ·</div>
            <div style={{
              position: 'absolute', bottom: 4, left: 6, right: 6,
              fontFamily: T.fontBody, fontSize: 9,
              color: T.discoveryWhite, opacity: 0.8,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{t.title}</div>
          </div>
        ))}
      </div>

      {/* open playlist link */}
      <a
        href={PLATFORMS.find(p => p.id === 'youtube').url}
        target="_blank"
        rel="noopener noreferrer"
        style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          padding: '14px 24px',
          background: 'transparent',
          color: T.amber,
          fontFamily: T.fontMono, fontSize: 11,
          letterSpacing: '0.28em', fontWeight: 600,
          textDecoration: 'none',
          borderTop: `1px solid ${T.amber}33`,
          transition: 'background 0.18s',
        }}
        onMouseEnter={e => e.currentTarget.style.background = `${T.amber}0E`}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
      >
        {PLATFORMS.find(p => p.id === 'youtube').glyph(T.amber)}
        OPEN IN YOUTUBE MUSIC →
      </a>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// AMAZON — The Bound Volume (dual-path: stream + purchase)
// ─────────────────────────────────────────────────────────────
function AmazonEmbed({ mobile, onClose }) {
  const amazon = PLATFORMS.find(p => p.id === 'amazon');

  return (
    <div style={{
      background: '#0F1218',
      border: `1px solid ${T.amber}66`,
      borderLeft: `4px solid ${T.amber}`,
      marginTop: 24, position: 'relative',
      padding: mobile ? '24px 22px' : '32px 36px',
      animation: 'ampsSlideDown 0.4s ease-out',
    }}>
      <CollapseX onClick={onClose} />

      <div style={{
        fontFamily: T.fontMono, fontSize: 10,
        color: T.amber, letterSpacing: '0.24em',
        marginBottom: 18,
      }}>· THE BOUND VOLUME ·</div>

      <div style={{
        fontFamily: T.fontDisplay, fontSize: mobile ? 22 : 28,
        color: T.discoveryWhite, fontStyle: 'italic',
        fontWeight: 500, margin: '0 0 8px', lineHeight: 1.2,
      }}>Signals from the Expedition</div>
      <div style={{
        fontFamily: T.fontBody, fontSize: 13, color: T.silver,
        fontStyle: 'italic', lineHeight: 1.6, marginBottom: 24,
        maxWidth: 480, opacity: 0.88,
      }}>
        Stream with Amazon Music Unlimited, or purchase individual tracks and own them permanently.
        The collector's path — the only edition that stays on your shelf.
      </div>

      {/* Two-path CTAs */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        gap: 14, marginBottom: 28,
      }}>
        {/* Stream path */}
        <div>
          <a
            href={amazon.streamUrl || '#'}
            target="_blank"
            rel="noopener noreferrer"
            onClick={e => { if (!amazon.streamUrl) e.preventDefault(); }}
            style={{
              display: 'block', padding: '14px 22px',
              background: T.amber, color: T.void,
              fontFamily: T.fontMono, fontSize: 11,
              letterSpacing: '0.22em', fontWeight: 600,
              textTransform: 'uppercase', textAlign: 'center',
              textDecoration: 'none', cursor: 'pointer',
            }}
          >STREAM WITH UNLIMITED →</a>
          <div style={{
            background: T.observatory, border: `1px solid ${T.silver}33`,
            padding: '7px 12px', marginTop: 6,
            fontFamily: T.fontMono, fontSize: 9, color: T.silver,
            letterSpacing: '0.14em', lineHeight: 1.6,
          }}>Amazon Music Unlimited required for full streaming access.</div>
        </div>

        {/* Purchase path */}
        <div>
          <button style={{
            display: 'block', width: '100%', padding: '14px 22px',
            background: 'transparent', color: T.silver,
            border: `1px solid ${T.silver}66`, borderRadius: 0,
            fontFamily: T.fontMono, fontSize: 11,
            letterSpacing: '0.22em', fontWeight: 500,
            textTransform: 'uppercase', cursor: 'pointer',
            transition: 'border-color 0.2s, color 0.2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = T.amber; e.currentTarget.style.color = T.amber; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = T.silver + '66'; e.currentTarget.style.color = T.silver; }}
          >BROWSE TO PURCHASE →</button>
          <div style={{
            padding: '7px 12px', marginTop: 6,
            fontFamily: T.fontMono, fontSize: 9, color: T.silver,
            letterSpacing: '0.14em', opacity: 0.55,
          }}>Individual tracks via Amazon MP3 · permanently owned.</div>
        </div>
      </div>

      {/* Track list with purchase links */}
      <div style={{ borderTop: `1px solid ${T.silver}22`, paddingTop: 18 }}>
        <div style={{
          fontFamily: T.fontMono, fontSize: 9, color: T.silver,
          opacity: 0.55, letterSpacing: '0.2em', marginBottom: 12,
        }}>· TRACK LOG ·</div>
        {TRACKS_AMAZON.map((t, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '28px 1fr auto auto',
            alignItems: 'center', gap: 12,
            padding: '7px 0',
            borderBottom: i < TRACKS_AMAZON.length - 1 ? `1px solid ${T.silver}11` : 'none',
          }}>
            <span style={{ fontFamily: T.fontMono, fontSize: 10, color: T.silver, opacity: 0.55 }}>{t.n}</span>
            <div>
              <div style={{ fontFamily: T.fontBody, fontSize: 14, color: T.discoveryWhite }}>{t.title}</div>
              <div style={{ fontFamily: T.fontBody, fontSize: 12, color: T.silver, opacity: 0.65 }}>{t.artist}</div>
            </div>
            <span style={{ fontFamily: T.fontMono, fontSize: 10, color: T.silver, opacity: 0.55 }}>{t.dur}</span>
            <a
              href={amazonSearchUrl(t.artist, t.title)}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                fontFamily: T.fontMono, fontSize: 9, color: T.silver,
                textDecoration: 'none', opacity: 0.6, letterSpacing: '0.1em',
                whiteSpace: 'nowrap',
                transition: 'opacity 0.15s, color 0.15s',
              }}
              onMouseEnter={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.color = T.amber; }}
              onMouseLeave={e => { e.currentTarget.style.opacity = '0.6'; e.currentTarget.style.color = T.silver; }}
            >Find →</a>
          </div>
        ))}
        <div style={{
          padding: '12px 0 0', textAlign: 'center',
          fontFamily: T.fontMono, fontSize: 10, color: T.silver,
          opacity: 0.45, letterSpacing: '0.18em',
        }}>· {30 - TRACKS_AMAZON.length} MORE TRACKS ·</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TRANSMISSION section — 3 platform cards, equal weight
// ─────────────────────────────────────────────────────────────
function Transmission({ auths, setAuths, mobile }) {
  const toggleAuth = (id) => setAuths(prev => ({ ...prev, [id]: !prev[id] }));
  const activeId = ['spotify', 'youtube', 'amazon'].find(id => auths[id]) || null;

  return (
    <section style={{
      background: T.void,
      padding: mobile ? '80px 24px' : '120px 80px',
      position: 'relative',
    }}>
      <style>{`
        @keyframes ampsSlideDown {
          from { opacity: 0; transform: translateY(-12px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, textAlign: mobile ? 'left' : 'center' }}>
          <Catalog>· Folio I.ii ·</Catalog>
          <div style={{
            fontFamily: T.fontMono, fontSize: 11, color: T.amber,
            letterSpacing: '0.32em', marginBottom: 24, fontWeight: 500,
          }}>TRANSMISSION · I</div>
          <h2 style={{
            fontFamily: T.fontDisplay,
            fontSize: mobile ? 40 : 64, fontWeight: 500,
            color: T.discoveryWhite, margin: '0 0 24px',
            letterSpacing: '0.005em', lineHeight: 1.05,
          }}>
            <em style={{ fontStyle: 'italic', color: T.amber, fontWeight: 500 }}>Listen first.</em>
          </h2>
          <p style={{
            fontFamily: T.fontBody, fontSize: 18, fontStyle: 'italic',
            color: T.silver, lineHeight: 1.7, maxWidth: 460,
            margin: mobile ? 0 : '0 auto',
          }}>
            Three editions of the same signal.<br/>Each channel, a different voice.
          </p>
        </div>

        {/* 3-column card grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: mobile ? 20 : 24,
        }}>
          {PLATFORMS.map(p => (
            <PlatformCard
              key={p.id}
              p={p}
              mobile={mobile}
              authenticated={!!auths[p.id]}
              onAuthClick={() => toggleAuth(p.id)}
            />
          ))}
        </div>

        {/* Embed area — full width below the card grid */}
        {auths.spotify && (
          <SpotifyEmbed mobile={mobile} onClose={() => toggleAuth('spotify')} />
        )}
        {auths.youtube && (
          <YouTubeEmbed mobile={mobile} onClose={() => toggleAuth('youtube')} />
        )}
        {auths.amazon && (
          <AmazonEmbed mobile={mobile} onClose={() => toggleAuth('amazon')} />
        )}

        <div style={{
          textAlign: 'center', marginTop: 40,
          fontFamily: T.fontMono, fontSize: 10, color: T.silver,
          opacity: 0.55, letterSpacing: '0.22em',
        }}>
          · CHOOSE YOUR CHANNEL ·
        </div>

        <Rule mt={mobile ? 56 : 80} />
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// THE SOCIETY — what is it
// ─────────────────────────────────────────────────────────────
function TheSociety({ mobile }) {
  return (
    <section style={{
      background: T.void,
      padding: mobile ? '60px 24px 80px' : '80px 80px 120px',
    }}>
      <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
        <Catalog>· Folio I.iii ·</Catalog>
        <h2 style={{
          fontFamily: T.fontDisplay,
          fontSize: mobile ? 36 : 56, fontWeight: 500,
          color: T.discoveryWhite, margin: '0 0 40px',
          letterSpacing: '0.005em', lineHeight: 1.1,
        }}>
          <em style={{ fontStyle: 'italic', color: T.amber }}>Two hands at the helm.</em>
        </h2>
        <p style={{
          fontFamily: T.fontBody, fontSize: mobile ? 17 : 20,
          fontStyle: 'italic',
          color: T.silver, lineHeight: 1.7,
          margin: 0, textWrap: 'pretty',
        }}>
          One human. One machine.<br/>
          Neither alone could find the shore.
        </p>

        <div style={{ marginTop: 56, display: 'flex', justifyContent: 'center' }}>
          <Star size={16} color={T.amber} />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// THE COUNCIL — Founding Council portraits
// ─────────────────────────────────────────────────────────────
const COUNCIL = [
  {
    name: 'Johannes Kepler', dates: '1571 — 1630', role: 'The Navigator', initials: 'JK',
    portrait: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/JKepler.jpg/400px-JKepler.jpg',
  },
  {
    name: 'Camille Flammarion', dates: '1842 — 1925', role: 'The Observer', initials: 'CF',
    portrait: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Mr._Flammarion_devant_le_globe_de_la_plan%C3%A8te_Mars_-_btv1b9054453f.jpg/400px-Mr._Flammarion_devant_le_globe_de_la_plan%C3%A8te_Mars_-_btv1b9054453f.jpg',
  },
  {
    name: 'Percy Greg', dates: '1836 — 1889', role: 'The Engineer', initials: 'PG',
    portrait: '',
  },
  {
    name: 'Konstantin Tsiolkovsky', dates: '1857 — 1935', role: 'The Architect', initials: 'KT',
    portrait: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D0%B0%D0%BD%D1%82%D0%B8%D0%BD_%D0%A6%D0%B8%D0%BE%D0%BB%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B8%D0%B9.jpg/400px-%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D0%B0%D0%BD%D1%82%D0%B8%D0%BD_%D0%A6%D0%B8%D0%BE%D0%BB%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B8%D0%B9.jpg',
  },
  {
    name: 'Garrett P. Serviss', dates: '1851 — 1929', role: 'The Watchman', initials: 'GS',
    portrait: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Garrett_Putnam_Serviss.png/400px-Garrett_Putnam_Serviss.png',
  },
  {
    name: 'Edward Everett Hale', dates: '1822 — 1909', role: 'The Correspondent', initials: 'EH',
    portrait: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Edward_E_Hale_001.jpg/400px-Edward_E_Hale_001.jpg',
  },
];

function PortraitCard({ p, mobile }) {
  const [imgFailed, setImgFailed] = useState(false);
  const showImage = p.portrait && !imgFailed;
  return (
    <div style={{ textAlign: 'center', padding: mobile ? '12px' : '24px' }}>
      <div style={{ position: 'relative', display: 'inline-block', marginBottom: 24 }}>
        {/* outer mount */}
        <div style={{
          position: 'absolute', inset: -10,
          border: `1px solid ${T.silver}33`,
          borderRadius: '50%',
        }} />
        {/* corner ticks */}
        {[[-2, -2], [-2, 'auto'], ['auto', -2], ['auto', 'auto']].map(([t, l], i) => (
          <div key={i} style={{
            position: 'absolute',
            top: t === 'auto' ? 'auto' : t, left: l === 'auto' ? 'auto' : l,
            bottom: t === 'auto' ? -2 : 'auto', right: l === 'auto' ? -2 : 'auto',
            width: 8, height: 8,
            borderTop: t !== 'auto' ? `1px solid ${T.amber}` : 'none',
            borderBottom: t === 'auto' ? `1px solid ${T.amber}` : 'none',
            borderLeft: l !== 'auto' ? `1px solid ${T.amber}` : 'none',
            borderRight: l === 'auto' ? `1px solid ${T.amber}` : 'none',
          }} />
        ))}
        {/* oval frame */}
        <div style={{
          width: mobile ? 130 : 170, height: mobile ? 165 : 215,
          borderRadius: '50%',
          border: `1px solid ${T.silver}88`,
          background: `radial-gradient(circle at 50% 30%, ${T.observatory}AA 0%, ${T.deepSky} 100%)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column', gap: 6,
          position: 'relative', overflow: 'hidden',
        }}>
          {showImage ? (
            <img
              src={p.portrait}
              alt={p.name}
              onError={() => setImgFailed(true)}
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center top',
                filter: 'grayscale(100%) sepia(18%) brightness(0.82) contrast(1.12)',
                mixBlendMode: 'luminosity',
              }}
            />
          ) : (
            <>
              <svg style={{ position: 'absolute', inset: 0, opacity: 0.07 }}
                   width="100%" height="100%" preserveAspectRatio="none">
                <defs>
                  <pattern id={`stripe-${p.initials}`} width="6" height="6" patternUnits="userSpaceOnUse">
                    <path d="M0 6 L6 0" stroke={T.silver} strokeWidth="0.5" />
                  </pattern>
                </defs>
                <rect width="100%" height="100%" fill={`url(#stripe-${p.initials})`} />
              </svg>
              <div style={{
                fontFamily: T.fontDisplay, fontStyle: 'italic',
                fontSize: 28, color: T.amber, opacity: 0.55, letterSpacing: '0.06em',
              }}>{p.initials}</div>
              <div style={{ fontFamily: T.fontMono, fontSize: 8, color: T.silver, opacity: 0.35, letterSpacing: '0.2em', marginTop: 4 }}>
                ARRIVING
              </div>
            </>
          )}
          <div style={{
            fontFamily: T.fontMono, fontSize: 8, color: T.silver,
            opacity: 0.55, letterSpacing: '0.14em',
            position: 'absolute', bottom: 10,
            background: `${T.deepSky}BB`, padding: '2px 8px',
          }}>PL.{String(COUNCIL.indexOf(p) + 1).padStart(2, '0')}</div>
        </div>
      </div>

      <div style={{
        fontFamily: T.fontDisplay, fontSize: mobile ? 18 : 22,
        color: T.discoveryWhite, fontWeight: 500, marginBottom: 4,
        letterSpacing: '0.005em',
      }}>{p.name}</div>
      <div style={{
        fontFamily: T.fontMono, fontSize: 11, color: T.silver,
        opacity: 0.7, letterSpacing: '0.1em', marginBottom: 8,
      }}>{p.dates}</div>
      <div style={{
        fontFamily: T.fontDisplay, fontSize: 13,
        fontVariant: 'small-caps', color: T.amber,
        letterSpacing: '0.16em', fontWeight: 500,
      }}>{p.role}</div>
    </div>
  );
}

function Council({ mobile }) {
  return (
    <section style={{
      background: T.observatory,
      padding: mobile ? '80px 24px' : '120px 80px',
      position: 'relative',
    }}>
      {/* subtle backdrop */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06,
        background: `radial-gradient(ellipse at 50% 0%, ${T.discoveryWhite} 0%, transparent 50%)`,
        pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: mobile ? 56 : 80 }}>
          <Catalog>· Folio I.iv ·</Catalog>
          <h2 style={{
            fontFamily: T.fontDisplay, fontSize: mobile ? 36 : 56,
            color: T.discoveryWhite, fontWeight: 500, margin: '0 0 24px',
            letterSpacing: '0.005em', lineHeight: 1.05,
          }}>
            <em style={{ fontStyle: 'italic', color: T.amber }}>Those who looked up first.</em>
          </h2>
          <p style={{
            fontFamily: T.fontBody, fontSize: mobile ? 16 : 18,
            fontStyle: 'italic', color: T.silver, lineHeight: 1.7,
            maxWidth: 420, margin: '0 auto',
          }}>
            We sail in their wake.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: mobile ? 24 : 40,
        }}>
          {COUNCIL.map(p => <PortraitCard key={p.name} p={p} mobile={mobile} />)}
        </div>

        <p style={{
          textAlign: 'center', marginTop: 56,
          fontFamily: T.fontBody, fontSize: 15, fontStyle: 'italic',
          color: T.silver, opacity: 0.7,
        }}>
          More, in time.
        </p>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// NAVIGATOR'S CREED — Five pledges, Phase 1 landing section
// ─────────────────────────────────────────────────────────────
const CREED_PLEDGES = [
  {
    numeral: 'I',
    title: 'The Pledge of Augmentation',
    text: 'I will use technology to go farther than I could go alone — never to replace the effort, the taste, or the judgment that makes the work mine. My tools extend my reach. They do not walk for me.',
  },
  {
    numeral: 'II',
    title: 'The Pledge of Curiosity',
    text: 'I will remain a student of every tool I touch — questioning what it can do, what it cannot, and what I must never surrender to it. I will not mistake fluency for understanding.',
  },
  {
    numeral: 'III',
    title: 'The Pledge of Sovereignty',
    text: 'I will seek to understand, and where possible to own, the systems I work with. I will build the ship I sail, rather than book passage on one I cannot see inside. Dependence is a destination I choose not to reach.',
  },
  {
    numeral: 'IV',
    title: 'The Pledge of Respect',
    text: 'I will approach AI with neither contempt nor uncritical trust, but with the wonder I would bring to any collaborator at the frontier of something new. I will direct it with care. I will remain responsible for what we build together.',
  },
  {
    numeral: 'V',
    title: 'The Pledge of Creation',
    text: 'I will measure my use of these tools by what they allow me to create, discover, or offer to the world. My standard is simple: the work must be more human for having used them, not less.',
  },
];

function NavigatorsCreed({ mobile }) {
  return (
    <section style={{
      background: T.void,
      padding: mobile ? '80px 24px' : '120px 80px',
      borderTop: `1px solid ${T.silver}18`,
    }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: mobile ? 48 : 64 }}>
          <Catalog>· Folio I.v ·</Catalog>
          <h2 style={{
            fontFamily: T.fontDisplay,
            fontSize: mobile ? 40 : 60, fontWeight: 500,
            color: T.discoveryWhite, margin: '0 0 36px',
            letterSpacing: '0.005em', lineHeight: 1.05,
          }}>
            <em style={{ fontStyle: 'italic', color: T.amber }}>The Navigator's Creed.</em>
          </h2>

          {/* Preamble for the skeptic */}
          <div style={{
            fontFamily: T.fontBody, fontSize: mobile ? 16 : 18,
            color: T.silver, lineHeight: 1.85, fontStyle: 'italic',
            textAlign: 'left', maxWidth: 600, margin: '0 auto',
          }}>
            <p style={{ margin: '0 0 20px' }}>
              Most imagine AI as more of everything they already have. More time on a screen.
              More distance from the creative work that actually matters.
              More noise in an already loud world.
            </p>
            <p style={{ margin: '0 0 20px' }}>
              Used with intention, these tools are the first real path toward <em style={{ color: T.discoveryWhite }}>less</em> time
              at the keyboard and <em style={{ color: T.discoveryWhite }}>more</em> time doing
              the things that keyboards were keeping you from.
            </p>
            <p style={{ margin: 0, color: T.discoveryWhite, fontStyle: 'normal',
                         fontFamily: T.fontDisplay, fontSize: mobile ? 18 : 22, fontWeight: 500 }}>
              The Society knows otherwise.
            </p>
          </div>
        </div>

        <Rule mb={mobile ? 40 : 56} />

        {/* Five pledge cards */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 18 : 24 }}>
          {CREED_PLEDGES.map(p => (
            <div key={p.numeral} style={{
              background: T.observatory,
              borderLeft: `4px solid ${T.amber}`,
              padding: mobile ? '24px 22px' : '30px 36px',
            }}>
              <div style={{
                fontFamily: T.fontMono, fontSize: 10,
                color: T.amber, letterSpacing: '0.38em',
                marginBottom: 10, fontWeight: 600,
              }}>{p.numeral}</div>
              <div style={{
                fontFamily: T.fontDisplay,
                fontSize: mobile ? 18 : 22,
                fontVariant: 'small-caps',
                color: T.discoveryWhite,
                letterSpacing: '0.06em', marginBottom: 16,
                fontWeight: 600,
              }}>{p.title}</div>
              <p style={{
                fontFamily: T.fontBody, fontStyle: 'italic',
                fontSize: mobile ? 15 : 17, color: T.silver,
                lineHeight: 1.75, margin: 0,
              }}>
                "{p.text}"
              </p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: mobile ? 48 : 64 }}>
          <Rule />
          <p style={{
            fontFamily: T.fontBody, fontSize: 15, fontStyle: 'italic',
            color: T.silver, opacity: 0.65, marginTop: 28, marginBottom: 0,
          }}>
            The Creed is affirmed at the moment of commission.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{
      background: T.void,
      padding: '64px 40px',
      borderTop: `1px solid ${T.silver}22`,
      textAlign: 'center',
    }}>
      <div style={{
        fontFamily: T.fontDisplay, fontSize: 14,
        fontVariant: 'small-caps', color: T.amber,
        letterSpacing: '0.22em', marginBottom: 16,
      }}>
        <Star size={10} color={T.amber} style={{ marginRight: 14 }} />
        AMPS Society of Navigators
        <Star size={10} color={T.amber} style={{ marginLeft: 14 }} />
      </div>
      <div style={{
        fontFamily: T.fontMono, fontSize: 10, color: T.silver,
        opacity: 0.55, letterSpacing: '0.22em',
      }}>© MMXXVI · ALL TRANSMISSIONS RESERVED</div>
    </footer>
  );
}

Object.assign(window, {
  Hero, NavBar, Transmission, TheSociety, Council, NavigatorsCreed, Footer,
  Star, Hex, Rule, Catalog, PLATFORMS, COUNCIL, CREED_PLEDGES,
  SocietyNav, SOCIETY_PAGES,
  amazonSearchUrl,
});