/* WWW Reports — homepage (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow) / Instrument Serif (editorial accent)
   Palette: near-black #080b10 · deep navy #0d1420 · graphite #14191f · silver #5c6570 · ivory #f0ece4 · electric blue #3d7ee8
*/

const WR = {
  ink:     '#f0ece4',
  inkDim:  'rgba(240,236,228,0.62)',
  inkLow:  'rgba(240,236,228,0.34)',
  inkFaint:'rgba(240,236,228,0.10)',
  bg:      '#080b10',
  panel:   '#0d1420',
  graphite:'#14191f',
  silver:  '#5c6570',
  accent:  '#3d7ee8',
  accentDim:'rgba(61,126,232,0.45)',
};

// Public site config — updated via site-config.js
const SITE = {
  domain: 'wwwreports.com',
  brandName: 'WWW Reports',
  category: 'Executive Reports / Market Intelligence',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for wwwreports.com has been sent.',
  messagePlaceholder: 'Tell us how you would use wwwreports.com, or send a serious acquisition inquiry.',
  ...(window.SITE_CONFIG || {}),
};

/* ---------- shared primitives ---------- */

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.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")";

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

/* Plate — photo or fallback gradient */
const Plate = ({ mood = 'navy', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    navy: `
      radial-gradient(ellipse 70% 55% at 50% 20%, rgba(61,126,232,0.16), transparent 62%),
      radial-gradient(ellipse 50% 40% at 15% 78%, rgba(30,60,120,0.18), transparent 70%),
      linear-gradient(180deg, #0d1420 0%, #080b10 55%, #05080d 100%)`,
    graphite: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(92,101,112,0.14), transparent 65%),
      linear-gradient(115deg, #0d0f12 0%, #14191f 50%, #07090c 100%)`,
    slate: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(61,126,232,0.12), transparent 60%),
      linear-gradient(180deg, #05080d 0%, #0a0d12 60%, #111620 100%)`,
    deep: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(30,60,140,0.18), transparent 62%),
      linear-gradient(160deg, #0d1420 0%, #080b10 100%)`,
    ink: `
      radial-gradient(circle 320px at 70% 30%, rgba(61,126,232,0.20), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(30,60,120,0.12), transparent 65%),
      linear-gradient(180deg, #14191f 0%, #07090c00 100%), #06080b`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#05080d url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.navy),
      ...style,
    }}>
      <Grain opacity={image ? 0.20 : 0.45} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 95% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.50) 100%)'
          : 'radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.60) 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(240,236,228,0.38)',
        }}>{caption}</div>
      )}
      {children}
    </div>
  );
};

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

/* WR monogram mark */
const WRMark = ({ size = 56, color = WR.ink, accent = WR.accent }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    <rect x="1.5" y="1.5" width="61" height="61" fill="none" stroke={color} strokeOpacity="0.28" strokeWidth="1" />
    {/* W */}
    <path d="M 10 18 L 15 46 L 22 30 L 29 46 L 34 18"
          fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="square" strokeLinejoin="miter" />
    {/* R */}
    <path d="M 40 18 L 40 46 M 40 18 L 52 18 Q 57 18 57 26 Q 57 34 40 34 M 46 34 L 57 46"
          fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="square" strokeLinejoin="miter" />
    {/* accent tick */}
    <rect x="29" y="55" width="6" height="3.5" fill={accent} />
  </svg>
);

/* Wordmark */
const Wordmark = ({ size = 22, color = WR.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.12,
  }}>
    <span style={{ fontWeight: 600 }}>WWW</span>
    <span style={{ fontWeight: 400, opacity: 0.80 }}>Reports</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: 'Acquisition inquiry', p: SITE.messagePlaceholder },
  ];
  return (
    <form onSubmit={handleSubmit} style={{ marginTop: 36, position: 'relative' }}>
      <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
        <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
      </div>
      {status === 'success' ? (
        <div style={{ padding: '40px 0', fontFamily: 'IBM Plex Mono, monospace',
          fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase', color: WR.accent, lineHeight: 1.8 }}>
          {SITE.successMessage}
        </div>
      ) : (
        <>
          {status === 'error' && (
            <div style={{ marginBottom: 16, fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
              color: 'rgba(200,90,60,0.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: WR.accent,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: WR.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 ${WR.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: WR.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: WR.accent,
                  }}
                />
              ) : (
                <input type={f.t} name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${WR.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: WR.ink, letterSpacing: 0,
                    outline: 'none', caretColor: WR.accent,
                  }}
                />
              )}
            </div>
          ))}
          <button type="submit" disabled={status === 'submitting'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 12,
            padding: '14px 22px',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 2.2, textTransform: 'uppercase',
            color: WR.bg, background: status === 'submitting' ? WR.silver : WR.accent,
            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: WR.inkLow, lineHeight: 1.7,
          }}>
            Illustrative brand concept only.
          </div>
        </>
      )}
    </form>
  );
};

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

