/* MailArchive — homepage mockup (desktop + mobile)
   System: Fraunces (editorial serif display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow)
   Palette: warm near-black #0c0a07 · espresso panel #15110b · parchment #ece4d3 · pale platinum #c7c5bc · steel-blue #93a6b1
*/

const CH = {
  ink:    '#ece4d3',
  inkDim: 'rgba(236,228,211,0.62)',
  inkLow: 'rgba(236,228,211,0.34)',
  inkFaint:'rgba(220,225,228,0.15)',
  bg:     '#0c0a07',
  panel:  '#15110b',
  steel:  '#8a8170',
  // primary accent — pale platinum / champagne silver (replaces former gold)
  brass:  '#c7c5bc',
  brassDim:'rgba(199,201,196,0.55)',
  // secondary accent — muted steel-blue / desaturated cyan pulled from the hero
  haze:   '#93a6b1',
  hazeDim:'rgba(147,166,177,0.5)',
  // smoked-glass CTA surface
  glass:  'rgba(236,231,221,0.06)',
  glassBorder:'rgba(236,228,211,0.32)',
};

// Public site config. Claude should update site-config.js for each domain.
const SITE = {
  domain: 'mailarchive.net',
  brandName: 'MailArchive',
  category: 'Personal Email Memory Vault',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for MailArchive.net has been sent.',
  messagePlaceholder: 'Tell me how you would use MailArchive.net, your acquisition interest, or any questions about 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(214,144,52,0.28), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(120,70,20,0.22), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(40,20,10,0.5), transparent 70%),
      linear-gradient(180deg, #1a1410 0%, #0c0907 55%, #050302 100%)`,
    metal: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(120,110,98,0.18), transparent 65%),
      linear-gradient(115deg, #0d0c0a 0%, #1a1814 50%, #080705 100%)`,
    road: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(184,118,42,0.18), transparent 60%),
      linear-gradient(180deg, #050403 0%, #0c0a08 60%, #1a140d 100%)`,
    leather: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(154,92,32,0.25), transparent 62%),
      linear-gradient(160deg, #1d1410 0%, #0d0805 100%)`,
    workshop: `
      radial-gradient(circle 320px at 70% 30%, rgba(220,148,52,0.32), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(140,80,28,0.18), transparent 65%),
      linear-gradient(180deg, #14100c 0%, #07060500 100%), #060504`,
  };
  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>
  );
};

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.haze, opacity: 0.9 }} />
    <span>{children}</span>
  </div>
);

