/* Easy WebView — homepage concept (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow)
   Palette: graphite #090b0f · panel #0d1117 · steel #5a6476 · white #eef1f5 · cyan #22d3ee · violet #a78bfa
*/

const EW = {
  ink:     '#eef1f5',
  inkDim:  'rgba(238,241,245,0.62)',
  inkLow:  'rgba(238,241,245,0.34)',
  inkFaint:'rgba(238,241,245,0.10)',
  bg:      '#090b0f',
  panel:   '#0d1117',
  steel:   '#5a6476',
  cyan:    '#22d3ee',
  cyanDim: 'rgba(34,211,238,0.45)',
  violet:  '#a78bfa',
};

// Public site config. site-config.js is loaded before this file.
const SITE = {
  domain: 'easywebview.com',
  brandName: 'Easy WebView',
  category: 'webview-preview-devtool',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for EasyWebView.com has been sent.',
  messagePlaceholder: 'Tell us how EasyWebView.com could fit your product, platform, agency, or acquisition plans.',
  ...(window.SITE_CONFIG || {}),
};

/* ---------- shared bits ---------- */

const grainSVG = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")";

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

/* Photo placeholder plate — looks like an art-directed dark photo slot.
   When `image` is set, uses a real photo instead of the placeholder gradient. */
const Plate = ({ mood = 'preview', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    preview: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(34,211,238,0.14), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(100,80,200,0.10), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(10,15,40,0.5), transparent 70%),
      linear-gradient(180deg, #0d1117 0%, #080b10 55%, #050709 100%)`,
    metal: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(90,100,118,0.15), transparent 65%),
      linear-gradient(115deg, #090b10 0%, #111520 50%, #060810 100%)`,
    road: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(34,211,238,0.14), transparent 60%),
      linear-gradient(180deg, #050709 0%, #0a0c12 60%, #101520 100%)`,
    screen: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(167,139,250,0.14), transparent 62%),
      linear-gradient(160deg, #0e101a 0%, #080a10 100%)`,
    workshop: `
      radial-gradient(circle 320px at 70% 30%, rgba(34,211,238,0.18), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(167,139,250,0.12), transparent 65%),
      linear-gradient(180deg, #0e1020 0%, #07060500 100%), #060508`,
    garage: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(34,211,238,0.14), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(100,80,200,0.10), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(10,15,40,0.5), transparent 70%),
      linear-gradient(180deg, #0d1117 0%, #080b10 55%, #050709 100%)`,
    leather: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(167,139,250,0.14), transparent 62%),
      linear-gradient(160deg, #0e101a 0%, #080a10 100%)`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#050709 url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.preview),
      ...style,
    }}>
      <Grain opacity={image ? 0.22 : 0.55} />
      {/* faint vignette */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 95% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.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(238,241,245,0.38)',
        }}>{caption}</div>
      )}
      {children}
    </div>
  );
};

/* VideoPlate — kept for structural completeness, not used in this version. */
const VideoPlate = ({ src, caption, children, style = {}, poster, id }) => (
  <div id={id} style={{ position: 'relative', overflow: 'hidden', background: '#050709', ...style }}>
    <video
      src={src}
      poster={poster}
      autoPlay
      muted
      loop
      playsInline
      preload="auto"
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center',
      }}
    />
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `
        radial-gradient(ellipse 70% 55% at 50% 18%, rgba(34,211,238,0.12), transparent 62%),
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.55) 100%)`,
    }} />
    <Grain opacity={0.30} blend="overlay" />
    {caption && (
      <div style={{
        position: 'absolute', bottom: 14, right: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.4, textTransform: 'uppercase',
        color: 'rgba(238,241,245,0.45)',
      }}>{caption}</div>
    )}
    {children}
  </div>
);

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

/* EW viewport mark */
const EWMark = ({ size = 56, color = EW.ink, accent = EW.cyan }) => (
  <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.25" strokeWidth="1" />
    {/* outer device frame */}
    <rect x="9" y="10" width="46" height="34" rx="2.5" fill="none" stroke={color} strokeOpacity="0.55" strokeWidth="1.2" />
    {/* inner screen */}
    <rect x="13" y="14" width="38" height="26" fill="none" stroke={accent} strokeWidth="0.9" strokeOpacity="0.85" />
    {/* viewport scan line */}
    <line x1="13" y1="22" x2="51" y2="22" stroke={accent} strokeWidth="0.6" strokeOpacity="0.4" />
    {/* bottom bar */}
    <rect x="27" y="48" width="10" height="2" rx="1" fill={accent} opacity="0.55" />
    {/* accent tick */}
    <rect x="29.5" y="56" width="5" height="2" fill={accent} />
  </svg>
);

