/* The Ticker Bar — homepage mockup (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow/utility)
   Palette: graphite #050706 · panel #121714 · steel #A8AEA4 · silver #F1F3ED · gold #C9A45C · green #37FF8B
*/

const CH = {
  ink:     '#F1F3ED',
  inkDim:  'rgba(241,243,237,0.62)',
  inkLow:  'rgba(241,243,237,0.34)',
  inkFaint:'rgba(210,224,204,0.16)',
  bg:      '#050706',
  panel:   '#121714',
  steel:   '#A8AEA4',
  brass:   '#C9A45C',       // muted gold — secondary accent
  brassDim:'rgba(201,164,92,0.55)',
  green:   '#37FF8B',       // electric green — primary accent
  red:     '#E34B4B',       // minimal red — errors only
  silver:  '#D9E1DC',       // cool silver
};

// Public site config. Update site-config.js for each domain.
const SITE = {
  domain: 'TheTickerBar.com',
  brandName: 'The Ticker Bar',
  category: 'Financial Market Ticker / Market Intelligence',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for TheTickerBar.com has been sent.',
  messagePlaceholder: 'Tell us how you would use TheTickerBar.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 — uses real photo when image prop is set. */
const Plate = ({ mood = 'ticker', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    ticker: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(55,255,139,0.10), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(20,50,30,0.22), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(5,15,10,0.5), transparent 70%),
      linear-gradient(180deg, #101311 0%, #070a08 55%, #030504 100%)`,
    watchlist: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(60,80,70,0.18), transparent 65%),
      linear-gradient(115deg, #090c0a 0%, #131a16 50%, #050807 100%)`,
    signal: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(201,164,92,0.14), transparent 60%),
      linear-gradient(180deg, #040504 0%, #090b0a 60%, #131813 100%)`,
    editorial: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(80,60,20,0.20), transparent 62%),
      linear-gradient(160deg, #141210 0%, #070605 100%)`,
    newsroom: `
      radial-gradient(circle 320px at 70% 30%, rgba(55,255,139,0.09), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(201,164,92,0.09), transparent 65%),
      linear-gradient(180deg, #10130f 0%, rgba(7,6,5,0) 100%), #050706`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#050706 url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.ticker),
      ...style,
    }}>
      <Grain opacity={image ? 0.20 : 0.55} />
      <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.42) 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(241,243,237,0.42)',
        }}>{caption}</div>
      )}
      {children}
    </div>
  );
};

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

/* TB monogram mark — ticker bars */
const TBMark = ({ size = 56, color = CH.ink, accent = CH.green }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    <rect x="1.5" y="1.5" width="61" height="61" fill="none" stroke={color} strokeOpacity="0.35" strokeWidth="1" />
    {/* ascending ticker bars */}
    <rect x="11" y="44" width="7" height="11" fill="none" stroke={color} strokeWidth="1.5" strokeOpacity="0.6" />
    <rect x="21" y="35" width="7" height="20" fill="none" stroke={color} strokeWidth="1.5" strokeOpacity="0.75" />
    <rect x="31" y="22" width="7" height="33" fill="none" stroke={accent} strokeWidth="1.5" />
    <rect x="41" y="30" width="7" height="25" fill="none" stroke={color} strokeWidth="1.5" strokeOpacity="0.75" />
    {/* baseline */}
    <line x1="9" y1="56.5" x2="55" y2="56.5" stroke={color} strokeOpacity="0.22" strokeWidth="0.8" />
    {/* green accent tick */}
    <rect x="30" y="7" width="4" height="4" fill={accent} />
  </svg>
);

/* Wordmark */
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.14,
  }}>
    <span>Ticker</span><span style={{ fontWeight: 400, opacity: 0.78 }}>Bar</span>
  </span>
);

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

