/* Amiga Online — homepage mockup (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow + terminal labels)
   Palette: obsidian #070a09 · graphite panel #0e1311 · steel #6b726c · off-white #ece7dc
            · phosphor green #56e08a (primary) · electric cyan #46d6e0 · muted magenta #c264c8
*/

const CH = {
  ink:    '#ece7dc',
  inkDim: 'rgba(236,231,220,0.62)',
  inkLow: 'rgba(236,231,220,0.34)',
  inkFaint:'rgba(236,231,220,0.14)',
  bg:     '#070a09',
  panel:  '#0e1311',
  steel:  '#6b726c',
  brass:  '#56e08a',                  /* primary accent — phosphor green */
  brassDim:'rgba(86,224,138,0.50)',
  cyan:   '#46d6e0',                  /* secondary accent — electric cyan */
  cyanDim:'rgba(70,214,224,0.45)',
  magenta:'#c264c8',                  /* tertiary accent — muted magenta CRT glow */
};

// Public site config. Claude should update site-config.js for each domain.
const SITE = {
  domain: 'AmigaOnline.com',
  brandName: 'Amiga Online',
  category: 'Independent retro computing portal concept',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for AmigaOnline.com has been sent.',
  messagePlaceholder: 'Tell me how you would use AmigaOnline.com or ask about acquiring the domain.',
  ...(window.SITE_CONFIG || {}),
};

/* ---------- shared bits ---------- */

const grainSVG = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")";

const Grain = ({ opacity = 0.55, blend = 'overlay' }) => (
  <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: grainSVG,
    opacity, mixBlendMode: blend,
  }} />
);

/* Photo placeholder plate — looks like an art-directed dark photo slot.
   When `image` is set, uses a real photo instead of the placeholder gradient. */
const Plate = ({ mood = 'garage', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    garage: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(86,224,138,0.22), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(70,214,224,0.16), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(8,14,12,0.5), transparent 70%),
      linear-gradient(180deg, #0c1311 0%, #080d0b 55%, #030605 100%)`,
    metal: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(70,214,224,0.16), transparent 65%),
      linear-gradient(115deg, #090d0c 0%, #131a18 50%, #050807 100%)`,
    road: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(86,224,138,0.16), transparent 60%),
      linear-gradient(180deg, #040605 0%, #0a0f0d 60%, #0c1512 100%)`,
    leather: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(194,100,200,0.16), transparent 62%),
      linear-gradient(160deg, #11100f 0%, #060808 100%)`,
    workshop: `
      radial-gradient(circle 320px at 70% 30%, rgba(86,224,138,0.28), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(70,214,224,0.16), transparent 65%),
      linear-gradient(180deg, #0c1311 0%, #04060500 100%), #050807`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#050403 url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.garage),
      ...style,
    }}>
      <Grain opacity={image ? 0.25 : 0.55} />
      {/* faint vignette */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 95% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%)'
          : 'radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%)',
      }} />
      {caption && (
        <div style={{
          position: 'absolute', bottom: 14, right: 18,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 1.4, textTransform: 'uppercase',
          color: 'rgba(235,229,216,0.42)',
        }}>{caption}</div>
      )}
      {children}
    </div>
  );
};

/* HeroPlate — static image hero with the same cinematic overlays the design uses.
   (Replaces the original looping-video hero; static images only.) */
const HeroPlate = ({ image, imagePos = 'center', caption, children, style = {}, id }) => (
  <div id={id} style={{
    position: 'relative', overflow: 'hidden',
    background: `#040605 url("${image}") ${imagePos} / cover no-repeat`,
    ...style,
  }}>
    {/* phosphor wash + dark vignette layered on top of the image */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `
        radial-gradient(ellipse 70% 55% at 60% 22%, rgba(86,224,138,0.14), transparent 62%),
        radial-gradient(ellipse 60% 45% at 22% 70%, rgba(70,214,224,0.10), transparent 70%),
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.62) 100%)`,
    }} />
    <Grain opacity={0.30} blend="overlay" />
    {caption && (
      <div style={{
        position: 'absolute', bottom: 14, right: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.4, textTransform: 'uppercase',
        color: 'rgba(236,231,220,0.55)',
      }}>{caption}</div>
    )}
    {children}
  </div>
);

const Eyebrow = ({ children, style = {} }) => (
  <div style={{
    fontFamily: 'IBM Plex Mono, monospace',
    fontSize: 10.5, letterSpacing: 2.2, textTransform: 'uppercase',
    color: CH.brass,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    ...style,
  }}>
    <span style={{ width: 22, height: 1, background: CH.brass, opacity: 0.85 }} />
    <span>{children}</span>
  </div>
);

