/* WhyMail — homepage concept (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow) / Instrument Serif (accent)
   Palette: warm off-white #FAFAF7 · deep slate #172033 · muted slate #667085 · cloud-gray #EEF2F7 · electric blue #4A7DFF · violet #8B7CFF · mint #62C6A8
   Internal template note: this layout is the repeatable static base; only skin/copy/imagery change per domain.
*/

const WM = {
  ink:      '#172033',                  // primary deep slate text
  inkDim:   '#667085',                  // secondary muted slate
  inkLow:   '#98A2B3',                  // faint label slate
  inkFaint: '#D8DEE8',                  // hairline / border
  bg:       '#FAFAF7',                  // warm off-white background
  panel:    '#EEF2F7',                  // cloud-gray surface
  card:     '#FFFFFF',                  // white card
  steel:    '#667085',                  // muted slate (disabled state)
  accent:   '#4A7DFF',                  // soft electric blue (primary accent)
  accentDim:'rgba(74,125,255,0.45)',
  violet:   '#8B7CFF',                  // pale violet
  mint:     '#62C6A8',                  // muted mint signal
  amber:    '#F0B85A',                  // soft amber micro-accent
  onAccent: '#FFFFFF',                  // text on accent buttons
};

// Public site config. Update site-config.js for each domain.
const SITE = {
  domain: 'WhyMail.com',
  brandName: 'WhyMail',
  category: 'Email intelligence / inbox clarity SaaS concept',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for WhyMail.com has been sent.',
  messagePlaceholder: 'Tell us how you would use WhyMail.com or what kind of acquisition conversation you would like to start.',
  ...(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.05, blend = 'multiply' }) => (
  <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: grainSVG,
    opacity, mixBlendMode: blend,
  }} />
);

/* Photo plate — an art-directed light image slot.
   When `image` is set, uses a real photo instead of the placeholder gradient. */
const Plate = ({ mood = 'inbox', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    inbox: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(74,125,255,0.12), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(139,124,255,0.10), transparent 70%),
      linear-gradient(180deg, #FFFFFF 0%, #F1F4F9 60%, #E9EEF5 100%)`,
    surface: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(98,198,168,0.10), transparent 65%),
      linear-gradient(115deg, #FFFFFF 0%, #EEF2F7 50%, #E7ECF3 100%)`,
    signal: `
      radial-gradient(ellipse 90% 40% at 50% 100%, rgba(74,125,255,0.12), transparent 60%),
      linear-gradient(180deg, #FFFFFF 0%, #F2F5FA 60%, #EAEFF6 100%)`,
    violet: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(139,124,255,0.14), transparent 62%),
      linear-gradient(160deg, #FFFFFF 0%, #F1F0FB 100%)`,
    daylight: `
      radial-gradient(circle 320px at 70% 30%, rgba(74,125,255,0.14), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(98,198,168,0.10), transparent 65%),
      linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%)`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#EAEFF6 url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.inbox),
      ...style,
    }}>
      <Grain opacity={image ? 0.03 : 0.05} />
      {/* faint edge definition */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 96% 82% at 50% 50%, transparent 66%, rgba(23,32,51,0.05) 100%)'
          : 'radial-gradient(ellipse 92% 72% at 50% 50%, transparent 60%, rgba(23,32,51,0.04) 100%)',
        boxShadow: 'inset 0 0 0 1px rgba(23,32,51,0.04)',
      }} />
      {caption && (
        <div style={{
          position: 'absolute', bottom: 14, right: 18,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 1.4, textTransform: 'uppercase',
          color: 'rgba(23,32,51,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: WM.accent,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    ...style,
  }}>
    <span style={{ width: 22, height: 1, background: WM.accent, opacity: 0.85 }} />
    <span>{children}</span>
  </div>
);

/* WhyMail brand mark — hairline frame, envelope, accent signal dot */
const BrandMark = ({ size = 56, color = WM.ink, accent = WM.accent }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    <rect x="1.5" y="1.5" width="61" height="61" rx="11" fill="none" stroke={color} strokeOpacity="0.22" strokeWidth="1.4" />
    {/* envelope body */}
    <rect x="14" y="20" width="36" height="26" rx="4" fill="none" stroke={color} strokeWidth="2.4" />
    {/* flap */}
    <path d="M 15 23 L 32 37 L 49 23" fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
    {/* accent signal dot — the "why" */}
    <circle cx="50" cy="20" r="4.5" fill={accent} />
  </svg>
);

/* Wordmark — Antonio, set tight */
const Wordmark = ({ size = 22, color = WM.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.06,
  }}>
    <span>Why</span><span style={{ fontWeight: 400, color: WM.accent }}>Mail</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,            // honeypot — should stay empty
          domain: SITE.domain,                // WhyMail.com
          category: SITE.category,            // Email intelligence / inbox clarity SaaS concept
          subject: `Domain inquiry — ${SITE.domain}`,
          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@company.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: WM.accent, 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.95)', 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: WM.accent,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: WM.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 ${WM.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: WM.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: WM.accent,
                  }}
                />
              ) : (
                <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 ${WM.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: WM.ink, letterSpacing: 0,
                    outline: 'none', caretColor: WM.accent,
                  }}
                />
              )}
            </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: WM.onAccent, background: status === 'submitting' ? WM.steel : WM.accent,
            border: 'none', borderRadius: 8, 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: WM.inkLow, lineHeight: 1.7,
          }}>
            Concept shown for illustrative purposes.
          </div>
        </>
      )}
    </form>
  );
};

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