/* Wordmark — Antonio, condensed */
const Wordmark = ({ size = 22, color = EW.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>Easy</span><span style={{ fontWeight: 400, opacity: 0.80 }}>WebView</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. Please try again.');
      }
    } catch {
      setStatus('error');
      setErrorMsg('Something went wrong sending your inquiry. Please try again or contact the owner directly.');
    }
  };

  return { values, status, errorMsg, set, handleSubmit };
}

const MobileContactForm = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const fields = [
    { l: 'Name',    n: 'name',    t: 'text',  r: true, h: 'Required',             p: 'First & last' },
    { l: 'Email',   n: 'email',   t: 'email', r: true, h: 'Required',             p: 'you@company.com' },
    { l: 'Message', n: 'message', t: 'area',  r: true, h: 'Your inquiry',         p: SITE.messagePlaceholder },
  ];
  return (
    <form onSubmit={handleSubmit} style={{ marginTop: 36, position: 'relative' }}>
      <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
        <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
      </div>
      {status === 'success' ? (
        <div style={{ padding: '40px 0', fontFamily: 'IBM Plex Mono, monospace',
          fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase', color: EW.cyan, 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: EW.cyan,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: EW.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 ${EW.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: EW.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: EW.cyan,
                  }}
                />
              ) : (
                <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 ${EW.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: EW.ink, letterSpacing: 0,
                    outline: 'none', caretColor: EW.cyan,
                  }}
                />
              )}
            </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: EW.bg, background: status === 'submitting' ? EW.steel : EW.cyan,
            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: EW.inkLow, lineHeight: 1.7,
          }}>
            Concept shown for illustrative purposes.
          </div>
        </>
      )}
    </form>
  );
};

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

const Desktop = () => (
  <div style={{
    width: 1440, background: EW.bg, color: EW.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: EW.inkFaint }} />
      <span style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: EW.inkLow,
      }}>Domain Concept · MMXXVI</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Concept', '#story'], ['Preview Flow', '#culture'], ['Visual System', '#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 ? EW.ink : EW.inkDim, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            color: EW.cyan, 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: EW.ink,
        textDecoration: 'none',
        border: `1px solid ${EW.inkFaint}`, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Inquire
        <span style={{ width: 5, height: 5, background: EW.cyan, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · webview · viewport · preview layer" style={{ height: 880 }}>
    {/* bottom gradient for copy readability */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 460,
      background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.80) 100%)',
    }} />

    {/* corner indices */}
    <div style={{
      position: 'absolute', top: 110, left: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: EW.inkLow,
    }}>
      N° 001 — Preview Edition
    </div>
    <div style={{
      position: 'absolute', top: 110, right: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: EW.inkLow,
      textAlign: 'right',
    }}>
      DevTool / QA / Mobile Preview
    </div>

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 940,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>WebView Preview Brand Concept</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 140, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: EW.ink,
      }}>
        Preview the web<br />
        <span style={{ color: EW.ink, fontWeight: 400 }}>where it </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: EW.cyan, fontWeight: 500,
        }}>actually opens.</span>
      </h1>
      <p style={{
        marginTop: 72, marginBottom: 0, maxWidth: 540,
        fontSize: 17, lineHeight: 1.55, color: EW.inkDim,
      }}>
        Easy WebView is a premium domain concept for teams building, testing, and refining
        web experiences inside mobile-style WebView environments.
      </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: EW.bg, background: EW.cyan,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Inquire About EasyWebView.com
          <span style={{ display: 'inline-block', width: 18, height: 1, background: EW.bg }} />
        </a>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: EW.ink, textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: `1px solid ${EW.inkFaint}`,
        }}>
          Explore the Concept
        </a>
      </div>
    </div>

    {/* scroll marker bottom-right */}
    <div style={{
      position: 'absolute', right: 56, bottom: 64,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: EW.inkLow,
      }}>Scroll · 01 of 06</div>
      <div style={{ width: 1, height: 56, background: `linear-gradient(180deg, ${EW.cyan}, transparent)` }} />
    </div>
  </Plate>
);

