/* ═══════════════════════════════════════════════════════════════
   HYPEREALM · Submersive-accurate ink animation
   Palette sampled from reference video:
     ink:   #0a0a10   (near-black, slight cool)
     coal:  #14141c
     teal:  #4a6a7a   (inky ocean wash)
     violet:#504060   (purple shadow wash)
     coral: #c87858   (warm blot accent)
     paper: #ebe8e0
═══════════════════════════════════════════════════════════════ */
const { useRef, useEffect, useState, useMemo } = React;
const { motion, useScroll, useTransform, useSpring, useInView, useMotionValue, AnimatePresence } = window.Motion || window.FramerMotion;

const SERIF="'Fraunces',serif";
const SANS ="'Inter Tight',sans-serif";
const MONO ="'JetBrains Mono',ui-monospace,monospace";

const P = {
  ink:      '#0a0a10',
  coal:     '#14141c',
  deepest:  '#050508',
  teal:     '#4a6a7a',
  tealDeep: '#2a4050',
  violet:   '#504060',
  violetDeep:'#302038',
  coral:    '#c87858',
  coralDeep:'#8c4838',
  paper:    '#ebe8e0',
  paperMute:'rgba(235,232,224,0.55)',
  paperFaint:'rgba(235,232,224,0.28)',
};

/* ═══ INK BLOT ═══ organic animated smoke-blot. 
   Layer a radial gradient + SVG turbulence displacement. */
function InkBlot({ color=P.teal, size=900, opacity=0.9, filter='inkSmoke', blur=18 }) {
  return (
    <div style={{
      position:'absolute', inset:'auto',
      width:size, height:size,
      pointerEvents:'none',
      filter: `url(#${filter}) blur(${blur}px)`,
      opacity,
    }}>
      <div style={{
        width:'100%', height:'100%',
        background:`radial-gradient(circle at 50% 50%, ${color} 0%, ${color}dd 28%, ${color}77 52%, ${color}22 72%, transparent 88%)`,
        borderRadius:'50%',
      }}/>
    </div>
  );
}

/* Animated ink blot that breathes + drifts */
function DriftingInk({ color, size, x, y, opacity=0.85, driftX=40, driftY=24, duration=18, filter='inkSmoke' }) {
  return (
    <motion.div
      style={{position:'absolute', left:x, top:y, translateX:'-50%', translateY:'-50%', pointerEvents:'none'}}
      animate={{ x:[0, driftX, -driftX*0.6, 0], y:[0, -driftY, driftY*0.4, 0], scale:[1, 1.08, 0.95, 1] }}
      transition={{ duration, repeat:Infinity, ease:'easeInOut' }}
    >
      <InkBlot color={color} size={size} opacity={opacity} filter={filter}/>
    </motion.div>
  );
}

/* Film grain */
function Grain({opacity=0.07}){
  return <div style={{position:'absolute',inset:0,pointerEvents:'none',opacity,mixBlendMode:'overlay',zIndex:50,
    backgroundImage:`url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`}}/>;
}

/* Vignette */
function Vignette(){
  return <div style={{position:'absolute',inset:0,pointerEvents:'none',zIndex:40,
    background:'radial-gradient(ellipse 70% 55% at 50% 50%, transparent 40%, rgba(5,5,8,0.7) 100%)'}}/>;
}

/* ═══ CHROME · top nav, side rail, bottom status bar ═══ */
function Chrome(){
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  const go = (id) => document.getElementById(id)?.scrollIntoView({behavior:'smooth'});
  return (
    <>
      <div style={{position:'fixed',top:0,left:0,right:0,height:56,display:'flex',alignItems:'center',padding:'0 32px',zIndex:200,
        background: scrolled ? 'rgba(10,10,16,0.72)' : 'transparent',
        backdropFilter: scrolled ? 'blur(20px) saturate(1.4)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(235,232,224,0.06)' : '1px solid transparent',
        transition:'background 0.4s, border-color 0.4s'}}>
        <div style={{display:'flex',alignItems:'center',gap:10,flex:1}}>
          <span style={{fontFamily:SANS,fontSize:11,fontWeight:400,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paper}}>HYPEREALM</span>
        </div>
        <div style={{display:'flex',gap:34,fontFamily:SANS,fontSize:10.5,letterSpacing:'0.24em',textTransform:'uppercase',color:P.paperMute,fontWeight:400}}>
          {[['Problem','manifesto'],['What we build','venues'],['Why Us','why-us']].map(([l,id])=>(
            <span key={id} className="link" style={{cursor:'pointer',transition:'color 0.2s'}} onClick={()=>go(id)}>{l}</span>
          ))}
        </div>
        <div style={{flex:1,display:'flex',justifyContent:'flex-end'}}>
          <span onClick={()=>go('waitlist')} style={{fontFamily:SANS,fontSize:10.5,letterSpacing:'0.22em',textTransform:'uppercase',color:P.paper,border:`1px solid rgba(235,232,224,0.35)`,padding:'8px 18px',borderRadius:999,fontWeight:400,cursor:'pointer',transition:'background 0.25s'}}>Subscribe</span>
        </div>
      </div>
      {/* side rail */}
      <div style={{position:'fixed',left:22,top:0,bottom:0,display:'flex',alignItems:'center',pointerEvents:'none',zIndex:90}}>
        <div style={{writingMode:'vertical-rl',transform:'rotate(180deg)',fontFamily:MONO,fontSize:9,letterSpacing:'0.36em',textTransform:'uppercase',color:P.paper,opacity:0.36}}>
          Hyperealm · the operating system for physical-experience venues · MMXXVI
        </div>
      </div>
      {/* bottom status rail — persistent, like submersive */}
      <div style={{position:'fixed',bottom:0,left:0,right:0,height:32,display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 32px',borderTop:'1px solid rgba(235,232,224,0.06)',background:'rgba(10,10,16,0.7)',backdropFilter:'blur(12px)',zIndex:95,fontFamily:MONO,fontSize:9,letterSpacing:'0.28em',textTransform:'uppercase',color:P.paperFaint}}>
        <span>Hyperealm</span>
        <span>Built and run by operators</span>
        <span>In stealth · opening 2027</span>
      </div>
    </>
  );
}

function ScrollBar() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, { stiffness:100, damping:30 });
  return <motion.div style={{position:'fixed',top:0,left:0,right:0,height:1.5,background:'linear-gradient(90deg, #4a6a7a, #ebe8e0, #c87858)',transformOrigin:'0%',scaleX,zIndex:201}}/>;
}