const Desktop = () => (
  <div style={{
    width: 1440, background: WM.bg, color: WM.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: WM.inkFaint }} />
      <span style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: WM.inkLow,
      }}>WhyMail.com · Email Intelligence</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Concept', '#story'], ['Product', '#culture'], ['Signals', '#presence']].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 ? WM.ink : WM.inkDim, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            color: WM.accent, opacity: 0.85,
            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: WM.ink,
        textDecoration: 'none',
        border: `1px solid ${WM.inkFaint}`, borderRadius: 8, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Inquire
        <span style={{ width: 5, height: 5, background: WM.accent, borderRadius: 5 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · inbox intelligence · message clarity" style={{ height: 880 }}>
    {/* light wash toward the lower third so dark hero text stays legible */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 520,
      background: 'linear-gradient(180deg, transparent 0%, rgba(250,250,247,0.35) 40%, rgba(250,250,247,0.88) 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: WM.inkLow,
    }}>
      N° 001 — Concept One
    </div>
    <div style={{
      position: 'absolute', top: 110, right: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: WM.inkLow,
      textAlign: 'right',
    }}>
      Priority / Context / Clarity
    </div>

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 940,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>WhyMail.com · Email Intelligence Concept</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 132, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: WM.ink,
      }}>
        Why every email<br />
        <span style={{ color: WM.ink, fontWeight: 400 }}>matters — finally </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: WM.accent, fontWeight: 500,
        }}>made clear.</span>
      </h1>
      <p style={{
        marginTop: 72, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.55, color: WM.inkDim,
      }}>
        WhyMail.com is a premium SaaS brand concept for inbox intelligence: helping
        people and teams understand what needs attention, what can wait, and why each
        message matters.
      </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: WM.onAccent, background: WM.accent, borderRadius: 8,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Inquire About WhyMail.com
          <span style={{ display: 'inline-block', width: 18, height: 1, background: WM.onAccent }} />
        </a>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: WM.ink, textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: `1px solid ${WM.inkFaint}`,
        }}>
          Explore the 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: WM.inkLow,
      }}>Scroll · 01 of 06</div>
      <div style={{ width: 1, height: 56, background: `linear-gradient(180deg, ${WM.accent}, transparent)` }} />
    </div>
  </Plate>
);

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

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Problem</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 72, lineHeight: 0.98, letterSpacing: -0.5,
        color: WM.ink,
      }}>
        Inbox overload is not a<br />
        volume problem. It is a<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 400 }}>context problem.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: WM.inkDim, maxWidth: 520, margin: 0,
      }}>
        WhyMail turns the question every inbox creates into a brand: why this message,
        why now, why it matters, and what should happen next. The name naturally fits a
        product built around explanation, priority, and calm email decision-making.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${WM.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: 'Why',  l: 'This message matters' },
          { n: 'Now',  l: 'Or it can wait' },
          { n: 'Next', l: 'What should happen' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 56, lineHeight: 1, color: WM.ink,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.8, textTransform: 'uppercase', color: WM.inkLow,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const cultureItems = [
  { n: '01', label: 'Priority', mood: 'signal',  image: 'media/priority.jpg', h: 560, blurb: 'Surface what truly needs attention — and the reasoning behind why it ranks where it does.', cap: '// priority reasoning' },
  { n: '02', label: 'Context',  mood: 'inbox',    image: 'media/threads.jpg',  h: 720, blurb: 'See the thread behind a message: what came before, who is involved, and why it matters now.', cap: '// message context · thread map' },
  { n: '03', label: 'Reply',    mood: 'violet',   image: 'media/reply.jpg',    h: 720, blurb: 'Clearer next actions, with suggested replies and follow-ups drawn from the full picture.',     cap: '// reply guidance · next action' },
  { n: '04', label: 'Team',     mood: 'surface',  image: 'media/team.jpg',     h: 560, blurb: 'Shared inbox clarity so a team knows what is handled, what is waiting, and who should respond.', cap: '// team inbox clarity' },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: WM.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 ${WM.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>03 — The Concept</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 980,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 92, lineHeight: 0.95, letterSpacing: -0.8,
          color: WM.ink,
        }}>
          Built for the layer between<br />
          messages and <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: WM.accent }}>decisions.</span>
        </h2>
      </div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: WM.inkLow,
        textAlign: 'right', paddingBottom: 12,
      }}>
        Priority · Context<br/>Reply · Team
      </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, borderRadius: 16 }} />
          <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: WM.accent,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 44, lineHeight: 1, letterSpacing: -0.3,
                color: WM.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: WM.inkDim, textDecoration: 'none',
            }}>Explore →</a>
          </div>
          <p style={{
            marginTop: 14, marginBottom: 0, maxWidth: 440,
            fontSize: 15.5, color: WM.inkDim,
          }}>{c.blurb}</p>
        </div>
      ))}
    </div>
  </div>
);

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/workflow.jpg" caption="// 04 · calm inbox workflow" style={{ height: 700 }}>
    {/* light wash so the dark headline reads clearly over the photo */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 72% 62% at 50% 50%, rgba(250,250,247,0.86) 0%, rgba(250,250,247,0.62) 52%, rgba(250,250,247,0.82) 100%)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{ marginBottom: 56 }}><Eyebrow style={{ color: WM.accent }}>04 — The Idea</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 128, lineHeight: 0.92, letterSpacing: -1.2,
        color: WM.ink,
      }}>
        Why this.<br />
        Why now.<br />
        <span style={{ color: WM.accent, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Why it matters.</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: WM.inkDim,
      }}>
        <span style={{ width: 32, height: 1, background: WM.inkFaint }} />
        <span>The question every inbox creates — finally answered</span>
        <span style={{ width: 32, height: 1, background: WM.inkFaint }} />
      </div>
    </div>
  </Plate>
);

