/* Pleet × SQ4D — Full Landing Page
   Signal color: RGB(214, 255, 59) = #D6FF3B
   5 palettes × light/dark modes. Vivacious motion throughout.
*/

const LIME = '#D6FF3B';
const LIME_DIM = '#B8DE1F';
const LIME_SOFT = 'rgba(214,255,59,0.14)';

// Each palette defines light + dark variants. Accent is always the lime (or a tuned pair).
const PALETTES = {
  'void': {
    label: 'Void · black + lime',
    light: {
      bg: '#F5F5F3', ink: '#000000', muted: '#5C5C58', accent: LIME, accentInk: '#000000',
      soft: '#EDEDE9', line: 'rgba(0,0,0,0.12)', card: '#FFFFFF', glow: LIME,
    },
    dark: {
      bg: '#000000', ink: '#F5F5F3', muted: 'rgba(245,245,243,0.55)', accent: LIME, accentInk: '#000000',
      soft: '#0B0B0B', line: 'rgba(245,245,243,0.1)', card: '#0F0F10', glow: LIME,
    },
  },
  'concrete': {
    label: 'Concrete · warm charcoal + lime',
    light: {
      bg: '#EDE8DC', ink: '#26231D', muted: '#73695C', accent: '#2B2823', accentInk: LIME,
      soft: '#DDD5C3', line: 'rgba(38,35,29,0.14)', card: '#F7F3E8', glow: LIME,
      partnerBg: '#2B2823', partnerInk: '#F1EEE6', partnerAccent: LIME, partnerAccentInk: '#2B2823',
      partnerMuted: 'rgba(241,238,230,0.62)', partnerLine: 'rgba(241,238,230,0.14)',
    },
    dark: {
      bg: '#201D18', ink: '#F1EEE6', muted: 'rgba(241,238,230,0.62)', accent: LIME, accentInk: '#201D18',
      soft: '#2B2823', line: 'rgba(241,238,230,0.1)', card: '#262320', glow: LIME,
      partnerBg: '#201D18', partnerInk: '#F1EEE6', partnerAccent: LIME, partnerAccentInk: '#201D18',
      partnerMuted: 'rgba(241,238,230,0.6)', partnerLine: 'rgba(241,238,230,0.14)',
    },
  },
  'dusk': {
    label: 'Dusk · midnight navy + lime',
    light: {
      bg: '#F0F3FA', ink: '#0A1326', muted: '#4A5A7A', accent: LIME_DIM, accentInk: '#0A1326',
      soft: '#E2E8F3', line: 'rgba(10,19,38,0.1)', card: '#FFFFFF', glow: LIME,
    },
    dark: {
      bg: '#0A1326', ink: '#E8ECF5', muted: 'rgba(232,236,245,0.55)', accent: LIME, accentInk: '#0A1326',
      soft: '#121D35', line: 'rgba(232,236,245,0.1)', card: '#0F1830', glow: LIME,
    },
  },
  'bloom': {
    label: 'Bloom · forest + lime',
    light: {
      bg: '#EEF2E4', ink: '#12251B', muted: '#4F6258', accent: '#12251B', accentInk: LIME,
      soft: '#DCE4CE', line: 'rgba(18,37,27,0.14)', card: '#FAFBF5', glow: LIME,
      partnerBg: '#12251B', partnerInk: '#EEF2E4', partnerAccent: LIME, partnerAccentInk: '#12251B',
      partnerMuted: 'rgba(238,242,228,0.62)', partnerLine: 'rgba(238,242,228,0.14)',
    },
    dark: {
      bg: '#0E2018', ink: '#F4F5EF', muted: 'rgba(244,245,239,0.62)', accent: LIME, accentInk: '#0E2018',
      soft: '#152A20', line: 'rgba(244,245,239,0.1)', card: '#13271D', glow: LIME,
      partnerBg: '#0E2018', partnerInk: '#F4F5EF', partnerAccent: LIME, partnerAccentInk: '#0E2018',
      partnerMuted: 'rgba(244,245,239,0.62)', partnerLine: 'rgba(244,245,239,0.14)',
    },
  },
  'signal': {
    label: 'Signal · lime-forward',
    light: {
      bg: LIME, ink: '#0B0B0B', muted: 'rgba(11,11,11,0.55)', accent: '#0B0B0B', accentInk: LIME,
      soft: '#C2EA2E', line: 'rgba(11,11,11,0.18)', card: '#E5FF5A', glow: '#0B0B0B',
    },
    dark: {
      bg: '#0B0B0B', ink: LIME, muted: 'rgba(214,255,59,0.55)', accent: LIME, accentInk: '#0B0B0B',
      soft: '#111111', line: 'rgba(214,255,59,0.12)', card: '#131313', glow: LIME,
    },
  },
};

const STAT_LIBRARY = {
  cost:   { n: '50%+',   label: 'Lower cost than traditional construction', sub: 'vs. comparable stick-built homes in our markets' },
  labor:  { n: '~70%',   label: 'Reduction in on-site labor hours',         sub: 'Gantry replaces the framing + masonry crew' },
  co2:    { n: '~0',     label: 'Job-site waste',                           sub: 'Concrete metered to the layer. No dumpsters, no offcuts.' },
  power:  { n: '1.5 kW', label: 'Peak power draw',                          sub: 'Less than a residential hairdryer' },
  speed:  { n: '<48h',   label: 'Wall print time',                          sub: 'Foundation to fully printed envelope' },
  permit: { n: 'FHA',    label: 'Approved construction method',             sub: 'Built on the first FHA-approved 3D-printed home system' },
};

function getPalette(name, mode) {
  const p = PALETTES[name] || PALETTES['void'];
  const base = p[mode] || p.light;
  // Fallback partner/footer fields for palettes that don't define them
  return {
    partnerBg: base.partnerBg || base.ink,
    partnerInk: base.partnerInk || base.bg,
    partnerAccent: base.partnerAccent || base.accent,
    partnerAccentInk: base.partnerAccentInk || base.accentInk,
    partnerMuted: base.partnerMuted || 'rgba(255,255,255,0.62)',
    partnerLine: base.partnerLine || 'rgba(255,255,255,0.14)',
    ...base,
  };
}

/* ============================================================
   Scroll reveal hook — fade+rise as element enters viewport
   ============================================================ */
function useReveal() {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setShown(true); obs.disconnect(); }
    }, { threshold: 0.1, rootMargin: '0px 0px -80px 0px' });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, shown];
}

function Reveal({ children, delay = 0, y = 24, style: userStyle = {} }) {
  const [ref, shown] = useReveal();
  return (
    <div ref={ref} style={{
      ...userStyle,
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : `translateY(${y}px)`,
      transition: `opacity 0.9s cubic-bezier(0.2,0.7,0.2,1) ${delay}ms, transform 0.9s cubic-bezier(0.2,0.7,0.2,1) ${delay}ms`,
    }}>
      {children}
    </div>
  );
}

/* Animated counter for numeric stats */
function useCountUp(target, active, duration = 1400) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, active, duration]);
  return val;
}

/* ============================================================
   NAV — with mode toggle
   ============================================================ */
