/* PE Online — homepage mockup (desktop + mobile)
   System: Barlow Condensed (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow)
   Palette: graphite #070A0B · charcoal #0E1714 · muted #AAB4AE · offwhite #F4F7F2 · lime #D7F75B · sky #64B5F6
*/

const PE = {
  ink:      '#F4F7F2',
  inkDim:   'rgba(244,247,242,0.62)',
  inkLow:   'rgba(244,247,242,0.34)',
  inkFaint: 'rgba(255,255,255,0.10)',
  bg:       '#070A0B',
  panel:    '#0E1714',
  muted:    '#AAB4AE',
  lime:     '#D7F75B',
  limeDim:  'rgba(215,247,91,0.55)',
  sky:      '#64B5F6',
  skyDim:   'rgba(100,181,246,0.55)',
};

// Public site config. Overridden by site-config.js
const SITE = {
  domain: 'peonline.com',
  brandName: 'PE Online',
  category: 'Online Physical Education / Digital Movement Curriculum',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for PEOnline.com has been sent.',
  messagePlaceholder: 'Tell us how you would use PEOnline.com.',
  ...(window.SITE_CONFIG || {}),
};

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

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

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

/* Photo placeholder plate */
const Plate = ({ mood = 'gym', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    gym: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(100,181,246,0.18), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(30,60,40,0.22), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(10,20,15,0.5), transparent 70%),
      linear-gradient(180deg, #0d1410 0%, #070A0B 55%, #030506 100%)`,
    detail: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(215,247,91,0.10), transparent 65%),
      linear-gradient(115deg, #0a0d0b 0%, #131a15 50%, #060809 100%)`,
    action: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(100,181,246,0.15), transparent 60%),
      linear-gradient(180deg, #040607 0%, #0a0d0b 60%, #0e1714 100%)`,
    editorial: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(215,247,91,0.12), transparent 62%),
      linear-gradient(160deg, #0d1410 0%, #070A0B 100%)`,
    digital: `
      radial-gradient(circle 320px at 70% 30%, rgba(100,181,246,0.22), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(215,247,91,0.10), transparent 65%),
      linear-gradient(180deg, #0d1410 0%, #07060500 100%), #060809`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#040607 url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.gym),
      ...style,
    }}>
      <Grain opacity={image ? 0.22 : 0.55} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 95% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.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(244,247,242,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: PE.lime,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    ...style,
  }}>
    <span style={{ width: 22, height: 1, background: PE.lime, opacity: 0.85 }} />
    <span>{children}</span>
  </div>
);

/* PE monogram mark */
const PEMark = ({ size = 56, color = PE.ink, accent = PE.lime }) => (
  <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" />
    {/* P */}
    <path d="M 14 18 L 14 46 M 14 18 L 26 18 Q 34 18 34 26 Q 34 34 26 34 L 14 34"
          fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="square" />
    {/* E */}
    <path d="M 40 18 L 40 46 M 40 18 L 52 18 M 40 32 L 50 32 M 40 46 L 52 46"
          fill="none" stroke={color} strokeWidth="4.5" strokeLinecap="square" />
    {/* lime tick */}
    <rect x="28" y="55" width="8" height="4" fill={accent} />
  </svg>
);

/* Wordmark — Barlow Condensed */
const Wordmark = ({ size = 22, color = PE.ink }) => (
  <span style={{
    fontFamily: '"Barlow Condensed", "Antonio", sans-serif',
    fontWeight: 600, fontSize: size, letterSpacing: 1.2,
    color, lineHeight: 1, textTransform: 'uppercase',
    display: 'inline-flex', alignItems: 'baseline', gap: size * 0.10,
  }}>
    <span>PE</span><span style={{ fontWeight: 400, opacity: 0.78 }}>Online</span>
  </span>
);

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

const INQUIRY_API_URL = SITE.inquiryApi;

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

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

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

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