/* Signal card — a clean product-style panel with corner ticks and a label tab. */
const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: WM.card, borderRadius: 14,
    border: `1px solid ${WM.inkFaint}`,
    boxShadow: '0 12px 32px rgba(23,32,51,0.06), inset 0 1px 0 rgba(255,255,255,0.6)',
    ...style,
  }}>
    {/* corner ticks — light 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: WM.accentDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {/* stitched inner border */}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(74,125,255,0.30)`,
      }} />
    )}
    {/* accent tab in top-left if accentTab */}
    {accentTab && (
      <span style={{
        position: 'absolute', top: -1, left: 32, width: 22, height: 4,
        background: WM.accent,
      }} />
    )}
    {/* 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: WM.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: WM.accentDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: WM.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const presenceNotes = [
  { n: '01', t: 'Priority reasoning',  kind: 'priority', d: 'Understand why a message ranks where it does — not just that it arrived in the inbox.' },
  { n: '02', t: 'Message context',     kind: 'context',  d: 'The thread, the people, and the history that give a single message its real meaning.' },
  { n: '03', t: 'Reply guidance',      kind: 'reply',    d: 'Clearer next actions and suggested responses, drawn from the full picture of the exchange.' },
  { n: '04', t: 'Team inbox clarity',  kind: 'team',     d: 'Shared visibility into what needs a reply, what is already handled, and what can wait.' },
  { n: '05', t: 'Follow-up intelligence', kind: 'followup', d: 'Surface the conversations quietly waiting on you to move them forward to a decision.' },
  { n: '06', t: 'Noise reduction',     kind: 'noise',    d: 'Turn a crowded inbox into a short, calm list of what actually matters today.' },
];

const PresenceGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = WM.accent; const dim = WM.inkLow;
  switch (kind) {
    case 'priority': // ranked bars, top one highlighted
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.18} y={s*0.26} width={s*0.52} height={s*0.10} rx="2" fill={stroke} />
          <rect x={s*0.18} y={s*0.45} width={s*0.40} height={s*0.085} rx="2" fill="none" stroke={dim} strokeWidth="1.4" />
          <rect x={s*0.18} y={s*0.63} width={s*0.28} height={s*0.085} rx="2" fill="none" stroke={dim} strokeWidth="1.4" />
        </svg>
      );
    case 'context': // connected thread nodes
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.26} y1={s*0.32} x2={s*0.60} y2={s*0.50} stroke={dim} strokeWidth="1" />
          <line x1={s*0.60} y1={s*0.50} x2={s*0.36} y2={s*0.72} stroke={dim} strokeWidth="1" />
          <circle cx={s*0.26} cy={s*0.32} r={s*0.075} fill="none" stroke={stroke} strokeWidth="1.4" />
          <circle cx={s*0.60} cy={s*0.50} r={s*0.075} fill="none" stroke={dim} strokeWidth="1.4" />
          <circle cx={s*0.36} cy={s*0.72} r={s*0.075} fill={stroke} />
        </svg>
      );
    case 'reply': // envelope with reply arrow
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.18} y={s*0.30} width={s*0.64} height={s*0.42} rx="3" fill="none" stroke={dim} strokeWidth="1.2" />
          <path d={`M ${s*0.18} ${s*0.34} L ${s*0.50} ${s*0.56} L ${s*0.82} ${s*0.34}`} fill="none" stroke={dim} strokeWidth="1" />
          <path d={`M ${s*0.62} ${s*0.50} L ${s*0.44} ${s*0.50} M ${s*0.50} ${s*0.43} L ${s*0.43} ${s*0.50} L ${s*0.50} ${s*0.57}`} fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      );
    case 'team': // avatar circles over a baseline
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={s*0.32} cy={s*0.42} r={s*0.10} fill="none" stroke={stroke} strokeWidth="1.4" />
          <circle cx={s*0.52} cy={s*0.42} r={s*0.10} fill="none" stroke={dim} strokeWidth="1.4" />
          <circle cx={s*0.72} cy={s*0.42} r={s*0.10} fill="none" stroke={dim} strokeWidth="1.4" />
          <line x1={s*0.18} y1={s*0.68} x2={s*0.82} y2={s*0.68} stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'followup': // clock with accent hand
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s*0.30} fill="none" stroke={dim} strokeWidth="1.4" />
          <line x1={cx} y1={cy} x2={cx} y2={s*0.30} stroke={stroke} strokeWidth="1.6" strokeLinecap="round" />
          <line x1={cx} y1={cy} x2={s*0.64} y2={cy} stroke={stroke} strokeWidth="1.6" strokeLinecap="round" />
          <circle cx={cx} cy={cy} r={s*0.03} fill={stroke} />
        </svg>
      );
    case 'noise': // many lines reducing to one signal
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          {[0.30, 0.42, 0.54, 0.66].map((y, k) => (
            <line key={k} x1={s*0.16} y1={s*y} x2={s*0.40} y2={s*y} stroke={dim} strokeWidth="1" />
          ))}
          <line x1={s*0.44} y1={s*0.48} x2={s*0.74} y2={s*0.48} stroke={stroke} strokeWidth="1.6" />
          <circle cx={s*0.78} cy={s*0.48} r={s*0.05} fill={stroke} />
        </svg>
      );
  }
};

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

    {/* header */}
    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 60 }}>
      <div>
        <Eyebrow>05 — The Signals</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: WM.ink,
        }}>
          The signal behind every message.<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 400 }}>Read, ranked, and explained.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: WM.inkDim, paddingBottom: 12,
      }}>
        WhyMail sits in the layer between messages and decisions — reading the signal in
        each email and explaining what to do with it, calmly and clearly.
      </div>
    </div>

    {/* Six signal 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: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 28, letterSpacing: 0.2, color: WM.ink, lineHeight: 1.05,
            }}>{m.t}</h3>
          </div>
          <p style={{
            margin: 0, marginTop: 18,
            fontSize: 14.5, lineHeight: 1.55, color: WM.inkDim,
          }}>{m.d}</p>
        </Artifact>
      ))}
    </div>

    {/* bottom strip — brand line */}
    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${WM.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: WM.inkLow,
    }}>
      <span>Priority · Context · Guidance · Clarity</span>
      <span>Read the signal, not just the subject</span>
      <span style={{ color: WM.accent }}>Calmer inboxes · Clearer decisions</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@company.com' },
  ];
  return (
    <div id="inquiry" style={{
      background: WM.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: 92, lineHeight: 0.95, letterSpacing: -0.8,
          color: WM.ink,
        }}>
          Acquire<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 400 }}>WhyMail.com.</span>
        </h2>
        <p style={{ maxWidth: 460, fontSize: 16, lineHeight: 1.6, color: WM.inkDim, margin: 0 }}>
          <span style={{ color: WM.ink }}>WhyMail.com</span> is available for acquisition. This page presents an
          illustrative brand concept to show one possible direction for the domain. The
          concept is not represented as an operating business, product, or live SaaS platform.
        </p>
        <div style={{ marginTop: 32, maxWidth: 460, fontSize: 15.5, lineHeight: 1.6, color: WM.inkDim }}>
          Send a serious inquiry about WhyMail.com.
        </div>
        <div style={{
          marginTop: 48, paddingTop: 32, borderTop: `1px solid ${WM.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'WhyMail.com' },
            { l: 'Direction', v: 'Email intelligence concept' },
            { 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: WM.accent,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: WM.accentDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Antonio, sans-serif', fontSize: 22, color: WM.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 ${WM.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: WM.accent, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: WM.inkLow, lineHeight: 1.7,
          }}>
            This concept is illustrative. Not an operating email service or live SaaS product.
          </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: WM.accent, 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.95)', 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: WM.accent,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: WM.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 ${WM.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Antonio, sans-serif', fontSize: 26,
                    color: WM.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: WM.accent,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: WM.accent,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: WM.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 ${WM.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Antonio, sans-serif', fontSize: 26,
                  color: WM.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: WM.accent,
                }}
              />
            </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: WM.onAccent, background: status === 'submitting' ? WM.steel : WM.accent,
                  padding: '20px 32px', border: 'none', borderRadius: 8,
                  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: WM.onAccent, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: WM.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: WM.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${WM.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 }}>
          <BrandMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: WM.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>Why<span style={{ fontWeight: 400, color: WM.accent }}>Mail</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: WM.accent,
            }}>Understand the email behind the email.</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: WM.inkLow, lineHeight: 1.7,
        }}>
          WhyMail.com is presented as an illustrative brand concept for domain acquisition.
          It is not currently represented here as an operating email service, software
          platform, or live SaaS product.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Brand Direction', href: '#story' },
          { t: 'The Signals',     href: '#presence' },
          { t: 'Use Cases',       href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'WhyMail.com',         href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Independent Concept',     href: null },
          { t: 'Not an Operating Service', href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: WM.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: WM.accentDim }} />
            {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: WM.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${WM.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: WM.inkLow,
    }}>
      <span>© MMXXVI · WhyMail · Concept presentation</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: WM.accent }}>Email Intelligence — 001</span>
    </div>
  </div>
);

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