const Desktop = () => (
  <div style={{
    width: 1440, background: WR.bg, color: WR.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: WR.inkFaint }} />
      <span style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: WR.inkLow,
      }}>Executive Intelligence · Vol. I</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Overview', '#story'], ['Intelligence', '#culture'], ['Library', '#manifesto']].map(([l, href], i) => (
        <a key={l} href={href} style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: i === 0 ? WR.ink : WR.inkDim, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            color: WR.accent, 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: WR.ink,
        textDecoration: 'none',
        border: `1px solid ${WR.inkFaint}`, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Inquire
        <span style={{ width: 5, height: 5, background: WR.accent, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center top" caption="// 01 · executive intelligence · wwwreports.com" style={{ height: 880 }}>
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 520,
      background: 'linear-gradient(180deg, transparent 0%, rgba(8,11,16,0.40) 40%, rgba(8,11,16,0.82) 100%)',
    }} />

    <div style={{
      position: 'absolute', top: 110, left: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: WR.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: WR.inkLow,
      textAlign: 'right',
    }}>
      Reports · Intelligence · Decisions
    </div>

    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 980,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>Executive Market Intelligence</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 132, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: WR.ink,
      }}>
        Executive intelligence,<br />
        <span style={{ fontWeight: 400 }}>organized for </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: WR.accent, fontWeight: 500,
        }}>better decisions.</span>
      </h1>
      <p style={{
        marginTop: 80, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.6, color: WR.inkDim,
      }}>
        WWW Reports is a premium concept for curated business reports, market intelligence,
        and decision-ready briefings built around signal, clarity, and category authority.
      </p>

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

    <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: WR.inkLow,
      }}>Scroll · 01 of 06</div>
      <div style={{ width: 1, height: 56, background: `linear-gradient(180deg, ${WR.accent}, transparent)` }} />
    </div>
  </Plate>
);

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

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 72, lineHeight: 0.98, letterSpacing: -0.5,
        color: WR.ink,
      }}>
        A sharper way to imagine<br />
        business research<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.accent, fontWeight: 400 }}>online.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: WR.inkDim, maxWidth: 520, margin: 0,
      }}>
        WWW Reports presents a sharper way to imagine business research online: curated reports,
        market context, analyst-style briefings, and executive-ready summaries housed under one
        naturally authoritative domain.
      </p>

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