/* ═══ GIANT DISPLAY WORD — the signature submersive reveal ═══
   Word emerges from behind the blot, gradient sweep across letters */
function DisplayWord({ children, size='clamp(72px,14vw,220px)', variant='teal', tracking='0.26em', weight=200, inViewDelay=0 }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once:true, margin:'-20% 0px' });
  const cls = variant==='teal' ? 'gradient-text-teal' : variant==='coral' ? 'gradient-text-coral' : 'gradient-text';
  return (
    <h2 ref={ref} className={cls} style={{
      fontFamily:SANS, fontWeight:weight,
      fontSize:size, lineHeight:0.95, letterSpacing:tracking,
      textTransform:'uppercase', margin:0, textAlign:'center',
      opacity: inView ? 1 : 0,
      transform: inView ? 'translateY(0) scale(1)' : 'translateY(40px) scale(0.98)',
      transition:`opacity 1.6s ${inViewDelay}s cubic-bezier(0.19,1,0.22,1), transform 1.6s ${inViewDelay}s cubic-bezier(0.19,1,0.22,1)`,
      filter: 'url(#inkSmokeSoft)',
    }}>
      {children}
    </h2>
  );
}

/* ═══ OPENING HERO — inky blot + wordmark centered ═══ */
function OpeningHero() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'] });
  const titleOpacity = useTransform(scrollYProgress, [0, 0.7], [1, 0]);
  const titleY = useTransform(scrollYProgress, [0, 1], ['0%', '-30%']);
  const blotScale = useTransform(scrollYProgress, [0, 1], [1, 1.4]);
  return (
    <section ref={ref} style={{position:'relative',minHeight:'100vh',background:P.deepest,overflow:'hidden',display:'flex',alignItems:'center',justifyContent:'center'}}>
      {/* Hero background video — behind ink blots */}
      <video autoPlay muted loop playsInline preload="metadata" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',opacity:0.65,zIndex:0,filter:'saturate(0.8) contrast(1.02)'}}>
        <source src="/hero-venue-bg.mp4" type="video/mp4"/>
      </video>
      <div style={{position:'absolute',inset:0,background:'radial-gradient(ellipse 85% 75% at 50% 50%, rgba(10,10,16,0.2) 0%, rgba(5,5,8,0.65) 100%)',zIndex:1}}/>
      {/* Ink blots */}
      <motion.div style={{position:'absolute',left:'50%',top:'50%',scale:blotScale,zIndex:2}}>
        <DriftingInk color={P.teal} size={1200} x={0} y={0} opacity={0.55} driftX={60} driftY={40} duration={24}/>
        <DriftingInk color={P.violetDeep} size={900} x={-120} y={-60} opacity={0.5} driftX={80} driftY={50} duration={28}/>
        <DriftingInk color={P.coralDeep} size={420} x={140} y={100} opacity={0.45} driftX={50} driftY={30} duration={20} filter="inkSmokeMild"/>
      </motion.div>
      <Vignette/>
      <Grain opacity={0.08}/>

      <motion.div style={{position:'relative',zIndex:10,textAlign:'center',padding:'0 48px',maxWidth:1500,y:titleY,opacity:titleOpacity}}>
        <motion.h1
          initial={{opacity:0, y:30, filter:'blur(12px)'}}
          animate={{opacity:1, y:0, filter:'blur(0px)'}}
          transition={{duration:2.2, ease:[0.16,1,0.3,1], delay:0.5}}
          className="gradient-text"
          style={{
            fontFamily:SANS, fontWeight:200,
            fontSize:'clamp(56px,10vw,172px)',
            lineHeight:0.94, letterSpacing:'0.18em',
            textTransform:'uppercase', margin:0,
            textWrap:'balance',
          }}>
          HYPEREALM
        </motion.h1>

        <motion.div
          initial={{opacity:0, y:20}}
          animate={{opacity:1, y:0}}
          transition={{duration:1.6, ease:[0.16,1,0.3,1], delay:1.4}}
          style={{marginTop:56,fontFamily:SANS,fontWeight:300,fontSize:'clamp(22px,2.6vw,34px)',lineHeight:1.3,letterSpacing:'-0.015em',color:P.paperMute,maxWidth:920,margin:'56px auto 0'}}>
          The AI operating layer for <span style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,color:P.paper}}>physical-experience venues</span>.
        </motion.div>

        <motion.div
          initial={{opacity:0}}
          animate={{opacity:1}}
          transition={{duration:1.2, delay:2.2}}
          style={{marginTop:80, fontFamily:MONO,fontSize:10,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperFaint}}>
          ↓
        </motion.div>
      </motion.div>
    </section>
  );
}

