/* Online Help Center — homepage mockup (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow)
   Palette: deep navy #07111F · surface #0B1628 · card #12233A · slate #3A4A60 · ink #EAF4FF · accent blue #2F80ED · cyan #39D5FF
*/

const CH = {
  ink:    '#EAF4FF',
  inkDim: 'rgba(168,182,200,0.86)',
  inkLow: 'rgba(168,182,200,0.52)',
  inkFaint:'rgba(168,182,200,0.18)',
  bg:     '#07111F',
  panel:  '#0B1628',
  card:   '#12233A',
  steel:  '#3A4A60',
  brass:  '#2F80ED',
  brassDim:'rgba(47,128,237,0.55)',
  cyan:   '#39D5FF',
};

// Public site config. Claude should update site-config.js for each domain.
const SITE = {
  domain: 'OnlineHelpCenter.com',
  brandName: 'Online Help Center',
  category: 'Customer Support Knowledge Base / Help Center',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for OnlineHelpCenter.com has been sent.',
  messagePlaceholder: 'Tell us how you would use OnlineHelpCenter.com.',
  ...(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(47,128,237,0.30), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(57,213,255,0.16), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(8,18,34,0.55), transparent 70%),
      linear-gradient(180deg, #0d1d33 0%, #091627 55%, #050d18 100%)`,
    metal: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(90,120,170,0.18), transparent 65%),
      linear-gradient(115deg, #0a1626 0%, #122339 50%, #060f1c 100%)`,
    road: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(47,128,237,0.20), transparent 60%),
      linear-gradient(180deg, #050d18 0%, #0a1626 60%, #0d1f37 100%)`,
    leather: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(57,213,255,0.20), transparent 62%),
      linear-gradient(160deg, #0e2138 0%, #060f1c 100%)`,
    workshop: `
      radial-gradient(circle 320px at 70% 30%, rgba(47,128,237,0.34), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(57,213,255,0.18), transparent 65%),
      linear-gradient(180deg, #0c1c30 0%, #06101c00 100%), #060f1c`,
  };
  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>
  );
};

/* VideoPlate — like Plate, but backed by a looping mp4 with the same overlays. */
const VideoPlate = ({ src, caption, children, style = {}, poster, id }) => (
  <div id={id} style={{ position: 'relative', overflow: 'hidden', background: '#050403', ...style }}>
    <video
      src={src}
      poster={poster}
      autoPlay
      muted
      loop
      playsInline
      preload="auto"
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center',
      }}
    />
    {/* cool blue wash + dark vignette layered on top */}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `
        radial-gradient(ellipse 70% 55% at 50% 18%, rgba(47,128,237,0.16), transparent 62%),
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.55) 100%)`,
    }} />
    <Grain opacity={0.35} blend="overlay" />
    {caption && (
      <div style={{
        position: 'absolute', bottom: 14, right: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.4, textTransform: 'uppercase',
        color: 'rgba(235,229,216,0.55)',
      }}>{caption}</div>
    )}
    {children}
  </div>
);

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

/* Monogram mark — abstract help/search glyph (search lens + answer tick) */
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" />
    {/* search lens */}
    <circle cx="28" cy="28" r="11" fill="none" stroke={color} strokeWidth="4" />
    {/* lens handle */}
    <path d="M 36 36 L 47 47" fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="round" />
    {/* answer check inside the lens (accent) */}
    <path d="M 23 28 L 27 32 L 34 24" fill="none" stroke={accent} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
    {/* accent tick */}
    <rect x="30" y="55" width="4" height="4" fill={accent} />
  </svg>
);