function Nav({ p, mode, onToggleMode }) {
  return (
    <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'Inter, sans-serif' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <PleetMark color={p.ink} accent={p.accent} height={26} />
      </div>
      <div style={{ display: 'flex', gap: 36, fontSize: 13, letterSpacing: '0.02em', color: p.ink }}>
        {['Technology', 'Homes', 'Process', 'Press', 'Contact'].map(l => (
          <a key={l} className="nav-link" style={{ color: p.ink, textDecoration: 'none', cursor: 'pointer', position: 'relative', paddingBottom: 4 }}>
            {l}
          </a>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <ModeToggle p={p} mode={mode} onToggle={onToggleMode} />
        <button style={btnPrimary(p)}>Join waitlist →</button>
      </div>
    </nav>
  );
}

function ModeToggle({ p, mode, onToggle }) {
  return (
    <button
      onClick={onToggle}
      aria-label="Toggle light/dark mode"
      style={{
        width: 52, height: 28, borderRadius: 999, border: `1px solid ${p.line}`,
        background: p.soft, position: 'relative', cursor: 'pointer', padding: 0,
        transition: 'background 0.25s',
      }}>
      <div style={{
        position: 'absolute', top: 2, left: mode === 'dark' ? 26 : 2,
        width: 22, height: 22, borderRadius: '50%', background: p.accent,
        transition: 'left 0.3s cubic-bezier(0.2,0.7,0.2,1)',
        boxShadow: `0 0 12px ${p.glow}55`,
      }} />
    </button>
  );
}

/* ============================================================
   HERO
   ============================================================ */
function Hero({ p, activeStats, mode, onToggleMode }) {
  const [ref, shown] = useReveal();
  return (
    <section style={{
      background: p.bg, color: p.ink, padding: '40px 56px 72px',
      fontFamily: 'Inter, sans-serif', position: 'relative', overflow: 'hidden',
    }}>
      {/* Ambient glow */}
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 600, height: 600,
        background: `radial-gradient(circle, ${p.glow}22 0%, transparent 60%)`,
        pointerEvents: 'none',
      }} />

      <Nav p={p} mode={mode} onToggleMode={onToggleMode} />

      <div ref={ref} style={{
        fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.2em',
        textTransform: 'uppercase', color: p.muted, marginTop: 72, marginBottom: 24,
        display: 'flex', alignItems: 'center', gap: 12,
        opacity: shown ? 1 : 0, transition: 'opacity 0.8s',
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%', background: p.accent,
          boxShadow: `0 0 12px ${p.glow}`,
          animation: 'pulse 2s infinite',
        }} />
        <span style={{ width: 24, height: 1, background: p.muted }} />
        Technology partner — SQ4D · ARCS™ Gantry System
      </div>

      <h1 style={{
        fontFamily: '"Instrument Serif", serif',
        fontSize: 136, lineHeight: 0.9, letterSpacing: '-0.04em',
        fontWeight: 400, margin: 0, maxWidth: 1200, textWrap: 'balance',
        opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(30px)',
        transition: 'opacity 1s cubic-bezier(0.2,0.7,0.2,1) 0.1s, transform 1s cubic-bezier(0.2,0.7,0.2,1) 0.1s',
      }}>
        Homes printed<br />
        from concrete,<br />
        <em style={{
          fontStyle: 'italic',
          background: `linear-gradient(90deg, ${p.accent} 0%, ${p.accent} 100%)`,
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          backgroundClip: 'text',
          filter: `drop-shadow(0 0 30px ${p.glow}44)`,
        }}>in a weekend.</em>
      </h1>

      <Reveal delay={400}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 56, alignItems: 'end' }}>
          <p style={{ fontSize: 19, lineHeight: 1.5, maxWidth: 560, color: p.muted, margin: 0 }}>
            Pleet builds single-family homes using SQ4D&apos;s Autonomous Robotic Construction
            System — a gantry that lays structural concrete walls on site, to plan, with the
            labor of a small crew.
          </p>
          <div style={{ display: 'flex', gap: 12, justifySelf: 'end' }}>
            <button style={btnGhost(p)}>Watch the build ↗</button>
            <button style={btnPrimary(p)}>Reserve a home →</button>
          </div>
        </div>
      </Reveal>

      {/* Hero media — real SQ4D photo with timelapse overlay */}
      <Reveal delay={600} style={{ marginTop: 64 }}>
        <div style={{
          background: p.card, border: `1px solid ${p.line}`,
          padding: 16, position: 'relative',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: p.muted }}>
              FIG. 01 / SQ4D ARCS™ — TIMELAPSE
            </span>
            <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: p.accent, display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: p.accent, boxShadow: `0 0 8px ${p.glow}` }} />
              LIVE
            </span>
          </div>
          <TimelapseHero p={p} src="assets/sq4d-printer.webp" />

          <div style={{
            display: 'grid', gridTemplateColumns: `repeat(${activeStats.length}, 1fr)`,
            borderTop: `1px solid ${p.line}`, marginTop: 16,
          }}>
            {activeStats.map((key, i) => {
              const s = STAT_LIBRARY[key];
              if (!s) return null;
              return (
                <div key={key} style={{
                  padding: '20px 24px',
                  borderLeft: i > 0 ? `1px solid ${p.line}` : 'none',
                }}>
                  <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 44, lineHeight: 1, letterSpacing: '-0.03em', color: p.accent }}>{s.n}</div>
                  <div style={{ fontSize: 13, marginTop: 6, color: p.ink, fontWeight: 500 }}>{s.label}</div>
                  <div style={{ fontSize: 11, marginTop: 4, color: p.muted, lineHeight: 1.4 }}>{s.sub}</div>
                </div>
              );
            })}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

/* ============================================================
   MARQUEE TICKER — milestones scrolling
   ============================================================ */