/* CH monogram mark */
const CHMark = ({ 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" />
    {/* C */}
    <path d="M 27 18 Q 16 18 16 32 Q 16 46 27 46"
          fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="square" />
    {/* H */}
    <path d="M 36 18 L 36 46 M 36 32 L 50 32 M 50 18 L 50 46"
          fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="square" />
    {/* brass tick */}
    <rect x="30" y="55" width="4" height="4" fill={accent} />
  </svg>
);

/* Wordmark — Fraunces editorial serif, set tight */
const Wordmark = ({ size = 22, color = CH.ink }) => (
  <span style={{
    fontFamily: 'Fraunces, serif',
    fontWeight: 600, fontSize: size, letterSpacing: 0.3,
    color, lineHeight: 1, textTransform: 'none',
    display: 'inline-flex', alignItems: 'baseline', gap: size * 0.04,
  }}>
    <span>Mail</span><span style={{ fontWeight: 400, opacity: 0.78 }}>Archive</span>
  </span>
);

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

const INQUIRY_API_URL = SITE.inquiryApi;

function useInquiryForm() {
  const [values, setValues] = React.useState({
    name: '', email: '', 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({
          name: values.name,
          email: values.email,
          message: values.message,
          website: values.website,
          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: 'Fraunces, 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: 'Fraunces, 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.ink, background: status === 'submitting' ? 'rgba(236,231,221,0.03)' : CH.glass,
            border: `1px solid ${CH.glassBorder}`, 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,
          }}>
            Concept shown for illustrative purposes.
          </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 · Privately Kept</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Archive', '#story'], ['Records', '#culture'], ['Concept', '#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,
      }}>
        Inquire
        <span style={{ width: 5, height: 5, background: CH.haze, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · private archive · amber light" style={{ height: 880 }}>
    {/* faint horizon detail — subtle gradient anchoring the lower copy */}
    <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.75) 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',
    }}>
      Letters / Records / Memory
    </div>

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 1000,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>A private archive for the digital paper trail of life</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Fraunces, serif', fontWeight: 600,
        fontSize: 120, lineHeight: 0.98, letterSpacing: -1.5,
        margin: 0, color: CH.ink,
      }}>
        Keep the messages<br />
        <span style={{ color: CH.ink, fontWeight: 400 }}>that still </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.86em', lineHeight: 1.05,
          color: CH.brass, fontWeight: 500,
        }}>matter.</span>
      </h1>
      <p style={{
        marginTop: 64, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.6, color: CH.inkDim,
      }}>
        MailArchive.net is a premium domain concept for a calmer, more personal way to
        preserve meaningful emails, receipts, records, milestones, and conversations.
      </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.ink, background: CH.glass,
          border: `1px solid ${CH.glassBorder}`,
          padding: '17px 27px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Inquire About MailArchive.net
          <span style={{ display: 'inline-block', width: 18, height: 1, background: CH.haze }} />
        </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.inkFaint}`,
        }}>
          View Brand Concept
        </a>
      </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>
  </Plate>
);

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 · preserved letters · archive wall" style={{ height: 720 }} />

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Problem</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: 'Fraunces, serif', fontWeight: 500,
        fontSize: 72, lineHeight: 0.98, letterSpacing: -0.5,
        color: CH.ink,
      }}>
        Your inbox was<br />
        not built for<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>memory.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: CH.inkDim, maxWidth: 520, margin: 0,
      }}>
        MailArchive imagines a dedicated space for the messages people do not want to lose —
        the confirmations, conversations, documents, and digital keepsakes that become
        more valuable over time, instead of getting buried inside a noisy inbox.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: '01', l: 'Calm private archive' },
          { n: '∞',  l: 'Messages worth keeping' },
          { n: '00', l: 'Inbox noise' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: 'Fraunces, serif', fontWeight: 500,
              fontSize: 56, 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: 'Receipts',      mood: 'metal',    image: 'media/receipts.jpg', h: 560, blurb: 'Purchase confirmations, warranties, and order history worth keeping.', cap: '// confirmations · order history' },
  { n: '02', label: 'Conversations', mood: 'garage',   image: 'media/conversations.jpg', h: 720, blurb: 'Family threads, personal notes, and the messages you quietly reread.', cap: '// family threads · personal notes' },
  { n: '03', label: 'Records',       mood: 'leather',  image: 'media/records.jpg', h: 720, blurb: 'Travel confirmations, house documents, school updates, and health notes.', cap: '// documents · confirmations' },
  { n: '04', label: 'Milestones',    mood: 'road',     image: 'media/milestones.jpg', h: 560, blurb: 'Announcements, letters, and the messages that mark a moment.', cap: '// keepsakes · milestone notes' },
];

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 — What You Keep</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 980,
          fontFamily: 'Fraunces, serif', fontWeight: 500,
          fontSize: 88, lineHeight: 0.98, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          A calmer home for<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: CH.inkDim }}>personal records.</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,
      }}>
        Receipts · Conversations<br/>Records · Milestones
      </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: 'Fraunces, 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',
            }}>Preserve →</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 · the idea · keepsake vault" 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.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.65) 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 — The Idea</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Fraunces, serif', fontWeight: 500,
        fontSize: 124, lineHeight: 0.94, letterSpacing: -1.2,
        color: CH.ink,
      }}>
        Kept with care.<br />
        Quietly preserved.<br />
        <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Always yours.</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>A private archive for the messages that last</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: 'Personal Archive App',     kind: 'stance',  d: 'A calm consumer product for saving the emails and messages people most want to keep.' },
  { n: '02', t: 'Privacy-First Email Tool', kind: 'tank',    d: 'A quieter, more protective companion for inbox history and personal correspondence.' },
  { n: '03', t: 'Family Record Vault',      kind: 'metal',   d: 'A shared home for family notes, milestones, and the threads worth passing on.' },
  { n: '04', t: 'Digital Legacy Product',   kind: 'leather', d: 'A way to preserve a meaningful digital paper trail for years and people to come.' },
  { n: '05', t: 'Document Organization',    kind: 'shop',    d: 'A platform for receipts, confirmations, and records sorted into one calm place.' },
  { n: '06', t: 'Premium Inbox Companion',  kind: 'road',    d: 'A refined layer on top of email built for memory, not just unread counts.' },
];

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 'stance': // low silhouette: wheel · frame · wheel hint
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.08} y1={s*0.82} x2={s*0.92} y2={s*0.82} stroke={dim} strokeWidth="1" />
          <circle cx={s*0.26} cy={s*0.66} r={s*0.14} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={s*0.74} cy={s*0.66} r={s*0.14} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.30} y1={s*0.58} x2={s*0.70} y2={s*0.58} stroke={CH.ink} strokeWidth="1.4" />
          <line x1={s*0.42} y1={s*0.58} x2={s*0.46} y2={s*0.48} stroke={CH.ink} strokeWidth="1" />
        </svg>
      );
    case 'tank': // teardrop
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <path d={`M ${s*0.18} ${cy} Q ${s*0.30} ${s*0.30}, ${s*0.62} ${s*0.30} Q ${s*0.86} ${s*0.32}, ${s*0.82} ${cy} Q ${s*0.78} ${s*0.72}, ${s*0.50} ${s*0.72} Q ${s*0.22} ${s*0.72}, ${s*0.18} ${cy} Z`} fill="none" stroke={stroke} strokeWidth="1.2" />
          <path d={`M ${s*0.28} ${s*0.42} Q ${s*0.42} ${s*0.36}, ${s*0.58} ${s*0.40}`} fill="none" stroke={dim} strokeWidth="0.8" opacity="0.7" />
          <circle cx={s*0.66} cy={cy} r="1.6" fill={stroke} />
        </svg>
      );
    case 'metal': // spoked wheel
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s*0.36} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={cx} cy={cy} r={s*0.06} fill={stroke} />
          {[0, 45, 90, 135].map(a => {
            const rad = (a * Math.PI) / 180;
            const x1 = cx + Math.cos(rad) * s*0.06;
            const y1 = cy + Math.sin(rad) * s*0.06;
            const x2 = cx + Math.cos(rad) * s*0.36;
            const y2 = cy + Math.sin(rad) * s*0.36;
            const x1b = cx - Math.cos(rad) * s*0.06;
            const y1b = cy - Math.sin(rad) * s*0.06;
            const x2b = cx - Math.cos(rad) * s*0.36;
            const y2b = cy - Math.sin(rad) * s*0.36;
            return (
              <g key={a}>
                <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={dim} strokeWidth="0.8" />
                <line x1={x1b} y1={y1b} x2={x2b} y2={y2b} stroke={dim} strokeWidth="0.8" />
              </g>
            );
          })}
        </svg>
      );
    case 'leather': // stitched panel
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.16} y={s*0.22} width={s*0.68} height={s*0.56} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.22} y={s*0.28} width={s*0.56} height={s*0.44} fill="none" stroke={stroke} strokeWidth="0.8" strokeDasharray="2 3" />
          <line x1={s*0.50} y1={s*0.30} x2={s*0.50} y2={s*0.70} stroke={dim} strokeWidth="0.6" strokeDasharray="2 3" />
        </svg>
      );
    case 'shop': // pendant + floor
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={cx} y1={s*0.08} x2={cx} y2={s*0.36} stroke={dim} strokeWidth="1" />
          <circle cx={cx} cy={s*0.42} r={s*0.07} fill={stroke} />
          <path d={`M ${cx} ${s*0.48} L ${s*0.28} ${s*0.80} L ${s*0.72} ${s*0.80} Z`} fill={stroke} opacity="0.16" stroke={stroke} strokeWidth="0.6" />
          <line x1={s*0.10} y1={s*0.82} x2={s*0.90} y2={s*0.82} stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'road': // perspective lines to vanishing point
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={s*0.38} r="1.4" fill={stroke} />
          <line x1={s*0.08} y1={s*0.86} x2={cx} y2={s*0.38} stroke={dim} strokeWidth="1" />
          <line x1={s*0.92} y1={s*0.86} x2={cx} y2={s*0.38} stroke={dim} strokeWidth="1" />
          <line x1={s*0.32} y1={s*0.86} x2={s*0.46} y2={s*0.48} stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.42} y1={s*0.86} x2={s*0.49} y2={s*0.56} stroke={stroke} strokeWidth="1" strokeDasharray="3 3" />
        </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 — Use Cases</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Fraunces, serif', fontWeight: 500,
          fontSize: 76, lineHeight: 0.98, letterSpacing: -0.6,
          color: CH.ink,
        }}>
          Built for a category<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>people already understand.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: CH.inkDim, paddingBottom: 12,
      }}>
        This domain could support a personal archive app, privacy-first email tool, family
        record vault, digital legacy product, document organization platform, or premium inbox companion.
      </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,
              fontFamily: 'Fraunces, serif', fontWeight: 500,
              fontSize: 25, lineHeight: 1.05, letterSpacing: 0.1, 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>Warm ivory · Muted gold · Quiet borders · Soft amber</span>
      <span>Private · Personal · Preserved</span>
      <span style={{ color: CH.brass }}>Kept calm · Held close · Built 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 — Inquire</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 580,
          fontFamily: 'Fraunces, serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          Inquire about<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>the domain.</span>
        </h2>
        <p style={{ maxWidth: 460, fontSize: 16, lineHeight: 1.6, color: CH.inkDim, margin: 0 }}>
          <span style={{ color: CH.ink }}>MailArchive.net</span> is available for acquisition. This page presents an illustrative brand direction to show how the domain could become a polished product, platform, or consumer archive brand. It is not claiming that an active MailArchive service currently exists.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${CH.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'MailArchive.net' },
            { l: 'Direction', v: 'Personal email memory vault' },
            { l: 'Status',    v: 'Available for acquisition' },
          ].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: 'Fraunces, 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,
          }}>
            Illustrative brand concept only. No active email storage, privacy, or archiving service is represented.
          </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: 'Fraunces, 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: 'Fraunces, 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.ink, background: status === 'submitting' ? 'rgba(236,231,221,0.03)' : CH.glass,
                  padding: '19px 31px', border: `1px solid ${CH.glassBorder}`,
                  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.haze, 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,
              }}>
                Concept shown for<br/>illustrative purposes.
              </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 }}>
          <CHMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Fraunces, serif', fontWeight: 600, fontSize: 28,
              color: CH.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>Mail<span style={{ fontWeight: 400, opacity: 0.78 }}>Archive</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
            }}>Keep the messages that still matter.</div>
          </div>
        </div>
        <p style={{
          marginTop: 28, marginBottom: 0, maxWidth: 340,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>
          MailArchive.net is an illustrative brand concept created to demonstrate possible use of the domain. No active email storage, privacy, compliance, or archiving service is being represented by this page. The domain may be available for acquisition.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'The Problem',  href: '#story' },
          { t: 'What You Keep', href: '#culture' },
          { t: 'Use Cases',    href: '#presence' },
        ]},
        { h: 'Domain', l: [
          { t: 'MailArchive.net',     href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Illustrative Concept', href: null },
          { t: 'No Active Service',    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: 'Fraunces, 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 · MailArchive · 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 */}
    <Plate id="m-hero" image="media/hero.jpg" imagePos="center" caption="// 01 · private archive · amber" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 380,
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>A private archive for life's paper trail</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 600,
          fontSize: 52, lineHeight: 0.98, letterSpacing: -0.6,
          margin: 0, color: CH.ink,
        }}>
          Keep the messages<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.86em', lineHeight: 1.05, color: CH.brass, fontWeight: 500 }}>that still matter.</span>
        </h1>
        <p style={{ marginTop: 44, color: CH.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          A premium domain concept for a calmer, more personal way to preserve meaningful emails, receipts, records, and conversations.
        </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.ink, background: CH.glass,
          border: `1px solid ${CH.glassBorder}`, textDecoration: 'none',
        }}>
          Inquire About MailArchive.net
          <span style={{ width: 16, height: 1, background: CH.haze }} />
        </a>
      </div>
    </Plate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>02 — The Problem</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Fraunces, serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        Your inbox was not built for <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>memory.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        MailArchive imagines a dedicated space for the messages people do not want to lose — the confirmations, conversations, documents, and digital keepsakes that become more valuable over time.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · preserved letters" style={{ height: 320, marginTop: 32 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>03 — What You Keep</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Fraunces, serif', fontWeight: 500,
        fontSize: 46, lineHeight: 0.98, letterSpacing: -0.4,
        color: CH.ink,
      }}>
        A calmer home for <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.inkDim, fontWeight: 400 }}>personal records.</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: 'Fraunces, 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 · the idea" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.7) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}><Eyebrow>04 — The Idea</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Fraunces, serif', fontWeight: 500,
          fontSize: 50, lineHeight: 0.96, letterSpacing: -0.4,
          color: CH.ink,
        }}>
          Kept with care.<br/>
          Quietly preserved.<br/>
          <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Always yours.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: CH.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — Use Cases</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Fraunces, serif', fontWeight: 500,
        fontSize: 38, lineHeight: 0.98, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        Built for a category<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>people already understand.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        This domain could support a personal archive app, privacy-first email tool, family record vault, digital legacy product, document platform, or premium inbox companion.
      </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', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
              <PresenceGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0,
                fontFamily: 'Fraunces, serif', fontWeight: 500,
                fontSize: 17, lineHeight: 1.1, letterSpacing: 0.1, 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,
        }}>Warm ivory · Muted gold<br/>Quiet borders · Soft amber</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
        }}>Kept calm · Held close · Built to last</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Inquire</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Fraunces, serif', fontWeight: 500,
        fontSize: 52, lineHeight: 0.96, letterSpacing: -0.5,
        color: CH.ink,
      }}>
        Inquire about<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>the domain.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        <span style={{ color: CH.ink }}>MailArchive.net</span> is available for acquisition. This page presents an illustrative brand direction to show how the domain could become a polished product, platform, or consumer archive brand. It is not claiming that an active MailArchive service currently exists.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',    v: 'MailArchive.net' },
          { l: 'Direction', v: 'Personal email memory vault' },
          { l: 'Status',    v: 'Available for acquisition' },
        ].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: 'Fraunces, 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 }}>
        <CHMark size={36} />
        <div>
          <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 600, fontSize: 22, color: CH.ink, lineHeight: 1 }}>Mail<span style={{ fontWeight: 400, opacity: 0.78 }}>Archive</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass }}>Keep the messages that still matter.</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,
      }}>
        MailArchive.net is an illustrative brand concept created to demonstrate possible use of the domain. No active email storage, privacy, compliance, or archiving service is being represented by this page. The domain may be available for acquisition.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'The Problem',  href: '#story' },
            { t: 'What You Keep', href: '#culture' },
            { t: 'Use Cases',    href: '#presence' },
          ]},
          { h: 'Domain', l: [
            { t: 'MailArchive.net',     href: '#inquiry' },
            { t: 'Acquisition Inquiry', href: '#inquiry' },
            { t: 'Contact',             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: 'Fraunces, 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 · MailArchive<br/>Illustrative concept · No active service represented<br/>
        <span style={{ color: CH.brass }}>Volume One — 001</span>
      </div>
    </div>
  </div>
);

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