const cultureItems = [
  { n: '01', label: 'Reports',    mood: 'graphite', image: 'media/parts.jpg',   h: 560, blurb: 'Built around signal, not noise. From market reports and industry briefings to leadership research and investor-facing materials.', cap: '// 03 · market reports · intelligence layer' },
  { n: '02', label: 'Briefings',  mood: 'navy',     image: 'media/builds.jpg',  h: 720, blurb: 'Analyst-style briefings designed for founders, investors, and leadership teams who need clarity before the first meeting.',        cap: '// 04 · executive briefings · decision layer' },
  { n: '03', label: 'Datasets',   mood: 'deep',     image: 'media/apparel.jpg', h: 720, blurb: 'The concept is intentionally broad: research publishers, consulting firms, analytics companies, and data-driven content platforms.',   cap: '// 05 · structured data · reference layer' },
  { n: '04', label: 'Intelligence',mood: 'slate',   image: 'media/culture.jpg', h: 560, blurb: 'Strategic context and competitive landscape views from across global markets — organized for the people who act on what they read.',    cap: '// 06 · strategic intelligence · context layer' },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: WR.bg, padding: '40px 56px 180px' }}>
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 56, borderBottom: `1px solid ${WR.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>03 — The Library</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 900,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: WR.ink,
        }}>
          Four pillars of market<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: WR.inkDim }}>intelligence.</span>
        </h2>
      </div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: WR.inkLow,
        textAlign: 'right', paddingBottom: 12,
      }}>
        Reports · Briefings<br/>Datasets · Intelligence
      </div>
    </div>

    <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: WR.accent,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 44, lineHeight: 1, letterSpacing: -0.3,
                color: WR.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: WR.inkDim, textDecoration: 'none',
            }}>Inquire →</a>
          </div>
          <p style={{
            marginTop: 14, marginBottom: 0, maxWidth: 440,
            fontSize: 15.5, color: WR.inkDim,
          }}>{c.blurb}</p>
        </div>
      ))}
    </div>
  </div>
);

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.jpg" caption="// 07 · editorial texture · wwwreports.com" style={{ height: 700 }}>
    <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.42) 50%, rgba(0,0,0,0.68) 100%)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{ marginBottom: 56 }}><Eyebrow style={{ color: WR.accent }}>04 — Signal</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 120, lineHeight: 0.92, letterSpacing: -1.2,
        color: WR.ink,
      }}>
        Signal over noise.<br />
        Clarity over volume.<br />
        <span style={{ color: WR.accent, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Intelligence 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: WR.inkLow,
      }}>
        <span style={{ width: 32, height: 1, background: WR.inkFaint }} />
        <span>Built around signal, not noise</span>
        <span style={{ width: 32, height: 1, background: WR.inkFaint }} />
      </div>
    </div>
  </Plate>
);

const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: WR.bg,
    border: `1px solid ${WR.inkFaint}`,
    boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(240,236,228,0.04)',
    ...style,
  }}>
    {[
      { 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: WR.accentDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(61,126,232,0.28)`,
      }} />
    )}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.15, mixBlendMode: 'overlay',
    }} />
    {accentTab && (
      <span style={{
        position: 'absolute', top: -1, left: 32, width: 22, height: 4,
        background: WR.accent,
      }} />
    )}
    <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: WR.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: WR.accentDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: WR.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const signalNotes = [
  { n: '01', t: 'Reports',    kind: 'doc',    d: 'Curated sector reports covering global markets, indexed for executive review and actionable decision-making.' },
  { n: '02', t: 'Briefings',  kind: 'brief',  d: 'Short-form intelligence briefings for fast-moving leadership teams who need clarity, not volume.' },
  { n: '03', t: 'Data',       kind: 'data',   d: 'Structured market data with clean outputs and context. Built for organizations that act on numbers.' },
  { n: '04', t: 'Research',   kind: 'search', d: 'Deep dives into sectors, companies, and competitive dynamics — for analysts and strategy teams.' },
  { n: '05', t: 'Context',    kind: 'map',    d: 'Macro and micro market context organized for strategic decisions at leadership and board level.' },
  { n: '06', t: 'Authority',  kind: 'mark',   d: 'Category authority built into the domain. wwwreports.com carries natural credibility before the first click.' },
];

const SignalGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = WR.accent; const dim = WR.inkLow;
  switch (kind) {
    case 'doc': // stacked pages
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.18} y={s*0.24} width={s*0.60} height={s*0.54} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.22} y={s*0.20} width={s*0.60} height={s*0.54} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.32} y1={s*0.36} x2={s*0.72} y2={s*0.36} stroke={dim} strokeWidth="0.7" />
          <line x1={s*0.32} y1={s*0.46} x2={s*0.72} y2={s*0.46} stroke={dim} strokeWidth="0.7" />
          <line x1={s*0.32} y1={s*0.56} x2={s*0.58} y2={s*0.56} stroke={stroke} strokeWidth="0.7" />
        </svg>
      );
    case 'brief': // tight condensed lines
      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" />
          <line x1={s*0.14} y1={s*0.42} x2={s*0.74} y2={s*0.42} stroke={dim} strokeWidth="1" />
          <line x1={s*0.14} y1={s*0.54} x2={s*0.80} y2={s*0.54} stroke={dim} strokeWidth="1" />
          <line x1={s*0.14} y1={s*0.66} x2={s*0.60} y2={s*0.66} stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'data': // bar chart minimal
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.10} y1={s*0.82} x2={s*0.90} y2={s*0.82} stroke={dim} strokeWidth="1" />
          <rect x={s*0.16} y={s*0.48} width={s*0.12} height={s*0.34} fill={dim} />
          <rect x={s*0.34} y={s*0.30} width={s*0.12} height={s*0.52} fill={stroke} />
          <rect x={s*0.52} y={s*0.40} width={s*0.12} height={s*0.42} fill={dim} />
          <rect x={s*0.70} y={s*0.20} width={s*0.12} height={s*0.62} fill={stroke} opacity="0.65" />
        </svg>
      );
    case 'search': // magnifier
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={s*0.40} cy={s*0.40} r={s*0.24} fill="none" stroke={stroke} strokeWidth="1.5" />
          <line x1={s*0.58} y1={s*0.58} x2={s*0.82} y2={s*0.82} stroke={dim} strokeWidth="2" strokeLinecap="square" />
          <line x1={s*0.32} y1={s*0.40} x2={s*0.48} y2={s*0.40} stroke={dim} strokeWidth="0.8" />
        </svg>
      );
    case 'map': // grid / map
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.12} y={s*0.12} width={s*0.76} height={s*0.76} fill="none" stroke={dim} strokeWidth="0.8" />
          <line x1={s*0.50} y1={s*0.12} x2={s*0.50} y2={s*0.88} stroke={dim} strokeWidth="0.6" />
          <line x1={s*0.12} y1={s*0.50} x2={s*0.88} y2={s*0.50} stroke={dim} strokeWidth="0.6" />
          <circle cx={s*0.50} cy={s*0.50} r={s*0.07} fill={stroke} />
          <circle cx={s*0.72} cy={s*0.30} r={s*0.04} fill={stroke} opacity="0.55" />
        </svg>
      );
    case 'mark': // domain / URL tick
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.08} y={s*0.32} width={s*0.84} height={s*0.28} rx="2" fill="none" stroke={dim} strokeWidth="1" />
          <circle cx={s*0.22} cy={s*0.46} r="2.5" fill={stroke} />
          <circle cx={s*0.33} cy={s*0.46} r="2.5" fill={stroke} opacity="0.5" />
          <line x1={s*0.44} y1={s*0.40} x2={s*0.82} y2={s*0.40} stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.44} y1={s*0.52} x2={s*0.68} y2={s*0.52} stroke={dim} strokeWidth="0.8" />
        </svg>
      );
  }
};

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

    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 60 }}>
      <div>
        <Eyebrow>05 — Signal</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: WR.ink,
        }}>
          The name carries relevance<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.accent, fontWeight: 400 }}>before the first click.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: WR.inkDim, paddingBottom: 12,
      }}>
        From market reports and industry briefings to investor-facing materials — the name wwwreports.com carries instant relevance for teams that need credibility before the first click.
      </div>
    </div>

    <div style={{
      position: 'relative', marginTop: 24,
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
    }}>
      {signalNotes.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,
          }}>
            <SignalGlyph kind={m.kind} size={44} />
            <h3 style={{
              margin: 0, whiteSpace: 'nowrap',
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 30, letterSpacing: 0.2, color: WR.ink,
            }}>{m.t}</h3>
          </div>
          <p style={{
            margin: 0, marginTop: 18,
            fontSize: 14.5, lineHeight: 1.55, color: WR.inkDim,
          }}>{m.d}</p>
        </Artifact>
      ))}
    </div>

    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${WR.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: WR.inkLow,
    }}>
      <span>Curated reports · Analyst briefings · Market data</span>
      <span>Decision-ready · Signal-clear · Category authority</span>
      <span style={{ color: WR.accent }}>wwwreports.com — executive intelligence</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: WR.bg, padding: '180px 56px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96,
    }}>
      <div>
        <Eyebrow>06 — Acquisition</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 580,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: WR.ink,
        }}>
          Inquire about<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.accent, fontWeight: 400 }}>wwwreports.com.</span>
        </h2>
        <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: WR.inkDim, margin: 0 }}>
          This website is an illustrative brand concept created to show one possible future for <span style={{ color: WR.ink }}>wwwreports.com</span>. The domain is available for acquisition by the right buyer, publisher, research platform, or intelligence company.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${WR.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'wwwreports.com' },
            { l: 'Direction', v: 'Executive Reports / Market 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: WR.accent,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: WR.accentDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Antonio, sans-serif', fontSize: 22, color: WR.ink, lineHeight: 1.2,
              }}>
                {b.v}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, maxWidth: 460,
          display: 'flex', gap: 14, alignItems: 'flex-start',
          paddingTop: 18, borderTop: `1px dashed ${WR.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: WR.accent, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: WR.inkLow, lineHeight: 1.7,
          }}>
            Illustrative concept only. No operating platform, client base, or report library is implied.
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmit} style={{ paddingTop: 80, 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: '56px 0', fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: WR.accent, lineHeight: 1.8 }}>
            {SITE.successMessage}
          </div>
        ) : (
          <>
            {status === 'error' && (
              <div style={{ marginBottom: 20, fontFamily: 'IBM Plex Mono, monospace',
                fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase',
                color: 'rgba(200,90,60,0.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: WR.accent,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: WR.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 ${WR.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Antonio, sans-serif', fontSize: 26,
                    color: WR.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: WR.accent,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: WR.accent,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: WR.inkLow }}>Acquisition inquiry</span>
              </div>
              <textarea
                name="message"
                value={values.message}
                onChange={set('message')}
                placeholder={SITE.messagePlaceholder}
                required
                style={{
                  background: 'none', border: 'none', width: '100%',
                  borderBottom: `1px solid ${WR.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Antonio, sans-serif', fontSize: 26,
                  color: WR.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: WR.accent,
                }}
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
              <button
                type="submit"
                disabled={status === 'submitting'}
                style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
                  letterSpacing: 2.4, textTransform: 'uppercase',
                  color: WR.bg, background: status === 'submitting' ? WR.silver : WR.accent,
                  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: WR.bg, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: WR.inkLow,
                textAlign: 'right', lineHeight: 1.6, maxWidth: 220,
              }}>
                Illustrative concept<br/>shown for acquisition.
              </div>
            </div>
          </>
        )}
      </form>
    </div>
  );
};

