/* WWW Electric — homepage mockup (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow)
   Palette: charcoal #0b0d0f · panel #111416 · steel #6b7178 · ivory #f0ede6 · utility gold #c8a820
*/

const CH = {
  ink:     '#f0ede6',
  inkDim:  'rgba(240,237,230,0.62)',
  inkLow:  'rgba(240,237,230,0.34)',
  inkFaint:'rgba(240,237,230,0.14)',
  bg:      '#0b0d0f',
  panel:   '#111416',
  steel:   '#6b7178',
  brass:   '#c8a820',
  brassDim:'rgba(200,168,32,0.55)',
};

// Public site config. Update site-config.js for each domain.
const SITE = {
  domain: 'wwwelectric.com',
  brandName: 'WWW Electric',
  category: 'Electrical Services Marketplace',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for wwwelectric.com has been sent.',
  messagePlaceholder: 'Tell us how you would use wwwelectric.com or what kind of acquisition conversation you would like to start.',
  ...(window.SITE_CONFIG || {}),
};

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

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

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

/* Photo plate — uses real photo when `image` is set, else gradient fallback. */
const Plate = ({ mood = 'panel', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    panel: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(200,168,32,0.20), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(80,90,40,0.18), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(20,25,30,0.5), transparent 70%),
      linear-gradient(180deg, #141618 0%, #0c0d0e 55%, #050607 100%)`,
    metal: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(100,115,130,0.18), transparent 65%),
      linear-gradient(115deg, #0d0e10 0%, #181c1f 50%, #080a0b 100%)`,
    facility: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(200,168,32,0.14), transparent 60%),
      linear-gradient(180deg, #050607 0%, #0c0d10 60%, #181c1a 100%)`,
    residential: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(160,140,60,0.20), transparent 62%),
      linear-gradient(160deg, #1a1c14 0%, #0d0e0b 100%)`,
    workshop: `
      radial-gradient(circle 320px at 70% 30%, rgba(200,168,32,0.22), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(80,100,60,0.14), transparent 65%),
      linear-gradient(180deg, #141618 0%, #07080900 100%), #060708`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#050607 url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.panel),
      ...style,
    }}>
      <Grain opacity={image ? 0.25 : 0.55} />
      {/* vignette */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 95% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%)'
          : 'radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%)',
      }} />
      {caption && (
        <div style={{
          position: 'absolute', bottom: 14, right: 18,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 1.4, textTransform: 'uppercase',
          color: 'rgba(240,237,230,0.42)',
        }}>{caption}</div>
      )}
      {children}
    </div>
  );
};

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

/* WE monogram mark */
const WEMark = ({ size = 56, color = CH.ink, accent = CH.brass }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    {/* hairline frame */}
    <rect x="1.5" y="1.5" width="61" height="61" fill="none" stroke={color} strokeOpacity="0.35" strokeWidth="1" />
    {/* W */}
    <path d="M 8 18 L 13 46 L 20 30 L 27 46 L 32 18"
          fill="none" stroke={color} strokeWidth="4" strokeLinecap="square" strokeLinejoin="miter" />
    {/* E */}
    <path d="M 38 18 L 38 46 M 38 18 L 54 18 M 38 32 L 51 32 M 38 46 L 54 46"
          fill="none" stroke={color} strokeWidth="4" strokeLinecap="square" />
    {/* utility gold tick */}
    <rect x="30" y="55" width="4" height="4" fill={accent} />
  </svg>
);

/* Wordmark */
const Wordmark = ({ size = 22, color = CH.ink }) => (
  <span style={{
    fontFamily: 'Antonio, "Saira Condensed", sans-serif',
    fontWeight: 600, fontSize: size, letterSpacing: 0.5,
    color, lineHeight: 1, textTransform: 'none',
    display: 'inline-flex', alignItems: 'baseline', gap: size * 0.14,
  }}>
    <span>WWW</span><span style={{ fontWeight: 400, opacity: 0.78 }}>Electric</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: CH.brass, lineHeight: 1.8 }}>
          {SITE.successMessage}
        </div>
      ) : (
        <>
          {status === 'error' && (
            <div style={{ marginBottom: 16, fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
              color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
              {errorMsg}
            </div>
          )}
          {fields.map(f => (
            <div key={f.l} style={{ marginBottom: 22 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
                letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: CH.inkLow }}>{f.h}</span>
              </div>
              {f.t === 'area' ? (
                <textarea name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: CH.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              ) : (
                <input type={f.t} name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: CH.ink, letterSpacing: 0,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              )}
            </div>
          ))}
          <button type="submit" disabled={status === 'submitting'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 12,
            padding: '14px 22px',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 2.2, textTransform: 'uppercase',
            color: CH.bg, background: status === 'submitting' ? CH.steel : CH.brass,
            border: 'none', cursor: status === 'submitting' ? 'default' : 'pointer',
            opacity: status === 'submitting' ? 0.7 : 1,
          }}>
            {status === 'submitting' ? 'Sending…' : 'Start the Conversation'}
          </button>
          <div style={{
            marginTop: 18,
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
          }}>
            Concept shown for illustrative purposes.
          </div>
        </>
      )}
    </form>
  );
};

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