/* ═══ CASCADING BAND — single giant word over inky blot ═══ */
function WordBand({ id, word, sub, eyebrow, blotColor=P.teal, blotColor2=P.violet, variant='teal', height='100vh', align='center', size }) {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const wordOpacity = useTransform(scrollYProgress, [0.1, 0.35, 0.7, 0.95], [0, 1, 1, 0.2]);
  const wordY = useTransform(scrollYProgress, [0.1, 0.5], ['6%','0%']);
  const blotScale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1.1, 0.9]);

  return (
    <section id={id} ref={ref} style={{position:'relative',minHeight:height,background:P.deepest,overflow:'hidden',display:'flex',alignItems:'center',justifyContent:'center'}}>
      <motion.div style={{position:'absolute',left:'50%',top:'50%',scale:blotScale}}>
        <DriftingInk color={blotColor} size={900} x={0} y={0} opacity={0.55} driftX={50} driftY={30} duration={22}/>
        <DriftingInk color={blotColor2} size={620} x={80} y={-60} opacity={0.4} driftX={60} driftY={40} duration={26}/>
      </motion.div>
      <Vignette/>
      <Grain opacity={0.07}/>
      <motion.div style={{position:'relative',zIndex:10,textAlign:align,padding:'0 60px',maxWidth:1500,y:wordY,opacity:wordOpacity}}>
        {eyebrow && (
          <div style={{fontFamily:MONO,fontSize:10.5,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperMute,marginBottom:44}}>
            {eyebrow}
          </div>
        )}
        <DisplayWord variant={variant} size={size || "clamp(64px,12vw,196px)"} tracking="0.22em">
          {word}
        </DisplayWord>
        {sub && (
          <motion.div
            initial={{opacity:0,y:20}}
            whileInView={{opacity:1,y:0}}
            viewport={{once:true,margin:'-20%'}}
            transition={{duration:1.4, ease:[0.16,1,0.3,1], delay:0.5}}
            style={{marginTop:40,fontFamily:SERIF,fontStyle:'italic',fontWeight:300,fontSize:'clamp(20px,2.2vw,30px)',lineHeight:1.35,letterSpacing:'-0.015em',color:P.paperMute,maxWidth:780,margin:'40px auto 0'}}>
            {sub}
          </motion.div>
        )}
      </motion.div>
    </section>
  );
}