/* Abstract CRT monitor monogram mark (original, generic — no protected branding) */
const AOMark = ({ size = 56, color = CH.ink, accent = CH.brass }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    {/* hairline frame */}
    <rect x="1.5" y="1.5" width="61" height="61" fill="none" stroke={color} strokeOpacity="0.35" strokeWidth="1" />
    {/* monitor body */}
    <rect x="14" y="16" width="36" height="26" rx="3" fill="none" stroke={color} strokeWidth="3" />
    {/* phosphor screen glow */}
    <rect x="20" y="22" width="24" height="14" rx="1.5" fill={accent} opacity="0.18" />
    {/* scanline */}
    <line x1="20" y1="29" x2="44" y2="29" stroke={accent} strokeWidth="1.4" opacity="0.85" />
    {/* stand + base */}
    <line x1="32" y1="42" x2="32" y2="50" stroke={color} strokeWidth="3" />
    <line x1="24" y1="50" x2="40" y2="50" stroke={color} strokeWidth="3" strokeLinecap="square" />
    {/* power dot */}
    <rect x="30" y="55" width="4" height="4" fill={accent} />
  </svg>
);

/* Wordmark — Antonio, condensed, set tight */
const Wordmark = ({ size = 22, color = CH.ink }) => (
  <span style={{
    fontFamily: 'Antonio, "Saira Condensed", sans-serif',
    fontWeight: 600, fontSize: size, letterSpacing: 0.5,
    color, lineHeight: 1, textTransform: 'none',
    display: 'inline-flex', alignItems: 'baseline', gap: size * 0.18,
  }}>
    <span>Amiga</span><span style={{ fontWeight: 400, opacity: 0.78 }}>Online</span>
  </span>
);

/* ──────────── Shared form logic ──────────── */

const INQUIRY_API_URL = SITE.inquiryApi;

function useInquiryForm() {
  const [values, setValues] = React.useState({
    name: '', email: '', company: '', offer: '', intendedUse: '', message: '', website: ''
  });
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  const set = field => e => setValues(v => ({ ...v, [field]: e.target.value }));

  const handleSubmit = async e => {
    e.preventDefault();
    if (status === 'submitting') return;
    if (!values.name.trim() || !values.message.trim()) {
      setStatus('error'); setErrorMsg('Name and Message are required.'); return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
      setStatus('error'); setErrorMsg('Please enter a valid email address.'); return;
    }
    setStatus('submitting');
    try {
      const res = await fetch(INQUIRY_API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...values,
          budget: values.offer,
          domain: SITE.domain,
          category: SITE.category,
          pageUrl: window.location.href,
          referrer: document.referrer,
          submittedAt: new Date().toISOString(),
        }),
      });
      if (res.ok) {
        setStatus('success');
      } else {
        const d = await res.json().catch(() => ({}));
        setStatus('error');
        setErrorMsg(d.error || d.message || 'Something went wrong. Please try again.');
      }
    } catch {
      setStatus('error');
      setErrorMsg('Something went wrong sending your inquiry. Please try again or contact the owner directly.');
    }
  };

  return { values, status, errorMsg, set, handleSubmit };
}

const MobileContactForm = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const fields = [
    { l: 'Name',    n: 'name',    t: 'text',  r: true, h: 'Required',     p: 'First & last' },
    { l: 'Email',   n: 'email',   t: 'email', r: true, h: 'Required',     p: 'you@email.com' },
    { l: 'Message', n: 'message', t: 'area',  r: true, h: 'Your inquiry', p: SITE.messagePlaceholder },
  ];
  return (
    <form onSubmit={handleSubmit} style={{ marginTop: 36, position: 'relative' }}>
      <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
        <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
      </div>
      {status === 'success' ? (
        <div style={{ padding: '40px 0', fontFamily: 'IBM Plex Mono, monospace',
          fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass, lineHeight: 1.8 }}>
          {SITE.successMessage}
        </div>
      ) : (
        <>
          {status === 'error' && (
            <div style={{ marginBottom: 16, fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
              color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
              {errorMsg}
            </div>
          )}
          {fields.map(f => (
            <div key={f.l} style={{ marginBottom: 22 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
                letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: CH.inkLow }}>{f.h}</span>
              </div>
              {f.t === 'area' ? (
                <textarea name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: CH.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              ) : (
                <input type={f.t} name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: CH.ink, letterSpacing: 0,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              )}
            </div>
          ))}
          <button type="submit" disabled={status === 'submitting'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 12,
            padding: '14px 22px',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 2.2, textTransform: 'uppercase',
            color: CH.bg, background: status === 'submitting' ? CH.steel : CH.brass,
            border: 'none', cursor: status === 'submitting' ? 'default' : 'pointer',
            opacity: status === 'submitting' ? 0.7 : 1,
          }}>
            {status === 'submitting' ? 'Sending…' : 'Send Inquiry'}
          </button>
          <div style={{
            marginTop: 18,
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
          }}>
            Independent illustrative concept. Not affiliated with any rights holder.
          </div>
        </>
      )}
    </form>
  );
};

/* ============================================================
   DESKTOP — 1440 wide
   ============================================================ */