const Desktop = () => (
  <div style={{
    width: 1440, background: CH.bg, color: CH.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 15, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    <DesktopNav />
    <DesktopHero />
    <DesktopStory />
    <DesktopCulture />
    <DesktopManifesto />
    <DesktopIdentity />
    <DesktopContact />
    <DesktopFooter />
  </div>
);

const DesktopNav = () => (
  <div style={{
    position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
    padding: '26px 56px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
      <Wordmark size={22} />
      <span style={{ width: 1, height: 14, background: CH.inkFaint }} />
      <span style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
      }}>Electrical Services · Domain Concept</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Concept', '#story'], ['Services', '#culture'], ['How It Works', '#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 ? CH.ink : CH.inkDim, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            color: CH.brass, opacity: 0.7,
            fontSize: 9, fontVariantNumeric: 'tabular-nums',
          }}>0{i + 1}</span>
          {l}
        </a>
      ))}
      <a href="#inquiry" style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: CH.ink,
        textDecoration: 'none',
        border: `1px solid ${CH.inkFaint}`, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Acquisition
        <span style={{ width: 5, height: 5, background: CH.brass, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · residential service · clean professional environment" style={{ height: 880 }}>
    {/* gradient fade for text legibility */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 460,
      background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.75) 100%)',
    }} />

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

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 940,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>Premium Electrical Services Marketplace</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 112, lineHeight: 0.95, letterSpacing: -1.2,
        margin: 0, color: CH.ink,
      }}>
        Electrical service discovery<br />
        <span style={{ color: CH.ink, fontWeight: 400 }}>with a premium domain </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: CH.brass, fontWeight: 500,
        }}>built for the category.</span>
      </h1>
      <p style={{
        marginTop: 64, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.55, color: CH.inkDim,
      }}>
        WWW Electric is a polished brand concept for helping homeowners, property managers, and builders
        find qualified electricians, compare project needs, and start serious service inquiries.
      </p>

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

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