const DesktopStory = () => (
  <div id="story" style={{
    background: EW.bg, padding: '160px 56px 160px',
    display: 'grid', gridTemplateColumns: '560px 1fr', gap: 96,
  }}>
    <Plate image="media/story.jpg" imagePos="center" caption="// 02 · workspace · viewport panels · dark studio" 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: EW.ink,
      }}>
        Built for the preview step<br />
        teams usually<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.cyan, fontWeight: 400 }}>skip.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: EW.inkDim, maxWidth: 520, margin: 0,
      }}>
        Before a web experience ships inside an app, campaign, client portal, or embedded
        flow, it needs to feel right in the viewport where users actually see it.
        Easy WebView gives this domain a clear product story: fast visual review,
        mobile-aware presentation, and a cleaner way to inspect web moments before they go live.
      </p>

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

const cultureItems = [
  { n: '01', label: 'DevTool',       mood: 'metal',    image: 'media/parts.jpg',   h: 560, blurb: 'A lightweight preview utility for developers verifying web behavior inside constrained WebView containers before shipping.', cap: '// devtool · viewport · preview layer' },
  { n: '02', label: 'QA Layer',      mood: 'preview',  image: 'media/builds.jpg',  h: 720, blurb: 'A testing surface for QA teams catching rendering gaps between desktop browsers and mobile WebView environments.',           cap: '// qa · rendering · mobile check' },
  { n: '03', label: 'Client Review', mood: 'screen',   image: 'media/apparel.jpg', h: 720, blurb: 'A clean proofing tool for agencies sharing how web campaigns appear in embedded app views, before the client sees it live.', cap: '// proof · client · agency review' },
  { n: '04', label: 'App Wrapper',   mood: 'road',     image: 'media/culture.jpg', h: 560, blurb: 'A companion product for teams shipping web content inside native app shells, where WebView fidelity matters most.',           cap: '// wrapper · embedded · mobile shell' },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: EW.bg, padding: '40px 56px 180px' }}>
    {/* section header */}
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 56, borderBottom: `1px solid ${EW.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>03 — Preview Flow</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 900,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: EW.ink,
        }}>
          A natural fit for developer tools,<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: EW.inkDim }}>QA, and mobile app teams.</span>
        </h2>
      </div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: EW.inkLow,
        textAlign: 'right', paddingBottom: 12,
      }}>
        DevTool · QA Layer<br/>Client Review · App Wrapper
      </div>
    </div>

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

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.jpg" caption="// 04 · detail · device edge · cyan reflection" 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: EW.cyan }}>04 — Visual System</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 128, lineHeight: 0.92, letterSpacing: -1.2,
        color: EW.ink,
      }}>
        Simple name.<br />
        Technical category.<br />
        <span style={{ color: EW.cyan, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Clear buyer path.</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: EW.inkLow,
      }}>
        <span style={{ width: 32, height: 1, background: EW.inkFaint }} />
        <span>Precision across every mobile viewport</span>
        <span style={{ width: 32, height: 1, background: EW.inkFaint }} />
      </div>
    </div>
  </Plate>
);

/* Artifact card — technical feature card with corner ticks */
const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: EW.bg,
    border: `1px solid ${EW.inkFaint}`,
    boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(238,241,245,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: EW.cyanDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(34,211,238,0.22)`,
      }} />
    )}
    <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: EW.cyan,
      }} />
    )}
    <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: EW.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: EW.cyanDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: EW.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const presenceNotes = [
  { n: '01', t: 'Preview Layer',  kind: 'stance',  d: 'The review step that makes WebView feel like a product feature, not a deployment afterthought.' },
  { n: '02', t: 'Viewport Fit',   kind: 'tank',    d: 'Exact mobile dimensions, scaled to match the constrained surfaces where users actually see the web.' },
  { n: '03', t: 'Embedded View',  kind: 'metal',   d: 'How web content looks and behaves inside native app containers — a different world from the desktop browser.' },
  { n: '04', t: 'Platform Reach', kind: 'leather', d: 'Different platforms render WebViews differently. This name owns the conversation around that gap.' },
  { n: '05', t: 'Team Review',    kind: 'shop',    d: 'Design, QA, and engineering on the same preview surface — fewer revision rounds before launch.' },
  { n: '06', t: 'Launch Ready',   kind: 'road',    d: 'Ship with clarity about how web content will feel in the exact places users actually open it.' },
];

const PresenceGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = EW.cyan; const dim = EW.inkLow;
  switch (kind) {
    case 'stance': // viewport frame layers
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.08} y={s*0.22} width={s*0.84} height={s*0.56} rx="1.5" fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.16} y={s*0.30} width={s*0.68} height={s*0.40} rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.16} y1={s*0.40} x2={s*0.84} y2={s*0.40} stroke={stroke} strokeWidth="0.7" strokeOpacity="0.5" />
        </svg>
      );
    case 'tank': // mobile device silhouette
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.28} y={s*0.10} width={s*0.44} height={s*0.80} rx="3" fill="none" stroke={stroke} strokeWidth="1.2" />
          <rect x={s*0.34} y={s*0.16} width={s*0.32} height={s*0.60} fill="none" stroke={dim} strokeWidth="0.8" />
          <circle cx={cx} cy={s*0.84} r="1.6" fill={stroke} />
        </svg>
      );
    case 'metal': // spoked/grid — representing a viewport grid
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.10} y={s*0.18} width={s*0.80} height={s*0.64} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.10} y1={s*0.40} x2={s*0.90} y2={s*0.40} stroke={dim} strokeWidth="0.7" />
          <line x1={s*0.10} y1={s*0.60} x2={s*0.90} y2={s*0.60} stroke={dim} strokeWidth="0.7" />
          <line x1={s*0.36} y1={s*0.18} x2={s*0.36} y2={s*0.82} stroke={dim} strokeWidth="0.7" />
          <line x1={s*0.64} y1={s*0.18} x2={s*0.64} y2={s*0.82} stroke={dim} strokeWidth="0.7" />
        </svg>
      );
    case 'leather': // layered platforms
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.16} y={s*0.22} width={s*0.68} height={s*0.56} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.22} y={s*0.28} width={s*0.56} height={s*0.44} fill="none" stroke={stroke} strokeWidth="0.8" strokeDasharray="2 3" />
          <rect x={s*0.28} y={s*0.34} width={s*0.44} height={s*0.32} fill="none" stroke={stroke} strokeWidth="0.6" opacity="0.5" />
        </svg>
      );
    case 'shop': // broadcast / share icon (team review)
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={s*0.38} r={s*0.08} fill={stroke} />
          <circle cx={cx} cy={s*0.38} r={s*0.18} fill="none" stroke={stroke} strokeWidth="0.9" strokeDasharray="2 3" />
          <circle cx={cx} cy={s*0.38} r={s*0.28} fill="none" stroke={dim} strokeWidth="0.7" strokeDasharray="1 4" />
          <line x1={s*0.28} y1={s*0.72} x2={s*0.72} y2={s*0.72} stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'road': // launch arrow / upward vector
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={s*0.62} r="1.4" fill={stroke} />
          <line x1={s*0.08} y1={s*0.86} x2={cx} y2={s*0.62} stroke={dim} strokeWidth="1" />
          <line x1={s*0.92} y1={s*0.86} x2={cx} y2={s*0.62} stroke={dim} strokeWidth="1" />
          <line x1={cx} y1={s*0.62} x2={cx} y2={s*0.14} stroke={stroke} strokeWidth="1.3" />
          <line x1={cx} y1={s*0.14} x2={s*0.38} y2={s*0.30} stroke={stroke} strokeWidth="1.2" />
          <line x1={cx} y1={s*0.14} x2={s*0.62} y2={s*0.30} stroke={stroke} strokeWidth="1.2" />
        </svg>
      );
  }
};