const Desktop = () => (
  <div style={{
    width: 1440, background: CH.bg, color: CH.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 15, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    <DesktopNav />
    <DesktopHero />
    <DesktopStory />
    <DesktopCulture />
    <DesktopManifesto />
    <DesktopIdentity />
    <DesktopContact />
    <DesktopFooter />
  </div>
);

const DesktopNav = () => (
  <div style={{
    position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
    padding: '26px 56px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
      <Wordmark size={22} />
      <span style={{ width: 1, height: 14, background: CH.inkFaint }} />
      <span style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
      }}>Est. MMXXV · Preservation Minded</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Concept', '#story'], ['Archive', '#culture'], ['Culture', '#manifesto']].map(([l, href], i) => (
        <a key={l} href={href} style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: i === 0 ? CH.ink : CH.inkDim, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            color: CH.brass, opacity: 0.7,
            fontSize: 9, fontVariantNumeric: 'tabular-nums',
          }}>0{i + 1}</span>
          {l}
        </a>
      ))}
      <a href="#inquiry" style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: CH.ink,
        textDecoration: 'none',
        border: `1px solid ${CH.inkFaint}`, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Acquire
        <span style={{ width: 5, height: 5, background: CH.brass, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <HeroPlate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · crt glow · workstation · phosphor green" style={{ height: 880 }}>
    {/* faint horizon detail — subtle horizontal band for legibility */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 460,
      background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%)',
    }} />

    {/* corner indices */}
    <div style={{
      position: 'absolute', top: 110, left: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
    }}>
      N° 001 — Volume One
    </div>
    <div style={{
      position: 'absolute', top: 110, right: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
      textAlign: 'right',
    }}>
      Preservation / Archive / Culture
    </div>

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 980,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>Independent Retro Computing Concept</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 118, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: CH.ink,
      }}>
        A cinematic home for<br />
        <span style={{ color: CH.ink, fontWeight: 400 }}>retro computing </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: CH.brass, fontWeight: 500,
        }}>culture.</span>
      </h1>
      <p style={{
        marginTop: 64, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.55, color: CH.inkDim,
      }}>
        AmigaOnline.com is imagined as an independent editorial portal for vintage systems,
        preservation-minded guides, collector resources, and the enduring creative energy of classic computing.
      </p>

      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#inquiry" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: CH.bg, background: CH.brass,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Inquire About AmigaOnline.com
          <span style={{ display: 'inline-block', width: 18, height: 1, background: CH.bg }} />
        </a>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: CH.ink, textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: `1px solid ${CH.cyanDim}`,
        }}>
          Explore the Concept
        </a>
      </div>

      <div style={{
        marginTop: 28,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
      }}>
        Independent illustrative concept. Not affiliated with or endorsed by any trademark holder.
      </div>
    </div>

    {/* scroll marker bottom-right */}
    <div style={{
      position: 'absolute', right: 56, bottom: 64,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
      }}>Scroll · 01 of 06</div>
      <div style={{ width: 1, height: 56, background: `linear-gradient(180deg, ${CH.brass}, transparent)` }} />
    </div>
  </HeroPlate>
);