/* ═══ STATEMENT / multi-line staggered cascade (like "TAKES YOU BEYOND RELAXATION INTO ELEVATED STATES") ═══ */
function CascadeStatement({ id, lines, blotColor=P.teal, blotColor2=P.violet, eyebrow }) {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const blotScale = useTransform(scrollYProgress, [0, 0.5, 1], [0.85, 1.15, 0.95]);
  return (
    <section ref={ref} id={id} style={{position:'relative',minHeight:'110vh',background:P.deepest,overflow:'hidden',display:'flex',alignItems:'center',padding:'160px 80px'}}>
      <motion.div style={{position:'absolute',right:'8%',top:'50%',scale:blotScale}}>
        <DriftingInk color={blotColor} size={820} x={0} y={0} opacity={0.5} driftX={70} driftY={40} duration={26}/>
        <DriftingInk color={blotColor2} size={500} x={-80} y={60} opacity={0.45} driftX={40} driftY={30} duration={22}/>
      </motion.div>
      <Grain opacity={0.07}/>
      <Vignette/>
      <div style={{position:'relative',zIndex:10,maxWidth:1400,margin:'0 auto',width:'100%'}}>
        {eyebrow && (
          <div style={{fontFamily:MONO,fontSize:10.5,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperFaint,marginBottom:80}}>
            {eyebrow}
          </div>
        )}
        <div style={{display:'flex',flexDirection:'column',gap:'clamp(16px,2vw,28px)'}}>
          {lines.map((L,i) => (
            <motion.div key={i}
              initial={{opacity:0, y:24, filter:'blur(14px)'}}
              whileInView={{opacity:1, y:0, filter:'blur(0px)'}}
              viewport={{once:true, margin:'-15%'}}
              transition={{duration:1.8, delay:i*0.18, ease:[0.19,1,0.22,1]}}
              style={{
                fontFamily:SANS, fontWeight:200,
                fontSize:'clamp(42px,7.2vw,120px)',
                lineHeight:0.98, letterSpacing:'0.14em',
                textTransform:'uppercase',
                paddingLeft: L.indent ? `${L.indent}vw` : 0,
                color: L.muted ? P.paperFaint : P.paper,
                fontStyle: L.italic ? 'italic' : 'normal',
              }}
              className={L.gradient ? 'gradient-text-teal' : ''}>
              {L.text}
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══ MANIFESTO · 3 paragraphs ═══ */
function Manifesto() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start 80%', 'end 35%'] });
  const headline = "The experience economy is running on legacy software.";
  const words = headline.split(' ');
  const paragraphs = [
    { text:"Arcades, immersive rooms, escape venues, family entertainment centers: the places people go to feel something together. The software that runs them was built for taking bookings, not for operating a business.", emphasized:false },
    { text:"A single venue runs on a dozen systems that don't talk to each other. Bookings in one tool, payments in another, scheduling in a spreadsheet, equipment logs on paper. Money leaks in the seams, and the manager spends the night reconciling instead of running the floor.", emphasized:false },
    { text:"Generic AI helps, but it has never run a room at 7pm on a Friday. It doesn't know the unit economics of a venue or how guests behave inside one. That knowledge is not in a model anyone can rent. It is earned on the floor.", emphasized:false },
    { text:"So we run the venues ourselves and build the software inside them. Every tool is proven against a real P&L before it goes anywhere else.", emphasized:false },
  ];
  return (
    <section id="manifesto" ref={ref} style={{position:'relative',minHeight:'130vh',background:P.ink,padding:'220px 80px 220px 120px',borderTop:'1px solid rgba(235,232,224,0.05)',borderBottom:'1px solid rgba(235,232,224,0.05)',overflow:'hidden'}}>
      <DriftingInk color={P.violetDeep} size={720} x="80%" y="30%" opacity={0.35} driftX={50} driftY={40} duration={24}/>
      <Grain opacity={0.06}/>
      <div style={{maxWidth:1200,margin:'0 auto',position:'relative',zIndex:2}}>
        <div style={{fontFamily:MONO,fontSize:11,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperFaint,marginBottom:96}}>
          The Problem
        </div>
        <p style={{fontFamily:"'Fraunces',serif",fontWeight:300,fontSize:'clamp(36px,5.2vw,82px)',lineHeight:1.1,letterSpacing:'-0.018em',margin:0,color:P.paper,maxWidth:1180}}>
          {words.map((w, i) => {
            const s = (i/words.length)*0.6;
            const e = ((i+1)/words.length)*0.6;
            const op = useTransform(scrollYProgress, [s,e], [0.14, 1]);
            return <motion.span key={i} style={{opacity:op, marginRight:'0.28em', display:'inline-block'}}>{w}</motion.span>;
          })}
        </p>
        <div style={{maxWidth:780,marginTop:120,display:'flex',flexDirection:'column',gap:38}}>
          {paragraphs.map((p,i) => (
            <motion.p key={i}
              initial={{opacity:0,y:28}}
              whileInView={{opacity:1,y:0}}
              viewport={{once:true,margin:'-8%'}}
              transition={{duration:1, ease:[0.16,1,0.3,1], delay:i*0.08}}
              style={{
                fontFamily: p.emphasized ? "'Fraunces',serif" : "'Source Serif 4',serif",
                fontStyle: p.emphasized ? 'italic' : 'normal',
                fontSize: p.emphasized ? 'clamp(26px,3.4vw,42px)' : 19,
                lineHeight: p.emphasized ? 1.25 : 1.72,
                fontWeight: p.emphasized ? 300 : 400,
                color: p.emphasized ? P.paper : P.paperMute,
                margin:0,
                letterSpacing: p.emphasized ? '-0.018em' : 0,
                marginTop: p.emphasized ? 16 : 0,
              }}>
              {p.text}
            </motion.p>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══ PILLARS — 3 pillars, content from GitHub verbatim ═══ */
const pillarsData = [
  { n:'01', id:'venues', title:'Owned', sub:'Operator · Built',
    lead:'We hold the franchise, sign the lease, and run the floor.',
    body:"The software ships to a venue we own and operate before it reaches anyone else. Because we run the room, we own the operational truth it generates — how it really runs, what breaks, when demand spikes. That record compounds with every venue we open, and no vendor selling to rooms they don't own can buy it.",
    blot:P.teal, blotDeep:P.tealDeep, accent:P.teal },
  { n:'02', id:'intelligence', title:'System', sub:'AI-Native · OS',
    lead:'Booking, payments, labor, equipment, and demand in one operating layer.',
    body:"Instead of a dozen disconnected apps, one operator supervises the room while the AI does the work underneath: it watches, it proposes, a person approves, it acts. Fewer people run the venue and more guests fill it.",
    blot:P.violet, blotDeep:P.violetDeep, accent:P.violet },
  { n:'03', id:'expansion', title:'Portfolio', sub:'Built to · Travel',
    lead:'Proven on our own venues, then the ones we open next.',
    body:"What works in the first room becomes the day-one setup for the second and third. Built to run a portfolio across markets, not a single demo.",
    blot:P.coral, blotDeep:P.coralDeep, accent:P.coral },
];

function Pillars() {
  return (
    <section style={{position:'relative',background:P.ink,padding:'200px 80px 200px 120px',borderBottom:'1px solid rgba(235,232,224,0.05)'}}>
      <div style={{maxWidth:1400,margin:'0 auto',position:'relative',zIndex:2}}>
        <div style={{fontFamily:MONO,fontSize:11,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperFaint,marginBottom:24}}>
          Our Approach
        </div>
        <h2 style={{fontFamily:SANS,fontWeight:200,fontSize:'clamp(44px,6vw,92px)',lineHeight:1.02,letterSpacing:'-0.025em',margin:'0 0 140px',color:P.paper,maxWidth:1100}}>
          How it <span style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,color:P.paper}}>works.</span>
        </h2>
        {pillarsData.map((p,i) => (
          <Pillar key={i} p={p} i={i}/>
        ))}
      </div>
    </section>
  );
}

function Pillar({ p, i }) {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const blotScale = useTransform(scrollYProgress, [0, 0.5, 1], [0.85, 1.05, 0.9]);
  const blotX = useTransform(scrollYProgress, [0, 1], [-40, 40]);
  return (
    <motion.div ref={ref} id={p.id}
      initial={{opacity:0, y:60}}
      whileInView={{opacity:1, y:0}}
      viewport={{once:true, margin:'-15%'}}
      transition={{duration:1, ease:[0.16,1,0.3,1]}}
      style={{position:'relative', display:'grid', gridTemplateColumns:'180px 1.2fr 1fr', gap:80, padding:'120px 0', borderTop:'1px solid rgba(235,232,224,0.08)', alignItems:'start', minHeight:'80vh'}}>
      <div>
        <div style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,fontSize:96,lineHeight:1,color:p.accent,marginBottom:18,filter:'url(#inkSmokeSoft)'}}>
          {p.n}
        </div>
        <div style={{fontFamily:MONO,fontSize:10,letterSpacing:'0.28em',textTransform:'uppercase',color:P.paperFaint}}>
          {p.sub}
        </div>
      </div>
      <div>
        <h3 className="gradient-text-teal" style={{fontFamily:SANS,fontWeight:200,fontSize:'clamp(56px,7.6vw,128px)',letterSpacing:'0.12em',lineHeight:0.96,margin:'0 0 48px',textTransform:'uppercase'}}>
          {p.title}
        </h3>
        <p style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,fontSize:'clamp(24px,2.8vw,38px)',lineHeight:1.3,color:P.paper,margin:'0 0 28px',letterSpacing:'-0.015em',maxWidth:640}}>
          {p.lead}
        </p>
        <p style={{fontFamily:"'Source Serif 4',serif",fontSize:18,lineHeight:1.78,color:P.paperMute,margin:0,fontWeight:400,maxWidth:640}}>
          {p.body}
        </p>
      </div>
      <motion.div style={{position:'relative',minHeight:360,display:'flex',alignItems:'center',justifyContent:'center',scale:blotScale,x:blotX}}>
        <DriftingInk color={p.blot} size={360} x={0} y={0} opacity={0.65} driftX={40} driftY={30} duration={18}/>
        <DriftingInk color={p.blotDeep} size={220} x={60} y={-40} opacity={0.5} driftX={30} driftY={20} duration={14}/>
      </motion.div>
    </motion.div>
  );
}

/* ═══ WHY US ═══ — anonymous founding team intersection flex */
function ThirdSpace() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const blotY = useTransform(scrollYProgress, [0,1], ['-30%','30%']);
  const blotOp = useTransform(scrollYProgress, [0,0.4,0.8,1], [0.2,0.7,0.6,0.2]);
  return (
    <section id="why-us" ref={ref} style={{position:'relative',background:P.ink,padding:'220px 80px 220px 120px',borderBottom:'1px solid rgba(235,232,224,0.05)',overflow:'hidden'}}>
      <motion.div style={{position:'absolute', right:'-4%', top:'30%', y:blotY, opacity:blotOp}}>
        <DriftingInk color={P.teal} size={820} x={0} y={0} opacity={1} driftX={60} driftY={40} duration={28}/>
      </motion.div>
      <Grain opacity={0.06}/>
      <div style={{maxWidth:1200,margin:'0 auto',position:'relative',zIndex:2}}>
        <div style={{fontFamily:MONO,fontSize:11,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperFaint,marginBottom:80}}>
          Why Us
        </div>
        <h2 style={{fontFamily:SANS,fontWeight:200,fontSize:'clamp(48px,7vw,128px)',lineHeight:1.0,letterSpacing:'-0.025em',margin:'0 0 120px',color:P.paper,maxWidth:1100,textWrap:'balance'}}>
          Why this <span style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,color:P.paper}}>team.</span>
        </h2>
        <div style={{maxWidth:780,display:'flex',flexDirection:'column',gap:40}}>
          {[
            "Founder background: ex-FAANG engineering, a multi-unit franchise operator, native across US and Asian markets, and a builder raised inside this generation's culture.",
            "A decade building at FAANG scale, a franchise held and operated first-hand, and software written from inside the business instead of studied from outside it.",
          ].map((t,i) => (
            <motion.p key={i}
              initial={{opacity:0, y:24}}
              whileInView={{opacity:1, y:0}}
              viewport={{once:true, margin:'-8%'}}
              transition={{duration:1, delay:i*0.09, ease:[0.16,1,0.3,1]}}
              style={{fontFamily:"'Source Serif 4',serif",fontSize:18,lineHeight:1.8,color:P.paperMute,margin:0,fontWeight:400}}>
              {t}
            </motion.p>
          ))}
          <motion.p
            initial={{opacity:0, y:24}}
            whileInView={{opacity:1, y:0}}
            viewport={{once:true, margin:'-8%'}}
            transition={{duration:1, delay:0.3, ease:[0.16,1,0.3,1]}}
            style={{fontFamily:"'Source Serif 4',serif",fontSize:18,lineHeight:1.8,color:P.paperMute,margin:'24px 0 0',fontWeight:400}}>
            If you're building or investing in this space, <a href="mailto:contact@hyperealm.co" style={{color:P.paper,textDecoration:'none',borderBottom:`1px solid ${P.paperFaint}`,paddingBottom:1}}>contact@hyperealm.co</a>
          </motion.p>
        </div>
      </div>
    </section>
  );
}