function MilestoneTicker({ p }) {
  const items = [
    'First permitted 3D-printed home in the US',
    'First FHA-approved construction method',
    'First MLS-listed 3D-printed home sold',
    'ARCS™ gantry — autonomous, layer-precise',
    'Concrete extrusion at ±2mm tolerance',
    '46′ wall span, single envelope',
  ];
  const doubled = [...items, ...items];
  return (
    <div style={{
      background: p.accent, color: p.accentInk, padding: '16px 0',
      overflow: 'hidden', position: 'relative',
      borderTop: `1px solid ${p.ink}`, borderBottom: `1px solid ${p.ink}`,
    }}>
      <div style={{
        display: 'flex', gap: 48, whiteSpace: 'nowrap',
        animation: 'marquee 40s linear infinite',
        fontFamily: 'ui-monospace, monospace', fontSize: 14, letterSpacing: '0.08em',
        fontWeight: 600, textTransform: 'uppercase',
      }}>
        {doubled.map((t, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 48 }}>
            {t}
            <span style={{ fontSize: 20, lineHeight: 0 }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   STATS BAND
   ============================================================ */
function StatsBand({ p, activeStats }) {
  return (
    <section style={{
      background: p.soft, padding: '96px 56px',
      borderTop: `1px solid ${p.line}`, borderBottom: `1px solid ${p.line}`,
      fontFamily: 'Inter, sans-serif',
    }}>
      <Reveal>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 48,
        }}>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.muted, marginBottom: 12 }}>
              § 01 — By the numbers
            </div>
            <h2 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 64, lineHeight: 1, letterSpacing: '-0.03em', margin: 0, color: p.ink }}>
              The math of a <em style={{ color: p.accent, fontStyle: 'italic' }}>printed home.</em>
            </h2>
          </div>
          <div style={{ fontSize: 13, color: p.muted, maxWidth: 320, textAlign: 'right' }}>
            Figures reflect SQ4D ARCS™ system performance on Pleet-built projects. Market comparisons use stick-built medians.
          </div>
        </div>
      </Reveal>

      <div style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${Math.min(activeStats.length, 3)}, 1fr)`,
        gap: 0, border: `1px solid ${p.line}`, background: p.card,
      }}>
        {activeStats.map((key, i) => {
          const s = STAT_LIBRARY[key];
          if (!s) return null;
          return (
            <StatCard key={key} s={s} p={p} i={i} />
          );
        })}
      </div>
    </section>
  );
}

function StatCard({ s, p, i }) {
  const [ref, shown] = useReveal();
  return (
    <div ref={ref} style={{
      padding: '56px 40px',
      borderLeft: i > 0 && i % 3 !== 0 ? `1px solid ${p.line}` : 'none',
      borderTop: i >= 3 ? `1px solid ${p.line}` : 'none',
      position: 'relative', overflow: 'hidden', cursor: 'default',
      transition: 'background 0.3s',
    }}
    onMouseEnter={e => e.currentTarget.style.background = p.soft}
    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: p.accent,
        transform: shown ? 'scaleX(1)' : 'scaleX(0)',
        transformOrigin: 'left', transition: `transform 1.2s cubic-bezier(0.2,0.7,0.2,1) ${i * 0.1}s`,
      }} />
      <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: p.muted, marginBottom: 16 }}>
        0{i + 1}
      </div>
      <div style={{
        fontFamily: '"Instrument Serif", serif', fontSize: 108, lineHeight: 0.9,
        letterSpacing: '-0.04em', color: p.accent, fontWeight: 400,
        opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(20px)',
        transition: `opacity 1s cubic-bezier(0.2,0.7,0.2,1) ${i * 0.1 + 0.2}s, transform 1s cubic-bezier(0.2,0.7,0.2,1) ${i * 0.1 + 0.2}s`,
      }}>
        {s.n}
      </div>
      <div style={{ fontSize: 17, marginTop: 16, color: p.ink, fontWeight: 500, lineHeight: 1.3 }}>
        {s.label}
      </div>
      <div style={{ fontSize: 13, marginTop: 8, color: p.muted, lineHeight: 1.5 }}>
        {s.sub}
      </div>
    </div>
  );
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
function HowItWorks({ p }) {
  const steps = [
    { n: '01', t: 'Site + foundation', d: 'Pleet handles permitting, grading, and conventional foundation pour. The gantry rails arrive on a flatbed.', tag: 'PROC-01 · site prep + survey marks', ratio: '4/5' },
    { n: '02', t: 'Gantry assembly',   d: 'Two towers + a top beam are erected over the foundation in half a day. The print head carriage rides the beam on both axes.', tag: 'PROC-02 · gantry assembly, crew of 3', ratio: '4/5' },
    { n: '03', t: 'Print walls',       d: 'Concrete extrudes layer-by-layer, following the plan exactly. Windows, doors, conduits are built in as openings.', tag: 'PROC-03 · printing, close-up of nozzle', ratio: '4/5' },
    { n: '04', t: 'Finish + move in',  d: 'Roof, mechanicals, and interior finish follow conventional trades. Walls are ready to receive.', tag: 'PROC-04 · finished exterior', ratio: '4/5' },
  ];
  return (
    <section style={{ background: p.bg, padding: '96px 56px', color: p.ink, fontFamily: 'Inter, sans-serif' }}>
      <Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 48, marginBottom: 64, alignItems: 'end' }}>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.muted, marginBottom: 12 }}>
              § 02 — Process
            </div>
            <h2 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 80, lineHeight: 1, letterSpacing: '-0.03em', margin: 0 }}>
              Four steps from <em style={{ color: p.accent, fontStyle: 'italic' }}>dirt to keys.</em>
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: p.muted, margin: 0, maxWidth: 520, justifySelf: 'end' }}>
            Printing replaces framing and masonry. Everything else — foundation, roof, MEP,
            finish — follows conventional trades a homeowner would recognize.
          </p>
        </div>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 120}>
            <div className="proc-card" style={{ cursor: 'default' }}>
              <div style={{
                aspectRatio: s.ratio, background: p.soft, border: `1px solid ${p.line}`,
                position: 'relative', overflow: 'hidden', marginBottom: 20,
                backgroundImage: `repeating-linear-gradient(135deg, ${p.line} 0, ${p.line} 1px, transparent 1px, transparent 12px)`,
                transition: 'transform 0.4s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.4s',
              }}>
                <div style={{
                  position: 'absolute', top: 12, left: 12,
                  fontFamily: 'ui-monospace, monospace', fontSize: 10,
                  letterSpacing: '0.12em', color: p.accent, fontWeight: 600,
                }}>
                  {s.tag}
                </div>
                <div style={{
                  position: 'absolute', top: 12, right: 12, width: 36, height: 36,
                  border: `1px solid ${p.accent}`, borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'ui-monospace, monospace', fontSize: 11, color: p.accent, fontWeight: 600,
                }}>
                  {s.n}
                </div>
                <div style={{
                  position: 'absolute', bottom: 12, left: 12, right: 12,
                  fontFamily: 'ui-monospace, monospace', fontSize: 10,
                  lineHeight: 1.4, color: p.muted,
                }}>
                  Placeholder · pending asset
                </div>
              </div>
              <h3 style={{ fontSize: 24, fontWeight: 600, margin: 0, marginBottom: 12, letterSpacing: '-0.01em' }}>
                {s.t}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: p.muted, margin: 0 }}>
                {s.d}
              </p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   TECHNOLOGY PARTNER — SQ4D
   ============================================================ */
function TechPartner({ p }) {
  const bg = p.partnerBg, ink = p.partnerInk, accent = p.partnerAccent;
  const muted = p.partnerMuted, line = p.partnerLine;
  return (
    <section style={{
      background: bg, color: ink, padding: '112px 56px',
      fontFamily: 'Inter, sans-serif', position: 'relative', overflow: 'hidden',
    }}>
      {/* Ambient lime glow */}
      <div style={{
        position: 'absolute', bottom: -300, left: -200, width: 800, height: 800,
        background: `radial-gradient(circle, ${accent}15 0%, transparent 60%)`,
        pointerEvents: 'none',
      }} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'start', position: 'relative' }}>
        <Reveal>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent, marginBottom: 20 }}>
              § 03 — Technology partner
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, marginBottom: 32 }}>
              <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 52, letterSpacing: '-0.02em' }}>
                Pleet
              </div>
              <div style={{ fontSize: 28, color: muted }}>×</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 40, fontWeight: 800, letterSpacing: '-0.02em' }}>
                SQ4D
              </div>
            </div>
            <h2 style={{
              fontFamily: '"Instrument Serif", serif', fontSize: 68, lineHeight: 1.08,
              letterSpacing: '-0.03em', margin: 0, marginBottom: 36, textWrap: 'pretty',
            }}>
              Built on the system that <em style={{ fontStyle: 'italic', color: accent }}>wrote the rulebook.</em>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: muted, maxWidth: 540, margin: 0, marginBottom: 32 }}>
              SQ4D&apos;s Autonomous Robotic Construction System (ARCS™) is the gantry platform
              that produced the first permitted, the first FHA-approved, and the first
              MLS-listed 3D-printed homes in the United States. Pleet is the home builder
              that deploys it — permits, crews, design, delivery.
            </p>

            <div style={{ borderTop: `1px solid ${line}`, paddingTop: 32 }}>
              {[
                ['First permitted', '3D-printed home in the US'],
                ['First FHA-approved', '3D-printed construction method'],
                ['First MLS-listed', '3D-printed home sold to a buyer'],
                ['ARCS™ gantry', 'On-site, autonomous, layer-precise'],
              ].map(([a, b], i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '220px 1fr auto', gap: 24,
                  padding: '22px 0', borderBottom: i < 3 ? `1px solid ${line}` : 'none',
                  alignItems: 'center',
                }}>
                  <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 30, color: accent, letterSpacing: '-0.02em' }}>
                    {a}
                  </div>
                  <div style={{ fontSize: 15, color: ink, opacity: 0.9 }}>{b}</div>
                  <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: muted }}>
                    SQ4D
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={200}>
          <div style={{ position: 'sticky', top: 40 }}>
            <div style={{
              background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(20px)',
              border: `1px solid ${line}`, padding: 32,
              boxShadow: `0 40px 80px ${accent}10`,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24 }}>
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: accent }}>
                  ARCS™ / SPEC SHEET
                </div>
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: muted }}>
                  SQ4D, INC.
                </div>
              </div>
              <div style={{ marginBottom: 24, position: 'relative', overflow: 'hidden', border: `1px solid ${line}` }}>
                <img src="assets/sq4d-printer.webp" alt="SQ4D ARCS gantry on site"
                  style={{ width: '100%', height: 300, objectFit: 'cover', display: 'block', filter: 'saturate(0.9) contrast(1.05)' }} />
                <div style={{
                  position: 'absolute', inset: 0,
                  background: `linear-gradient(180deg, transparent 50%, ${bg}aa 100%)`,
                  pointerEvents: 'none',
                }} />
                <div style={{ position: 'absolute', bottom: 12, left: 12, fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: accent }}>
                  SQ4D ARCH 4.2 (XL) · 70′ × 200′ PRINT WINDOW
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, fontSize: 13 }}>
                {[
                  ['Footprint', 'Up to 46′ wall span'],
                  ['Axes', 'X, Y, Z gantry + rotate'],
                  ['Material', 'Proprietary concrete mix'],
                  ['Power', '~1.5 kW peak draw'],
                  ['Operation', 'Crew of 3, supervised'],
                  ['Precision', 'Layer-accurate to plan'],
                ].map(([k, v]) => (
                  <div key={k}>
                    <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, color: muted, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>
                      {k}
                    </div>
                    <div style={{ color: ink, fontWeight: 500 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   GALLERY
   ============================================================ */
function Gallery({ p }) {
  // Mix real photos (with distinct crops/treatments) and procedural SVG renderings
  // to give visual variety without inventing imagery we don't have.
  const tiles = [
    { kind: 'photo', src: 'assets/sq4d-printer.webp', span: 4, ratio: '21/9',
      tag: 'GAL-01 · SQ4D ARCS gantry, dusk pour', title: 'Layered concrete envelope at 12 in/hr',
      crop: { x: '50%', y: '60%', scale: 1.0 } },
    { kind: 'photo', src: 'assets/hero-aerial.webp', span: 2, ratio: '4/3',
      tag: 'GAL-02 · Site context', title: 'Pilot subdivision, Oklahoma',
      crop: { x: '50%', y: '40%', scale: 1.0 } },
    { kind: 'plan', span: 2, ratio: '4/3',
      tag: 'GAL-03 · Plan · Lot M-014B', title: 'L-plan, 1,840 sqft, 3 bed / 2 bath' },
    { kind: 'photo', src: 'assets/sq4d-printer.webp', span: 2, ratio: '1/1',
      tag: 'GAL-04 · Wall detail', title: 'Extrusion bead · ±2mm tolerance',
      crop: { x: '70%', y: '50%', scale: 2.4 }, treat: 'mono' },
    { kind: 'iso', span: 2, ratio: '1/1',
      tag: 'GAL-05 · Iso · Lot M-014B', title: 'Massing study, dusk' },
    { kind: 'photo', src: 'assets/hero-aerial.webp', span: 2, ratio: '1/1',
      tag: 'GAL-06 · Master plan, north', title: '14 lots phase one',
      crop: { x: '30%', y: '70%', scale: 1.8 }, treat: 'duotone' },
    { kind: 'photo', src: 'assets/sq4d-printer.webp', span: 2, ratio: '1/1',
      tag: 'GAL-07 · Gantry approach', title: 'Cross-arm clearing rebar cage',
      crop: { x: '20%', y: '30%', scale: 1.6 } },
  ];
  return (
    <section style={{ background: p.bg, color: p.ink, padding: '96px 56px', fontFamily: 'Inter, sans-serif' }}>
      <Reveal>
        <div style={{ marginBottom: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.muted, marginBottom: 12 }}>
              § 04 — Field log
            </div>
            <h2 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 80, lineHeight: 1, letterSpacing: '-0.03em', margin: 0 }}>
              What we&apos;re <em style={{ color: p.accent, fontStyle: 'italic' }}>building.</em>
            </h2>
          </div>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: p.muted, textTransform: 'uppercase', textAlign: 'right' }}>
            Imagery: SQ4D, Inc.<br />Subdivision pilot — active build
          </div>
        </div>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
        {tiles.map((t, i) => (
          <Reveal key={i} delay={i * 60} style={{ gridColumn: `span ${t.span}` }}>
            <div className="gallery-tile" style={{
              aspectRatio: t.ratio, background: p.soft,
              border: `1px solid ${p.line}`, position: 'relative', overflow: 'hidden',
              transition: 'transform 0.4s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.4s',
              cursor: 'pointer',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = `0 20px 40px ${p.glow}15`; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>

              {t.kind === 'photo' && (
                <img src={t.src} alt={t.title}
                  style={{
                    width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                    objectPosition: t.crop ? `${t.crop.x} ${t.crop.y}` : 'center',
                    transform: t.crop ? `scale(${t.crop.scale})` : 'none',
                    filter:
                      t.treat === 'mono' ? 'grayscale(1) contrast(1.15) brightness(0.92)' :
                      t.treat === 'duotone' ? 'grayscale(1) contrast(1.2) sepia(0.3) hue-rotate(40deg)' :
                      'saturate(0.92) contrast(1.04)',
                    transition: 'transform 0.6s cubic-bezier(0.2,0.7,0.2,1)',
                  }} />
              )}
              {t.kind === 'plan' && <PlanRendering p={p} />}
              {t.kind === 'iso'  && <IsoRendering p={p} />}

              <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${p.bg}00 50%, ${p.bg}cc 100%)`, pointerEvents: 'none' }} />
              <div style={{ position: 'absolute', top: 16, left: 16, fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.12em', color: p.accent, fontWeight: 700, background: `${p.bg}cc`, padding: '4px 8px' }}>
                {t.tag}
              </div>
              <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16 }}>
                <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 22, color: '#fff', letterSpacing: '-0.01em', textShadow: '0 2px 16px rgba(0,0,0,0.6)' }}>
                  {t.title}
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   PROCEDURAL RENDERINGS — for gallery variety
   ============================================================ */