const DesktopStory = () => (
  <div id="story" style={{
    background: CH.bg, padding: '160px 56px 160px',
    display: 'grid', gridTemplateColumns: '560px 1fr', gap: 96,
  }}>
    <Plate image="media/story.jpg" imagePos="center" caption="// 02 · archive · disks · circuit detail" style={{ height: 720 }} />

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 68, lineHeight: 0.98, letterSpacing: -0.5,
        color: CH.ink,
      }}>
        Built for the people who<br />
        still remember<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>the glow.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: CH.inkDim, maxWidth: 520, margin: 0,
      }}>
        Amiga Online can become a premium destination for retro computing fans, collectors,
        emulator-era creators, and preservation-minded readers who want more than scattered
        forum threads and forgotten links.
      </p>

      <div style={{
        marginTop: 56, paddingTop: 36, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gap: 18, maxWidth: 560,
      }}>
        {[
          'Editorial guides for vintage computing culture',
          'Curated resources for collectors and hobbyists',
          'Preservation-first storytelling around classic digital creativity',
          'A domain name that instantly signals a dedicated online destination',
        ].map(s => (
          <div key={s} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <span style={{ marginTop: 9, width: 6, height: 6, background: CH.brass, flexShrink: 0 }} />
            <span style={{ fontSize: 15.5, lineHeight: 1.5, color: CH.inkDim }}>{s}</span>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 48, paddingTop: 36, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: 'Vintage', l: 'Systems & software' },
          { n: 'Curated', l: 'Collector resources' },
          { n: 'Open', l: 'Preservation culture' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 34, lineHeight: 1, color: CH.ink,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const cultureItems = [
  { n: '01', label: 'Preservation', mood: 'metal',   image: 'media/parts.jpg',   h: 560, blurb: 'Saving the systems, disks, and software memory that shaped a generation of digital creativity.', cap: '// magnetic media · archive' },
  { n: '02', label: 'Hardware',     mood: 'garage',  image: 'media/builds.jpg',  h: 720, blurb: 'Editorial stories on vintage machines — the boards, the glow, the engineering behind the era.',  cap: '// workstation · vintage form' },
  { n: '03', label: 'Software',     mood: 'leather', image: 'media/apparel.jpg', h: 720, blurb: 'Classic programs and the creative tools that defined how people made, played, and imagined.',      cap: '// phosphor screen · classic ui' },
  { n: '04', label: 'Community',    mood: 'road',    image: 'media/culture.jpg', h: 560, blurb: 'Retro computing as a living culture — collectors, enthusiasts, and shared knowledge, not just nostalgia.', cap: '// workspace · collector room' },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: CH.bg, padding: '40px 56px 180px' }}>
    {/* section header — runs across the page */}
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 56, borderBottom: `1px solid ${CH.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>03 — The Archive</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 1000,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 92, lineHeight: 0.95, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          More archive<br />
          than <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: CH.inkDim }}>nostalgia.</span>
        </h2>
      </div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: CH.inkLow,
        textAlign: 'right', paddingBottom: 12,
      }}>
        Preservation · Hardware<br/>Software · Community
      </div>
    </div>

    {/* asymmetric grid of 4 — staircase */}
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
      columnGap: 24, rowGap: 64,
    }}>
      {cultureItems.map((c, i) => (
        <div key={c.label} style={{ marginTop: i % 2 === 1 ? 64 : 0 }}>
          <Plate mood={c.mood} image={c.image} caption={c.cap} style={{ height: c.h }} />
          <div style={{
            marginTop: 22, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
                letterSpacing: 2, color: CH.brass,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 44, lineHeight: 1, letterSpacing: -0.3,
                color: CH.ink, margin: 0,
              }}>{c.label}</h3>
            </div>
            <a href="#inquiry" style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 2.2, textTransform: 'uppercase',
              color: CH.inkDim, textDecoration: 'none',
            }}>Enter →</a>
          </div>
          <p style={{
            marginTop: 14, marginBottom: 0, maxWidth: 440,
            fontSize: 15.5, color: CH.inkDim,
          }}>{c.blurb}</p>
        </div>
      ))}
    </div>
  </div>
);

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.jpg" caption="// 04 · portal · crt glow · 02:11" style={{ height: 700 }}>
    {/* darken to make headline readable on top of the photo */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.68) 100%)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{ marginBottom: 56 }}><Eyebrow style={{ color: CH.brass }}>04 — A Name With Memory</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 120, lineHeight: 0.92, letterSpacing: -1.2,
        color: CH.ink,
      }}>
        Direct.<br />
        Memorable.<br />
        <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Built to be owned.</span>
      </h2>
      <div style={{
        marginTop: 56, display: 'flex', alignItems: 'center', gap: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
      }}>
        <span style={{ width: 32, height: 1, background: CH.inkFaint }} />
        <span>Short · Clear · Category-relevant</span>
        <span style={{ width: 32, height: 1, background: CH.inkFaint }} />
      </div>
    </div>
  </Plate>
);

/* Artifact card — looks like a physical brand object (patch, tag, plate, stamp).
   Adds corner ticks, stitched border option, brass label tab, and subtle texture. */
const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: CH.bg,
    border: `1px solid ${CH.inkFaint}`,
    boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(235,229,216,0.04)',
    ...style,
  }}>
    {/* corner ticks — like rivets / brass corner brackets on a build plate */}
    {[
      { top: 8, left: 8, b: '1px 0 0 1px' },
      { top: 8, right: 8, b: '1px 1px 0 0' },
      { bottom: 8, left: 8, b: '0 0 1px 1px' },
      { bottom: 8, right: 8, b: '0 1px 1px 0' },
    ].map((c, i) => (
      <span key={i} style={{
        position: 'absolute', width: 10, height: 10,
        borderStyle: 'solid', borderColor: CH.brassDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {/* stitched inner border */}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(184,118,42,0.32)`,
      }} />
    )}
    {/* grain wash */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.18, mixBlendMode: 'overlay',
    }} />
    {/* brass tab in top-left if accentTab */}
    {accentTab && (
      <span style={{
        position: 'absolute', top: -1, left: 32, width: 22, height: 4,
        background: CH.brass,
      }} />
    )}
    {/* content */}
    <div style={{
      position: 'relative', zIndex: 1, height: '100%',
      display: 'flex', flexDirection: 'column', ...contentStyle,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: CH.brassDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: CH.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const presenceNotes = [
  { n: '01', t: 'The Glow',     kind: 'glow',    d: 'Phosphor green on near-black. The look that says vintage computing the instant it lights up.' },
  { n: '02', t: 'The Machine',  kind: 'machine', d: 'Generic vintage workstation forms — quiet, heavy, and unmistakably from another era of computing.' },
  { n: '03', t: 'The Disk',     kind: 'disk',    d: 'Magnetic media and the fragile software memory that preservation culture works to keep alive.' },
  { n: '04', t: 'The Keys',     kind: 'keys',    d: 'Mechanical keyboards and tactile input — the physical feel of how classic systems were used.' },
  { n: '05', t: 'The Signal',   kind: 'signal',  d: 'Scanlines, waveforms, and CRT shimmer. The texture of an interface rendered on glass.' },
  { n: '06', t: 'The Archive',  kind: 'archive', d: 'Shelves, labels, and stored knowledge. Everything organized so it can be found again.' },
];

const PresenceGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = CH.brass; const dim = CH.inkLow;
  switch (kind) {
    case 'glow': // CRT screen emitting a glow
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.18} y={s*0.24} width={s*0.64} height={s*0.46} rx={s*0.05} fill={stroke} opacity="0.14" />
          <rect x={s*0.18} y={s*0.24} width={s*0.64} height={s*0.46} rx={s*0.05} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.28} y1={s*0.40} x2={s*0.58} y2={s*0.40} stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.28} y1={s*0.50} x2={s*0.50} y2={s*0.50} stroke={dim} strokeWidth="1" />
          <line x1={cx} y1={s*0.70} x2={cx} y2={s*0.80} stroke={dim} strokeWidth="1.2" />
          <line x1={s*0.36} y1={s*0.80} x2={s*0.64} y2={s*0.80} stroke={dim} strokeWidth="1.2" />
        </svg>
      );
    case 'machine': // workstation / tower form
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.22} y={s*0.16} width={s*0.40} height={s*0.62} rx={s*0.03} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.30} y1={s*0.26} x2={s*0.54} y2={s*0.26} stroke={dim} strokeWidth="1" />
          <circle cx={s*0.42} cy={s*0.40} r={s*0.05} fill="none" stroke={dim} strokeWidth="1" />
          <line x1={s*0.30} y1={s*0.56} x2={s*0.54} y2={s*0.56} stroke={dim} strokeWidth="0.8" />
          <line x1={s*0.30} y1={s*0.64} x2={s*0.54} y2={s*0.64} stroke={dim} strokeWidth="0.8" />
          <rect x={s*0.66} y={s*0.30} width={s*0.14} height={s*0.10} fill={stroke} opacity="0.18" stroke={stroke} strokeWidth="0.8" />
        </svg>
      );
    case 'disk': // floppy disk
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <path d={`M ${s*0.22} ${s*0.20} L ${s*0.70} ${s*0.20} L ${s*0.80} ${s*0.30} L ${s*0.80} ${s*0.80} L ${s*0.22} ${s*0.80} Z`} fill="none" stroke={stroke} strokeWidth="1.2" />
          <rect x={s*0.34} y={s*0.20} width={s*0.28} height={s*0.16} fill={dim} opacity="0.5" />
          <rect x={s*0.46} y={s*0.22} width={s*0.06} height={s*0.12} fill={CH.bg} />
          <rect x={s*0.32} y={s*0.50} width={s*0.36} height={s*0.30} fill={stroke} opacity="0.12" stroke={dim} strokeWidth="0.8" />
        </svg>
      );
    case 'keys': // keyboard
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.14} y={s*0.34} width={s*0.72} height={s*0.34} rx={s*0.03} fill="none" stroke={stroke} strokeWidth="1.2" />
          {[0.22,0.34,0.46,0.58,0.70].map((x,i)=>(
            <rect key={i} x={s*x} y={s*0.40} width={s*0.08} height={s*0.08} fill={i===2?stroke:dim} opacity={i===2?0.8:0.55} />
          ))}
          <rect x={s*0.30} y={s*0.54} width={s*0.40} height={s*0.07} fill={dim} opacity="0.55" />
        </svg>
      );
    case 'signal': // waveform / scanlines
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.12} y1={s*0.32} x2={s*0.88} y2={s*0.32} stroke={dim} strokeWidth="0.8" opacity="0.5" />
          <line x1={s*0.12} y1={s*0.68} x2={s*0.88} y2={s*0.68} stroke={dim} strokeWidth="0.8" opacity="0.5" />
          <path d={`M ${s*0.12} ${cy} L ${s*0.28} ${cy} L ${s*0.36} ${s*0.30} L ${s*0.46} ${s*0.72} L ${s*0.56} ${s*0.40} L ${s*0.64} ${cy} L ${s*0.88} ${cy}`} fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round" />
        </svg>
      );
    case 'archive': // shelves / stacked storage
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.18} y={s*0.20} width={s*0.64} height={s*0.60} fill="none" stroke={dim} strokeWidth="1" />
          <line x1={s*0.18} y1={s*0.40} x2={s*0.82} y2={s*0.40} stroke={dim} strokeWidth="0.8" />
          <line x1={s*0.18} y1={s*0.60} x2={s*0.82} y2={s*0.60} stroke={dim} strokeWidth="0.8" />
          {[0.24,0.30,0.36].map((x,i)=>(<line key={'a'+i} x1={s*x} y1={s*0.22} x2={s*x} y2={s*0.38} stroke={stroke} strokeWidth="1.2" />))}
          {[0.50,0.56,0.62,0.68].map((x,i)=>(<line key={'b'+i} x1={s*x} y1={s*0.42} x2={s*x} y2={s*0.58} stroke={dim} strokeWidth="1" />))}
          {[0.26,0.32].map((x,i)=>(<line key={'c'+i} x1={s*x} y1={s*0.62} x2={s*x} y2={s*0.78} stroke={stroke} strokeWidth="1.2" />))}
        </svg>
      );
  }
};