const INQUIRY_API_URL = SITE.inquiryApi;

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

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

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

  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: 'How you would use it', 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.green, 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: CH.red, 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.green,
                  }}
                />
              ) : (
                <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.green,
                  }}
                />
              )}
            </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.green,
            border: 'none', cursor: status === 'submitting' ? 'default' : 'pointer',
            opacity: status === 'submitting' ? 0.7 : 1,
          }}>
            {status === 'submitting' ? 'Sending inquiry...' : '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,
      }}>Mkt. Intelligence Concept</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Concept', '#story'], ['Signal', '#culture'], ['Use Cases', '#manifesto'], ['Domain', '#inquiry']].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.green, opacity: 0.7,
            fontSize: 9, fontVariantNumeric: 'tabular-nums',
          }}>0{i + 1}</span>
          {l}
        </a>
      ))}
      <a href="#inquiry" style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: CH.ink,
        textDecoration: 'none',
        border: `1px solid ${CH.inkFaint}`, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Inquire
        <span style={{ width: 5, height: 5, background: CH.green, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · market command · signal flow · graphite" style={{ height: 880 }}>
    {/* gradient for text legibility */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 560,
      background: 'linear-gradient(180deg, transparent 0%, rgba(5,7,6,0.42) 40%, rgba(5,7,6,0.82) 100%)',
    }} />

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

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 980,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>Premium market ticker intelligence concept</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 108, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: CH.ink,
      }}>
        The market has a rhythm.<br />
        <span style={{ color: CH.ink, fontWeight: 400 }}>TheTickerBar.com </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: CH.brass, fontWeight: 500,
        }}>gives it a name.</span>
      </h1>
      <p style={{
        marginTop: 80, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.55, color: CH.inkDim,
      }}>
        A premium domain concept for live market tickers, financial signal feeds, watchlist intelligence, and real-time editorial market coverage.
      </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.green,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Inquire About TheTickerBar.com
          <span style={{ display: 'inline-block', width: 18, height: 1, background: CH.bg }} />
        </a>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: CH.ink, textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: `1px solid ${CH.inkFaint}`,
        }}>
          View Brand Concept
        </a>
      </div>
    </div>

    {/* scroll marker */}
    <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.green}, 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 · ticker strip · signal ribbon · luminous data" style={{ height: 720 }} />

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Brand</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,
      }}>
        Built for<br />
        market<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>movement.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: CH.inkDim, maxWidth: 520, margin: 0,
      }}>
        TheTickerBar.com is positioned as a premium destination for market-aware products — from financial media tickers and watchlist dashboards to newsletter signal feeds and trading-room display systems.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: '01', l: 'Ticker-first language' },
          { n: '∞',  l: 'Market signal potential' },
          { n: '06', l: 'Asset class coverage' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 56, lineHeight: 1, color: CH.ink,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const cultureItems = [
  { n: '01', label: 'Financial Media',     mood: 'ticker',    image: 'media/parts.jpg',   h: 560, blurb: 'Market commentary, ticker feeds, and editorial coverage. A brand already positioned for financial media at any scale.', cap: '// financial media · signal flow' },
  { n: '02', label: 'Trading Dashboards',  mood: 'watchlist', image: 'media/builds.jpg',  h: 720, blurb: 'Watchlist interfaces, market monitors, and trading-room display systems built around continuous market movement.',      cap: '// trading dashboard · live monitor' },
  { n: '03', label: 'Market Intelligence', mood: 'signal',    image: 'media/apparel.jpg', h: 720, blurb: 'Data feeds, signal detection, alert systems, and market pulse tools for the attentive investor and analyst.',          cap: '// market intelligence · alert pulse' },
  { n: '04', label: 'Newsletter & Alerts', mood: 'editorial', image: 'media/culture.jpg', h: 560, blurb: 'Publisher tickers, market digests, and financial newsletter brands that live inside every inbox every morning.',        cap: '// newsletter · inbox · alert digest' },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: CH.bg, padding: '40px 56px 180px' }}>
    {/* section header */}
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 56, borderBottom: `1px solid ${CH.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>03 — Use Cases</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 900,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          From watchlists to<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: CH.inkDim }}>wallboards.</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,
      }}>
        Financial Media · Dashboards<br/>Intelligence · Newsletters
      </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.green,
              }}>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',
            }}>Inquire →</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 · newsroom · financial media · signal monitor" style={{ height: 700 }}>
    {/* darken for readability */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 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.green }}>04 — The Signal</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,
      }}>
        Signal captured.<br />
        Markets framed.<br />
        <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Audience earned.</span>
      </h2>
      <div style={{
        marginTop: 56, display: 'flex', alignItems: 'center', gap: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
      }}>
        <span style={{ width: 32, height: 1, background: CH.inkFaint }} />
        <span>A name that already feels active</span>
        <span style={{ width: 32, height: 1, background: CH.inkFaint }} />
      </div>
    </div>
  </Plate>
);

/* Artifact card — looks like a premium brand object. */
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(241,243,237,0.04)',
    ...style,
  }}>
    {/* corner ticks */}
    {[
      { 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 && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(201,164,92,0.32)`,
      }} />
    )}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.18, mixBlendMode: 'overlay',
    }} />
    {accentTab && (
      <span style={{
        position: 'absolute', top: -1, left: 32, width: 22, height: 4,
        background: CH.green,
      }} />
    )}
    <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: 'Domain Alignment',  kind: 'alignment',   d: 'The name says exactly what the product does. Ticker Bar is immediate, finance-native, and free of ambiguity.' },
  { n: '02', t: 'Editorial Tone',    kind: 'editorial',   d: 'Premium restraint over generic fintech energy. The name supports a brand that feels like media, not just software.' },
  { n: '03', t: 'Buyer Breadth',     kind: 'buyer',       d: 'Strong appeal across fintech, publishing, SaaS, and investor media. The concept adapts to almost any market-aware product.' },
  { n: '04', t: 'Clear Story',       kind: 'acquisition', d: 'A straightforward acquisition narrative. The domain concept communicates its value without a lengthy pitch.' },
  { n: '05', t: 'Ticker Language',   kind: 'ticker',      d: 'Finance-native wording with strong visual identity potential. Easy to imagine as app, dashboard, or media brand.' },
  { n: '06', t: 'Flexible Concept',  kind: 'flexible',    d: 'Stocks, ETFs, crypto, commodities, headlines. The domain flexes across every category of market movement.' },
];

const PresenceGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s / 2; const cy = s / 2;
  const stroke = CH.green; const dim = CH.inkLow;
  switch (kind) {
    case 'alignment': // crosshair / target
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s * 0.32} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={cx} cy={cy} r={s * 0.08} fill={stroke} />
          <line x1={cx} y1={s * 0.08} x2={cx} y2={s * 0.36} stroke={dim} strokeWidth="0.8" />
          <line x1={cx} y1={s * 0.64} x2={cx} y2={s * 0.92} stroke={dim} strokeWidth="0.8" />
          <line x1={s * 0.08} y1={cy} x2={s * 0.36} y2={cy} stroke={dim} strokeWidth="0.8" />
          <line x1={s * 0.64} y1={cy} x2={s * 0.92} y2={cy} stroke={dim} strokeWidth="0.8" />
        </svg>
      );
    case 'editorial': // text lines suggesting headlines
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s * 0.14} y1={s * 0.28} x2={s * 0.86} y2={s * 0.28} stroke={stroke} strokeWidth="2.2" />
          <line x1={s * 0.14} y1={s * 0.42} x2={s * 0.86} y2={s * 0.42} stroke={dim} strokeWidth="0.9" />
          <line x1={s * 0.14} y1={s * 0.54} x2={s * 0.74} y2={s * 0.54} stroke={dim} strokeWidth="0.9" />
          <line x1={s * 0.14} y1={s * 0.66} x2={s * 0.62} y2={s * 0.66} stroke={dim} strokeWidth="0.9" />
          <line x1={s * 0.14} y1={s * 0.78} x2={s * 0.78} y2={s * 0.78} stroke={dim} strokeWidth="0.9" />
        </svg>
      );
    case 'buyer': // person / user icon
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={s * 0.30} r={s * 0.14} fill="none" stroke={stroke} strokeWidth="1.2" />
          <path d={`M ${s * 0.18} ${s * 0.88} Q ${s * 0.22} ${s * 0.55} ${cx} ${s * 0.52} Q ${s * 0.78} ${s * 0.55} ${s * 0.82} ${s * 0.88}`} fill="none" stroke={dim} strokeWidth="1" />
          <line x1={cx} y1={s * 0.44} x2={cx} y2={s * 0.52} stroke={stroke} strokeWidth="1.2" />
        </svg>
      );
    case 'acquisition': // diamond
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <polygon points={`${cx},${s * 0.13} ${s * 0.80},${cy} ${cx},${s * 0.87} ${s * 0.20},${cy}`} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={cx} cy={cy} r={s * 0.06} fill={stroke} />
          <line x1={cx} y1={s * 0.19} x2={cx} y2={s * 0.44} stroke={dim} strokeWidth="0.8" opacity="0.6" />
        </svg>
      );
    case 'ticker': // ascending bar chart
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s * 0.10} y1={s * 0.85} x2={s * 0.90} y2={s * 0.85} stroke={dim} strokeWidth="0.8" />
          <rect x={s * 0.12} y={s * 0.60} width={s * 0.12} height={s * 0.25} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s * 0.28} y={s * 0.46} width={s * 0.12} height={s * 0.39} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s * 0.44} y={s * 0.26} width={s * 0.12} height={s * 0.59} fill="none" stroke={stroke} strokeWidth="1.4" />
          <rect x={s * 0.60} y={s * 0.38} width={s * 0.12} height={s * 0.47} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s * 0.76} y={s * 0.18} width={s * 0.12} height={s * 0.67} fill="none" stroke={stroke} strokeWidth="1.4" />
        </svg>
      );
    case 'flexible': // 4-way expand arrows
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s * 0.07} fill={stroke} />
          <line x1={cx} y1={cy} x2={cx} y2={s * 0.18} stroke={dim} strokeWidth="0.9" />
          <polygon points={`${cx},${s * 0.10} ${cx - s * 0.05},${s * 0.20} ${cx + s * 0.05},${s * 0.20}`} fill={stroke} />
          <line x1={cx} y1={cy} x2={cx} y2={s * 0.82} stroke={dim} strokeWidth="0.9" />
          <polygon points={`${cx},${s * 0.90} ${cx - s * 0.05},${s * 0.80} ${cx + s * 0.05},${s * 0.80}`} fill={stroke} />
          <line x1={cx} y1={cy} x2={s * 0.18} y2={cy} stroke={dim} strokeWidth="0.9" />
          <polygon points={`${s * 0.10},${cy} ${s * 0.20},${cy - s * 0.05} ${s * 0.20},${cy + s * 0.05}`} fill={stroke} />
          <line x1={cx} y1={cy} x2={s * 0.82} y2={cy} stroke={dim} strokeWidth="0.9" />
          <polygon points={`${s * 0.90},${cy} ${s * 0.80},${cy - s * 0.05} ${s * 0.80},${cy + s * 0.05}`} fill={stroke} />
        </svg>
      );
    default:
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s * 0.32} fill="none" stroke={stroke} strokeWidth="1.2" />
        </svg>
      );
  }
};