const MobileContactForm = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const fields = [
    { l: 'Name',    n: 'name',    t: 'text',  r: true, h: 'Required', p: 'First & last' },
    { l: 'Email',   n: 'email',   t: 'email', r: true, h: 'Required', p: 'you@example.com' },
    { l: 'Message', n: 'message', t: 'area',  r: true, h: 'Tell us more', 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: PE.lime, 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: PE.lime,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: PE.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 ${PE.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: '"Barlow Condensed", sans-serif', fontSize: 20,
                    color: PE.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: PE.lime,
                  }}
                />
              ) : (
                <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 ${PE.inkFaint}`, paddingBottom: 12,
                    fontFamily: '"Barlow Condensed", sans-serif', fontSize: 20,
                    color: PE.ink, letterSpacing: 0,
                    outline: 'none', caretColor: PE.lime,
                  }}
                />
              )}
            </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: PE.bg, background: status === 'submitting' ? PE.muted : PE.lime,
            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: PE.inkLow, lineHeight: 1.7,
          }}>
            Illustrative concept. Domain available for acquisition.
          </div>
        </>
      )}
    </form>
  );
};

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

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

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.png" imagePos="center" mood="gym" caption="// 01 · movement · digital curriculum · overhead light" style={{ height: 880 }}>
    {/* gradient fade to bottom */}
    <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.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: PE.inkLow,
    }}>
      N° 001 — Digital Movement Curriculum
    </div>
    <div style={{
      position: 'absolute', top: 110, right: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: PE.inkLow,
      textAlign: 'right',
    }}>
      School / Home / Hybrid
    </div>

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 940,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow>Online Physical Education</Eyebrow></div>
      <h1 style={{
        fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 700,
        fontSize: 148, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: PE.ink,
      }}>
        Physical Education,<br />
        <span style={{ color: PE.ink, fontWeight: 400 }}>Built for the </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: PE.lime, fontWeight: 500,
        }}>Online Era.</span>
      </h1>
      <p style={{
        marginTop: 84, marginBottom: 0, maxWidth: 520,
        fontSize: 17, lineHeight: 1.55, color: PE.inkDim,
      }}>
        PEOnline.com is a premium brand concept for digital movement curriculum,
        online PE programming, and youth wellness resources designed for classrooms,
        homes, and hybrid learning.
      </p>

      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: PE.bg, background: PE.lime,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Explore the Concept
          <span style={{ display: 'inline-block', width: 18, height: 1, background: PE.bg }} />
        </a>
        <a href="#inquiry" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: PE.ink, textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: `1px solid ${PE.inkFaint}`,
        }}>
          View Acquisition Details
        </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: PE.inkLow,
      }}>Scroll · 01 of 06</div>
      <div style={{ width: 1, height: 56, background: `linear-gradient(180deg, ${PE.lime}, transparent)` }} />
    </div>
  </Plate>
);

const DesktopStory = () => (
  <div id="story" style={{
    background: PE.bg, padding: '160px 56px 160px',
    display: 'grid', gridTemplateColumns: '560px 1fr', gap: 96,
  }}>
    <Plate image="media/story.png" imagePos="center" mood="detail" caption="// 02 · curriculum planning · movement pathways" style={{ height: 720 }} />

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Opportunity</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
        fontSize: 72, lineHeight: 0.98, letterSpacing: -0.5,
        color: PE.ink,
      }}>
        PE that travels beyond<br />
        the gym, the clipboard,<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: PE.lime, fontWeight: 400 }}>the fixed schedule.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: PE.inkDim, maxWidth: 520, margin: 0,
      }}>
        Physical education no longer has to be limited to a gym period or one fixed classroom schedule.
        PE Online gives the domain a clear, memorable identity for movement learning that can travel
        across virtual schools, homeschool programs, district wellness initiatives, and hybrid classrooms.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${PE.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: 'K–12', l: 'Grade span' },
          { n: '360°', l: 'Movement scope' },
          { n: '∞',    l: 'Learning paths' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
              fontSize: 56, lineHeight: 1, color: PE.ink,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.8, textTransform: 'uppercase', color: PE.inkLow,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const cultureItems = [
  { n: '01', label: 'Curriculum',  mood: 'detail',    image: 'media/curriculum.png',  h: 560, blurb: 'Structured activity plans, skill progressions, and lesson sequences built for virtual and hybrid delivery.', cap: '// structured lesson · skill progression' },
  { n: '02', label: 'Movement',    mood: 'gym',       image: 'media/movement.png',    h: 720, blurb: 'Movement challenges, guided exercises, and activity pathways students can follow from anywhere.',              cap: '// activity pathway · motion cues' },
  { n: '03', label: 'Wellness',    mood: 'editorial', image: 'media/wellness.png',    h: 720, blurb: 'Mindfulness prompts, recovery cues, and healthy habit modules woven into everyday learning.',                  cap: '// wellness prompt · daily habit' },
  { n: '04', label: 'Platform',    mood: 'digital',   image: 'media/platform.png',    h: 560, blurb: 'The digital infrastructure concept — teacher dashboards, student progress tracking, and resource libraries.', cap: '// digital platform · teacher tools' },
];

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

    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
      columnGap: 24, rowGap: 64,
    }}>
      {cultureItems.map((c, i) => (
        <div key={c.label} style={{ marginTop: i % 2 === 1 ? 64 : 0 }}>
          <Plate mood={c.mood} image={c.image} caption={c.cap} style={{ height: c.h }} />
          <div style={{
            marginTop: 22, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
                letterSpacing: 2, color: PE.lime,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
                fontSize: 44, lineHeight: 1, letterSpacing: -0.3,
                color: PE.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: PE.inkDim, textDecoration: 'none',
            }}>Learn →</a>
          </div>
          <p style={{
            marginTop: 14, marginBottom: 0, maxWidth: 440,
            fontSize: 15.5, color: PE.inkDim,
          }}>{c.blurb}</p>
        </div>
      ))}
    </div>
  </div>
);

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.png" imagePos="center" mood="action" caption="// 04 · movement · stations · digital cues" 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: PE.lime }}>04 — The Brand Idea</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 700,
        fontSize: 128, lineHeight: 0.92, letterSpacing: -1.2,
        color: PE.ink,
      }}>
        Move anywhere.<br />
        Learn everywhere.<br />
        <span style={{ color: PE.lime, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Teach beyond the gym.</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: PE.inkLow,
      }}>
        <span style={{ width: 32, height: 1, background: PE.inkFaint }} />
        <span>Physical education, built for the online era</span>
        <span style={{ width: 32, height: 1, background: PE.inkFaint }} />
      </div>
    </div>
  </Plate>
);

/* Artifact card */
const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: PE.bg,
    border: `1px solid ${PE.inkFaint}`,
    boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(244,247,242,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: PE.limeDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(215,247,91,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: PE.lime,
      }} />
    )}
    <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: PE.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: PE.limeDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: PE.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const curriculumNotes = [
  { n: '01', t: 'Lesson Plans',    kind: 'plans',    d: 'Structured, standards-aligned activity sequences students can follow whether in a gym, living room, or school hallway.' },
  { n: '02', t: 'Skill Builds',    kind: 'skills',   d: 'Sport-specific and functional movement progressions designed to grow with the learner over time.' },
  { n: '03', t: 'Wellness Cues',   kind: 'wellness', d: 'Mindfulness, breathing, and recovery prompts woven into daily movement routines.' },
  { n: '04', t: 'Activity Paths',  kind: 'paths',    d: 'Flexible pathways that adapt to environment, equipment, and learner ability — no gym required.' },
  { n: '05', t: 'Video Lessons',   kind: 'video',    d: 'Guided movement instruction delivered by video, usable by teachers or students working independently.' },
  { n: '06', t: 'The Platform',    kind: 'platform', d: 'The digital delivery layer — dashboards, progress tracking, and resource libraries for modern PE programs.' },
];

const CurriculumGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = PE.lime; const dim = PE.inkLow;
  switch (kind) {
    case 'plans': // structured list with checkbox marks
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.16} y1={s*0.28} x2={s*0.84} y2={s*0.28} stroke={dim} strokeWidth="1" />
          <line x1={s*0.16} y1={s*0.50} x2={s*0.84} y2={s*0.50} stroke={dim} strokeWidth="1" />
          <line x1={s*0.16} y1={s*0.72} x2={s*0.84} y2={s*0.72} stroke={dim} strokeWidth="1" />
          <rect x={s*0.16} y={s*0.22} width={s*0.10} height={s*0.12} fill="none" stroke={stroke} strokeWidth="1" />
          <path d={`M ${s*0.18} ${s*0.28} L ${s*0.22} ${s*0.32} L ${s*0.28} ${s*0.24}`} fill="none" stroke={stroke} strokeWidth="1.2" />
          <rect x={s*0.16} y={s*0.44} width={s*0.10} height={s*0.12} fill="none" stroke={dim} strokeWidth="0.8" />
        </svg>
      );
    case 'skills': // ascending arrow / progression
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.12} y1={s*0.84} x2={s*0.88} y2={s*0.84} stroke={dim} strokeWidth="1" />
          <line x1={s*0.22} y1={s*0.84} x2={s*0.22} y2={s*0.64} stroke={stroke} strokeWidth="1.4" />
          <line x1={s*0.42} y1={s*0.84} x2={s*0.42} y2={s*0.48} stroke={stroke} strokeWidth="1.4" />
          <line x1={s*0.62} y1={s*0.84} x2={s*0.62} y2={s*0.32} stroke={stroke} strokeWidth="1.4" />
          <line x1={s*0.82} y1={s*0.84} x2={s*0.82} y2={s*0.18} stroke={stroke} strokeWidth="1.4" />
          <path d={`M ${s*0.70} ${s*0.18} L ${s*0.82} ${s*0.10} L ${s*0.94} ${s*0.18}`} fill="none" stroke={stroke} strokeWidth="1" />
        </svg>
      );
    case 'wellness': // leaf / breathing circle
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s*0.30} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={cx} cy={cy} r={s*0.16} fill="none" stroke={dim} strokeWidth="0.8" />
          <circle cx={cx} cy={cy} r={s*0.05} fill={stroke} />
          <line x1={cx} y1={s*0.08} x2={cx} y2={s*0.34} stroke={dim} strokeWidth="0.8" strokeDasharray="2 2" />
          <line x1={cx} y1={s*0.66} x2={cx} y2={s*0.92} stroke={dim} strokeWidth="0.8" strokeDasharray="2 2" />
        </svg>
      );
    case 'paths': // branching path
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={s*0.22} r="2" fill={stroke} />
          <line x1={cx} y1={s*0.22} x2={s*0.28} y2={s*0.55} stroke={stroke} strokeWidth="1.2" />
          <line x1={cx} y1={s*0.22} x2={s*0.72} y2={s*0.55} stroke={stroke} strokeWidth="1.2" />
          <circle cx={s*0.28} cy={s*0.60} r="2" fill={dim} />
          <circle cx={s*0.72} cy={s*0.60} r="2" fill={dim} />
          <line x1={s*0.28} y1={s*0.60} x2={s*0.20} y2={s*0.82} stroke={dim} strokeWidth="0.8" />
          <line x1={s*0.28} y1={s*0.60} x2={s*0.38} y2={s*0.82} stroke={dim} strokeWidth="0.8" />
          <line x1={s*0.72} y1={s*0.60} x2={s*0.64} y2={s*0.82} stroke={dim} strokeWidth="0.8" />
          <line x1={s*0.72} y1={s*0.60} x2={s*0.82} y2={s*0.82} stroke={dim} strokeWidth="0.8" />
        </svg>
      );
    case 'video': // play button / screen
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.10} y={s*0.22} width={s*0.80} height={s*0.52} rx="2" fill="none" stroke={stroke} strokeWidth="1.2" />
          <path d={`M ${s*0.38} ${s*0.36} L ${s*0.38} ${s*0.64} L ${s*0.66} ${s*0.50} Z`} fill={stroke} opacity="0.8" />
          <line x1={s*0.28} y1={s*0.80} x2={s*0.72} y2={s*0.80} stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'platform': // grid dashboard
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.10} y={s*0.16} width={s*0.38} height={s*0.30} fill="none" stroke={stroke} strokeWidth="1" />
          <rect x={s*0.52} y={s*0.16} width={s*0.38} height={s*0.30} fill="none" stroke={dim} strokeWidth="0.8" />
          <rect x={s*0.10} y={s*0.52} width={s*0.80} height={s*0.18} fill="none" stroke={dim} strokeWidth="0.8" />
          <rect x={s*0.10} y={s*0.74} width={s*0.24} height={s*0.10} fill={PE.limeDim} />
          <rect x={s*0.38} y={s*0.74} width={s*0.16} height={s*0.10} fill={PE.skyDim} />
        </svg>
      );
    default:
      return null;
  }
};

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

    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 60 }}>
      <div>
        <Eyebrow>05 — The Curriculum</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: PE.ink,
        }}>
          The brand could power<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: PE.lime, fontWeight: 400 }}>six pillars of digital PE.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: PE.inkDim, paddingBottom: 12,
      }}>
        The concept is intentionally broad enough to support curriculum software, video-based PE lessons,
        homeschool movement plans, teacher resources, or a wellness-focused membership platform.
      </div>
    </div>

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

    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${PE.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: PE.inkLow,
    }}>
      <span>Structured lessons · Skill progressions · Wellness modules</span>
      <span>Virtual schools · Homeschool · Hybrid classrooms</span>
      <span style={{ color: PE.lime }}>Movement plans · Teacher tools · Student paths</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@example.com' },
  ];
  return (
    <div id="inquiry" style={{
      background: PE.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: '"Barlow Condensed", sans-serif', fontWeight: 600,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: PE.ink,
        }}>
          Acquire<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: PE.lime, fontWeight: 400 }}>PEOnline.com</span>
        </h2>
        <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: PE.inkDim, margin: 0 }}>
          PEOnline.com is available for acquisition. This illustrative concept shows how the domain
          could become a premium destination for online physical education, movement learning, or
          youth wellness programming.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${PE.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'PEOnline.com' },
            { l: 'Category',  v: 'Online Physical Education' },
            { 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: PE.lime,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: PE.limeDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: '"Barlow Condensed", sans-serif', fontSize: 22, color: PE.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 ${PE.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: PE.lime, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: PE.inkLow, lineHeight: 1.7,
          }}>
            This is an illustrative brand concept. PE Online is not an active school, accredited
            curriculum provider, or operating education platform.
          </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: PE.lime, 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: PE.lime,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: PE.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 ${PE.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: '"Barlow Condensed", sans-serif', fontSize: 26,
                    color: PE.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: PE.lime,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: PE.lime,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: PE.inkLow }}>Tell us more</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 ${PE.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: '"Barlow Condensed", sans-serif', fontSize: 26,
                  color: PE.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: PE.lime,
                }}
              />
            </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: PE.bg, background: status === 'submitting' ? PE.muted : PE.lime,
                  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: PE.bg, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: PE.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: PE.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${PE.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 }}>
          <PEMark size={48} />
          <div>
            <div style={{
              fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 700, fontSize: 28,
              color: PE.ink, lineHeight: 1, letterSpacing: 1.5, textTransform: 'uppercase',
            }}>PE<span style={{ fontWeight: 400, opacity: 0.78 }}>Online</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: PE.lime,
            }}>Physical Education. Online Era.</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: PE.inkLow, lineHeight: 1.7,
        }}>
          This is an illustrative brand concept for PEOnline.com. PE Online is not represented here
          as an active school, accredited curriculum provider, or operating education platform.
          The domain may be available for acquisition.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Brand Direction', href: '#story' },
          { t: 'Curriculum Pillars', href: '#presence' },
          { t: 'Use Cases', href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'PEOnline.com',        href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Illustrative Concept',       href: null },
          { t: 'No Institutional Affiliation', href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: PE.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: PE.limeDim }} />
            {g.h}
          </div>
          <div style={{ display: 'grid', gap: 10 }}>
            {g.l.map(x => (
              <a key={x.t} href={x.href || undefined} style={{
                fontFamily: '"Barlow Condensed", sans-serif', fontSize: 20, color: PE.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${PE.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: PE.inkLow,
    }}>
      <span>© MMXXVI · PE Online · Illustrative brand concept</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: PE.lime }}>peonline.com — Digital Movement Curriculum</span>
    </div>
  </div>
);

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

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

    {/* hero — static image */}
    <Plate id="m-hero" image="media/hero.png" imagePos="center" mood="gym" caption="// 01 · movement · digital" 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.82) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow>Online Physical Education</Eyebrow></div>
        <h1 style={{
          fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 700,
          fontSize: 64, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: PE.ink,
        }}>
          Physical Education,<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: PE.lime, fontWeight: 500 }}>Online Era.</span>
        </h1>
        <p style={{ marginTop: 52, color: PE.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          A premium brand concept for digital movement curriculum and youth wellness programming.
        </p>
        <a href="#story" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          marginTop: 24, padding: '14px 22px',
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: PE.bg, background: PE.lime, textDecoration: 'none',
        }}>
          Explore the Concept
          <span style={{ width: 16, height: 1, background: PE.bg }} />
        </a>
      </div>
    </Plate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>02 — The Opportunity</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: PE.ink,
      }}>
        PE that travels beyond the gym, the clipboard, <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: PE.lime, fontWeight: 400 }}>the fixed schedule.</span>
      </h2>
      <p style={{ color: PE.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        Physical education no longer has to be limited to a gym period. PE Online gives the domain a clear, memorable identity for movement learning that can travel across virtual schools, homeschool programs, and hybrid classrooms.
      </p>
      <Plate image="media/story.png" mood="detail" caption="// 02 · curriculum · pathways" style={{ height: 320, marginTop: 32 }} />
    </div>

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

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.png" mood="action" caption="// 04 · movement · stations" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.48) 60%, rgba(0,0,0,0.72) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}><Eyebrow>04 — The Brand Idea</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 700,
          fontSize: 56, lineHeight: 0.92, letterSpacing: -0.4,
          color: PE.ink,
        }}>
          Move anywhere.<br/>
          Learn everywhere.<br/>
          <span style={{ color: PE.lime, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>Teach beyond the gym.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: PE.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — The Curriculum</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: PE.ink,
      }}>
        The brand could power<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: PE.lime, fontWeight: 400 }}>six pillars of digital PE.</span>
      </h2>
      <p style={{ color: PE.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        Flexible enough to support curriculum software, video-based lessons, homeschool movement plans, or a wellness membership platform.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {curriculumNotes.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 }}>
              <CurriculumGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0, whiteSpace: 'nowrap',
                fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
                fontSize: 20, letterSpacing: 0.2, color: PE.ink,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: PE.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${PE.inkFaint}`, background: PE.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: PE.inkLow, lineHeight: 1.7,
        }}>Structured lessons · Skill progressions<br/>Wellness modules · Activity paths</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: PE.lime,
        }}>Movement plans · Teacher tools · Student paths</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Acquire</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 600,
        fontSize: 56, lineHeight: 0.95, letterSpacing: -0.5,
        color: PE.ink,
      }}>
        Acquire<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: PE.lime, fontWeight: 400 }}>PEOnline.com</span>
      </h2>
      <p style={{ color: PE.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        PEOnline.com is available for acquisition. This illustrative concept shows how the domain
        could become a premium destination for online physical education, movement learning, or
        youth wellness programming.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${PE.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',   v: 'PEOnline.com' },
          { l: 'Category', v: 'Online Physical Education' },
          { 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: PE.lime,
            }}>{b.l}</div>
            <div style={{
              marginTop: 4,
              fontFamily: '"Barlow Condensed", sans-serif', fontSize: 20, color: PE.ink, lineHeight: 1.2,
            }}>{b.v}</div>
          </div>
        ))}
      </div>

      <MobileContactForm />
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: PE.panel, padding: '36px 22px 32px', borderTop: `1px solid ${PE.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <PEMark size={36} />
        <div>
          <div style={{ fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 700, fontSize: 22, color: PE.ink, lineHeight: 1, letterSpacing: 1.5, textTransform: 'uppercase' }}>PE<span style={{ fontWeight: 400, opacity: 0.78 }}>Online</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: PE.lime }}>Physical Education. Online Era.</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: PE.inkLow, lineHeight: 1.7,
      }}>
        This is an illustrative brand concept for PEOnline.com. PE Online is not represented here
        as an active school, accredited curriculum provider, or operating education platform.
        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: 'Curriculum Pillars', href: '#presence' },
            { t: 'Use Cases',         href: '#culture' },
          ]},
          { h: 'Domain', l: [
            { t: 'PEOnline.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: PE.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: '"Barlow Condensed", sans-serif', fontSize: 16, color: PE.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${PE.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: PE.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · PE Online<br/>Illustrative concept · No institutional affiliation<br/>
        <span style={{ color: PE.lime }}>peonline.com — Digital Movement Curriculum</span>
      </div>
    </div>
  </div>
);

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