// Mobile reflows for the three site pages — carousel gateway + minimal nav,
// the variants the user locked in during the Mobile.html design pass.
// Loaded by every page; each page's own jsx swaps to the mobile component
// when the viewport is narrow.

const { useState: useStateMOB, useEffect: useEffectMOB } = React;

const MOBILE_MAX = 700;

// ─── viewport-aware switch ───────────────────────────────────────────────────
function useIsMobile() {
  const get = () => typeof window !== 'undefined' && window.matchMedia &&
    window.matchMedia(`(max-width: ${MOBILE_MAX}px)`).matches;
  const [isMobile, setIsMobile] = useStateMOB(get());
  useEffectMOB(() => {
    const mq = window.matchMedia(`(max-width: ${MOBILE_MAX}px)`);
    const onChange = () => setIsMobile(mq.matches);
    if (mq.addEventListener) mq.addEventListener('change', onChange);
    else mq.addListener(onChange);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener('change', onChange);
      else mq.removeListener(onChange);
    };
  }, []);
  return isMobile;
}

function Responsive({ Mobile, Desktop }) {
  const isMobile = useIsMobile();
  return isMobile ? <Mobile /> : <Desktop />;
}

// ─── shared chrome ───────────────────────────────────────────────────────────

function MobLogo({ dark = false }) {
  const fg = dark ? LABS_PAPER : INK;
  return (
    <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: fg }}>
      <Mark size={24} accent={ACCENT_BLUE} ink={fg} haze={fg} showAccent={true} />
      <span style={{ fontFamily: MONO_FF, fontSize: 13, fontWeight: 500, letterSpacing: '-0.005em', color: fg }}>
        generative<span style={{ color: ACCENT_BLUE }}>.</span>studio
      </span>
    </a>
  );
}

// Minimal top bar — logo + a single Contact link; what the user picked.
function MobTopBar({ dark = false }) {
  const bg = dark ? LABS_INK : PAPER;
  const fg = dark ? LABS_PAPER : INK;
  const rule = dark ? LABS_RULE_SOFT : RULE_SOFT;
  return (
    <header style={{
      padding: '14px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      borderBottom: `1px solid ${rule}`, background: bg,
      position: 'sticky', top: 0, zIndex: 40,
    }}>
      <MobLogo dark={dark} />
      <a href={`mailto:${EMAIL_USER}@${EMAIL_DOMAIN}`} style={{ color: fg, textDecoration: 'none' }}>
        <MonoLabel color={fg} size={9}>Contact</MonoLabel>
      </a>
    </header>
  );
}

// ─── gateway: carousel of two doors ──────────────────────────────────────────

function StudioDoorArt() {
  return (
    <div style={{ position: 'relative', width: '100%', height: 180, overflow: 'hidden', background: PAPER }}>
      <svg viewBox="0 0 400 200" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.16 }}>
        <circle cx="320" cy="60" r="180" fill="none" stroke={INK} strokeWidth="0.8" />
        <circle cx="320" cy="60" r="120" fill="none" stroke={INK} strokeWidth="0.8" />
        <circle cx="320" cy="60" r="60" fill="none" stroke={INK} strokeWidth="0.8" />
      </svg>
      <div style={{
        position: 'absolute', left: 18, bottom: 14, fontFamily: SERIF_FF, fontStyle: 'italic',
        fontSize: 26, lineHeight: 1, letterSpacing: '-0.015em', color: INK, maxWidth: '80%', textWrap: 'balance',
      }}>
        Capsules <span style={{ color: ACCENT_BLUE }}>&</span> cinematic films
      </div>
    </div>
  );
}

function LabsDoorArt() {
  return (
    <div style={{ position: 'relative', width: '100%', height: 180, overflow: 'hidden', background: LABS_INK }}>
      <svg viewBox="0 0 400 200" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {Array.from({ length: 9 }).map((_, i) =>
          <line key={`v${i}`} x1={i * 50} y1="0" x2={i * 50} y2="200" stroke="rgba(232,230,223,0.08)" strokeWidth="1" />
        )}
        {Array.from({ length: 5 }).map((_, i) =>
          <line key={`h${i}`} x1="0" y1={i * 50} x2="400" y2={i * 50} stroke="rgba(232,230,223,0.08)" strokeWidth="1" />
        )}
      </svg>
      <div style={{
        position: 'absolute', left: 18, bottom: 14, fontFamily: SERIF_FF, fontStyle: 'italic',
        fontSize: 26, lineHeight: 1, letterSpacing: '-0.015em', color: LABS_PAPER, maxWidth: '80%', textWrap: 'balance',
      }}>
        Apps we'd want to <span style={{ color: ACCENT_BLUE }}>use</span> ourselves
      </div>
    </div>
  );
}