function PlanRendering({ p }) {
  return (
    <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%', display: 'block', background: p.bg }}>
      <defs>
        <pattern id="plangrid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke={p.line} strokeWidth="0.5" opacity="0.6" />
        </pattern>
      </defs>
      <rect width="400" height="300" fill="url(#plangrid)" />
      {/* L-shape outer wall */}
      <path d="M 80,60 L 280,60 L 280,140 L 340,140 L 340,240 L 80,240 Z"
        fill="rgba(214,255,59,0.06)" stroke={p.ink} strokeWidth="2" />
      {/* Interior walls */}
      <line x1="160" y1="60" x2="160" y2="160" stroke={p.ink} strokeWidth="1.5" />
      <line x1="220" y1="60" x2="220" y2="160" stroke={p.ink} strokeWidth="1.5" />
      <line x1="160" y1="160" x2="220" y2="160" stroke={p.ink} strokeWidth="1.5" />
      <line x1="160" y1="200" x2="280" y2="200" stroke={p.ink} strokeWidth="1.5" />
      <line x1="80"  y1="180" x2="160" y2="180" stroke={p.ink} strokeWidth="1.5" />
      {/* Door symbols (arc) */}
      <path d="M 180,160 A 16,16 0 0 1 196,176" fill="none" stroke={p.ink} strokeWidth="0.8" />
      <path d="M 110,180 A 14,14 0 0 1 124,194" fill="none" stroke={p.ink} strokeWidth="0.8" />
      {/* Furniture stubs */}
      <rect x="100" y="80" width="50" height="30" fill="none" stroke={p.muted} strokeWidth="0.6" />
      <rect x="178" y="80" width="34" height="34" fill="none" stroke={p.muted} strokeWidth="0.6" />
      <circle cx="250" cy="100" r="14" fill="none" stroke={p.muted} strokeWidth="0.6" />
      <rect x="240" y="170" width="30" height="20" fill="none" stroke={p.muted} strokeWidth="0.6" />
      {/* Dimension line */}
      <line x1="80" y1="260" x2="340" y2="260" stroke={p.accent} strokeWidth="0.6" />
      <line x1="80" y1="256" x2="80" y2="264" stroke={p.accent} strokeWidth="0.6" />
      <line x1="340" y1="256" x2="340" y2="264" stroke={p.accent} strokeWidth="0.6" />
      <text x="210" y="272" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="8" fill={p.accent} letterSpacing="1.5">58′-0″</text>
      <text x="100" y="76" fontFamily="ui-monospace, monospace" fontSize="6" fill={p.muted} letterSpacing="1">BED 1</text>
      <text x="180" y="76" fontFamily="ui-monospace, monospace" fontSize="6" fill={p.muted} letterSpacing="1">BED 2</text>
      <text x="240" y="76" fontFamily="ui-monospace, monospace" fontSize="6" fill={p.muted} letterSpacing="1">PRIMARY</text>
      <text x="110" y="200" fontFamily="ui-monospace, monospace" fontSize="6" fill={p.muted} letterSpacing="1">BATH</text>
      <text x="220" y="195" fontFamily="ui-monospace, monospace" fontSize="6" fill={p.muted} letterSpacing="1">KITCHEN</text>
      <text x="220" y="225" fontFamily="ui-monospace, monospace" fontSize="6" fill={p.muted} letterSpacing="1">LIVING</text>
    </svg>
  );
}