const DesktopIdentity = () => (
  <div id="presence" style={{ background: CH.panel, padding: '160px 56px 160px', position: 'relative' }}>
    <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 — The Name</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 brand asset for<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>financial attention.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: CH.inkDim, paddingBottom: 12,
      }}>
        TheTickerBar.com gives a buyer a direct, memorable name for turning market movement into a branded experience — useful, visual, and commercially adaptable without needing to pretend the business already exists.
      </div>
    </div>

    {/* Six brand asset 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 */}
    <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>Market-native · Editorial restraint · Signal clarity</span>
      <span>Finance-ready · Domain-strong · Buyer-broad</span>
      <span style={{ color: CH.green }}>Live ticker · Market depth · Signal flow</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 — Inquire</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 580,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, 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.brass, fontWeight: 400 }}>TheTickerBar.com</span>
        </h2>
        <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: CH.inkDim, margin: 0 }}>
          This page presents an illustrative brand concept for <span style={{ color: CH.ink }}>TheTickerBar.com</span>. The domain is available for acquisition by a buyer who wants a premium name for a market ticker, financial media, watchlist, or market intelligence product.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${CH.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'TheTickerBar.com' },
            { l: 'Direction', v: 'Market ticker intelligence' },
            { 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>

        {/* honesty note */}
        <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.green, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
          }}>
            The concept shown here is not an operating brokerage, investment advisor, exchange, or live financial data provider. It is a domain presentation created to show one possible premium use case for TheTickerBar.com.
          </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>
        {/* form intro */}
        <div style={{
          marginBottom: 32,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>
          Interested in TheTickerBar.com? Send a direct inquiry below.
        </div>
        {status === 'success' ? (
          <div style={{ padding: '56px 0', fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: CH.green, 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: CH.red, 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.green,
                  }}
                />
              </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 would 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.green,
                }}
              />
            </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.green,
                  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 inquiry...' : '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 }}>
          <TBMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: CH.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>Ticker<span style={{ fontWeight: 400, opacity: 0.78 }}>Bar</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
            }}>Market movement, framed in real time.</div>
          </div>
        </div>
        <p style={{
          marginTop: 28, marginBottom: 0, maxWidth: 320,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>
          TheTickerBar.com is presented as an illustrative premium brand concept. This website does not provide financial advice, brokerage services, investment recommendations, or live market data. The domain may be available for acquisition.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Brand Direction', href: '#story' },
          { t: 'Visual Identity', href: '#presence' },
          { t: 'Use Cases',       href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'TheTickerBar.com',    href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Inquire',             href: '#inquiry' },
        ]},
        { h: 'Disclaimer', l: [
          { t: 'No Financial Advice',    href: null },
          { t: 'No Exchange Affiliation', href: null },
          { t: 'Independent Concept',    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 · TheTickerBar.com · Concept presentation</span>
      <span>Not affiliated with any exchange, brokerage, financial institution, or regulatory body. No investment advice is provided.</span>
      <span style={{ color: CH.green }}>Volume One — 001</span>
    </div>
  </div>
);

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

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

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

    {/* hero */}
    <Plate id="m-hero" image="media/hero.jpg" imagePos="center" caption="// 01 · market command" 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,7,6,0.42) 50%, rgba(5,7,6,0.90) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>Premium market ticker intelligence</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 52, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: CH.ink,
        }}>
          The market has<br/>a rhythm.<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 500 }}>A name for it.</span>
        </h1>
        <p style={{ marginTop: 44, color: CH.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          A premium domain concept for market tickers, financial signal feeds, and watchlist intelligence.
        </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.green, textDecoration: 'none',
        }}>
          Inquire About TheTickerBar.com
          <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 Brand</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        Built for market <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>movement.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        TheTickerBar.com is positioned as a premium destination for market-aware products — from financial media tickers and watchlist dashboards to newsletter signal feeds and trading-room display systems.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · ticker strip · signal ribbon" style={{ height: 320, marginTop: 32 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>03 — Use Cases</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 52, lineHeight: 0.95, letterSpacing: -0.4,
        color: CH.ink,
      }}>
        From watchlists<br/>to <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.inkDim, fontWeight: 400 }}>wallboards.</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.green,
              }}>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 · market signal" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.7) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}><Eyebrow>04 — The Signal</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 56, lineHeight: 0.92, letterSpacing: -0.4,
          color: CH.ink,
        }}>
          Signal captured.<br/>
          Markets framed.<br/>
          <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Audience earned.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: CH.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — The Name</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        A brand asset for<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>financial attention.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        TheTickerBar.com gives a buyer a direct, memorable name for turning market movement into a branded experience — useful, visual, and commercially adaptable.
      </p>
      {/* 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,
        }}>Market-native · Editorial restraint<br/>Signal clarity · Buyer-broad</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.green,
        }}>Live ticker · Market depth · Signal flow</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Inquire</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 56, 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.brass, fontWeight: 400 }}>TheTickerBar.com</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        This page presents an illustrative brand concept. <span style={{ color: CH.ink }}>TheTickerBar.com</span> is available for acquisition by a buyer who wants a premium name for a market ticker, financial media, or market intelligence product.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',    v: 'TheTickerBar.com' },
          { l: 'Direction', v: 'Market ticker intelligence' },
          { 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 }}>
        <TBMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: CH.ink, lineHeight: 1 }}>Ticker<span style={{ fontWeight: 400, opacity: 0.78 }}>Bar</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass }}>Market movement, framed in real time.</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,
      }}>
        TheTickerBar.com is presented as an illustrative premium brand concept. This website does not provide financial advice, brokerage services, investment recommendations, or live market data. <span style={{ color: CH.inkDim }}>TheTickerBar.com</span> may be available for acquisition.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'Brand Direction', href: '#story' },
            { t: 'Visual Identity', href: '#presence' },
            { t: 'Use Cases',       href: '#culture' },
          ]},
          { h: 'Domain', l: [
            { t: 'TheTickerBar.com',    href: '#inquiry' },
            { t: 'Acquisition Inquiry', href: '#inquiry' },
            { t: 'Inquire',             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 · TheTickerBar.com<br/>Not affiliated with any exchange, brokerage, or financial institution. No investment advice provided.<br/>
        <span style={{ color: CH.green }}>Volume One — 001</span>
      </div>
    </div>
  </div>
);

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