const DesktopStory = () => (
  <div id="story" style={{
    background: CH.bg, padding: '160px 56px 160px',
    display: 'grid', gridTemplateColumns: '560px 1fr', gap: 96,
  }}>
    <Plate image="media/story.jpg" imagePos="center" caption="// 02 · service categories · organized project elements" 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: CH.ink,
      }}>
        Built for the moment<br />
        someone needs<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>electrical work done right.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: CH.inkDim, maxWidth: 520, margin: 0,
      }}>
        From panel upgrades and generator installs to lighting, EV charging, inspections, and emergency
        repairs, the strongest electrical service brands need trust before the first appointment.
        WWW Electric gives that category a direct, memorable name.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${CH.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: 'RES', l: 'Residential' },
          { n: 'COM', l: 'Commercial' },
          { n: 'EMG', l: 'Emergency' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 44, lineHeight: 1, color: CH.brass,
              letterSpacing: 1,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const serviceItems = [
  {
    n: '01', label: 'Panel & Wiring',  mood: 'metal',       image: 'media/residential.jpg',
    h: 560, blurb: 'Breaker panels, service upgrades, full rewires, and smart electrical systems for the modern home.',
    cap: '// residential panel · service upgrade',
  },
  {
    n: '02', label: 'EV & Lighting',   mood: 'panel',       image: 'media/commercial.jpg',
    h: 720, blurb: 'EV charging installs, landscape lighting, recessed lighting, and smart fixture replacements.',
    cap: '// EV charging · commercial install',
  },
  {
    n: '03', label: 'Commercial',      mood: 'residential', image: 'media/workflow.jpg',
    h: 720, blurb: 'Facility wiring, code compliance, tenant improvements, and commercial electrical inspections.',
    cap: '// commercial facility · organized systems',
  },
  {
    n: '04', label: 'Emergency',       mood: 'facility',    image: 'media/contractor.jpg',
    h: 560, blurb: 'Emergency fault diagnosis, same-day dispatch, panel troubleshooting, and safety inspections.',
    cap: '// field service · emergency dispatch',
  },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: CH.bg, padding: '40px 56px 180px' }}>
    {/* section header */}
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 56, borderBottom: `1px solid ${CH.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>03 — The Services</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 900,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          A sharper front door<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: CH.inkDim }}>for electrical projects.</span>
        </h2>
      </div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: CH.inkLow,
        textAlign: 'right', paddingBottom: 12,
      }}>
        Residential · Commercial<br/>Emergency · EV Charging
      </div>
    </div>

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

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.jpg" caption="// 04 · domain concept · acquisition ready" style={{ height: 700 }}>
    {/* darken for headline legibility */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.65) 100%)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{ marginBottom: 56 }}><Eyebrow style={{ color: CH.brass }}>04 — The Domain</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 128, lineHeight: 0.92, letterSpacing: -1.2,
        color: CH.ink,
      }}>
        One domain.<br />
        Every project.<br />
        <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Right electrician.</span>
      </h2>
      <div style={{
        marginTop: 56, display: 'flex', alignItems: 'center', gap: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
      }}>
        <span style={{ width: 32, height: 1, background: CH.inkFaint }} />
        <span>The category name that works for residential and commercial</span>
        <span style={{ width: 32, height: 1, background: CH.inkFaint }} />
      </div>
    </div>
  </Plate>
);

/* Artifact card — premium framed card with corner ticks */
const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: CH.bg,
    border: `1px solid ${CH.inkFaint}`,
    boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(240,237,230,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: CH.brassDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(200,168,32,0.32)`,
      }} />
    )}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.18, mixBlendMode: 'overlay',
    }} />
    {accentTab && (
      <span style={{
        position: 'absolute', top: -1, left: 32, width: 22, height: 4,
        background: CH.brass,
      }} />
    )}
    <div style={{
      position: 'relative', zIndex: 1, height: '100%',
      display: 'flex', flexDirection: 'column', ...contentStyle,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: CH.brassDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: CH.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const valueNotes = [
  { n: '01', t: 'Domain Clarity',    kind: 'stance',   d: 'Clear, memorable, category-defining. The kind of name that works before you spend a dollar on traffic.' },
  { n: '02', t: 'Discovery',         kind: 'tank',     d: 'Homeowners, landlords, property managers, and buyers all start with a search. This domain is built to be found.' },
  { n: '03', t: 'Service Range',     kind: 'metal',    d: 'From residential rewires to commercial facility upgrades — the brand can own the full category.' },
  { n: '04', t: 'Commercial Scale',  kind: 'leather',  d: 'Strong enough for regional electrical groups, facility managers, and commercial service networks.' },
  { n: '05', t: 'Quote Flow',        kind: 'shop',     d: 'The concept can support structured quote requests, project categorization, and direct contractor matching.' },
  { n: '06', t: 'Acquisition Path',  kind: 'road',     d: 'The domain and concept are positioned for a marketplace, directory, lead-gen operator, or service brand.' },
];

const PresenceGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = CH.brass; const dim = CH.inkLow;
  switch (kind) {
    case 'stance':
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.08} y1={s*0.82} x2={s*0.92} y2={s*0.82} stroke={dim} strokeWidth="1" />
          <circle cx={s*0.26} cy={s*0.66} r={s*0.14} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={s*0.74} cy={s*0.66} r={s*0.14} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.30} y1={s*0.58} x2={s*0.70} y2={s*0.58} stroke={CH.ink} strokeWidth="1.4" />
          <line x1={s*0.42} y1={s*0.58} x2={s*0.46} y2={s*0.48} stroke={CH.ink} strokeWidth="1" />
        </svg>
      );
    case 'tank':
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <path d={`M ${s*0.18} ${cy} Q ${s*0.30} ${s*0.30}, ${s*0.62} ${s*0.30} Q ${s*0.86} ${s*0.32}, ${s*0.82} ${cy} Q ${s*0.78} ${s*0.72}, ${s*0.50} ${s*0.72} Q ${s*0.22} ${s*0.72}, ${s*0.18} ${cy} Z`} fill="none" stroke={stroke} strokeWidth="1.2" />
          <path d={`M ${s*0.28} ${s*0.42} Q ${s*0.42} ${s*0.36}, ${s*0.58} ${s*0.40}`} fill="none" stroke={dim} strokeWidth="0.8" opacity="0.7" />
          <circle cx={s*0.66} cy={cy} r="1.6" fill={stroke} />
        </svg>
      );
    case 'metal':
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s*0.36} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={cx} cy={cy} r={s*0.06} fill={stroke} />
          {[0, 45, 90, 135].map(a => {
            const rad = (a * Math.PI) / 180;
            const x1 = cx + Math.cos(rad) * s*0.06;
            const y1 = cy + Math.sin(rad) * s*0.06;
            const x2 = cx + Math.cos(rad) * s*0.36;
            const y2 = cy + Math.sin(rad) * s*0.36;
            const x1b = cx - Math.cos(rad) * s*0.06;
            const y1b = cy - Math.sin(rad) * s*0.06;
            const x2b = cx - Math.cos(rad) * s*0.36;
            const y2b = cy - Math.sin(rad) * s*0.36;
            return (
              <g key={a}>
                <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={dim} strokeWidth="0.8" />
                <line x1={x1b} y1={y1b} x2={x2b} y2={y2b} stroke={dim} strokeWidth="0.8" />
              </g>
            );
          })}
        </svg>
      );
    case 'leather':
      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" />
          <line x1={s*0.50} y1={s*0.30} x2={s*0.50} y2={s*0.70} stroke={dim} strokeWidth="0.6" strokeDasharray="2 3" />
        </svg>
      );
    case 'shop':
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={cx} y1={s*0.08} x2={cx} y2={s*0.36} stroke={dim} strokeWidth="1" />
          <circle cx={cx} cy={s*0.42} r={s*0.07} fill={stroke} />
          <path d={`M ${cx} ${s*0.48} L ${s*0.28} ${s*0.80} L ${s*0.72} ${s*0.80} Z`} fill={stroke} opacity="0.16" stroke={stroke} strokeWidth="0.6" />
          <line x1={s*0.10} y1={s*0.82} x2={s*0.90} y2={s*0.82} stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'road':
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={s*0.38} r="1.4" fill={stroke} />
          <line x1={s*0.08} y1={s*0.86} x2={cx} y2={s*0.38} stroke={dim} strokeWidth="1" />
          <line x1={s*0.92} y1={s*0.86} x2={cx} y2={s*0.38} stroke={dim} strokeWidth="1" />
          <line x1={s*0.32} y1={s*0.86} x2={s*0.46} y2={s*0.48} stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.42} y1={s*0.86} x2={s*0.49} y2={s*0.56} stroke={stroke} strokeWidth="1" strokeDasharray="3 3" />
        </svg>
      );
  }
};

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

    {/* header */}
    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 60 }}>
      <div>
        <Eyebrow>05 — The Value</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: CH.ink,
        }}>
          A name built for contractors,<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>marketplaces, and service networks.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: CH.inkDim, paddingBottom: 12,
      }}>
        For a home-services marketplace, regional electrical group, lead-gen operator, or contractor network,
        wwwelectric.com has the clarity to anchor search campaigns, paid traffic, direct outreach, and a
        premium service brand.
      </div>
    </div>

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

    {/* bottom strip */}
    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${CH.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: CH.inkLow,
    }}>
      <span>Residential · Commercial · Emergency · EV Charging</span>
      <span>Panel Work · Inspections · Lighting · Smart Electrical</span>
      <span style={{ color: CH.brass }}>Clear enough for homeowners · Strong enough for commercial</span>
    </div>
  </div>
);