/* ═══ FOUNDER ═══ */
function Founder() {
  return (
    <section id="founder" style={{position:'relative',background:P.deepest,padding:'200px 80px 200px 120px',borderBottom:'1px solid rgba(235,232,224,0.05)',overflow:'hidden'}}>
      <DriftingInk color={P.coralDeep} size={600} x="12%" y="30%" opacity={0.45} driftX={40} driftY={30} duration={22}/>
      <DriftingInk color={P.violetDeep} size={500} x="88%" y="65%" opacity={0.38} driftX={50} driftY={40} duration={26}/>
      <Grain opacity={0.06}/>
      <div style={{maxWidth:1300,margin:'0 auto',position:'relative',zIndex:2}}>
        <div style={{fontFamily:MONO,fontSize:11,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperFaint,marginBottom:80}}>
          The Operator
        </div>
        <motion.div
          initial={{opacity:0,y:40}}
          whileInView={{opacity:1,y:0}}
          viewport={{once:true, margin:'-8%'}}
          transition={{duration:1.2, ease:[0.16,1,0.3,1]}}
          style={{display:'grid', gridTemplateColumns:'0.9fr 1.5fr', gap:120, alignItems:'center'}}>
          {/* portrait placeholder — styled like submersive imagery */}
          <div style={{aspectRatio:'3/4',background:P.coal,borderRadius:2,position:'relative',overflow:'hidden',border:'1px solid rgba(235,232,224,0.08)'}}>
            <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
              <InkBlot color={P.teal} size={520} opacity={0.7}/>
              <InkBlot color={P.violet} size={380} opacity={0.5} filter="inkSmokeMild"/>
            </div>
            <div style={{position:'absolute',top:16,left:16,fontFamily:MONO,fontSize:9,letterSpacing:'0.28em',textTransform:'uppercase',color:P.paperFaint}}>
              [ Portrait · TBD ]
            </div>
            <div style={{position:'absolute',bottom:16,left:16,right:16,display:'flex',justifyContent:'space-between',fontFamily:MONO,fontSize:9,letterSpacing:'0.26em',textTransform:'uppercase',color:P.paperFaint}}>
              <span>Founder · I</span>
              <span>MMXXVI</span>
            </div>
          </div>
          <div>
            <div style={{fontFamily:MONO,fontSize:10,letterSpacing:'0.3em',textTransform:'uppercase',color:P.paperFaint,marginBottom:24}}>
              Yujia Dong · Founder
            </div>
            <h3 style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,fontSize:'clamp(40px,4.8vw,72px)',lineHeight:1.06,letterSpacing:'-0.025em',margin:'0 0 40px',color:P.paper,textWrap:'balance'}}>
              "I am not building a tech company that happens to have venues. I am building venues that happen to need software I could not find, so I wrote it."
            </h3>
            <p style={{fontFamily:"'Source Serif 4',serif",fontSize:18,lineHeight:1.78,color:P.paperMute,margin:'0 0 20px',fontWeight:400,maxWidth:560}}>
              Yujia Dong was raised in Beijing, trained as an engineer at the University of Illinois, and spent nine years operating at scale inside Amazon before moving to New Orleans to build Hyperealm. She holds the franchise for a leading virtual reality brand in the US South and opens her first venue in 2027.
            </p>
            <div style={{display:'flex',gap:40,marginTop:48,fontFamily:MONO,fontSize:10,letterSpacing:'0.26em',textTransform:'uppercase',color:P.paperMute,flexWrap:'wrap'}}>
              <span>Venues: 1 (opening 2027)</span>
              <span>Platform: Hyperealm OS, in development</span>
              <span>Base: New Orleans · Beijing</span>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