/* Wordmark — Antonio, condensed, set tight */
const Wordmark = ({ size = 22, color = CH.ink }) => (
  <span style={{
    fontFamily: 'Antonio, "Saira Condensed", sans-serif',
    fontWeight: 600, fontSize: size, letterSpacing: 0.5,
    color, lineHeight: 1, textTransform: 'none',
    display: 'inline-flex', alignItems: 'baseline', gap: size * 0.18,
  }}>
    <span>Online Help</span><span style={{ fontWeight: 400, opacity: 0.78 }}>Center</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@company.com' },
    { l: 'Message', n: 'message', t: 'area',  r: true, h: 'Your message', p: SITE.messagePlaceholder },
  ];
  return (
    <form onSubmit={handleSubmit} style={{ marginTop: 36, position: 'relative' }}>
      <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
        <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
      </div>
      {status === 'success' ? (
        <div style={{ padding: '40px 0', fontFamily: 'IBM Plex Mono, monospace',
          fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass, lineHeight: 1.8 }}>
          {SITE.successMessage}
        </div>
      ) : (
        <>
          {status === 'error' && (
            <div style={{ marginBottom: 16, fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
              color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
              {errorMsg}
            </div>
          )}
          {fields.map(f => (
            <div key={f.l} style={{ marginBottom: 22 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
                letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: CH.inkLow }}>{f.h}</span>
              </div>
              {f.t === 'area' ? (
                <textarea name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: CH.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              ) : (
                <input type={f.t} name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: CH.ink, letterSpacing: 0,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              )}
            </div>
          ))}
          <button type="submit" disabled={status === 'submitting'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 12,
            padding: '14px 22px',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 2.2, textTransform: 'uppercase',
            color: CH.bg, background: status === 'submitting' ? CH.steel : CH.brass,
            border: 'none', cursor: status === 'submitting' ? 'default' : 'pointer',
            opacity: status === 'submitting' ? 0.7 : 1,
          }}>
            {status === 'submitting' ? 'Sending…' : 'Send Inquiry'}
          </button>
          <div style={{
            marginTop: 18,
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
          }}>
            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,
      }}>Self-Service Help Center · Concept</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Overview', '#story'], ['Support Experience', '#culture'], ['Knowledge Base', '#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 ? 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,
      }}>
        Acquisition
        <span style={{ width: 5, height: 5, background: CH.brass, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · support command center · search-first" style={{ height: 880 }}>
    {/* faint horizon detail — subtle gradient for text legibility */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 460,
      background: 'linear-gradient(180deg, transparent 0%, rgba(5,13,24,0.40) 45%, rgba(5,13,24,0.80) 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 — Domain Concept
    </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',
    }}>
      Search / Answers / Support
    </div>

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 940,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>Customer Support Knowledge Base</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 132, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: CH.ink,
      }}>
        Online help,<br />
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: CH.cyan, fontWeight: 500,
        }}>organized beautifully.</span>
      </h1>
      <p style={{
        marginTop: 72, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.55, color: CH.inkDim,
      }}>
        OnlineHelpCenter.com is a premium domain concept for a modern support knowledge base —
        built around searchable answers, calmer customer journeys, and a name that says exactly what it does.
      </p>

      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#inquiry" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: CH.bg, background: CH.brass,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Inquire About This Domain
          <span style={{ display: 'inline-block', width: 18, height: 1, background: CH.bg }} />
        </a>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: CH.ink, textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: `1px solid ${CH.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: 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 · layered knowledge-base panels" style={{ height: 720 }} />

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Name</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 72, lineHeight: 0.98, letterSpacing: -0.5,
        color: CH.ink,
      }}>
        A name built for<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.cyan, fontWeight: 400 }}>customer answers.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: CH.inkDim, maxWidth: 520, margin: 0,
      }}>
        Online Help Center gives buyers an instantly understandable foundation for a support
        product, documentation hub, customer service portal, or self-service knowledge base. The
        name is direct, useful, and broad enough to support a serious customer experience brand.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 620,
      }}>
        {[
          { n: '01', l: 'Clear category language customers already understand' },
          { n: '02', l: 'Strong fit for support, CRM, help desk & docs tools' },
          { n: '03', l: 'Easy to position as a self-service destination for answers' },
        ].map(s => (
          <div key={s.n}>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 56, lineHeight: 1, color: CH.brass,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.6,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const cultureItems = [
  { n: '01', label: 'Search',     mood: 'metal',   image: 'media/search.jpg',     h: 560, blurb: 'Search-first support journeys that take customers straight to the answer they came for.', cap: '// search-first · single input' },
  { n: '02', label: 'Library',    mood: 'garage',  image: 'media/library.jpg',    h: 720, blurb: 'Organized article libraries — clean, browsable, and structured for self-service.',         cap: '// article library · structured' },
  { n: '03', label: 'Escalation', mood: 'leather', image: 'media/escalation.jpg', h: 720, blurb: 'Clear escalation paths the moment a question genuinely needs a human.',                    cap: '// guided handoff · self-serve → human' },
  { n: '04', label: 'Experience', mood: 'road',    image: 'media/experience.jpg', h: 560, blurb: 'A calm, trustworthy customer experience from first search to fully resolved.',              cap: '// customer success · calm' },
];

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 — Self-Service</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 980,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          Designed around<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: CH.cyan }}>faster self-service.</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,
      }}>
        Search · Library<br/>Escalation · Experience
      </div>
    </div>

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

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.jpg" caption="// 04 · scattered questions → organized answers" 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 — Positioning</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 128, lineHeight: 0.92, letterSpacing: -1.2,
        color: CH.ink,
      }}>
        Answers, organized.<br />
        Support, calmer.<br />
        <span style={{ color: CH.cyan, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Customers, served.</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>Answers customers can find before they have to ask</span>
        <span style={{ width: 32, height: 1, background: CH.inkFaint }} />
      </div>
    </div>
  </Plate>
);

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

const presenceNotes = [
  { n: '01', t: 'The Search',    kind: 'search',    d: 'A single, calm search field that points customers to the right answer fast.' },
  { n: '02', t: 'The Article',   kind: 'article',   d: 'Clean, well-structured help articles that read clearly and build trust.' },
  { n: '03', t: 'The Library',   kind: 'library',   d: 'An organized knowledge base that scales across products and support categories.' },
  { n: '04', t: 'The Handoff',   kind: 'handoff',   d: 'Clear escalation to a human the moment self-service runs out.' },
  { n: '05', t: 'The Workspace', kind: 'workspace', d: 'A premium customer-success surface for the teams behind the answers.' },
  { n: '06', t: 'The Name',      kind: 'trust',     d: 'Plain-English, memorable, and broad enough for serious customer experience brands.' },
];

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 'search': // magnifier
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={s*0.42} cy={s*0.42} r={s*0.22} fill="none" stroke={stroke} strokeWidth="1.4" />
          <line x1={s*0.58} y1={s*0.58} x2={s*0.82} y2={s*0.82} stroke={dim} strokeWidth="1.4" strokeLinecap="round" />
          <line x1={s*0.32} y1={s*0.42} x2={s*0.52} y2={s*0.42} stroke={dim} strokeWidth="0.9" />
        </svg>
      );
    case 'article': // document with text lines
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.26} y={s*0.16} width={s*0.48} height={s*0.68} fill="none" stroke={stroke} strokeWidth="1.2" />
          {[0.30, 0.40, 0.50, 0.60].map((y, i) => (
            <line key={i} x1={s*0.34} y1={s*y} x2={s*(i === 3 ? 0.56 : 0.66)} y2={s*y} stroke={dim} strokeWidth="0.9" />
          ))}
          <line x1={s*0.34} y1={s*0.70} x2={s*0.50} y2={s*0.70} stroke={stroke} strokeWidth="0.9" />
        </svg>
      );
    case 'library': // stacked cards
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.22} y={s*0.22} width={s*0.46} height={s*0.34} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.30} y={s*0.32} width={s*0.46} height={s*0.34} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.38} y={s*0.42} width={s*0.46} height={s*0.34} fill="none" stroke={stroke} strokeWidth="1.3" />
        </svg>
      );
    case 'handoff': // branch from one node to a person dot
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={s*0.24} cy={s*0.50} r={s*0.06} fill="none" stroke={stroke} strokeWidth="1.2" />
          <path d={`M ${s*0.32} ${s*0.50} L ${s*0.56} ${s*0.50}`} fill="none" stroke={dim} strokeWidth="1.1" />
          <path d={`M ${s*0.50} ${s*0.44} L ${s*0.58} ${s*0.50} L ${s*0.50} ${s*0.56}`} fill="none" stroke={stroke} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx={s*0.72} cy={s*0.40} r={s*0.06} fill="none" stroke={dim} strokeWidth="1" />
          <path d={`M ${s*0.64} ${s*0.66} Q ${s*0.72} ${s*0.52}, ${s*0.80} ${s*0.66}`} fill="none" stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'workspace': // monitor
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.18} y={s*0.22} width={s*0.64} height={s*0.42} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.26} y1={s*0.32} x2={s*0.50} y2={s*0.32} stroke={dim} strokeWidth="0.9" />
          <line x1={s*0.26} y1={s*0.42} x2={s*0.62} y2={s*0.42} stroke={dim} strokeWidth="0.9" />
          <line x1={s*0.50} y1={s*0.64} x2={s*0.50} y2={s*0.74} stroke={dim} strokeWidth="1.1" />
          <line x1={s*0.36} y1={s*0.78} x2={s*0.64} y2={s*0.78} stroke={stroke} strokeWidth="1.2" />
        </svg>
      );
    case 'trust': // shield with check
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <path d={`M ${cx} ${s*0.16} L ${s*0.76} ${s*0.28} L ${s*0.76} ${s*0.52} Q ${s*0.76} ${s*0.74}, ${cx} ${s*0.84} Q ${s*0.24} ${s*0.74}, ${s*0.24} ${s*0.52} L ${s*0.24} ${s*0.28} Z`} fill="none" stroke={dim} strokeWidth="1.1" />
          <path d={`M ${s*0.40} ${s*0.48} L ${s*0.47} ${s*0.56} L ${s*0.62} ${s*0.38}`} fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </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 — Support Experience</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: CH.ink,
        }}>
          A premium support brand<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.cyan, fontWeight: 400 }}>without the clutter.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 430,
        fontSize: 15.5, lineHeight: 1.65, color: CH.inkDim, paddingBottom: 12,
      }}>
        OnlineHelpCenter.com can stretch from a standalone help center product to a white-label knowledge base, an AI-assisted support hub, or the customer support layer of a larger software suite.
      </div>
    </div>

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

    {/* bottom strip — brand line */}
    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${CH.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
    }}>
      <span>Strong B2B fit · Plain-English · Multi-category</span>
      <span>Clear use case · Broad buyer pool</span>
      <span style={{ color: CH.brass }}>Support-ready · Premium category fit</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: CH.bg, padding: '180px 56px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96,
    }}>
      <div>
        <Eyebrow>06 — Acquisition</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 640,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 84, lineHeight: 0.95, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          Acquire<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.cyan, fontWeight: 400 }}>OnlineHelpCenter.com</span>
        </h2>
        <p style={{ maxWidth: 470, fontSize: 16, lineHeight: 1.6, color: CH.inkDim, margin: 0 }}>
          This page presents an illustrative brand concept showing how <span style={{ color: CH.ink }}>OnlineHelpCenter.com</span> could become a premium help center, support knowledge base, or customer self-service platform. The business concept shown here is not represented as an active operating company. The domain is available for acquisition by the right buyer.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${CH.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 560,
        }}>
          {[
            { l: 'Domain',    v: 'OnlineHelpCenter.com' },
            { l: 'Category',  v: 'Support knowledge base' },
            { l: 'Status',    v: 'Open to serious inquiries' },
          ].map(b => (
            <div key={b.l}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: CH.brassDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Antonio, sans-serif', fontSize: 22, color: CH.ink, lineHeight: 1.2,
              }}>
                {b.v}
              </div>
            </div>
          ))}
        </div>

        {/* small honesty note tucked under the info blocks */}
        <div style={{
          marginTop: 40, maxWidth: 460,
          display: 'flex', gap: 14, alignItems: 'flex-start',
          paddingTop: 18, borderTop: `1px dashed ${CH.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: CH.brass, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
          }}>
            Illustrative brand concept. Not an active support service or official portal for any company.
          </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>
        ) : (
          <>
            <p style={{
              margin: '0 0 36px', maxWidth: 460,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.4, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.8,
            }}>
              Interested in OnlineHelpCenter.com? Send a short message and your inquiry will be routed for review.
            </p>
            {status === 'error' && (
              <div style={{ marginBottom: 20, fontFamily: 'IBM Plex Mono, monospace',
                fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase',
                color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
                {errorMsg}
              </div>
            )}
            {formFields.map(f => (
              <div key={f.label} style={{ marginBottom: 30 }}>
                <div style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                  letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: CH.inkLow }}>{f.hint}</span>
                </div>
                <input
                  type={f.type}
                  name={f.name}
                  value={values[f.name]}
                  onChange={set(f.name)}
                  placeholder={f.placeholder}
                  required={f.required}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Antonio, sans-serif', fontSize: 26,
                    color: CH.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: CH.inkLow }}>How you'd use it</span>
              </div>
              <textarea
                name="message"
                value={values.message}
                onChange={set('message')}
                placeholder={SITE.messagePlaceholder}
                required
                style={{
                  background: 'none', border: 'none', width: '100%',
                  borderBottom: `1px solid ${CH.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Antonio, sans-serif', fontSize: 26,
                  color: CH.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: CH.brass,
                }}
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
              <button
                type="submit"
                disabled={status === 'submitting'}
                style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
                  letterSpacing: 2.4, textTransform: 'uppercase',
                  color: CH.bg, background: status === 'submitting' ? CH.steel : CH.brass,
                  padding: '20px 32px', border: 'none',
                  cursor: status === 'submitting' ? 'default' : 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 16,
                  opacity: status === 'submitting' ? 0.7 : 1,
                }}
              >
                {status === 'submitting' ? 'Sending…' : 'Send Inquiry'}
                <span style={{ width: 22, height: 1, background: CH.bg, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow,
                textAlign: 'right', lineHeight: 1.6, maxWidth: 220,
              }}>
                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: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: CH.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>Online Help <span style={{ fontWeight: 400, opacity: 0.78 }}>Center</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
            }}>Answers customers can find before they ask.</div>
          </div>
        </div>
        <p style={{
          marginTop: 28, marginBottom: 0, maxWidth: 360,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>
          OnlineHelpCenter.com is presented as an illustrative premium brand concept for domain acquisition purposes. This is not an active customer support service, help desk provider, or official support portal for any third-party company.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Overview',          href: '#story' },
          { t: 'Support Experience', href: '#presence' },
          { t: 'Knowledge Base',    href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'OnlineHelpCenter.com', href: '#inquiry' },
          { t: 'Acquisition Inquiry',  href: '#inquiry' },
          { t: 'Contact',              href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Independent Concept',     href: null },
          { t: 'No Third-Party Affiliation', href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: CH.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: CH.brassDim }} />
            {g.h}
          </div>
          <div style={{ display: 'grid', gap: 10 }}>
            {g.l.map(x => (
              <a key={x.t} href={x.href || undefined} style={{
                fontFamily: 'Antonio, sans-serif', fontSize: 20, color: CH.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${CH.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow,
    }}>
      <span>© MMXXVI · Online Help Center · Concept presentation</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: CH.brass }}>Domain Concept — 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" caption="// 01 · support command center" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 380,
        background: 'linear-gradient(180deg, transparent 0%, rgba(5,13,24,0.45) 50%, rgba(5,13,24,0.85) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>Customer Support Knowledge Base</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 58, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: CH.ink,
        }}>
          Online help,<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.cyan, fontWeight: 500 }}>organized beautifully.</span>
        </h1>
        <p style={{ marginTop: 44, color: CH.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          A premium domain concept for a modern support knowledge base — searchable answers and calmer customer journeys.
        </p>
        <a href="#inquiry" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          marginTop: 24, padding: '14px 22px',
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: CH.bg, background: CH.brass, textDecoration: 'none',
        }}>
          Inquire About This Domain
          <span style={{ width: 16, height: 1, background: CH.bg }} />
        </a>
      </div>
    </Plate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>02 — The Name</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        A name built for <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.cyan, fontWeight: 400 }}>customer answers.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        Online Help Center gives buyers an instantly understandable foundation for a support product, documentation hub, customer service portal, or self-service knowledge base. The name is direct, useful, and broad.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · knowledge-base panels" style={{ height: 320, marginTop: 32 }} />
    </div>

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

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.jpg" caption="// 04 · questions → answers" 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 — Positioning</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 52, lineHeight: 0.92, letterSpacing: -0.4,
          color: CH.ink,
        }}>
          Answers, organized.<br/>
          Support, calmer.<br/>
          <span style={{ color: CH.cyan, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Customers, served.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: CH.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — Support Experience</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 38, lineHeight: 0.96, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        A premium support brand<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.cyan, fontWeight: 400 }}>without the clutter.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        OnlineHelpCenter.com can stretch from a standalone help center product to a white-label knowledge base, an AI-assisted support hub, or the support layer of a larger software suite.
      </p>
      {/* presence cards — 2-col grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {presenceNotes.map((m) => (
          <Artifact
            key={m.t}
            label={`N° ${m.n}`}
            contentStyle={{ padding: 16, justifyContent: 'space-between', minHeight: 180 }}
          >
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <PresenceGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0, whiteSpace: 'nowrap',
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 20, letterSpacing: 0.2, color: CH.ink,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: CH.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      {/* brand line strip */}
      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${CH.inkFaint}`, background: CH.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>Strong B2B fit · Plain-English<br/>Clear use case · Broad buyer pool</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
        }}>Support-ready · Premium category fit</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Acquisition</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.95, letterSpacing: -0.5,
        color: CH.ink,
      }}>
        Acquire<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.cyan, fontWeight: 400 }}>OnlineHelpCenter.com</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        This page presents an illustrative brand concept. The business shown here is not an active operating company. <span style={{ color: CH.ink }}>OnlineHelpCenter.com</span> is available for acquisition by the right buyer.
      </p>

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

      <MobileContactForm />
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: CH.panel, padding: '36px 22px 32px', borderTop: `1px solid ${CH.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <CHMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: CH.ink, lineHeight: 1 }}>Online Help <span style={{ fontWeight: 400, opacity: 0.78 }}>Center</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass }}>Answers customers can find before they ask.</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,
      }}>
        OnlineHelpCenter.com is presented as an illustrative premium brand concept for domain acquisition purposes. This is not an active support service, help desk provider, or official support portal for any third-party company.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'Overview',           href: '#story' },
            { t: 'Support Experience', href: '#presence' },
            { t: 'Knowledge Base',     href: '#culture' },
          ]},
          { h: 'Domain', l: [
            { t: 'OnlineHelpCenter.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: CH.inkLow,
              marginBottom: 12,
            }}>{g.h}</div>
            <div style={{ display: 'grid', gap: 6 }}>
              {g.l.map(x => (
                <a key={x.t} href={x.href} style={{
                  fontFamily: 'Antonio, sans-serif', fontSize: 16, color: CH.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${CH.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · Online Help Center<br/>Independent concept · No third-party affiliation<br/>
        <span style={{ color: CH.brass }}>Domain Concept — 001</span>
      </div>
    </div>
  </div>
);

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