function IsoRendering({ p }) {
  // Simple isometric massing of an L-shaped house
  return (
    <svg viewBox="0 0 400 400" style={{ width: '100%', height: '100%', display: 'block', background: 'linear-gradient(180deg, #2A2620 0%, #16140F 100%)' }}>
      <defs>
        <linearGradient id="iso-roof" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3A3530" />
          <stop offset="1" stopColor="#28241F" />
        </linearGradient>
        <linearGradient id="iso-wall-light" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#D8CFBE" />
          <stop offset="1" stopColor="#B8AE9B" />
        </linearGradient>
        <linearGradient id="iso-wall-dark" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#7C7466" />
          <stop offset="1" stopColor="#5C544A" />
        </linearGradient>
        <pattern id="iso-bead" width="4" height="3" patternUnits="userSpaceOnUse">
          <line x1="0" y1="1.5" x2="4" y2="1.5" stroke="rgba(0,0,0,0.18)" strokeWidth="0.5" />
        </pattern>
      </defs>
      {/* Ground plane */}
      <polygon points="40,310 200,230 360,310 200,390" fill="rgba(214,255,59,0.04)" stroke={p.line} strokeWidth="0.5" />

      {/* Light wall (front) — L shape */}
      <polygon points="80,290 200,230 200,300 80,360" fill="url(#iso-wall-light)" />
      <polygon points="80,290 200,230 200,300 80,360" fill="url(#iso-bead)" />
      {/* Right wall (dark) */}
      <polygon points="200,230 320,290 320,360 200,300" fill="url(#iso-wall-dark)" />
      <polygon points="200,230 320,290 320,360 200,300" fill="url(#iso-bead)" />
      {/* L-extension front */}
      <polygon points="200,300 280,260 280,330 200,370" fill="url(#iso-wall-light)" opacity="0.85" />
      {/* Roof */}
      <polygon points="80,290 200,230 320,290 200,350" fill="url(#iso-roof)" />
      <polygon points="200,300 280,260 320,290 240,330" fill="url(#iso-roof)" opacity="0.7" />
      {/* Windows */}
      <rect x="105" y="310" width="22" height="18" fill="#D6FF3B" opacity="0.7" />
      <rect x="145" y="290" width="22" height="18" fill="#D6FF3B" opacity="0.7" />
      <rect x="225" y="285" width="20" height="16" fill="#D6FF3B" opacity="0.5" transform="skewY(-22)" />
      {/* Tag */}
      <text x="200" y="50" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill={p.accent} letterSpacing="2">M-014B · DUSK STUDY</text>
    </svg>
  );
}

/* ============================================================
   SPECS
   ============================================================ */