/* ═══ 2026 YEAR REVEAL — like Submersive's "2027" ═══ */
function YearReveal() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const blotX = useTransform(scrollYProgress, [0,1], ['-20%','20%']);
  const blotScale = useTransform(scrollYProgress, [0,0.5,1], [0.7, 1.2, 0.9]);
  return (
    <section ref={ref} style={{position:'relative',minHeight:'90vh',background:P.deepest,overflow:'hidden',display:'flex',alignItems:'center',justifyContent:'center'}}>
      <motion.div style={{position:'absolute',left:'50%',top:'50%',x:blotX,scale:blotScale}}>
        <DriftingInk color={P.coralDeep} size={700} x={0} y={0} opacity={0.65} driftX={80} driftY={50} duration={22}/>
        <DriftingInk color={P.tealDeep} size={500} x={-100} y={60} opacity={0.5} driftX={60} driftY={40} duration={26}/>
      </motion.div>
      <Grain opacity={0.07}/>
      <Vignette/>
      <div style={{position:'relative',zIndex:10,textAlign:'center'}}>
        <motion.div
          initial={{opacity:0}}
          whileInView={{opacity:0.55}}
          viewport={{once:true, margin:'-20%'}}
          transition={{duration:1.6, delay:0.2}}
          style={{fontFamily:MONO,fontSize:11,letterSpacing:'0.5em',textTransform:'uppercase',color:P.paper,marginBottom:44}}>
          What's Next
        </motion.div>
        <motion.h2
          initial={{opacity:0, y:40, filter:'blur(20px)'}}
          whileInView={{opacity:1, y:0, filter:'blur(0px)'}}
          viewport={{once:true, margin:'-20%'}}
          transition={{duration:2, ease:[0.19,1,0.22,1]}}
          className="gradient-text-coral"
          style={{fontFamily:SANS,fontWeight:200,fontSize:'clamp(120px,24vw,420px)',lineHeight:0.88,letterSpacing:'0.02em',margin:0,filter:'url(#inkSmokeSoft)'}}>
          2027
        </motion.h2>
        <motion.div
          initial={{opacity:0, y:14}}
          whileInView={{opacity:0.6, y:0}}
          viewport={{once:true, margin:'-20%'}}
          transition={{duration:1.4, ease:[0.16,1,0.3,1], delay:1.2}}
          style={{marginTop:36,fontFamily:SERIF,fontStyle:'italic',fontWeight:300,fontSize:'clamp(16px,1.6vw,22px)',letterSpacing:'-0.01em',color:P.paperMute}}>
          The first room.
        </motion.div>
      </div>
    </section>
  );
}