const DesktopIdentity = () => (
  <div id="presence" style={{ background: CH.panel, padding: '160px 56px 160px', position: 'relative' }}>
    {/* faint workshop wash behind */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.18, mixBlendMode: 'overlay',
    }} />

    {/* header */}
    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 60 }}>
      <div>
        <Eyebrow>05 — Presence</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 76, lineHeight: 0.96, letterSpacing: -0.6,
          color: CH.ink,
        }}>
          The screen still glows.<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>The room remembers it.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: CH.inkDim, paddingBottom: 12,
      }}>
        A retro computing portal doesn't need to shout. Phosphor glow, dark metal, magnetic media, and warm collector-room light carry the feeling.
      </div>
    </div>

    {/* Six presence cards */}
    <div style={{
      position: 'relative', marginTop: 24,
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
    }}>
      {presenceNotes.map((m) => (
        <Artifact
          key={m.t}
          label={`N° ${m.n}`}
          contentStyle={{ padding: '28px 28px 24px', justifyContent: 'space-between', minHeight: 240 }}
        >
          <div style={{
            marginTop: 18,
            display: 'flex', alignItems: 'center', gap: 18,
          }}>
            <PresenceGlyph kind={m.kind} size={44} />
            <h3 style={{
              margin: 0, whiteSpace: 'nowrap',
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 30, letterSpacing: 0.2, color: CH.ink,
            }}>{m.t}</h3>
          </div>
          <p style={{
            margin: 0, marginTop: 18,
            fontSize: 14.5, lineHeight: 1.55, color: CH.inkDim,
          }}>{m.d}</p>
        </Artifact>
      ))}
    </div>

    {/* bottom strip — brand line */}
    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${CH.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
    }}>
      <span>Phosphor green · Dark metal · Magnetic media · CRT glow</span>
      <span>Preserved · Curated · Independently owned</span>
      <span style={{ color: CH.brass }}>Lit warm · Built clear · Made to last</span>
    </div>
  </div>
);