const Mobile = () => (
  <div style={{
    width: 390, background: WM.bg, color: WM.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: WM.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: WM.ink }} />
        <span style={{ width: 16, height: 1, background: WM.ink, alignSelf: 'flex-end' }} />
      </div>
    </div>

    {/* hero */}
    <Plate id="m-hero" image="media/hero.jpg" caption="// 01 · inbox intelligence" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 420,
        background: 'linear-gradient(180deg, transparent 0%, rgba(250,250,247,0.5) 50%, rgba(250,250,247,0.92) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>Email Intelligence Concept</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 56, lineHeight: 0.92, letterSpacing: -0.6,
          margin: 0, color: WM.ink,
        }}>
          Why every email matters —<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 500 }}>finally made clear.</span>
        </h1>
        <p style={{ marginTop: 44, color: WM.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          A premium SaaS brand concept for inbox intelligence — what needs attention, what can wait, and why.
        </p>
        <a href="#inquiry" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          marginTop: 24, padding: '14px 22px', borderRadius: 8,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: WM.onAccent, background: WM.accent, textDecoration: 'none',
        }}>
          Inquire About WhyMail.com
          <span style={{ width: 16, height: 1, background: WM.onAccent }} />
        </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: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 42, lineHeight: 0.98, letterSpacing: -0.3,
        color: WM.ink,
      }}>
        Inbox overload is not a volume problem. It is a <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 400 }}>context problem.</span>
      </h2>
      <p style={{ color: WM.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        WhyMail turns the question every inbox creates into a brand: why this message, why now, why it matters, and what should happen next.
      </p>
      <Plate image="media/context.jpg" caption="// 02 · message context" style={{ height: 320, marginTop: 32, borderRadius: 14 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>03 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 46, lineHeight: 0.95, letterSpacing: -0.4,
        color: WM.ink,
      }}>
        Built for the layer between messages and <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 400 }}>decisions.</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, borderRadius: 14 }} />
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2, color: WM.accent,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 32, lineHeight: 1, color: WM.ink, margin: 0,
              }}>{c.label}</h3>
            </div>
            <p style={{ marginTop: 8, color: WM.inkDim, fontSize: 14 }}>{c.blurb}</p>
          </div>
        ))}
      </div>
    </div>

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/workflow.jpg" caption="// 04 · calm inbox workflow" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 82% 62% at 50% 50%, rgba(250,250,247,0.88) 0%, rgba(250,250,247,0.64) 60%, rgba(250,250,247,0.85) 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: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 56, lineHeight: 0.92, letterSpacing: -0.4,
          color: WM.ink,
        }}>
          Why this.<br/>
          Why now.<br/>
          <span style={{ color: WM.accent, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Why it matters.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: WM.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — The Signals</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 38, lineHeight: 0.96, letterSpacing: -0.3,
        color: WM.ink,
      }}>
        The signal behind every message.<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 400 }}>Read, ranked, and explained.</span>
      </h2>
      <p style={{ color: WM.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        WhyMail sits in the layer between messages and decisions — reading the signal in each email and explaining what to do with it.
      </p>
      {/* signal 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: 190 }}
          >
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <PresenceGlyph kind={m.kind} size={30} />
              <h3 style={{
                margin: 0,
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 18, letterSpacing: 0.2, color: WM.ink, lineHeight: 1.05,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: WM.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      {/* brand line strip */}
      <div style={{
        marginTop: 18, padding: '18px 18px', borderRadius: 12,
        border: `1px solid ${WM.inkFaint}`, background: WM.card,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: WM.inkLow, lineHeight: 1.7,
        }}>Priority · Context<br/>Reply · Team</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: WM.accent,
        }}>Calmer inboxes · Clearer decisions</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: 52, lineHeight: 0.95, letterSpacing: -0.5,
        color: WM.ink,
      }}>
        Acquire<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WM.accent, fontWeight: 400 }}>WhyMail.com.</span>
      </h2>
      <p style={{ color: WM.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        <span style={{ color: WM.ink }}>WhyMail.com</span> is available for acquisition. This page is an illustrative brand concept — not an operating business, product, or live SaaS platform.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${WM.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',    v: 'WhyMail.com' },
          { l: 'Direction', v: 'Email intelligence concept' },
          { 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: WM.accent,
            }}>{b.l}</div>
            <div style={{
              marginTop: 4,
              fontFamily: 'Antonio, sans-serif', fontSize: 20, color: WM.ink, lineHeight: 1.2,
            }}>{b.v}</div>
          </div>
        ))}
      </div>

      <MobileContactForm />
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: WM.panel, padding: '36px 22px 32px', borderTop: `1px solid ${WM.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <BrandMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: WM.ink, lineHeight: 1 }}>Why<span style={{ fontWeight: 400, color: WM.accent }}>Mail</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: WM.accent }}>Understand the email behind the email.</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: WM.inkLow, lineHeight: 1.7,
      }}>
        WhyMail.com is presented as an illustrative brand concept for domain acquisition. It is not currently represented here as an operating email service, software platform, or live SaaS product.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'Brand Direction', href: '#story' },
            { t: 'The Signals',     href: '#presence' },
            { t: 'Use Cases',       href: '#culture' },
          ]},
          { h: 'Domain', l: [
            { t: 'WhyMail.com',         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: WM.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: WM.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${WM.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: WM.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · WhyMail<br/>Independent concept · Not an operating service<br/>
        <span style={{ color: WM.accent }}>Email Intelligence — 001</span>
      </div>
    </div>
  </div>
);

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