/* ═══ WAITLIST ═══ */
function Waitlist() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || sending) return;
    setSending(true); setError('');
    try {
      const r = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      if (r.ok) setSubmitted(true);
      else { const j = await r.json().catch(()=>({})); setError(j.error || 'Something went wrong'); }
    } catch { setError('Network error'); }
    finally { setSending(false); }
  };
  return (
    <section id="waitlist" style={{position:'relative',minHeight:'90vh',background:P.ink,padding:'200px 60px 140px',overflow:'hidden',display:'flex',alignItems:'center',justifyContent:'center'}}>
      <DriftingInk color={P.teal} size={700} x="30%" y="50%" opacity={0.4} driftX={50} driftY={30} duration={24}/>
      <DriftingInk color={P.coralDeep} size={600} x="70%" y="50%" opacity={0.45} driftX={60} driftY={40} duration={28}/>
      <Grain opacity={0.07}/>
      <Vignette/>
      <div style={{maxWidth:920,margin:'0 auto',textAlign:'center',position:'relative',zIndex:5}}>
        <div style={{fontFamily:MONO,fontSize:11,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paperMute,marginBottom:48}}>
          Enter the list
        </div>
        <h3 style={{fontFamily:SANS,fontWeight:200,fontSize:'clamp(48px,7vw,128px)',lineHeight:0.98,letterSpacing:'-0.025em',margin:0,color:P.paper,textWrap:'balance'}}>
          Built in private.<br/>
          <span style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,color:P.paper}}>The list sees it first.</span>
        </h3>
        <form onSubmit={onSubmit} style={{marginTop:80}}>
          <AnimatePresence mode="wait">
            {!submitted ? (
              <motion.div key="form" exit={{opacity:0,y:-10}} style={{display:'inline-flex',alignItems:'center',gap:4,background:'rgba(235,232,224,0.04)',border:'1px solid rgba(235,232,224,0.22)',borderRadius:999,padding:'4px 4px 4px 28px',minWidth:480}}>
                <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@domain.com" type="email" required disabled={sending} style={{background:'transparent',border:'none',outline:'none',flex:1,fontFamily:SANS,fontSize:14,color:P.paper,padding:'12px 0',letterSpacing:'0.01em'}}/>
                <button type="submit" disabled={sending} style={{fontFamily:SANS,fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color:P.ink,background:P.paper,padding:'12px 22px',borderRadius:999,fontWeight:500,border:'none',cursor:sending?'wait':'pointer',opacity:sending?0.6:1}}>{sending?'Sending…':'Request Access →'}</button>
              </motion.div>
            ) : (
              <motion.div key="done" initial={{opacity:0,y:10}} animate={{opacity:1,y:0}}
                style={{fontFamily:SERIF,fontStyle:'italic',fontWeight:300,fontSize:22,color:P.paper,letterSpacing:'-0.015em'}}>
                You're on the list. We only write when there's something real to show.
              </motion.div>
            )}
          </AnimatePresence>
          {error && <div style={{marginTop:16,fontFamily:MONO,fontSize:11,color:P.coral,letterSpacing:'0.04em'}}>{error}</div>}
        </form>
        <div style={{marginTop:40,fontFamily:MONO,fontSize:10,letterSpacing:'0.26em',textTransform:'uppercase',color:P.paperFaint}}>
          Or write us directly · <a href="mailto:contact@hyperealm.co" style={{color:P.paperMute,textDecoration:'none',borderBottom:`1px solid ${P.paperFaint}`}}>contact@hyperealm.co</a>
        </div>
      </div>
    </section>
  );
}