function MobDoorCard({ side, href }) {
  const isLabs = side === 'labs';
  const bg = isLabs ? LABS_INK : PAPER;
  const fg = isLabs ? LABS_PAPER : INK;
  const muted = isLabs ? LABS_MUTED : MUTED_C;
  const rule = isLabs ? LABS_RULE : RULE;
  const accent = isLabs ? ACCENT_BLUE : ACCENT_FOREST;

  const body = isLabs
    ? "Released when they're ready."
    : "Short, purpose-cut pieces for luxury and heritage builders.";

  return (
    <a href={href} style={{
      background: bg, color: fg, position: 'relative', overflow: 'hidden',
      border: `1px solid ${isLabs ? 'rgba(232,230,223,0.1)' : RULE}`,
      display: 'block', textDecoration: 'none',
    }}>
      {isLabs ? <LabsDoorArt /> : <StudioDoorArt />}
      <div style={{ padding: '18px 18px 20px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingBottom: 12, borderBottom: `1px solid ${rule}` }}>
          <MonoLabel color={accent} size={9}>{isLabs ? '02 / Labs' : '01 / Studio'}</MonoLabel>
          <MonoLabel color={muted} size={9}>Tap to enter</MonoLabel>
        </div>
        <p style={{
          margin: '14px 0 0', fontFamily: SERIF_FF, fontSize: 14, lineHeight: 1.5,
          color: isLabs ? 'rgba(232,230,223,0.78)' : 'rgba(14,14,14,0.78)',
          textWrap: 'pretty',
        }}>{body}</p>
        <div style={{
          marginTop: 16, paddingTop: 14, borderTop: `1px solid ${rule}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: accent,
        }}>
          <span style={{ fontFamily: MONO_FF, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>Enter</span>
          <svg width="22" height="10" viewBox="0 0 22 10"><path d="M 0 5 L 20 5 M 15 1 L 20 5 L 15 9" stroke={accent} strokeWidth="1.2" fill="none" /></svg>
        </div>
      </div>
    </a>
  );
}

function MobileGateway() {
  const [active, setActive] = useStateMOB(0);
  const trackRef = React.useRef(null);

  // Track scroll position to update the dot indicator
  useEffectMOB(() => {
    const el = trackRef.current;
    if (!el) return;
    const onScroll = () => {
      const i = Math.round(el.scrollLeft / Math.max(el.clientWidth * 0.86, 1));
      setActive(Math.max(0, Math.min(1, i)));
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div style={{ background: PAPER, color: INK, minHeight: '100vh', position: 'relative' }}>
      <MobTopBar />

      <div style={{ padding: '24px 20px 0' }}>
        <MonoLabel size={9}>{'⟐  A generative design practice  ·  NL  ·  MMXXVI'}</MonoLabel>
      </div>

      <section style={{ padding: '20px 20px 28px' }}>
        <h1 style={{
          fontFamily: SERIF_FF, fontWeight: 400, fontStyle: 'italic',
          fontSize: 56, lineHeight: 0.94, letterSpacing: '-0.02em',
          margin: 0, textWrap: 'balance', color: INK,
        }}>
          We design with <span style={{ color: ACCENT_BLUE }}>machines</span>.
        </h1>
        <p style={{
          marginTop: 22, fontFamily: SERIF_FF, fontSize: 16, lineHeight: 1.5,
          color: 'rgba(14,14,14,0.72)', textWrap: 'pretty',
        }}>
          A film studio and a software lab — two independent outputs from the same practice. Pick a door.
        </p>
      </section>

      <section style={{ paddingBottom: 24 }}>
        <div ref={trackRef} className="no-scrollbar" style={{
          display: 'flex', gap: 12, overflowX: 'auto', padding: '0 20px 8px',
          scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch',
        }}>
          <div style={{ flex: '0 0 86%', scrollSnapAlign: 'center' }}>
            <MobDoorCard side="studio" href="Studio.html" />
          </div>
          <div style={{ flex: '0 0 86%', scrollSnapAlign: 'center' }}>
            <MobDoorCard side="labs" href="Labs.html" />
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }}>
          {[0, 1].map(i => (
            <span key={i} style={{
              width: 5, height: 5, borderRadius: 999,
              background: i === active ? INK : 'rgba(14,14,14,0.25)',
              transition: 'background 240ms',
            }} />
          ))}
        </div>
      </section>

      <div style={{
        padding: '24px 20px 32px', display: 'flex', flexDirection: 'column', gap: 14,
        borderTop: `1px solid ${RULE_SOFT}`,
      }}>
        <MonoLabel size={9}>Two disciplines · One house</MonoLabel>
        <a href={`mailto:${EMAIL_USER}@${EMAIL_DOMAIN}`} style={{
          color: INK, textDecoration: 'none', fontFamily: SERIF_FF, fontStyle: 'italic',
          fontSize: 22, letterSpacing: '-0.01em', textWrap: 'balance', wordBreak: 'break-word',
        }}>
          {EMAIL_USER}<span style={{ color: ACCENT_BLUE, fontStyle: 'normal' }}>@</span>{EMAIL_DOMAIN}
        </a>
      </div>
    </div>
  );
}

// ─── studio: hero + capsule placeholder + note + contact ─────────────────────

function MobileStudio() {
  return (
    <div style={{ background: PAPER, color: INK, minHeight: '100vh', position: 'relative' }}>
      <MobTopBar />

      <section style={{ padding: '24px 20px 28px' }}>
        <MonoLabel size={9}>{'01 · Film studio  ·  Capsules & films'}</MonoLabel>
        <h1 style={{
          fontFamily: SERIF_FF, fontWeight: 400, fontStyle: 'italic',
          fontSize: 50, lineHeight: 0.96, letterSpacing: '-0.02em',
          margin: '18px 0 0', textWrap: 'balance', color: INK,
        }}>
          Short films for the <em style={{ color: ACCENT_FOREST }}>rooms</em> where deals get <span style={{ color: ACCENT_BLUE, textDecoration: 'underline', textDecorationThickness: '0.06em', textUnderlineOffset: '0.12em' }}>done</span>.
        </h1>
        <p style={{
          marginTop: 22, fontFamily: SERIF_FF, fontSize: 16, lineHeight: 1.55,
          color: 'rgba(14,14,14,0.82)', textWrap: 'pretty',
        }}>
          Cinematic work for luxury and heritage builders. We treat AI-generated footage as raw material — then cut, grade, and score it by hand into capsules: short pieces, purpose-cut for the channels buyers actually watch, stitched into longer cuts when a room asks for one. <em>The machine drafts; the edit decides.</em>
        </p>
      </section>

      <section id="capsules" style={{ padding: '0 20px 32px' }}>
        <div style={{ position: 'relative', aspectRatio: '16 / 9', width: '100%', overflow: 'hidden', background: '#0b1014' }}>
          <LazyStreamIframe
            src="https://iframe.videodelivery.net/7b75828b46a8ad0edcf4f3b1c8a6bede?autoplay=true&muted=true&loop=true&controls=false&preload=auto"
            title="Convallaria — capsule teaser"
          />
          <div style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%)',
          }} />
          <div style={{ position: 'absolute', top: 14, left: 14, pointerEvents: 'none' }}>
            <MonoLabel color="rgba(255,255,255,0.85)" size={9}>Capsule teaser · 0:30</MonoLabel>
          </div>
          <div style={{ position: 'absolute', left: 16, bottom: 14, color: PAPER, right: 16, pointerEvents: 'none' }}>
            <div style={{ marginBottom: 4 }}>
              <MonoLabel color="rgba(255,255,255,0.75)" size={8}>Fictional explorer yacht · Self-initiated</MonoLabel>
            </div>
            <div style={{ fontFamily: SERIF_FF, fontStyle: 'italic', fontSize: 32, lineHeight: 0.95, letterSpacing: '-0.015em' }}>
              Convallaria
            </div>
          </div>
        </div>

        <div style={{ marginTop: 20, paddingTop: 20, borderTop: `1px solid ${RULE_SOFT}`, display: 'flex', flexDirection: 'column', gap: 22 }}>
          <div>
            <MonoLabel size={9}>Brief</MonoLabel>
            <div style={{ marginTop: 8, fontFamily: SERIF_FF, fontSize: 16, lineHeight: 1.5, color: INK, textWrap: 'pretty' }}>
              A capsule teaser for <em style={{ color: ACCENT_FOREST }}>Convallaria</em> — a fictional explorer yacht named after the lily-of-the-valley. The kind of short piece we make for luxury builders — one of a set, purpose-cut per channel.
            </div>
          </div>
          <div>
            <MonoLabel size={9}>Method</MonoLabel>
            <div style={{ marginTop: 8, fontFamily: SERIF_FF, fontSize: 16, lineHeight: 1.5, color: INK, textWrap: 'pretty' }}>
              Generated footage, <em>hand-cut</em>. We work on top of current AI video tools — generating, then editing, grading, and scoring by hand. The speed is in the workflow; the craft is in the cut.
            </div>
          </div>
        </div>
      </section>

      <section id="note" style={{ padding: '40px 20px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          opacity: 0.04, pointerEvents: 'none', zIndex: 0,
        }}>
          <Mark size={420} ink={INK} accent={INK} haze={INK} showAccent={false} />
        </div>
        <div style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
          <MonoLabel size={9}>A note</MonoLabel>
          <p style={{
            marginTop: 20, fontFamily: SERIF_FF, fontSize: 22, lineHeight: 1.42, color: INK,
            textWrap: 'balance',
          }}>
            AI footage cuts the cost and timeline of a traditional shoot to a fraction — no crew, no location, no two-week edit bay. We use the savings to make <em>more</em> work for the same room, not cheaper work.
          </p>
          <p style={{
            marginTop: 18, fontFamily: SERIF_FF, fontStyle: 'italic', fontSize: 15,
            lineHeight: 1.5, color: 'rgba(14,14,14,0.62)', textWrap: 'balance',
          }}>
            “The machine can draft a thousand mornings. The job is to choose the one that feels like a morning.”
          </p>
        </div>
      </section>

      <section id="contact" style={{ padding: '40px 20px 56px', borderTop: `1px solid ${RULE}` }}>
        <MonoLabel size={9}>Write to the studio</MonoLabel>
        <a href={`mailto:${EMAIL_USER}@${EMAIL_DOMAIN}?subject=Studio%20enquiry`} style={{
          display: 'block', marginTop: 20, color: INK, textDecoration: 'none',
          fontFamily: SERIF_FF, fontStyle: 'italic',
          fontSize: 42, lineHeight: 0.98, letterSpacing: '-0.02em', textWrap: 'balance',
          wordBreak: 'break-word',
        }}>
          {EMAIL_USER}<span style={{ color: ACCENT_FOREST, fontStyle: 'normal' }}>@</span>{EMAIL_DOMAIN}
        </a>
      </section>

      <footer style={{
        padding: '20px', borderTop: `1px solid ${RULE_SOFT}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Mark size={14} accent={ACCENT_BLUE} ink={INK} haze={INK} showAccent={true} />
          <MonoLabel size={8}>© 2026 generative.studio</MonoLabel>
        </div>
        <a href="/" style={{ color: MUTED_C, textDecoration: 'none' }}>
          <MonoLabel size={8} color={MUTED_C}>← Gateway</MonoLabel>
        </a>
      </footer>
    </div>
  );
}

// ─── labs: hero + product card + contact ─────────────────────────────────────

// Mobile-sized port of the MealChat tile glyph. (Desktop labs.jsx already
// owns a full-fidelity version; this is a cheaper render tuned for small tiles.)
function MobMealChatTile({ size = 220 }) {
  const MC_BG = '#FDFAF6';
  const MC_PRIMARY = '#2D6A4F';
  const MC_ACCENT = '#E07A5F';
  const SIZE = size;
  const c = SIZE / 2;
  const k = SIZE * 0.42;
  const squircle = `M 0 ${c} C 0 ${c - k}, ${c - k} 0, ${c} 0 C ${c + k} 0, ${SIZE} ${c - k}, ${SIZE} ${c} C ${SIZE} ${c + k}, ${c + k} ${SIZE}, ${c} ${SIZE} C ${c - k} ${SIZE}, 0 ${c + k}, 0 ${c} Z`;
  const w = SIZE * 0.62, h = SIZE * 0.34;
  const rimY = -h * 0.2, baseY = rimY + h, corner = SIZE * 0.18;
  const steamTop = rimY - SIZE * 0.30, steamBot = rimY - SIZE * 0.06;
  const cx = SIZE / 2, cy = SIZE / 2 + SIZE * 0.06;

  return (
    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} style={{ display: 'block' }}>
      <defs>
        <clipPath id={`mc-mob-clip-${SIZE}`} clipPathUnits="userSpaceOnUse">
          <path d={squircle} />
        </clipPath>
      </defs>
      <path d={squircle} fill={MC_PRIMARY} />
      <g clipPath={`url(#mc-mob-clip-${SIZE})`}>
        <g transform={`translate(${cx}, ${cy})`}>
          <g stroke={MC_ACCENT} strokeWidth={SIZE * 0.03} strokeLinecap="round" fill="none">
            <path d={`M ${-w * 0.22} ${steamBot} C ${-w * 0.3} ${(steamBot + steamTop) / 2}, ${-w * 0.14} ${(steamBot + steamTop) / 2}, ${-w * 0.22} ${steamTop}`} />
            <path d={`M 0 ${steamBot - SIZE * 0.02} C ${-SIZE * 0.05} ${(steamBot + steamTop) / 2}, ${SIZE * 0.05} ${(steamBot + steamTop) / 2}, 0 ${steamTop - SIZE * 0.02}`} />
            <path d={`M ${w * 0.22} ${steamBot} C ${w * 0.14} ${(steamBot + steamTop) / 2}, ${w * 0.3} ${(steamBot + steamTop) / 2}, ${w * 0.22} ${steamTop}`} />
          </g>
          <path d={`M ${-w / 2} ${rimY} L ${w / 2} ${rimY} L ${w / 2} ${baseY - corner} Q ${w / 2} ${baseY}, ${w / 2 - corner} ${baseY} L ${-w / 2 + corner} ${baseY} Q ${-w / 2} ${baseY}, ${-w / 2} ${baseY - corner} Z`} fill={MC_BG} />
          <path d={`M ${w / 2 - SIZE * 0.005} ${rimY + h * 0.18} L ${w / 2 + SIZE * 0.13} ${rimY + h * 0.55} L ${w / 2 - SIZE * 0.005} ${rimY + h * 0.62} Z`} fill={MC_BG} />
          <line x1={-w / 2 + SIZE * 0.06} y1={rimY + SIZE * 0.05} x2={w / 2 - SIZE * 0.06} y2={rimY + SIZE * 0.05} stroke={MC_ACCENT} strokeWidth={SIZE * 0.025} strokeLinecap="round" />
        </g>
      </g>
    </svg>
  );
}

function MobileLabs() {
  return (
    <div style={{ background: LABS_INK, color: LABS_PAPER, minHeight: '100vh', position: 'relative' }}>
      <MobTopBar dark={true} />

      <section style={{ padding: '20px 20px 36px', position: 'relative', overflow: 'hidden' }}>
        <svg viewBox="0 0 400 600" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5, pointerEvents: 'none' }}>
          {Array.from({ length: 9 }).map((_, i) =>
            <line key={`v${i}`} x1={i * 50} y1="0" x2={i * 50} y2="600" stroke="rgba(232,230,223,0.04)" strokeWidth="1" />
          )}
          {Array.from({ length: 13 }).map((_, i) =>
            <line key={`h${i}`} x1="0" y1={i * 50} x2="400" y2={i * 50} stroke="rgba(232,230,223,0.04)" strokeWidth="1" />
          )}
        </svg>
        <div style={{ position: 'relative' }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            paddingBottom: 14, borderBottom: `1px solid ${LABS_RULE}`,
          }}>
            <MonoLabel color={LABS_MUTED} size={9}>{'// Labs'}</MonoLabel>
            <MonoLabel color={LABS_MUTED} size={9}><span style={{ color: ACCENT_BLUE }}>●</span> 01 in development</MonoLabel>
          </div>

          <h1 style={{
            fontFamily: SERIF_FF, fontWeight: 400, fontStyle: 'italic',
            fontSize: 56, lineHeight: 0.94, letterSpacing: '-0.02em',
            margin: '32px 0 0', textWrap: 'balance', color: LABS_PAPER,
          }}>
            Tools we'd want to <span style={{ color: ACCENT_BLUE }}>use</span> ourselves.
          </h1>

          <p style={{
            marginTop: 22, fontFamily: SERIF_FF, fontSize: 16, lineHeight: 1.55,
            color: 'rgba(232,230,223,0.78)', textWrap: 'pretty',
          }}>
            Consumer apps and generative utilities. We make the things we wish existed, and release them when they're ready.
          </p>
        </div>
      </section>

      <section id="products" style={{ padding: '0 20px 40px' }}>
        <div style={{ paddingBottom: 16, borderBottom: `1px solid ${LABS_RULE}` }}>
          <h2 style={{ margin: 0, fontFamily: SERIF_FF, fontStyle: 'italic', fontWeight: 400, fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em', color: LABS_PAPER }}>
            Our projects
          </h2>
        </div>

        <article style={{ marginTop: 20, border: `1px solid ${LABS_RULE}`, background: 'rgba(232,230,223,0.02)' }}>
          <div style={{ aspectRatio: '1 / 1', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#FDFAF6' }}>
            <MobMealChatTile size={220} />
          </div>
          <div style={{ padding: '22px 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <MonoLabel color={LABS_MUTED} size={9}>Consumer · mobile + web</MonoLabel>
              <MonoLabel color="#E07A5F" size={9}>● Coming soon</MonoLabel>
            </div>
            <div style={{ fontFamily: SERIF_FF, fontStyle: 'italic', fontSize: 44, lineHeight: 0.98, letterSpacing: '-0.02em', color: LABS_PAPER, textWrap: 'balance' }}>
              Will be announced soon
            </div>
            <p style={{ fontFamily: SERIF_FF, fontSize: 16, lineHeight: 1.55, color: 'rgba(232,230,223,0.82)', margin: 0, textWrap: 'pretty' }}>
              An AI meal-suggestion app. Tell it what's in the pantry; it proposes meals — conversational, not a database. The first project to be released out of our Labs.
            </p>
            <div style={{ marginTop: 6, paddingTop: 18, borderTop: `1px solid ${LABS_RULE_SOFT}`, display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 18, rowGap: 12 }}>
              <div>
                <MonoLabel size={8} color={LABS_MUTED}>Platforms</MonoLabel>
                <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 5 }}>
                  {['iOS', 'Android', 'Web'].map((p) =>
                    <span key={p} style={{
                      fontFamily: MONO_FF, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
                      color: LABS_PAPER, padding: '3px 7px', border: `1px solid ${LABS_RULE}`,
                    }}>{p}</span>
                  )}
                </div>
              </div>
              <div>
                <MonoLabel size={8} color={LABS_MUTED}>Status</MonoLabel>
                <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#E07A5F', boxShadow: '0 0 0 3px rgba(224,122,95,0.18)' }} />
                  <span style={{ fontFamily: SERIF_FF, fontSize: 13, color: LABS_PAPER }}>Coming soon</span>
                </div>
              </div>
            </div>
          </div>
        </article>
      </section>

      <section id="contact" style={{ padding: '40px 20px 56px', borderTop: `1px solid ${LABS_RULE}` }}>
        <MonoLabel color={LABS_MUTED} size={9}>{'// Write to labs'}</MonoLabel>
        <a href={`mailto:${EMAIL_USER}@${EMAIL_DOMAIN}?subject=Labs%20enquiry`} style={{
          display: 'block', marginTop: 20, color: LABS_PAPER, textDecoration: 'none',
          fontFamily: SERIF_FF, fontStyle: 'italic',
          fontSize: 42, lineHeight: 0.98, letterSpacing: '-0.02em', textWrap: 'balance',
          wordBreak: 'break-word',
        }}>
          {EMAIL_USER}<span style={{ color: ACCENT_BLUE, fontStyle: 'normal' }}>@</span>{EMAIL_DOMAIN}
        </a>
      </section>

      <footer style={{
        padding: '20px', borderTop: `1px solid ${LABS_RULE_SOFT}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Mark size={14} accent={ACCENT_BLUE} ink={LABS_PAPER} haze={LABS_PAPER} showAccent={true} />
          <MonoLabel size={8} color={LABS_MUTED}>© 2026 generative.studio</MonoLabel>
        </div>
        <a href="/" style={{ color: LABS_MUTED, textDecoration: 'none' }}>
          <MonoLabel size={8} color={LABS_MUTED}>← Gateway</MonoLabel>
        </a>
      </footer>
    </div>
  );
}

Object.assign(window, {
  Responsive, useIsMobile, MobileGateway, MobileStudio, MobileLabs,
});