const DesktopContact = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const formFields = [
    { label: 'Name',  name: 'name',  type: 'text',  required: true, hint: 'Required', placeholder: 'First & last' },
    { label: 'Email', name: 'email', type: 'email', required: true, hint: 'Required', placeholder: 'you@email.com' },
  ];
  return (
    <div id="inquiry" style={{
      background: CH.bg, padding: '180px 56px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96,
    }}>
      <div>
        <Eyebrow>06 — Acquire</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 580,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 76, lineHeight: 0.95, letterSpacing: -0.6,
          color: CH.ink,
        }}>
          Acquire<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>AmigaOnline.com</span>
        </h2>
        <p style={{ maxWidth: 460, fontSize: 16, lineHeight: 1.6, color: CH.inkDim, margin: 0 }}>
          <span style={{ color: CH.ink }}>AmigaOnline.com</span> is available for acquisition. This page is a concept preview only, designed to show one possible premium direction for the domain as an independent retro computing portal. It is not an official Amiga site and is not affiliated with, authorized by, or endorsed by Amiga Corporation, Commodore, Hyperion, Cloanto, or any other rights holder.
        </p>
        <p style={{ marginTop: 24, maxWidth: 460, fontSize: 16, lineHeight: 1.6, color: CH.inkDim }}>
          Interested in AmigaOnline.com? Send a short message and I'll follow up.
        </p>
        <div style={{
          marginTop: 56, paddingTop: 32, borderTop: `1px solid ${CH.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'AmigaOnline.com' },
            { l: 'Direction', v: 'Independent retro computing' },
            { l: 'Status',    v: 'Open to serious inquiries' },
          ].map(b => (
            <div key={b.l}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: CH.brassDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Antonio, sans-serif', fontSize: 22, color: CH.ink, lineHeight: 1.2,
              }}>
                {b.v}
              </div>
            </div>
          ))}
        </div>

        {/* small honesty note tucked under the info blocks */}
        <div style={{
          marginTop: 40, maxWidth: 460,
          display: 'flex', gap: 14, alignItems: 'flex-start',
          paddingTop: 18, borderTop: `1px dashed ${CH.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: CH.brass, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
          }}>
            This concept is illustrative. No affiliation with or endorsement by any trademark holder.
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmit} style={{ paddingTop: 80, position: 'relative' }}>
        {/* honeypot */}
        <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
          <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
        </div>
        {status === 'success' ? (
          <div style={{ padding: '56px 0', fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass, lineHeight: 1.8 }}>
            {SITE.successMessage}
          </div>
        ) : (
          <>
            {status === 'error' && (
              <div style={{ marginBottom: 20, fontFamily: 'IBM Plex Mono, monospace',
                fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase',
                color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
                {errorMsg}
              </div>
            )}
            {formFields.map(f => (
              <div key={f.label} style={{ marginBottom: 30 }}>
                <div style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                  letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: CH.inkLow }}>{f.hint}</span>
                </div>
                <input
                  type={f.type}
                  name={f.name}
                  value={values[f.name]}
                  onChange={set(f.name)}
                  placeholder={f.placeholder}
                  required={f.required}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Antonio, sans-serif', fontSize: 26,
                    color: CH.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: CH.inkLow }}>Your inquiry</span>
              </div>
              <textarea
                name="message"
                value={values.message}
                onChange={set('message')}
                placeholder={SITE.messagePlaceholder}
                required
                style={{
                  background: 'none', border: 'none', width: '100%',
                  borderBottom: `1px solid ${CH.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Antonio, sans-serif', fontSize: 26,
                  color: CH.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: CH.brass,
                }}
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
              <button
                type="submit"
                disabled={status === 'submitting'}
                style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
                  letterSpacing: 2.4, textTransform: 'uppercase',
                  color: CH.bg, background: status === 'submitting' ? CH.steel : CH.brass,
                  padding: '20px 32px', border: 'none',
                  cursor: status === 'submitting' ? 'default' : 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 16,
                  opacity: status === 'submitting' ? 0.7 : 1,
                }}
              >
                {status === 'submitting' ? 'Sending…' : 'Send Inquiry'}
                <span style={{ width: 22, height: 1, background: CH.bg, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow,
                textAlign: 'right', lineHeight: 1.6, maxWidth: 220,
              }}>
                Illustrative concept.<br/>Domain available for acquisition.
              </div>
            </div>
          </>
        )}
      </form>
    </div>
  );
};

const DesktopFooter = () => (
  <div id="footer" style={{
    background: CH.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${CH.inkFaint}`,
  }}>
    <div style={{
      display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr', gap: 56,
      paddingBottom: 56,
    }}>
      {/* brand block */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <AOMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: CH.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>Amiga<span style={{ fontWeight: 400, opacity: 0.78 }}>Online</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
            }}>Independent Retro Computing Concept</div>
          </div>
        </div>
        <p style={{
          marginTop: 28, marginBottom: 0, maxWidth: 360,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>
          AmigaOnline.com is presented as an independent illustrative brand concept for domain acquisition purposes. Not affiliated with, authorized by, or endorsed by Amiga Corporation, Commodore, Hyperion, Cloanto, or any other rights holder. All trademarks belong to their respective owners. No official logos, marks, software, ROMs, screenshots, or copyrighted assets are used.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'The Concept',    href: '#story' },
          { t: 'Visual Identity', href: '#presence' },
          { t: 'The Archive',     href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'AmigaOnline.com',     href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Acquire',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Independent Concept',     href: null },
          { t: 'No Rights-Holder Affiliation', href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: CH.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: CH.brassDim }} />
            {g.h}
          </div>
          <div style={{ display: 'grid', gap: 10 }}>
            {g.l.map(x => (
              <a key={x.t} href={x.href || undefined} style={{
                fontFamily: 'Antonio, sans-serif', fontSize: 20, color: CH.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${CH.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow,
    }}>
      <span>© MMXXVI · Amiga Online · Concept presentation</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: CH.brass }}>Volume One — 001</span>
    </div>
  </div>
);

/* ============================================================
   MOBILE — 390 wide
   ============================================================ */

const Mobile = () => (
  <div style={{
    width: 390, background: CH.bg, color: CH.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 14, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    {/* status bar */}
    <div style={{
      height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 22px', fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
      color: CH.ink, fontWeight: 600, position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30,
    }}>
      <span>9:41</span>
      <span style={{ display: 'flex', gap: 6 }}>
        <span>●●●●</span><span>●●</span>
      </span>
    </div>

    {/* nav */}
    <div style={{
      position: 'absolute', top: 44, left: 0, right: 0, zIndex: 20,
      padding: '16px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <Wordmark size={18} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ width: 22, height: 1, background: CH.ink }} />
        <span style={{ width: 16, height: 1, background: CH.ink, alignSelf: 'flex-end' }} />
      </div>
    </div>

    {/* hero */}
    <HeroPlate id="m-hero" image="media/hero.jpg" caption="// 01 · crt glow · phosphor" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 420,
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.82) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 48, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>Independent Retro Computing</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 52, lineHeight: 0.92, letterSpacing: -0.5,
          margin: 0, color: CH.ink,
        }}>
          A cinematic home for<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 500 }}>retro computing culture.</span>
        </h1>
        <p style={{ marginTop: 36, color: CH.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          AmigaOnline.com is imagined as an independent editorial portal for vintage systems, preservation, and collector resources.
        </p>
        <a href="#inquiry" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          marginTop: 24, padding: '14px 22px',
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: CH.bg, background: CH.brass, textDecoration: 'none',
        }}>
          Inquire About the Domain
          <span style={{ width: 16, height: 1, background: CH.bg }} />
        </a>
        <div style={{
          marginTop: 18,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 8.5,
          letterSpacing: 1.4, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.6,
        }}>
          Independent illustrative concept. Not affiliated with any trademark holder.
        </div>
      </div>
    </HeroPlate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>02 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 42, lineHeight: 0.98, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        Built for the people who still remember <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>the glow.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        Amiga Online can become a premium destination for retro computing fans, collectors, emulator-era creators, and preservation-minded readers who want more than scattered forum threads and forgotten links.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · archive · disks" style={{ height: 320, marginTop: 32 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>03 — The Archive</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 50, lineHeight: 0.95, letterSpacing: -0.4,
        color: CH.ink,
      }}>
        More archive<br/>than <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.inkDim, fontWeight: 400 }}>nostalgia.</span>
      </h2>
      <div style={{ display: 'grid', gap: 36 }}>
        {cultureItems.map(c => (
          <div key={c.label}>
            <Plate mood={c.mood} image={c.image} caption={c.cap} style={{ height: 280 }} />
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2, color: CH.brass,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 32, lineHeight: 1, color: CH.ink, margin: 0,
              }}>{c.label}</h3>
            </div>
            <p style={{ marginTop: 8, color: CH.inkDim, fontSize: 14 }}>{c.blurb}</p>
          </div>
        ))}
      </div>
    </div>

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.jpg" caption="// 04 · portal · crt glow" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.72) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}><Eyebrow>04 — A Name With Memory</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 52, lineHeight: 0.92, letterSpacing: -0.4,
          color: CH.ink,
        }}>
          Direct.<br/>
          Memorable.<br/>
          <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Built to be owned.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: CH.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — Presence</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        The screen still glows.<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>The room remembers it.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        A retro computing portal doesn't need to shout. Phosphor glow, dark metal, magnetic media, and warm collector-room light carry the feeling.
      </p>
      {/* presence cards — 2-col grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {presenceNotes.map((m) => (
          <Artifact
            key={m.t}
            label={`N° ${m.n}`}
            contentStyle={{ padding: 16, justifyContent: 'space-between', minHeight: 180 }}
          >
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <PresenceGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0, whiteSpace: 'nowrap',
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 20, letterSpacing: 0.2, color: CH.ink,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: CH.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      {/* brand line strip */}
      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${CH.inkFaint}`, background: CH.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>Phosphor green · Dark metal<br/>Magnetic media · CRT glow</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
        }}>Lit warm · Built clear · Made to last</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Acquire</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.95, letterSpacing: -0.4,
        color: CH.ink,
      }}>
        Acquire<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>AmigaOnline.com</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        <span style={{ color: CH.ink }}>AmigaOnline.com</span> is available for acquisition. This page is a concept preview only, showing one possible premium direction for the domain as an independent retro computing portal. It is not an official Amiga site and is not affiliated with, authorized by, or endorsed by Amiga Corporation, Commodore, Hyperion, Cloanto, or any other rights holder.
      </p>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6, marginTop: 16 }}>
        Interested in AmigaOnline.com? Send a short message and I'll follow up.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',    v: 'AmigaOnline.com' },
          { l: 'Direction', v: 'Independent retro computing' },
          { l: 'Status',    v: 'Open to serious inquiries' },
        ].map(b => (
          <div key={b.l}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
              letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
            }}>{b.l}</div>
            <div style={{
              marginTop: 4,
              fontFamily: 'Antonio, sans-serif', fontSize: 20, color: CH.ink, lineHeight: 1.2,
            }}>{b.v}</div>
          </div>
        ))}
      </div>

      <MobileContactForm />
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: CH.panel, padding: '36px 22px 32px', borderTop: `1px solid ${CH.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <AOMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: CH.ink, lineHeight: 1 }}>Amiga<span style={{ fontWeight: 400, opacity: 0.78 }}>Online</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass }}>Independent Retro Computing Concept</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
      }}>
        AmigaOnline.com is presented as an independent illustrative brand concept for domain acquisition purposes. Not affiliated with, authorized by, or endorsed by Amiga Corporation, Commodore, Hyperion, Cloanto, or any other rights holder. All trademarks belong to their respective owners. No official logos, marks, software, ROMs, screenshots, or copyrighted assets are used.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'The Concept',     href: '#story' },
            { t: 'Visual Identity', href: '#presence' },
            { t: 'The Archive',     href: '#culture' },
          ]},
          { h: 'Domain', l: [
            { t: 'AmigaOnline.com',     href: '#inquiry' },
            { t: 'Acquisition Inquiry', href: '#inquiry' },
            { t: 'Acquire',             href: '#inquiry' },
          ]},
        ].map(g => (
          <div key={g.h}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
              letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow,
              marginBottom: 12,
            }}>{g.h}</div>
            <div style={{ display: 'grid', gap: 6 }}>
              {g.l.map(x => (
                <a key={x.t} href={x.href} style={{
                  fontFamily: 'Antonio, sans-serif', fontSize: 16, color: CH.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${CH.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · Amiga Online<br/>Independent concept · No rights-holder affiliation<br/>
        <span style={{ color: CH.brass }}>Volume One — 001</span>
      </div>
    </div>
  </div>
);

Object.assign(window, { Desktop, Mobile });