/* ═══ FOOTER ═══ */
function Footer() {
  return (
    <footer style={{background:P.deepest,padding:'80px 80px 80px 120px',borderTop:'1px solid rgba(235,232,224,0.06)'}}>
      <div style={{maxWidth:1400,margin:'0 auto',display:'grid',gridTemplateColumns:'2fr 1fr 1fr',gap:80,alignItems:'start'}}>
        <div>
          <div style={{fontFamily:SANS,fontWeight:400,fontSize:12,letterSpacing:'0.42em',textTransform:'uppercase',color:P.paper,marginBottom:28}}>
            HYPEREALM
          </div>
          <p style={{fontFamily:SANS,fontSize:14,lineHeight:1.7,color:P.paperMute,margin:0,maxWidth:380,fontWeight:300}}>
            The operating system for physical-experience venues. Built by operators. Proven on owned venues. In stealth.
          </p>
          <div style={{marginTop:48,fontFamily:SERIF,fontStyle:'italic',fontWeight:300,fontSize:17,color:P.paperFaint,letterSpacing:'-0.01em'}}>
            ⌘ 超域 · Hyperealm
          </div>
        </div>
        {[
          { t:'Company',  l:[
            { x:'Problem', muted:false },
            { x:'Approach', muted:false },
            { x:'Why Us', muted:false },
          ]},
          { t:'Contact', l:[
            { x:'contact@hyperealm.co', muted:false },
            { x:'New York', muted:false },
          ]},
        ].map((c,i) => (
          <div key={i}>
            <div style={{fontFamily:MONO,fontSize:9.5,letterSpacing:'0.3em',textTransform:'uppercase',color:P.paperFaint,marginBottom:22}}>{c.t}</div>
            <div style={{display:'flex',flexDirection:'column',gap:12}}>
              {c.l.map(item => (
                <span key={item.x} className={item.muted ? '' : 'link'}
                  style={{
                    fontFamily:SANS, fontSize:13, fontWeight:300,
                    color: item.muted ? 'rgba(235,232,224,0.22)' : P.paperMute,
                    cursor: item.muted ? 'default' : 'pointer',
                    transition:'color 0.2s',
                  }}>{item.x}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{maxWidth:1400,margin:'100px auto 0',paddingTop:32,borderTop:'1px solid rgba(235,232,224,0.06)',display:'flex',justifyContent:'space-between',fontFamily:MONO,fontSize:9,letterSpacing:'0.28em',textTransform:'uppercase',color:P.paperFaint}}>
        <span>© 2026 Hyperealm, Inc.</span>
        <span>Hypermode Holdings</span>
      </div>
    </footer>
  );
}

/* ═══ MAIN ═══ */
function App() {
  return (
    <>
      <ScrollBar/>
      <Chrome/>
      <OpeningHero/>

      {/* Mirrors submersive's "TAKES YOU BEYOND RELAXATION INTO ELEVATED STATES" */}
      <CascadeStatement
        eyebrow="Thesis"
        lines={[
          { text:'Built by' },
          { text:'operators.', indent:8, italic:true },
          { text:'AI-native', indent:2 },
          { text:'at scale.', indent:14, italic:true },
        ]}
        blotColor={P.teal} blotColor2={P.violetDeep}
      />

      <Manifesto/>

      <CascadeStatement
        eyebrow="Why now"
        lines={[
          { text:'As AI makes' },
          { text:'the screen infinite,', indent:6, italic:true },
          { text:'the room' , indent:2 },
          { text:'becomes scarce.', indent:12, italic:true },
        ]}
        blotColor={P.coral} blotColor2={P.tealDeep}
      />

      <Pillars/>

      <ThirdSpace/>

      {/* <Founder/>  — stealth: commented out until launch */}

      <YearReveal/>

      <Waitlist/>

      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);