const DesktopContact = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const formFields = [
    { label: 'Name',  name: 'name',  type: 'text',  required: true, hint: 'Required', placeholder: 'First & last' },
    { label: 'Email', name: 'email', type: 'email', required: true, hint: 'Required', placeholder: 'you@company.com' },
  ];
  return (
    <div id="inquiry" style={{
      background: CH.bg, padding: '180px 56px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96,
    }}>
      <div>
        <Eyebrow>06 — Acquire</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 580,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: CH.ink,
        }}>
          Interested in acquiring<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>wwwelectric.com?</span>
        </h2>
        <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: CH.inkDim, margin: 0 }}>
          Send a direct inquiry to discuss the domain, the brand concept, or a possible acquisition.
          This is not an operating electrical contractor marketplace; it is a premium concept demonstrating
          how the domain could be positioned.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${CH.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'wwwelectric.com' },
            { l: 'Direction', v: 'Electrical services marketplace' },
            { l: 'Status',    v: 'Open to serious inquiries' },
          ].map(b => (
            <div key={b.l}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: CH.brassDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Antonio, sans-serif', fontSize: 22, color: CH.ink, lineHeight: 1.2,
              }}>
                {b.v}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, maxWidth: 460,
          display: 'flex', gap: 14, alignItems: 'flex-start',
          paddingTop: 18, borderTop: `1px dashed ${CH.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: CH.brass, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
          }}>
            WWW Electric is an illustrative brand concept for wwwelectric.com. The concept, copy, and visuals
            are intended to show one possible direction for the domain. The domain may be available for
            acquisition by the right buyer.
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmit} style={{ paddingTop: 80, position: 'relative' }}>
        {/* honeypot */}
        <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
          <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
        </div>
        {status === 'success' ? (
          <div style={{ padding: '56px 0', fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass, lineHeight: 1.8 }}>
            {SITE.successMessage}
          </div>
        ) : (
          <>
            {status === 'error' && (
              <div style={{ marginBottom: 20, fontFamily: 'IBM Plex Mono, monospace',
                fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase',
                color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
                {errorMsg}
              </div>
            )}
            {formFields.map(f => (
              <div key={f.label} style={{ marginBottom: 30 }}>
                <div style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                  letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: CH.inkLow }}>{f.hint}</span>
                </div>
                <input
                  type={f.type}
                  name={f.name}
                  value={values[f.name]}
                  onChange={set(f.name)}
                  placeholder={f.placeholder}
                  required={f.required}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${CH.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Antonio, sans-serif', fontSize: 26,
                    color: CH.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: CH.brass,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: CH.inkLow }}>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 ${CH.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Antonio, sans-serif', fontSize: 26,
                  color: CH.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: CH.brass,
                }}
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
              <button
                type="submit"
                disabled={status === 'submitting'}
                style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
                  letterSpacing: 2.4, textTransform: 'uppercase',
                  color: CH.bg, background: status === 'submitting' ? CH.steel : CH.brass,
                  padding: '20px 32px', border: 'none',
                  cursor: status === 'submitting' ? 'default' : 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 16,
                  opacity: status === 'submitting' ? 0.7 : 1,
                }}
              >
                {status === 'submitting' ? 'Sending…' : 'Start the Conversation'}
                <span style={{ width: 22, height: 1, background: CH.bg, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: CH.inkLow,
                textAlign: 'right', lineHeight: 1.6, maxWidth: 220,
              }}>
                Concept shown for<br/>illustrative purposes.
              </div>
            </div>
          </>
        )}
      </form>
    </div>
  );
};

const DesktopFooter = () => (
  <div id="footer" style={{
    background: CH.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${CH.inkFaint}`,
  }}>
    <div style={{
      display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr', gap: 56,
      paddingBottom: 56,
    }}>
      {/* brand block */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <WEMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: CH.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>WWW<span style={{ fontWeight: 400, opacity: 0.78 }}> Electric</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: CH.brass,
            }}>Find the right electrician before the first wire is touched.</div>
          </div>
        </div>
        <p style={{
          marginTop: 28, marginBottom: 0, maxWidth: 320,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>
          WWW Electric is an illustrative brand concept for <span style={{ color: CH.inkDim }}>wwwelectric.com</span>.
          It is not currently presented as an operating electrical contractor marketplace, licensed electrical
          provider, or active service network. All visuals and copy are conceptual and intended to demonstrate
          possible domain positioning.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Brand Direction', href: '#story' },
          { t: 'Visual Identity', href: '#presence' },
          { t: 'Use Cases',       href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'wwwelectric.com',     href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Independent Concept',        href: null },
          { t: 'No Contractor Affiliation',  href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: CH.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: CH.brassDim }} />
            {g.h}
          </div>
          <div style={{ display: 'grid', gap: 10 }}>
            {g.l.map(x => (
              <a key={x.t} href={x.href || undefined} style={{
                fontFamily: 'Antonio, sans-serif', fontSize: 20, color: CH.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${CH.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow,
    }}>
      <span>© MMXXVI · WWW Electric · Concept presentation</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: CH.brass }}>Volume One — 001</span>
    </div>
  </div>
);

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

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

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

    {/* hero */}
    <Plate id="m-hero" image="media/hero.jpg" imagePos="center" caption="// 01 · residential service · professional" 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.4) 50%, rgba(0,0,0,0.8) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>Premium Electrical Services</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 52, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: CH.ink,
        }}>
          Electrical service discovery.<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 500 }}>Premium domain.</span>
        </h1>
        <p style={{ marginTop: 40, color: CH.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          WWW Electric is a polished brand concept for helping homeowners and builders
          find qualified electricians and start serious service inquiries.
        </p>
        <a href="#inquiry" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          marginTop: 24, padding: '14px 22px',
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: CH.bg, background: CH.brass, textDecoration: 'none',
        }}>
          Inquire About wwwelectric.com
          <span style={{ width: 16, height: 1, background: CH.bg }} />
        </a>
      </div>
    </Plate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>02 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        Built for the moment someone needs electrical work <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>done right.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        From panel upgrades and generator installs to lighting, EV charging, inspections, and emergency
        repairs, the strongest electrical service brands need trust before the first appointment.
        WWW Electric gives that category a direct, memorable name.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · service categories · organized elements" style={{ height: 320, marginTop: 32 }} />
    </div>

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

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.jpg" caption="// 04 · domain concept" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.7) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}><Eyebrow>04 — The Domain</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 56, lineHeight: 0.92, letterSpacing: -0.4,
          color: CH.ink,
        }}>
          One domain.<br/>
          Every project.<br/>
          <span style={{ color: CH.brass, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Right electrician.</span>
        </h2>
      </div>
    </Plate>

    {/* presence / value */}
    <div id="m-presence" style={{ background: CH.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — The Value</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: CH.ink,
      }}>
        A name built for contractors,<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>marketplaces, and service networks.</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        For a home-services marketplace, regional electrical group, lead-gen operator, or contractor network,
        wwwelectric.com has the clarity to anchor search campaigns and a premium service brand.
      </p>
      {/* value cards — 2-col grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {valueNotes.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: 16, letterSpacing: 0.2, color: CH.ink,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: CH.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      {/* brand line strip */}
      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${CH.inkFaint}`, background: CH.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
        }}>Residential · Commercial<br/>Emergency · EV Charging</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: CH.brass,
        }}>Clear enough for homeowners · Strong enough for commercial</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Acquire</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 48, lineHeight: 0.95, letterSpacing: -0.5,
        color: CH.ink,
      }}>
        Interested in acquiring<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: CH.brass, fontWeight: 400 }}>wwwelectric.com?</span>
      </h2>
      <p style={{ color: CH.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        Send a direct inquiry to discuss the domain, the brand concept, or a possible acquisition.
        This is not an operating marketplace; it is a premium concept demonstrating how the domain
        could be positioned.
      </p>

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

      <MobileContactForm />
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: CH.panel, padding: '36px 22px 32px', borderTop: `1px solid ${CH.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <WEMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: CH.ink, lineHeight: 1 }}>WWW<span style={{ fontWeight: 400, opacity: 0.78 }}> Electric</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: CH.brass }}>Find the right electrician before the first wire is touched.</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.7,
      }}>
        WWW Electric is an illustrative brand concept for <span style={{ color: CH.inkDim }}>wwwelectric.com</span>.
        It is not currently presented as an operating electrical contractor marketplace, licensed electrical provider,
        or active service network. All visuals and copy are conceptual and intended to demonstrate possible domain positioning.
      </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: 'wwwelectric.com',     href: '#inquiry' },
            { t: 'Acquisition Inquiry', href: '#inquiry' },
            { t: 'Contact',             href: '#inquiry' },
          ]},
        ].map(g => (
          <div key={g.h}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
              letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow,
              marginBottom: 12,
            }}>{g.h}</div>
            <div style={{ display: 'grid', gap: 6 }}>
              {g.l.map(x => (
                <a key={x.t} href={x.href} style={{
                  fontFamily: 'Antonio, sans-serif', fontSize: 16, color: CH.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${CH.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: CH.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · WWW Electric<br/>Independent concept · No contractor affiliation<br/>
        <span style={{ color: CH.brass }}>Volume One — 001</span>
      </div>
    </div>
  </div>
);

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