const DesktopFooter = () => (
  <div id="footer" style={{
    background: WR.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${WR.inkFaint}`,
  }}>
    <div style={{
      display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr', gap: 56,
      paddingBottom: 56,
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <WRMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: WR.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>WWW<span style={{ fontWeight: 400, opacity: 0.80 }}> Reports</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: WR.accent,
            }}>Executive intelligence, organized.</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: WR.inkLow, lineHeight: 1.7,
        }}>
          WWW Reports is an illustrative brand concept for <span style={{ color: WR.inkDim }}>wwwreports.com</span>. This site does not represent an operating reports platform, active publisher, or live research service. The domain may be available for acquisition. No affiliation, endorsement, traffic, revenue, client base, or proprietary report library is implied.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Brand Direction', href: '#story' },
          { t: 'Intelligence Library', href: '#culture' },
          { t: 'Signal Framework', href: '#presence' },
        ]},
        { h: 'Domain', l: [
          { t: 'wwwreports.com',      href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Illustrative Concept', href: null },
          { t: 'No Operating Platform', href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: WR.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: WR.accentDim }} />
            {g.h}
          </div>
          <div style={{ display: 'grid', gap: 10 }}>
            {g.l.map(x => (
              <a key={x.t} href={x.href || undefined} style={{
                fontFamily: 'Antonio, sans-serif', fontSize: 20, color: WR.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${WR.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: WR.inkLow,
    }}>
      <span>© MMXXVI · WWW Reports · Illustrative concept</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: WR.accent }}>Volume One — 001</span>
    </div>
  </div>
);

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

const Mobile = () => (
  <div style={{
    width: 390, background: WR.bg, color: WR.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 14, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 22px', fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
      color: WR.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>

    <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: WR.ink }} />
        <span style={{ width: 16, height: 1, background: WR.ink, alignSelf: 'flex-end' }} />
      </div>
    </div>

    {/* hero */}
    <Plate id="m-hero" image="media/hero.jpg" imagePos="center top" caption="// 01 · executive intelligence" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 400,
        background: 'linear-gradient(180deg, transparent 0%, rgba(8,11,16,0.45) 50%, rgba(8,11,16,0.88) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>Executive Market Intelligence</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 54, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: WR.ink,
        }}>
          Executive intelligence,<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.accent, fontWeight: 500 }}>better decisions.</span>
        </h1>
        <p style={{ marginTop: 44, color: WR.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          A premium concept for curated business reports, market intelligence, and decision-ready briefings.
        </p>
        <a href="#m-story" 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: WR.bg, background: WR.accent, textDecoration: 'none',
        }}>
          Explore the Concept
          <span style={{ width: 16, height: 1, background: WR.bg }} />
        </a>
      </div>
    </Plate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>02 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: WR.ink,
      }}>
        A sharper way to imagine business research <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.accent, fontWeight: 400 }}>online.</span>
      </h2>
      <p style={{ color: WR.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        WWW Reports presents curated reports, market context, analyst-style briefings, and executive-ready summaries under one naturally authoritative domain.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · curated intelligence" style={{ height: 320, marginTop: 32 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>03 — The Library</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 52, lineHeight: 0.95, letterSpacing: -0.4,
        color: WR.ink,
      }}>
        Four pillars<br/>of market <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.inkDim, fontWeight: 400 }}>intelligence.</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: WR.accent,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 32, lineHeight: 1, color: WR.ink, margin: 0,
              }}>{c.label}</h3>
            </div>
            <p style={{ marginTop: 8, color: WR.inkDim, fontSize: 14 }}>{c.blurb}</p>
          </div>
        ))}
      </div>
    </div>

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.jpg" caption="// 04 · 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.48) 60%, rgba(0,0,0,0.72) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}><Eyebrow>04 — Signal</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 48, lineHeight: 0.92, letterSpacing: -0.4,
          color: WR.ink,
        }}>
          Signal over noise.<br/>
          Clarity over volume.<br/>
          <span style={{ color: WR.accent, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Intelligence earned.</span>
        </h2>
      </div>
    </Plate>

    {/* presence / signal */}
    <div id="m-presence" style={{ background: WR.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — Signal</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: WR.ink,
      }}>
        The name carries relevance<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.accent, fontWeight: 400 }}>before the first click.</span>
      </h2>
      <p style={{ color: WR.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        From market reports and industry briefings to investor-facing materials — wwwreports.com carries instant relevance for teams that need credibility.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {signalNotes.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 }}>
              <SignalGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0, whiteSpace: 'nowrap',
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 20, letterSpacing: 0.2, color: WR.ink,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: WR.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${WR.inkFaint}`, background: WR.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: WR.inkLow, lineHeight: 1.7,
        }}>Curated reports · Analyst briefings<br/>Market data · Executive context</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: WR.accent,
        }}>Decision-ready · Signal-clear · Category authority</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: 52, lineHeight: 0.95, letterSpacing: -0.5,
        color: WR.ink,
      }}>
        Inquire about<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: WR.accent, fontWeight: 400 }}>wwwreports.com.</span>
      </h2>
      <p style={{ color: WR.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        This is an illustrative brand concept. <span style={{ color: WR.ink }}>wwwreports.com</span> is available for acquisition by the right buyer, research platform, or intelligence company.
      </p>

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

      <MobileContactForm />
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: WR.panel, padding: '36px 22px 32px', borderTop: `1px solid ${WR.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <WRMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: WR.ink, lineHeight: 1 }}>WWW<span style={{ fontWeight: 400, opacity: 0.80 }}> Reports</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: WR.accent }}>Executive intelligence, organized.</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: WR.inkLow, lineHeight: 1.7,
      }}>
        WWW Reports is an illustrative brand concept for <span style={{ color: WR.inkDim }}>wwwreports.com</span>. This site does not represent an operating reports platform, active publisher, or live research service. The domain may be available for acquisition. No affiliation, endorsement, traffic, revenue, client base, or proprietary report library is implied.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'Brand Direction', href: '#m-story' },
            { t: 'Intelligence Library', href: '#m-culture' },
            { t: 'Signal Framework', href: '#m-presence' },
          ]},
          { h: 'Domain', l: [
            { t: 'wwwreports.com',      href: '#m-inquiry' },
            { t: 'Acquisition Inquiry', href: '#m-inquiry' },
            { t: 'Contact',             href: '#m-inquiry' },
          ]},
        ].map(g => (
          <div key={g.h}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
              letterSpacing: 2, textTransform: 'uppercase', color: WR.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: WR.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${WR.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: WR.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · WWW Reports<br/>Illustrative concept · No operating platform<br/>
        <span style={{ color: WR.accent }}>Volume One — 001</span>
      </div>
    </div>
  </div>
);

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