function Specs({ p }) {
  return (
    <section style={{ background: p.soft, color: p.ink, padding: '96px 56px', fontFamily: 'Inter, sans-serif', borderTop: `1px solid ${p.line}`, borderBottom: `1px solid ${p.line}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 72 }}>
        <Reveal>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.muted, marginBottom: 12 }}>
              § 05 — Specs
            </div>
            <h2 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 64, lineHeight: 1, letterSpacing: '-0.03em', margin: 0 }}>
              What a Pleet <em style={{ color: p.accent, fontStyle: 'italic' }}>home</em> is.
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: p.muted, marginTop: 24, maxWidth: 360 }}>
              Every home sits on a poured foundation, meets local code, and finances the way
              any other new-construction home does.
            </p>
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div style={{ background: p.card, border: `1px solid ${p.line}` }}>
            {[
              ['Wall material', 'Proprietary structural concrete, layer-extruded'],
              ['Wall thickness', '8–12″ depending on load path'],
              ['Sizes', '600 – 2,400 sq ft, single or two-story'],
              ['Foundation', 'Conventional poured slab or stem-wall'],
              ['Roof', 'Conventional truss + metal or shingle'],
              ['MEP', 'Conduits printed in-wall; trades conventional'],
              ['Energy', 'R-value exceeds local minimums; thermal mass benefit'],
              ['Financing', 'FHA-eligible · conventional mortgage-ready'],
            ].map(([k, v], i) => (
              <div key={k} className="spec-row" style={{
                display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32, padding: '24px 32px',
                borderBottom: i < 7 ? `1px solid ${p.line}` : 'none',
                transition: 'background 0.2s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = p.soft}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.1em', color: p.muted, textTransform: 'uppercase' }}>
                  {k}
                </div>
                <div style={{ fontSize: 15, color: p.ink }}>{v}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   PRESS
   ============================================================ */
function Press({ p }) {
  const items = [
    { date: '2024', kind: 'Milestone', t: 'First MLS-listed 3D-printed home sells', s: 'SQ4D-built, Riverhead NY' },
    { date: '2023', kind: 'Approval',  t: 'FHA clears 3D-printed construction method', s: 'Unlocks conventional financing for homeowners' },
    { date: '2021', kind: 'Permit',    t: 'First permitted 3D-printed home in the US', s: 'Long Island, NY — inhabitable occupancy' },
    { date: '—',    kind: 'Ongoing',   t: 'Pleet deploys the system at scale', s: 'Markets: TX, FL, AZ, NC — expanding' },
  ];
  return (
    <section style={{ background: p.bg, color: p.ink, padding: '96px 56px', fontFamily: 'Inter, sans-serif' }}>
      <Reveal>
        <div style={{ marginBottom: 48 }}>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.muted, marginBottom: 12 }}>
            § 06 — Record
          </div>
          <h2 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 80, lineHeight: 1, letterSpacing: '-0.03em', margin: 0 }}>
            A short, credible <em style={{ color: p.accent, fontStyle: 'italic' }}>history.</em>
          </h2>
        </div>
      </Reveal>
      <div style={{ border: `1px solid ${p.line}` }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 100}>
            <div className="press-row" style={{
              display: 'grid', gridTemplateColumns: '140px 160px 1fr auto', gap: 32, alignItems: 'center',
              padding: '32px', background: p.card,
              borderBottom: i < items.length - 1 ? `1px solid ${p.line}` : 'none',
              transition: 'background 0.3s, padding-left 0.3s',
              cursor: 'pointer',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = p.soft; e.currentTarget.style.paddingLeft = '40px'; }}
            onMouseLeave={e => { e.currentTarget.style.background = p.card; e.currentTarget.style.paddingLeft = '32px'; }}>
              <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 44, letterSpacing: '-0.02em', color: p.accent }}>
                {it.date}
              </div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: p.muted }}>
                {it.kind}
              </div>
              <div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 4 }}>{it.t}</div>
                <div style={{ fontSize: 13, color: p.muted }}>{it.s}</div>
              </div>
              <div style={{ color: p.accent, fontSize: 24 }}>↗</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   CTA / FOOTER
   ============================================================ */
function CTA({ p }) {
  const bg = p.partnerBg, ink = p.partnerInk, accent = p.partnerAccent;
  const accentInk = p.partnerAccentInk, muted = p.partnerMuted, line = p.partnerLine;
  return (
    <section style={{
      background: bg, color: ink, padding: '112px 56px 0',
      fontFamily: 'Inter, sans-serif', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 700, height: 700,
        background: `radial-gradient(circle, ${accent}22 0%, transparent 60%)`,
        pointerEvents: 'none',
      }} />
      <Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'end', marginBottom: 96, position: 'relative' }}>
          <h2 style={{
            fontFamily: '"Instrument Serif", serif', fontSize: 120, lineHeight: 0.92,
            letterSpacing: '-0.04em', margin: 0, textWrap: 'balance',
          }}>
            Get on the list.<br />
            <em style={{ color: accent, fontStyle: 'italic' }}>We&apos;ll print yours next.</em>
          </h2>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <input placeholder="your@email.com" style={{
              background: 'transparent', border: 'none', borderBottom: `1px solid ${line}`,
              color: ink, fontSize: 22, padding: '16px 0', fontFamily: 'Inter, sans-serif', outline: 'none',
              transition: 'border-color 0.3s',
            }}
            onFocus={e => e.target.style.borderColor = accent}
            onBlur={e => e.target.style.borderColor = line} />
            <input placeholder="market / zip (e.g. Tulsa, OK)" style={{
              background: 'transparent', border: 'none', borderBottom: `1px solid ${line}`,
              color: ink, fontSize: 22, padding: '16px 0', fontFamily: 'Inter, sans-serif', outline: 'none',
              transition: 'border-color 0.3s',
            }}
            onFocus={e => e.target.style.borderColor = accent}
            onBlur={e => e.target.style.borderColor = line} />
            <button style={{
              marginTop: 24, background: accent, color: accentInk, border: 'none',
              padding: '20px 24px', fontSize: 15, fontWeight: 700, cursor: 'pointer',
              letterSpacing: '0.02em', transition: 'transform 0.2s, box-shadow 0.2s',
            }}
            onMouseEnter={e => { e.target.style.transform = 'translateY(-2px)'; e.target.style.boxShadow = `0 12px 30px ${accent}55`; }}
            onMouseLeave={e => { e.target.style.transform = 'translateY(0)'; e.target.style.boxShadow = 'none'; }}>
              Reserve my spot →
            </button>
          </form>
        </div>
      </Reveal>

      {/* Footer columns */}
      <div style={{
        borderTop: `1px solid ${line}`, paddingTop: 56, paddingBottom: 56,
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 48,
      }}>
        <div>
          <PleetMark color={ink} accent={accent} height={28} />
          <p style={{ marginTop: 24, fontSize: 13, lineHeight: 1.6, color: muted, maxWidth: 280 }}>
            Pleet builds single-family homes using SQ4D&apos;s Autonomous Robotic Construction System.
            Headquartered in Tulsa, OK. Pilot subdivision in Oklahoma.
          </p>
          <div style={{ marginTop: 24, fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em', color: muted, textTransform: 'uppercase' }}>
            <div>Tulsa, Oklahoma</div>
            <div style={{ marginTop: 4 }}>Pilot site · location TBA</div>
          </div>
        </div>

        <FooterCol head="Company" links={['About', 'Process', 'Careers', 'Press kit', 'Investors']} ink={ink} muted={muted} accent={accent} />
        <FooterCol head="Homes" links={['Models', 'Floor plans', 'Available lots', 'Customization', 'Reservations']} ink={ink} muted={muted} accent={accent} />
        <FooterCol head="Technology" links={['SQ4D ARCS™', 'FHA approval', 'Material spec', 'Build envelope', 'Engineering']} ink={ink} muted={muted} accent={accent} />
        <FooterCol head="Resources" links={['Field log', 'Whitepapers', 'For builders', 'For municipalities', 'Contact']} ink={ink} muted={muted} accent={accent} />
      </div>

      {/* Disclaimer band */}
      <div style={{
        borderTop: `1px solid ${line}`, paddingTop: 32, paddingBottom: 24,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64,
      }}>
        <div>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: muted, marginBottom: 12 }}>
            Technology &amp; sources
          </div>
          <p style={{ fontSize: 12, lineHeight: 1.6, color: muted, margin: 0 }}>
            Build performance figures reflect SQ4D ARCS™ system data on Pleet projects. Cost comparisons use stick-built medians from the National Association of Home Builders (2024). FHA approval status per HUD Mortgagee Letter 2018-04. SQ4D, ARCS, and the SQ4D mark are property of SQ4D, Inc.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: muted, marginBottom: 12 }}>
            Forward-looking statements
          </div>
          <p style={{ fontSize: 12, lineHeight: 1.6, color: muted, margin: 0 }}>
            This site contains forward-looking statements about Pleet&apos;s products, services, build timelines, and pilot programs. Actual results may differ. Reservation does not constitute a binding purchase agreement. Pleet builds in jurisdictions where 3D-printed concrete construction is permitted.
          </p>
        </div>
      </div>

      {/* Bottom legal bar */}
      <div style={{
        borderTop: `1px solid ${line}`, paddingTop: 24, paddingBottom: 32,
        display: 'flex', justifyContent: 'space-between', fontSize: 11, color: muted, letterSpacing: '0.06em',
        fontFamily: 'ui-monospace, monospace', textTransform: 'uppercase',
      }}>
        <div>© Pleet, Inc. {new Date().getFullYear()} · All rights reserved</div>
        <div style={{ display: 'flex', gap: 28 }}>
          <span style={{ cursor: 'pointer' }}>Privacy</span>
          <span style={{ cursor: 'pointer' }}>Terms</span>
          <span style={{ cursor: 'pointer' }}>Cookies</span>
          <span style={{ cursor: 'pointer' }}>Accessibility</span>
          <span>Tulsa, OK</span>
        </div>
      </div>

      {/* Footer signature — giant SVG mark + contextual ribbon */}
      <div style={{ borderTop: `1px solid ${line}`, paddingTop: 32, marginTop: 8 }}>
        {/* Ribbon: coordinates · status · invite — gives the wordmark something to sit above */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32,
          paddingBottom: 28, marginBottom: 8,
          fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.12em',
          color: muted, textTransform: 'uppercase',
        }}>
          <div>
            <div style={{ color: accent, marginBottom: 6 }}>● PILOT ACTIVE</div>
            <div>Somewhere, OK</div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ marginBottom: 6 }}>Press · Investors · Trades</div>
            <div style={{ color: ink, textTransform: 'none', letterSpacing: '0.02em', fontFamily: 'Inter, sans-serif', fontSize: 13 }}>
              info@pleet3d.com
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ marginBottom: 6 }}>Currently building</div>
            <div>Lot M-014B · 47% complete</div>
            <div>ETA: this Friday</div>
          </div>
        </div>

      </div>
    </section>
  );
}

function FooterCol({ head, links, ink, muted, accent }) {
  return (
    <div>
      <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: muted, marginBottom: 16 }}>
        {head}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(l => (
          <a key={l} style={{ color: ink, textDecoration: 'none', fontSize: 14, cursor: 'pointer', transition: 'color 0.2s' }}
            onMouseEnter={e => e.target.style.color = accent}
            onMouseLeave={e => e.target.style.color = ink}>
            {l}
          </a>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   PLEET MARK — real SVG logo from brand assets
   ============================================================ */
function PleetMark({ color = '#181411', accent = '#D6FF3B', height = 28, mono = true }) {
  // The supplied logo is the PLEET wordmark in heavy block letterforms.
  // We use an inline SVG so we can recolor for light/dark mode.
  return (
    <svg viewBox="0 0 488.25 156.94" style={{ height, width: 'auto', display: 'block' }} role="img" aria-label="Pleet">
      {/* P */}
      <path fill={color} d="M40.03,131.52v25.42H0V34.34c.98-.07,2.07-.21,3.15-.21,30.31-.02,60.62-.03,90.93-.02,7.35,0,11.09,3.6,11.1,10.92.05,24.98.05,49.97,0,74.95-.02,8.07-3.66,11.55-11.69,11.55-16.23,0-32.47,0-48.7-.02h-4.76ZM40.35,60.66v40.18h23.19v-40.18s-23.19,0-23.19,0Z" />
      {/* E1 */}
      <path fill={color} d="M207.51,70.54c14.82-.07,30.1-.1,44.92,0,4.57,0,9.16-.39,13.71,0,2.3.2,3.09,4.02,3.01,6.49-.15,4.52-.03,8.75.02,13.45.01,1.59-1.27,2.89-2.86,2.89h-61.53c-1.01,0-1.83.82-1.83,1.83v1.97c0,7.22-.36,6.09,6.85,6.09h55.77c1.57,0,2.85,1.27,2.86,2.84.05,7.27.26,13.88.33,20.96.02,2.44-1.96,4.44-4.4,4.44h-88.74c-7.38,0-10.9-3.18-10.94-10.54-.11-25.62-.1-51.25,0-76.87.03-6.43,3.91-9.98,10.38-9.99,28.04-.03,56.07-.04,84.11-.04,6.22,0,9.79,3.38,9.92,9.5.12,5.18.08,11.57.08,17.05-2.28,0,.76,0,0,0-11.27,0-30.61.08-41.88,0-6.21-.05-12.06-.07-18.27,0-2.27.03-4.33-.48-5.33.76-1.46,1.83-1.21,5.97-.76,9.14" />
      {/* E2 */}
      <path fill={color} d="M340.62,70.54c-14.82-.07-30.1-.1-44.92,0-4.57,0-9.16-.39-13.71,0-2.3.2-3.09,4.02-3.01,6.49.15,4.52.03,8.75-.02,13.45-.01,1.59,1.27,2.89,2.86,2.89h61.53c1.01,0,1.83.82,1.83,1.83v1.97c0,7.22.36,6.09-6.85,6.09h-55.77c-1.57,0-2.85,1.27-2.86,2.84-.05,7.27-.26,13.88-.33,20.96-.02,2.44,1.96,4.44,4.4,4.44h88.74c7.38,0,10.9-3.18,10.94-10.54.11-25.62.1-51.25,0-76.87-.03-6.43-3.91-9.98-10.38-9.99-28.04-.03-56.07-.04-84.11-.04-6.22,0-9.79,3.38-9.92,9.5-.12,5.18-.08,11.57-.08,17.05,2.28,0-.76,0,0,0,11.27,0,30.61.08,41.88,0,6.21-.05,12.06-.07,18.27,0,2.27.03,4.33-.48,5.33.76,1.46,1.83,1.21,5.97.76,9.14" />
      {/* T */}
      <path fill={color} d="M440.55,63.39v13.82c0,4.57-.06,7.8.12,13.69-.18,7.06-1.37,9.68-6.5,12.62-11.3,6.47-22.38,13.34-33.56,20.03-.41.25-.91.35-1.99.76v-60.67c-2.92-.17-5.27-.31-7.91-.46v-28.28c2.63-.12,4.99-.23,7.77-.35V.8h41.98v33.76h47.79v28.83h-47.7Z" />
      {/* L */}
      <path fill={color} d="M155.13,131.43h-40.67c-.1-1.31-.26-2.52-.26-3.72-.02-41.23,0-82.46-.07-123.7C114.13,1.21,114.64-.05,117.84,0c11.42.18,22.84.11,34.25.02,2.4-.02,3.34.63,3.34,3.2-.07,41.99-.05,83.99-.06,125.98,0,.61-.12,1.23-.23,2.22h0Z" />
      {/* Accent slash — replaces the grey shadow with the brand lime */}
      <path fill={mono ? color : accent} d="M404.71,131.33h82.81c0-9.99.18-17.92.18-28.04,0,0-22.88-1.64-45.68,6.09-6.98,2.36-37.31,21.92-37.31,21.95Z" opacity={mono ? 0.45 : 1} />
      {/* P-cutout outline */}
      <path d="M40.35,60.66h23.19v40.18h-23.19s0-40.18,0-40.18Z" fill="none" stroke={color} strokeMiterlimit="10" />
    </svg>
  );
}

/* ============================================================
   TIMELAPSE HERO — procedural top-down "build" animation
   Renders an L-shaped floor plan being printed layer by layer.
   Real photo lives as a small "live cam" PIP.
   ============================================================ */
function TimelapseHero({ p, src }) {
  const [t, setT] = React.useState(0);          // 0..1 progress
  const [paused, setPaused] = React.useState(false);
  const DURATION = 14000;

  React.useEffect(() => {
    if (paused) return;
    let raf, start;
    const tick = (ts) => {
      if (!start) start = ts;
      const elapsed = ((ts - start) % DURATION) / DURATION;
      setT(elapsed);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [paused]);

  // L-shaped floor plan path (in viewBox units, 1000 × 437.5 for 16/7)
  // Outline goes: outside perimeter clockwise from top-left
  const FLOOR = {
    // Outer wall coords (concrete bead path)
    outer: 'M 220,80 L 720,80 L 720,200 L 800,200 L 800,360 L 220,360 Z',
    // Interior wall segments — each is its own polyline that prints in sequence
    interior: [
      'M 380,80 L 380,220',           // bedroom 1 wall
      'M 380,220 L 540,220',
      'M 540,80 L 540,220',
      'M 540,220 L 540,300',           // hall
      'M 380,300 L 720,300',           // separator
      'M 220,240 L 380,240',           // bath wall
    ],
    // Door openings (gaps drawn on top in bg color)
    openings: [
      { x: 295, y: 80, w: 36, h: 6 },
      { x: 460, y: 220, w: 36, h: 6 },
      { x: 600, y: 300, w: 36, h: 6 },
      { x: 220, y: 320, w: 6, h: 32 },
    ],
  };

  // Compute total perimeter so we can animate strokeDashoffset over the whole path
  const OUTER_LEN = 2 * (500 + 280) + 2 * (80 + 160); // approximate
  const TOTAL_LAYERS = 142;
  const layer = Math.floor(t * TOTAL_LAYERS);
  const elapsedHrs = (t * 26).toFixed(1);
  const heightCm = (layer * 1.6).toFixed(1);

  // Animate the print head along the outer rectangle
  const perimT = (t * 4) % 1;  // 4 laps over the loop
  const headPos = pointOnRect(perimT, 220, 80, 800, 360);

  return (
    <div
      onClick={() => setPaused(!paused)}
      style={{
        aspectRatio: '16/7', width: '100%', position: 'relative',
        background: p.bg === '#201D18' ? '#16140F' : '#1A1815',
        overflow: 'hidden', cursor: 'pointer',
        border: `1px solid ${p.line}`,
      }}>

      {/* Subtle grid backdrop — the "build pad" */}
      <svg viewBox="0 0 1000 437.5" preserveAspectRatio="none" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
      }}>
        <defs>
          <pattern id="buildgrid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(241,238,230,0.05)" strokeWidth="0.5" />
          </pattern>
          <pattern id="buildgrid-major" width="100" height="100" patternUnits="userSpaceOnUse">
            <path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(241,238,230,0.1)" strokeWidth="0.6" />
          </pattern>
          <filter id="head-glow">
            <feGaussianBlur stdDeviation="3" />
          </filter>
        </defs>
        <rect width="1000" height="437.5" fill="url(#buildgrid)" />
        <rect width="1000" height="437.5" fill="url(#buildgrid-major)" />

        {/* Build envelope outline — phantom of where the gantry can reach */}
        <rect x="180" y="55" width="660" height="335" fill="none"
          stroke={p.accent} strokeWidth="0.8" strokeDasharray="4 6" opacity="0.35" />
        <text x="180" y="48" fontFamily="ui-monospace, monospace" fontSize="9" fill={p.accent} opacity="0.7" letterSpacing="1.5">
          GANTRY ENVELOPE · 70′ × 200′
        </text>
        <text x="840" y="48" fontFamily="ui-monospace, monospace" fontSize="9" fill={p.accent} opacity="0.7" letterSpacing="1.5" textAnchor="end">
          PLOT M-014B
        </text>

        {/* Foundation slab — fades in over first 8% */}
        <rect x="220" y="80" width="500" height="280" fill="rgba(214,255,59,0.04)"
          opacity={Math.min(1, t / 0.08)} />
        <rect x="720" y="200" width="80" height="160" fill="rgba(214,255,59,0.04)"
          opacity={Math.min(1, t / 0.08)} />

        {/* Outer wall — animated stroke draw, then layered fill */}
        <path d={FLOOR.outer} fill="none" stroke={p.ink} strokeWidth="2.5"
          strokeLinejoin="miter" strokeLinecap="square"
          opacity={t > 0.05 ? 1 : 0}
          pathLength="1"
          strokeDasharray="1"
          strokeDashoffset={Math.max(0, 1 - (t - 0.05) * 4)}
        />
        {/* Wall thickness — second pass, slightly inset */}
        {t > 0.3 && (
          <path d={FLOOR.outer} fill="none" stroke={p.ink} strokeWidth="6"
            strokeLinejoin="miter" opacity="0.18" />
        )}

        {/* Interior walls — drawn one by one */}
        {FLOOR.interior.map((d, i) => {
          const startT = 0.32 + i * 0.07;
          const endT = startT + 0.07;
          if (t < startT) return null;
          const localT = Math.min(1, (t - startT) / (endT - startT));
          return (
            <path key={i} d={d} fill="none" stroke={p.ink} strokeWidth="2"
              pathLength="1" strokeDasharray="1" strokeDashoffset={1 - localT}
              strokeLinecap="square" opacity="0.9" />
          );
        })}

        {/* Door / window openings — masked over walls in bg color (appear after walls) */}
        {t > 0.85 && FLOOR.openings.map((o, i) => (
          <rect key={i} x={o.x} y={o.y} width={o.w} height={o.h}
            fill={p.bg === '#201D18' ? '#16140F' : '#1A1815'} />
        ))}

        {/* Print head — moves around perimeter, glows */}
        <g transform={`translate(${headPos.x}, ${headPos.y})`} opacity={t > 0.05 ? 1 : 0}>
          <circle r="10" fill={p.accent} opacity="0.18" filter="url(#head-glow)" />
          <circle r="5" fill={p.accent} />
          <circle r="2" fill={p.bg === '#201D18' ? '#16140F' : '#1A1815'} />
          {/* Crosshair lines */}
          <line x1="-14" y1="0" x2="-7" y2="0" stroke={p.accent} strokeWidth="1" />
          <line x1="7" y1="0" x2="14" y2="0" stroke={p.accent} strokeWidth="1" />
          <line x1="0" y1="-14" x2="0" y2="-7" stroke={p.accent} strokeWidth="1" />
          <line x1="0" y1="7" x2="0" y2="14" stroke={p.accent} strokeWidth="1" />
        </g>

        {/* Trail behind the print head — last 12% of perimeter highlighted */}
        <PrintTrail accent={p.accent} t={perimT} active={t > 0.08} />

        {/* Room labels — appear once interior walls are done */}
        {t > 0.85 && (
          <g fontFamily="ui-monospace, monospace" fontSize="9" fill={p.muted} letterSpacing="1.5">
            <text x="300" y="160" textAnchor="middle">BED 1</text>
            <text x="300" y="172" textAnchor="middle" fontSize="7" opacity="0.6">11′ × 12′</text>
            <text x="460" y="160" textAnchor="middle">BED 2</text>
            <text x="460" y="172" textAnchor="middle" fontSize="7" opacity="0.6">10′ × 12′</text>
            <text x="630" y="160" textAnchor="middle">PRIMARY</text>
            <text x="630" y="172" textAnchor="middle" fontSize="7" opacity="0.6">14′ × 12′</text>
            <text x="300" y="280" textAnchor="middle">BATH</text>
            <text x="500" y="280" textAnchor="middle">KITCHEN</text>
            <text x="500" y="338" textAnchor="middle">LIVING</text>
            <text x="760" y="280" textAnchor="middle">DEN</text>
          </g>
        )}

        {/* Dimension callouts */}
        {t > 0.95 && (
          <g fontFamily="ui-monospace, monospace" fontSize="8" fill={p.accent} letterSpacing="1.5" opacity="0.8">
            <line x1="220" y1="395" x2="800" y2="395" stroke={p.accent} strokeWidth="0.5" opacity="0.5" />
            <line x1="220" y1="390" x2="220" y2="400" stroke={p.accent} strokeWidth="0.5" opacity="0.5" />
            <line x1="800" y1="390" x2="800" y2="400" stroke={p.accent} strokeWidth="0.5" opacity="0.5" />
            <text x="510" y="408" textAnchor="middle">58′-0″</text>
          </g>
        )}
      </svg>

      {/* HUD: top-left telemetry */}
      <div style={{
        position: 'absolute', top: 16, left: 16, zIndex: 5,
        fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.08em',
        color: '#fff', textShadow: '0 1px 8px rgba(0,0,0,0.8)',
        display: 'flex', flexDirection: 'column', gap: 4,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#ff3838', animation: 'pulse 2s infinite' }} />
          <span style={{ color: '#ff8080' }}>REC</span>
          <span style={{ color: 'rgba(255,255,255,0.6)' }}>· PLAN VIEW · 1:120</span>
        </div>
        <div style={{ color: 'rgba(255,255,255,0.85)', marginTop: 4 }}>
          T+{elapsedHrs}h · LAYER {String(layer).padStart(3, '0')}/{TOTAL_LAYERS} · H {heightCm}cm
        </div>
      </div>

      {/* HUD: bottom-right — Live cam PIP */}
      <div style={{
        position: 'absolute', right: 16, bottom: 16, zIndex: 5,
        width: 200, border: `1px solid ${p.accent}`,
        boxShadow: `0 0 24px rgba(214,255,59,0.25)`,
      }}>
        <div style={{
          padding: '6px 10px', background: 'rgba(0,0,0,0.85)',
          fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: '0.15em',
          color: p.accent, display: 'flex', justifyContent: 'space-between',
        }}>
          <span>● CAM-02 · LIVE</span><span>1280×720</span>
        </div>
        <img src={src} alt="On-site camera feed"
          style={{ width: '100%', height: 'auto', display: 'block', filter: 'saturate(0.92) contrast(1.05)' }} />
      </div>

      {/* Bottom HUD: progress */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 232, zIndex: 4,
        background: 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)',
        padding: '40px 16px 14px',
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8,
          fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.15em',
          color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase',
        }}>
          <span>Wall envelope · L-plan · 1,840 sqft</span>
          <span style={{ color: p.accent, fontFamily: '"Instrument Serif", serif', fontSize: 22, letterSpacing: '-0.02em' }}>
            {(t * 100).toFixed(1)}<span style={{ fontSize: 14, opacity: 0.6 }}>%</span>
          </span>
          <span>ETA {(26 - elapsedHrs).toFixed(1)}h · 1.5kW draw</span>
        </div>
        <div style={{ height: 3, background: 'rgba(255,255,255,0.18)', position: 'relative' }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0,
            width: `${t * 100}%`, background: p.accent,
            boxShadow: `0 0 12px ${p.accent}`,
          }} />
        </div>
      </div>

      {paused && (
        <div style={{
          position: 'absolute', inset: 0, zIndex: 6,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(0,0,0,0.4)', pointerEvents: 'none',
        }}>
          <div style={{
            width: 80, height: 80, borderRadius: '50%', background: 'rgba(255,255,255,0.12)',
            backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 28,
          }}>▶</div>
        </div>
      )}
    </div>
  );
}

/* Helper: get a point along the perimeter of a rect, t ∈ [0,1] */
function pointOnRect(t, x, y, x2, y2) {
  const w = x2 - x, h = y2 - y;
  const perim = 2 * (w + h);
  let d = t * perim;
  if (d < w) return { x: x + d, y };
  d -= w;
  if (d < h) return { x: x2, y: y + d };
  d -= h;
  if (d < w) return { x: x2 - d, y: y2 };
  d -= w;
  return { x, y: y2 - d };
}

/* Trailing extruded bead behind the print head */
function PrintTrail({ accent, t, active }) {
  if (!active) return null;
  // Draw a short arc of the perimeter behind the head as a brighter line
  const segments = 18;
  const trailSpan = 0.12;
  const path = [];
  for (let i = 0; i < segments; i++) {
    const segT = ((t - (trailSpan * (i / segments))) + 1) % 1;
    const pt = pointOnRect(segT, 220, 80, 720, 360);
    path.push(pt);
  }
  return (
    <g>
      {path.map((p, i) => (
        <circle key={i} cx={p.x} cy={p.y} r={3 - (i / segments) * 2.5}
          fill={accent} opacity={1 - (i / segments)} />
      ))}
    </g>
  );
}

/* Button helpers */
function btnPrimary(p) {
  return {
    background: p.accent, color: p.accentInk, border: 'none',
    padding: '14px 24px', fontSize: 14, letterSpacing: '0.02em',
    cursor: 'pointer', fontFamily: 'Inter, sans-serif', fontWeight: 600,
    transition: 'transform 0.2s, box-shadow 0.2s',
  };
}
function btnGhost(p) {
  return {
    background: 'transparent', color: p.ink,
    border: `1px solid ${p.ink}`, padding: '14px 24px', fontSize: 14,
    cursor: 'pointer', fontFamily: 'Inter, sans-serif',
    transition: 'background 0.2s, color 0.2s',
  };
}

Object.assign(window, {
  Hero, StatsBand, HowItWorks, TechPartner, Gallery, Specs, Press, CTA,
  MilestoneTicker, PleetMark, TimelapseHero, FooterCol, PALETTES, STAT_LIBRARY, getPalette, Nav, Reveal,
});