const DesktopIdentity = () => (
  <div id="presence" style={{ background: EW.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 — Product Concept</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: EW.ink,
        }}>
          A domain with room<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.cyan, fontWeight: 400 }}>to become a real tool.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: EW.inkDim, paddingBottom: 12,
      }}>
        This page presents one possible direction for Easy WebView: a premium, mobile-preview-focused product identity. The concept is intentionally illustrative, giving potential buyers a tangible sense of how the domain could support a serious product, platform, or internal tool brand.
      </div>
    </div>

    {/* Six feature concept 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: EW.ink,
            }}>{m.t}</h3>
          </div>
          <p style={{
            margin: 0, marginTop: 18,
            fontSize: 14.5, lineHeight: 1.55, color: EW.inkDim,
          }}>{m.d}</p>
        </Artifact>
      ))}
    </div>

    {/* bottom strip */}
    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${EW.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: EW.inkLow,
    }}>
      <span>WebView Preview · Mobile Rendering · Developer QA</span>
      <span>Domain Concept · Clear Product Story · Buyer Ready</span>
      <span style={{ color: EW.cyan }}>Clean Name · Technical Category · Easy WebView</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: EW.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: EW.ink,
        }}>
          Send an<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.cyan, fontWeight: 400 }}>inquiry.</span>
        </h2>
        <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: EW.inkDim, margin: 0 }}>
          EasyWebView.com is available for acquisition. This concept is illustrative and is
          intended to show one premium direction the domain could take. If the name fits your
          product roadmap, agency offer, testing platform, or developer tool concept, send a
          brief inquiry below.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${EW.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'EasyWebView.com' },
            { l: 'Direction', v: 'WebView preview & mobile QA' },
            { 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: EW.cyan,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: EW.cyanDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Antonio, sans-serif', fontSize: 22, color: EW.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 ${EW.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: EW.cyan, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: EW.inkLow, lineHeight: 1.7,
          }}>
            This concept is illustrative. Not affiliated with any platform provider, SDK, or operating system.
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmit} style={{ paddingTop: 80, position: 'relative' }}>
        {/* honeypot */}
        <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
          <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
        </div>
        {status === 'success' ? (
          <div style={{ padding: '56px 0', fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: EW.cyan, 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: EW.cyan,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: EW.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 ${EW.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Antonio, sans-serif', fontSize: 26,
                    color: EW.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: EW.cyan,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: EW.cyan,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: EW.inkLow }}>Your inquiry</span>
              </div>
              <textarea
                name="message"
                value={values.message}
                onChange={set('message')}
                placeholder={SITE.messagePlaceholder}
                required
                style={{
                  background: 'none', border: 'none', width: '100%',
                  borderBottom: `1px solid ${EW.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Antonio, sans-serif', fontSize: 26,
                  color: EW.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: EW.cyan,
                }}
              />
            </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: EW.bg, background: status === 'submitting' ? EW.steel : EW.cyan,
                  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: EW.bg, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: EW.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: EW.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${EW.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 }}>
          <EWMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: EW.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>Easy<span style={{ fontWeight: 400, opacity: 0.80 }}>WebView</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: EW.cyan,
            }}>Preview the web where it actually opens.</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: EW.inkLow, lineHeight: 1.7,
        }}>
          Easy WebView is an illustrative brand concept for the domain <span style={{ color: EW.inkDim }}>EasyWebView.com</span>. This website does not represent an active software product and is not affiliated with, authorized by, or endorsed by Google, Android, Apple, iOS, Chrome, Safari, WKWebView, or any platform provider. 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: 'EasyWebView.com',     href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Independent Concept',          href: null },
          { t: 'No Platform Affiliation',      href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: EW.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: EW.cyanDim }} />
            {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: EW.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${EW.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: EW.inkLow,
    }}>
      <span>© MMXXVI · Easy WebView · Concept Presentation</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: EW.cyan }}>Domain Concept — easywebview.com</span>
    </div>
  </div>
);

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

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

    {/* hero */}
    <Plate id="m-hero" image="media/hero.jpg" imagePos="center" caption="// 01 · webview · viewport · preview" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 380,
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.82) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>WebView Preview Brand Concept</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 60, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: EW.ink,
        }}>
          Preview the web<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.cyan, fontWeight: 500 }}>where it opens.</span>
        </h1>
        <p style={{ marginTop: 44, color: EW.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          Easy WebView is a premium domain concept for teams testing web experiences inside mobile-style WebView environments.
        </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: EW.bg, background: EW.cyan, textDecoration: 'none',
        }}>
          Inquire About EasyWebView.com
          <span style={{ width: 16, height: 1, background: EW.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: EW.ink,
      }}>
        Built for the preview step teams usually <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.cyan, fontWeight: 400 }}>skip.</span>
      </h2>
      <p style={{ color: EW.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        Before a web experience ships inside an app, campaign, or embedded flow, it needs to feel right in the viewport where users see it. Easy WebView gives this domain a clear product story.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · workspace · viewport panels" style={{ height: 320, marginTop: 32 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>03 — Preview Flow</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 52, lineHeight: 0.95, letterSpacing: -0.4,
        color: EW.ink,
      }}>
        A natural fit for<br/><span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.inkDim, fontWeight: 400 }}>developer tools.</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: EW.cyan,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 32, lineHeight: 1, color: EW.ink, margin: 0,
              }}>{c.label}</h3>
            </div>
            <p style={{ marginTop: 8, color: EW.inkDim, fontSize: 14 }}>{c.blurb}</p>
          </div>
        ))}
      </div>
    </div>

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.jpg" caption="// 04 · detail · device edge" 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.46) 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 — Visual System</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 52, lineHeight: 0.92, letterSpacing: -0.4,
          color: EW.ink,
        }}>
          Simple name.<br/>
          Technical category.<br/>
          <span style={{ color: EW.cyan, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Clear buyer path.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: EW.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — Product Concept</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: EW.ink,
      }}>
        A domain with room<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.cyan, fontWeight: 400 }}>to become a real tool.</span>
      </h2>
      <p style={{ color: EW.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        This page presents one possible direction for Easy WebView: a premium, mobile-preview-focused product identity. The concept is intentionally illustrative.
      </p>
      {/* presence cards — 2-col grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {presenceNotes.map((m) => (
          <Artifact
            key={m.t}
            label={`N° ${m.n}`}
            contentStyle={{ padding: 16, justifyContent: 'space-between', minHeight: 180 }}
          >
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <PresenceGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0, whiteSpace: 'nowrap',
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 20, letterSpacing: 0.2, color: EW.ink,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: EW.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      {/* brand line strip */}
      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${EW.inkFaint}`, background: EW.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: EW.inkLow, lineHeight: 1.7,
        }}>WebView Preview · Mobile Rendering<br/>Developer QA · Domain Concept</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: EW.cyan,
        }}>Clean Name · Technical Category · Easy WebView</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: 56, lineHeight: 0.95, letterSpacing: -0.5,
        color: EW.ink,
      }}>
        Send an<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: EW.cyan, fontWeight: 400 }}>inquiry.</span>
      </h2>
      <p style={{ color: EW.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        EasyWebView.com is available for acquisition. This concept is illustrative. If the name fits your product roadmap or developer tool concept, send a brief inquiry below.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${EW.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',    v: 'EasyWebView.com' },
          { l: 'Direction', v: 'WebView preview & mobile QA' },
          { 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: EW.cyan,
            }}>{b.l}</div>
            <div style={{
              marginTop: 4,
              fontFamily: 'Antonio, sans-serif', fontSize: 20, color: EW.ink, lineHeight: 1.2,
            }}>{b.v}</div>
          </div>
        ))}
      </div>

      <MobileContactForm />
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: EW.panel, padding: '36px 22px 32px', borderTop: `1px solid ${EW.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <EWMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: EW.ink, lineHeight: 1 }}>Easy<span style={{ fontWeight: 400, opacity: 0.80 }}>WebView</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: EW.cyan }}>Preview the web where it actually opens.</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: EW.inkLow, lineHeight: 1.7,
      }}>
        Easy WebView is an illustrative brand concept for the domain <span style={{ color: EW.inkDim }}>EasyWebView.com</span>. This website does not represent an active software product and is not affiliated with, authorized by, or endorsed by Google, Android, Apple, iOS, Chrome, Safari, WKWebView, or any platform provider. The domain 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: 'EasyWebView.com',     href: '#inquiry' },
            { t: 'Acquisition Inquiry', href: '#inquiry' },
            { t: 'Contact',             href: '#inquiry' },
          ]},
        ].map(g => (
          <div key={g.h}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
              letterSpacing: 2, textTransform: 'uppercase', color: EW.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: EW.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${EW.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: EW.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · Easy WebView<br/>Independent concept · No platform affiliation<br/>
        <span style={{ color: EW.cyan }}>Domain Concept — easywebview.com</span>
      </div>
    </div>
  </div>
);

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