/* Rolo Marketing Wireframes — Variants bottom half (sections 6-10)
 * SocialVariants, PressVariants, AboutVariants, WhyNowVariants, CTAVariants
 */

const { useEffect: useEffectB, useRef: useRefB, useState: useStateB } = React;

/* ============================================================
 * 6. SOCIAL PROOF VIDEOS
 * ============================================================ */
const QUOTES = [
  { quote:'"So good — a lot of taste!"', handle:'', video:window.A('vocNtu1'), poster:'assets/posters/voc-ntu-1.jpg' },
  { quote:'"10/10!"', handle:'', video:window.A('vocNtu3'), poster:'assets/posters/voc-ntu-3.jpg' },
  { quote:"\"I can't believe a machine fried this!\"", handle:'', video:window.A('vocSutd'), poster:'assets/posters/voc-sutd-4.jpg' },
  { quote:'"Watching a robot build my bowl is honestly soothing."', handle:'@samtries · 220K views' },
  { quote:'"Caught the airport one mid-shift. Zero drama."', handle:'@flightclub · 67K views' },
];

function PortraitVideoCard({ idx, quote, handle, video, poster, large }) {
  const wrapRef = useRefB(null);
  const vidRef = useRefB(null);
  const [active, setActive] = useStateB(false);
  useEffectB(() => {
    if (!video || !wrapRef.current) return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          setActive(true);
          if (vidRef.current && vidRef.current.paused) vidRef.current.play().catch(()=>{});
        } else if (vidRef.current && !vidRef.current.paused) {
          vidRef.current.pause();
        }
      }
    }, { rootMargin: '1500px', threshold: 0.01 });
    io.observe(wrapRef.current);
    return () => io.disconnect();
  }, [video]);
  return (
    <div style={{display:'flex',flexDirection:'column',gap:12}}>
      <div ref={wrapRef} className="wf-photo portrait dark"
        onClick={() => { const v = vidRef.current; if (v && v.paused) { const p = v.play(); if (p && typeof p.catch === 'function') p.catch(() => {}); } }}
        style={{
          aspectRatio: large ? '3 / 4.4' : '9 / 16',
          padding: 0, position:'relative', overflow:'hidden',
          cursor:'pointer',
          background: video ? '#000' : undefined,
          backgroundImage: poster ? `url(${poster})` : undefined,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }}>
        {video && active && (
          <video
            ref={vidRef}
            src={video}
            poster={poster}
            autoPlay
            muted
            defaultMuted
            loop
            playsInline
            preload="auto"
            style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}
          />
        )}
        <div style={{position:'absolute',top:12,left:14,fontFamily:'var(--rr-font-mono)',fontSize:10,letterSpacing:'0.18em',color:'rgba(255,255,255,0.7)',zIndex:2,textShadow:video?'0 1px 4px rgba(0,0,0,0.5)':'none'}}>0{idx+1} · 0:42</div>
      </div>
      {/* Caption sits BELOW the video so it never covers subtitles. */}
      <div style={{padding:'2px 2px 0'}}>
        <div style={{fontSize:14,fontWeight:500,letterSpacing:'-0.01em',lineHeight:1.4,color:'#FFF',marginBottom: handle ? 8 : 0}}>{quote}</div>
        {handle && (
          <div style={{fontFamily:'var(--rr-font-mono)',fontSize:10,letterSpacing:'0.14em',color:'rgba(255,255,255,0.55)',textTransform:'uppercase'}}>{handle}</div>
        )}
      </div>
    </div>
  );
}

function SocialVariants() {
  return (
    <React.Fragment>
      {/* A — 3 portrait cards */}
      <window.Variant
        letter="A"
        title="Three portrait cards · per brief"
        desc="Equal-weight row of three 9:16 cards. Centered play affordance, quote overlay on bottom gradient."
        notes={['Equal weight 3-up', '9:16 cards', 'Hover lift 2 px']}
        dark
      >
        <div className="frame wf-reveal">
          <span className="wf-eyebrow">Voice of customer</span>
          <h2 className="wf-h1" style={{color:'#FFF',maxWidth:'18ch',marginBottom:32}}>Don't take our word for it.</h2>
          <div className="wf-video-grid" style={{display:'grid',gap:18,maxWidth:780}}>
            {QUOTES.slice(0,3).map((q,i)=><PortraitVideoCard key={i} idx={i} {...q} />)}
          </div>
          <span className="wf-anno" style={{top:14,right:20,color:'#E0BD63'}}>3-up · 9:16 · play on tap</span>
        </div>
      </window.Variant>

      {/* B — 1 hero + 2 side */}
      <window.Variant
        letter="B"
        title="Featured hero · two side"
        desc="One larger portrait card leads, two smaller stack alongside. Better when one video is genuinely the breakthrough."
        notes={['1 hero 2:3', '2 smaller side', 'Asymmetric attention']}
        dark
      >
        <div className="frame wf-reveal">
          <span className="wf-eyebrow">Voice of customer</span>
          <h2 className="wf-h1" style={{color:'#FFF',maxWidth:'18ch',marginBottom:32}}>Don't take our word for it.</h2>
          <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:18,maxWidth:820}}>
            <PortraitVideoCard idx={0} {...QUOTES[0]} large />
            <div style={{display:'flex',flexDirection:'column',gap:18}}>
              <PortraitVideoCard idx={1} {...QUOTES[1]} />
              <PortraitVideoCard idx={2} {...QUOTES[2]} />
            </div>
          </div>
          <span className="wf-anno" style={{top:14,right:20,color:'#E0BD63'}}>One hero clip leads</span>
        </div>
      </window.Variant>

      {/* C — Carousel marquee */}
      <window.Variant
        letter="C"
        title="Endless carousel"
        desc="Five+ cards in a horizontal track that auto-scrolls. Implies a constant stream of new content."
        notes={['5+ visible cards', 'Auto-scroll left', 'Implies content velocity']}
        dark
      >
        <div className="frame wf-reveal" style={{padding:'40px 0'}}>
          <div style={{padding:'0 56px'}}>
            <span className="wf-eyebrow">Voice of customer</span>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'end',marginBottom:24}}>
              <h2 className="wf-h1" style={{color:'#FFF',maxWidth:'18ch',marginTop:8}}>Don't take our word for it.</h2>
              <span className="mono" style={{fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color:'rgba(255,255,255,0.5)'}}>180+ clips · across platforms</span>
            </div>
          </div>
          <div style={{overflow:'hidden',position:'relative'}}>
            <div style={{display:'flex',gap:16,padding:'4px 56px',animation:'carouselMove 35s linear infinite',width:'max-content'}}>
              {[...QUOTES,...QUOTES].map((q,i)=>(
                <div key={i} style={{width:200,flex:'none'}}>
                  <PortraitVideoCard idx={i % QUOTES.length} {...q} />
                </div>
              ))}
            </div>
            <style>{`@keyframes carouselMove { to { transform: translateX(-50%); } }`}</style>
          </div>
          <span className="wf-anno" style={{top:14,right:20,color:'#E0BD63'}}>Animated horizontal · pause on hover</span>
        </div>
      </window.Variant>
    </React.Fragment>
  );
}
window.SocialVariants = SocialVariants;

/* ============================================================
 * 7. PRESS & MEDIA
 * ============================================================ */
const PUBS = [
  { name:'e27',                 url:'https://e27.co/rolo-robotics-funding-20251104/' },
  { name:'Tech in Asia',        url:'https://www.techinasia.com/news/antler-joins-3-5m-seed-round-in-singapores-rolo-robotics' },
  { name:'TechNode Global',     url:'https://technode.global/2025/11/04/singapores-rolo-robotics-raises-3-45m-in-oversubscribed-seed-round-led-by-beenext/' },
  { name:'KrAsia',              url:'https://kr-asia.com/deals-in-brief-accel-invests-in-vite-maker-voidzero-rolo-robotics-and-videotto-raise-seed-funding-coolmate-completes-series-c-round-and-more' },
  { name:'Asia Food Beverages', url:'https://asiafoodbeverages.com/rolo-robotics-to-launch-singapores-first-autonomous-freshly-prepared-food-vending-unit/' },
];

function PressVariants() {
  return (
    <React.Fragment>
      {/* A — Pills per brief */}
      <window.Variant
        letter="A"
        title="Pill row · per brief"
        desc="'As Seen In' eyebrow, single horizontal row of publication pills with light grey borders. Each pill links to the article."
        notes={['One quiet row', 'Light pill borders', 'Each pill is a real link']}
      >
        <div className="frame tight wf-reveal" style={{display:'flex',flexDirection:'column',gap:24,alignItems:'flex-start',justifyContent:'center'}}>
          <span className="wf-eyebrow" style={{color:'var(--wf-muted)'}}>As Seen In</span>
          <div style={{display:'flex',flexWrap:'wrap',gap:12}}>
            {PUBS.map(p=>(
              <a key={p.name} href={p.url} target="_blank" rel="noopener" className="wf-chip" style={{textDecoration:'none'}}>{p.name}</a>
            ))}
          </div>
        </div>
      </window.Variant>

      {/* B — Logo strip */}
      <window.Variant
        letter="B"
        title="Logo strip"
        desc="Quieter — publication wordmarks set in a calm horizontal strip with thin separators. No pill chrome. Each name links to the piece."
        notes={['Mono separators', 'No pill borders', 'Wordmarks link out']}
      >
        <div className="frame tight wf-reveal" style={{display:'flex',flexDirection:'column',gap:24,justifyContent:'center'}}>
          <span className="wf-eyebrow" style={{color:'var(--wf-muted)'}}>As Seen In</span>
          <div style={{display:'flex',flexWrap:'wrap',alignItems:'center',gap:'18px 30px',color:'var(--wf-stamp)'}}>
            {PUBS.map((p,i)=>(
              <React.Fragment key={p.name}>
                <a href={p.url} target="_blank" rel="noopener" style={{fontFamily:'var(--rr-font-sans)',fontWeight:500,fontSize:17,letterSpacing:'-0.01em',color:'inherit',textDecoration:'none'}}>{p.name}</a>
                {i < PUBS.length-1 && <span style={{width:1,height:18,background:'var(--wf-line-2)'}}></span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </window.Variant>

      {/* C — Featured story + pills */}
      <window.Variant
        letter="C"
        title="Featured story · plus pills"
        desc="A real pull-quote from BEENEXT's lead in the seed round is foregrounded; the remaining publications follow as a quieter pill row underneath."
        notes={['Real pull-quote', 'Secondary pills below', 'Adds editorial weight']}
      >
        <div className="frame tight wf-reveal" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:64,alignItems:'center'}}>
          <div>
            <span className="wf-eyebrow" style={{color:'var(--wf-muted)'}}>As Seen In</span>
            <p style={{fontSize:'clamp(22px,2.4vw,32px)',lineHeight:1.2,fontWeight:500,letterSpacing:'-0.015em',marginTop:18,maxWidth:'28ch'}}>
              "ROLO isn't just prototyping — it's deploying real systems that solve real labor and cost challenges."
            </p>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.2em',textTransform:'uppercase',color:'var(--wf-muted)',marginTop:18}}>
              — Jeremy Soh, VP at BEENEXT<span className="wf-press-cite"> · <a href="https://technode.global/2025/11/04/singapores-rolo-robotics-raises-3-45m-in-oversubscribed-seed-round-led-by-beenext/" target="_blank" rel="noopener" style={{color:'var(--wf-stamp)',textDecoration:'underline',textDecorationColor:'var(--rr-gold)',textUnderlineOffset:3}}>TechNode Global, 2025</a></span>
            </div>
          </div>
          <div style={{display:'flex',flexWrap:'wrap',gap:10}}>
            {PUBS.filter(p=>p.name!=='TechNode Global').map(p=>(
              <a key={p.name} href={p.url} target="_blank" rel="noopener" className="wf-chip" style={{textDecoration:'none'}}>{p.name}</a>
            ))}
          </div>
        </div>
      </window.Variant>
    </React.Fragment>
  );
}
window.PressVariants = PressVariants;

/* ============================================================
 * PARTNERS BANNER — dark marquee between Press and Why Now
 * ============================================================ */
const PARTNERS = [
  { name: 'McCain',   img: 'assets/partners/mccain.png' },
  { name: "Yeo's",    img: 'assets/partners/yeos.png' },
  { name: 'CP Foods', img: 'assets/partners/cpfoods.png' },
  { name: 'CS Tay',   img: 'assets/partners/cstay.png' },
  { name: 'STOVVE',   img: 'assets/partners/stovve.png' },
];
function PartnersBanner() {
  // Duplicate the set so the marquee loops seamlessly (-50% translate).
  const loop = [...PARTNERS, ...PARTNERS];
  return (
    <div className="wf-partners" id="sec-partners">
      <div className="wf-partners-eyebrow">In collaboration with</div>
      <div className="wf-partners-track">
        {loop.map((p, i) => (
          <div className="wf-partners-chip" key={i}>
            <img src={p.img} alt={i < PARTNERS.length ? p.name : ''} aria-hidden={i >= PARTNERS.length} loading="lazy" />
          </div>
        ))}
      </div>
    </div>
  );
}
window.PartnersBanner = PartnersBanner;

/* ============================================================
 * 8. ABOUT & INVESTORS
 * ============================================================ */
const BACKERS = []; // removed at user request

function AboutVariants() {
  return (
    <React.Fragment>
      {/* A — Per brief */}
      <window.Variant
        letter="A"
        title="Portrait + story · per brief"
        desc="Tall portrait left on light grey. Right: headline, three paragraphs, partnership pills, our partners block."
        notes={['Tall portrait left', 'Three paragraphs', 'Our partners block']}
      >
        <div className="frame wide wf-reveal" style={{display:'grid',gridTemplateColumns:'1fr 1.2fr',gap:64,alignItems:'start'}}>
          <div className="wf-founder-tall">
            <img src={window.A("founderRavi")} alt="Ravi Nahappan · CEO" />
            <img src={window.A("founderTushar")} alt="Tushar Mohan · CTO" />
          </div>
          <div>
            <span className="wf-eyebrow">Why us. Why now.</span>
            <h2 className="wf-h1">Two builders.<br/>One conviction.</h2>
            <p style={{fontSize:15,color:'var(--wf-stamp)',lineHeight:1.6,marginTop:22,maxWidth:'54ch'}}>
              A decade in food service taught <b style={{color:'var(--wf-ink)'}}>Ravi</b> that the constraint isn't the food — it's the people, the throughput, the reliability. Across 23 years in F&B operations, finance and manufacturing, he scaled brands and ran factories across Asia Pacific. He saw the same equation break, kitchen after kitchen.
            </p>
            <p style={{fontSize:15,color:'var(--wf-stamp)',lineHeight:1.6,marginTop:14,maxWidth:'54ch'}}>
              <b style={{color:'var(--wf-ink)'}}>Tushar</b> spent 17 years bringing robots into production. He has shipped more than 3,000 autonomous machines across 30+ countries — learning, the hard way, what it takes to make hardware survive the real world.
            </p>
            <p style={{fontSize:15,color:'var(--wf-stamp)',lineHeight:1.6,marginTop:14,maxWidth:'54ch'}}>
              Rolo is what happens when those two careers meet in one machine.
            </p>
          </div>
          <span className="wf-anno" style={{top:14,right:20}}>Portrait · founder story</span>
        </div>
      </window.Variant>

      {/* B — Twin founder portraits */}
      <window.Variant
        letter="B"
        title="Twin founders · narrative center"
        desc="Two portrait squares side by side at the top. Story flows centrally below them. Our partners sits in its own wide band at the foot."
        notes={['Two founder portraits', 'Centered narrative column', 'Our partners band full width']}
      >
        <div className="frame wide wf-reveal">
          <div style={{textAlign:'center',marginBottom:24}}>
            <span className="wf-eyebrow" style={{justifyContent:'center'}}>Why us. Why now.</span>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18,maxWidth:580,margin:'0 auto'}}>
            <figure className="wf-founder-card">
              <img src={window.A("founderRavi")} alt="Ravi Nahappan · CEO" />
              <figcaption>Ravi Nahappan · CEO</figcaption>
            </figure>
            <figure className="wf-founder-card">
              <img src={window.A("founderTushar")} alt="Tushar Mohan · CTO" />
              <figcaption>Tushar Mohan · CTO</figcaption>
            </figure>
          </div>
          <div style={{maxWidth:680,margin:'40px auto 0',textAlign:'center'}}>
            <h2 className="wf-h2" style={{margin:'0',maxWidth:'22ch',marginLeft:'auto',marginRight:'auto'}}>Two builders. One conviction.</h2>
            <p style={{fontSize:15,color:'var(--wf-stamp)',lineHeight:1.65,marginTop:22}}>
              A decade in food service taught <b style={{color:'var(--wf-ink)'}}>Ravi</b> that the constraint isn't the food — it's the people, the throughput, the reliability. Across 23 years in F&B operations, finance and manufacturing, he scaled brands and ran factories across Asia Pacific.
            </p>
            <p style={{fontSize:15,color:'var(--wf-stamp)',lineHeight:1.65,marginTop:14}}>
              <b style={{color:'var(--wf-ink)'}}>Tushar</b> spent 17 years bringing robots into production. He has shipped more than 3,000 autonomous machines across 30+ countries — learning, the hard way, what it takes to make hardware survive the real world.
            </p>
            <p style={{fontSize:15,color:'var(--wf-stamp)',lineHeight:1.65,marginTop:14}}>
              Rolo is what happens when those two careers meet in one machine.
            </p>
          </div>
          <span className="wf-anno" style={{top:14,right:20}}>Two portraits · centered prose</span>
        </div>
      </window.Variant>

      {/* C — Timeline */}
      <window.Variant
        letter="C"
        title="Timeline"
        desc="Story unfolds as four moments along a horizontal timeline: founded · mission · industry partners · our partners. Portrait shrinks to a thumbnail at top."
        notes={['Horizontal timeline', '4 moments left → right', 'Portrait as thumb only']}
      >
        <div className="frame wide wf-reveal">
          <div style={{display:'flex',gap:18,alignItems:'center',marginBottom:24}}>
            <div className="wf-founder-thumb">
              <img src={window.A("founderRavi")} alt="Ravi Nahappan" />
              <img src={window.A("founderTushar")} alt="Tushar Mohan" />
            </div>
            <div>
              <span className="wf-eyebrow">Why us. Why now.</span>
              <h2 className="wf-h2" style={{margin:'10px 0 0',maxWidth:'24ch'}}>Two builders. One conviction.</h2>
            </div>
          </div>
          <div style={{marginTop:32,position:'relative'}}>
            <div style={{position:'absolute',left:0,right:0,top:38,height:1,background:'var(--wf-line)'}}></div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24,position:'relative'}}>
              {[
                {y:'Ravi · CEO', t:'23 years in F&B and manufacturing', d:'Scaled brands and ran factories across Asia Pacific. Saw the same equation break, kitchen after kitchen — people, throughput, reliability.'},
                {y:'Tushar · CTO', t:'17 years bringing robots into production', d:'Shipped 3,000+ autonomous machines across 30+ countries. Learned, the hard way, what survives the real world.'},
                {y:'Together', t:'Rolo Robotics', d:'Two careers, one machine. Real food. Real throughput. Built so the constraint stops being the people who keep kitchens running.'},
              ].map((s,i)=>(
                <div key={i} style={{paddingTop:50,position:'relative'}}>
                  <span style={{position:'absolute',top:32,left:0,width:12,height:12,borderRadius:999,background: s.gold ? 'var(--rr-gold)' : 'var(--wf-ink)'}}></span>
                  <div className="mono" style={{fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color: s.gold ? 'var(--rr-gold)' : 'var(--wf-muted)'}}>{s.y}</div>
                  <div style={{fontSize:18,fontWeight:600,letterSpacing:'-0.01em',marginTop:8,lineHeight:1.2}}>{s.t}</div>
                  <div style={{fontSize:13,color:'var(--wf-stamp)',lineHeight:1.55,marginTop:8}}>{s.d}</div>
                </div>
              ))}
            </div>
          </div>
          <span className="wf-anno" style={{top:14,right:20}}>Founding → funding · left to right</span>
        </div>
      </window.Variant>
    </React.Fragment>
  );
}
window.AboutVariants = AboutVariants;

/* ============================================================
 * 9. WHY NOW
 * ============================================================ */
const INSIGHTS = [
  { label:'Labour', t:'Labour shortages are structural, not cyclical.', d:'F&B turnover sits above 70 % in major Asian markets. The pipeline isn\'t refilling.', src:'Source: Ministry of Manpower / industry data, 2024.' },
  { label:'Cost',   t:'Costs are rising with no ceiling in sight.',     d:'Wages, rent, and ingredients all moving the same direction. Margin compression every quarter.', src:'Source: McKinsey Foodservice Outlook, 2024.' },
  { label:'Tech',   t:'Automation is no longer a future option.',      d:'Vision, robotics, and food-grade hardware finally cheap, reliable, and certifiable.', src:'Source: IFR World Robotics, 2024.' },
];

function WhyNowVariants() {
  return (
    <React.Fragment>
      {/* A — 3 insight cards w/ gold left border */}
      <window.Variant
        letter="A"
        title="Three insight cards · per brief"
        desc="Headline + short intro. Three insight cards on dark surface with gold left border, body copy, and a small source line."
        notes={['Equal-weight 3-up', 'Gold left border', 'Source line per card']}
        dark
      >
        <div className="frame wide wf-reveal">
          <span className="wf-eyebrow">Why now</span>
          <h2 className="wf-h1" style={{color:'#FFF',maxWidth:'22ch'}}>The food industry is ready for a new model.</h2>
          <p className="wf-lede" style={{maxWidth:'56ch'}}>
            Three forces — none of them new — finally landed in the same place. The question isn't whether autonomous kitchens
            arrive. It's who shows up first with hardware that actually works.
          </p>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,marginTop:36}}>
            {INSIGHTS.map((c,i)=>(
              <div key={i} style={{background:'#14140F',border:'1px solid #2A2926',borderLeft:'3px solid var(--rr-gold)',padding:'24px',borderRadius:'0 8px 8px 0',display:'flex',flexDirection:'column',gap:14,minHeight:240}}>
                <div className="mono" style={{fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color:'var(--rr-gold)'}}>0{i+1} · {c.label}</div>
                <div style={{fontSize:20,fontWeight:700,color:'#FFF',letterSpacing:'-0.015em',lineHeight:1.15}}>{c.t}</div>
                <div style={{fontSize:13,color:'#9A958A',lineHeight:1.55}}>{c.d}</div>
                <div className="mono" style={{fontSize:10,letterSpacing:'0.12em',color:'#6F6B5F',marginTop:'auto'}}>{c.src}</div>
              </div>
            ))}
          </div>
        </div>
      </window.Variant>

      {/* B — Manifesto stat */}
      <window.Variant
        letter="B"
        title="Manifesto with giant stats"
        desc="Each insight becomes a one-line declarative on its own row, anchored by a giant stat number to its left. Source moves to the line itself."
        notes={['One claim per row', 'Stat number anchors left', 'Source inline at row end']}
        dark
      >
        <div className="frame wide wf-reveal">
          <span className="wf-eyebrow">Why now</span>
          <h2 className="wf-h1" style={{color:'#FFF',maxWidth:'22ch'}}>The food industry is ready for a new model.</h2>
          <div style={{marginTop:40}}>
            {[
              {n:'70%',l:'F&B turnover · Asia', t:'Labour shortages are structural, not cyclical.'},
              {n:'4.8%',l:'YoY wage growth', t:'Costs are rising with no ceiling in sight.'},
              {n:'×3',l:'Robotics deployments / yr', t:'Automation is no longer a future option.'},
            ].map((r,i)=>(
              <div key={i} style={{display:'grid',gridTemplateColumns:'180px 1fr auto',gap:36,alignItems:'baseline',padding:'28px 0',borderTop:i===0?'1px solid #2A2926':'',borderBottom:'1px solid #2A2926'}}>
                <div>
                  <div style={{fontSize:'clamp(40px,5vw,72px)',fontWeight:700,letterSpacing:'-0.035em',lineHeight:1,color:'var(--rr-gold)'}}>{r.n}</div>
                  <div className="mono" style={{fontSize:10,letterSpacing:'0.18em',textTransform:'uppercase',color:'#9A958A',marginTop:6}}>{r.l}</div>
                </div>
                <div style={{fontSize:'clamp(22px,2.4vw,32px)',fontWeight:600,color:'#FFF',letterSpacing:'-0.015em',lineHeight:1.15,maxWidth:'30ch'}}>{r.t}</div>
                <div className="mono" style={{fontSize:11,letterSpacing:'0.12em',color:'#6F6B5F',textAlign:'right'}}>Source · MoM / McKinsey / IFR, 2024</div>
              </div>
            ))}
          </div>
        </div>
      </window.Variant>

      {/* C — One full-width insight + 3 stats */}
      <window.Variant
        letter="C"
        title="One claim, three supports"
        desc="A single full-width insight as the section's argument, with three smaller supporting stats below it. Punchier."
        notes={['Argument-led', '1 + 3 layout', 'Less reading, more conviction']}
        dark
      >
        <div className="frame wide wf-reveal">
          <span className="wf-eyebrow">Why now</span>
          <h2 style={{fontSize:'clamp(40px,5.4vw,80px)',fontWeight:700,letterSpacing:'-0.035em',lineHeight:0.98,color:'#FFF',margin:'18px 0 0',maxWidth:'18ch'}}>
            Three forces just <span style={{color:'var(--rr-gold)'}}>landed in the same place.</span>
          </h2>
          <p className="wf-lede" style={{maxWidth:'52ch',marginTop:24}}>
            Labour. Cost. Automation. The first two are squeezing; the third is finally cheap enough to matter.
          </p>
          <div className="wf-insights-row" style={{marginTop:48,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:0,borderTop:'1px solid #2A2926',borderBottom:'1px solid #2A2926'}}>
            {INSIGHTS.map((c,i)=>(
              <div key={i} style={{padding:'24px 24px 24px 0',borderLeft:i===0?'':'1px solid #2A2926',paddingLeft:i===0?0:24}}>
                <div className="mono" style={{fontSize:10,letterSpacing:'0.22em',textTransform:'uppercase',color:'var(--rr-gold)'}}>{c.label}</div>
                <div style={{fontSize:16,fontWeight:600,color:'#FFF',marginTop:8,lineHeight:1.25,letterSpacing:'-0.01em'}}>{c.t}</div>
                <div className="mono" style={{fontSize:10,color:'#6F6B5F',marginTop:14}}>{c.src.replace('Source: ','')}</div>
              </div>
            ))}
          </div>
        </div>
      </window.Variant>
    </React.Fragment>
  );
}
window.WhyNowVariants = WhyNowVariants;

/* ============================================================
 * 10. CTA + FOOTER
 * ============================================================ */
const BOOK_DEMO_URL  = 'mailto:hello@rolorobotics.com?subject=Book%20a%20Demo&body=Hi%20Rolo%20team%2C%0A%0AI%27d%20like%20to%20book%20a%20demo.%0A%0AName%3A%0ACompany%3A%0ASite%2Flocation%3A%0AWhich%20module(s)%3A%0A';
const CONTACT_URL    = 'mailto:hello@rolorobotics.com';

function CTAFooter({ children, footerDark = true }) {
  return (
    <React.Fragment>
      {children}
      <div style={{background:'#111110',color:'#FAF5E9',padding:'48px clamp(28px,4vw,56px) 28px',borderTop:'1px solid #2A2926'}}>
        <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr',gap:32,alignItems:'start'}}>
          <div>
            <img src={window.A("logoWhite")} alt="Rolo Robotics" style={{height:32,width:'auto',display:'block',marginBottom:18}} />
            <div className="mono" style={{fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase',color:'#6F6B5F',lineHeight:1.7}}>
              © 2026 Rolo Robotics Pte Ltd<br/>
              202 Bedok South Ave 1, Blk C, #02-21<br/>
              Singapore 469332<br/>
              <a href="mailto:hello@rolorobotics.com" style={{color:'#FAF5E9',textDecoration:'underline',textDecorationColor:'var(--rr-gold)',textUnderlineOffset:3}}>hello@rolorobotics.com</a>
            </div>
          </div>
          {[
            ['Platform',[
              ['MicroFRY','#sec-modules'],
              ['MicroPOT','#sec-modules'],
              ['MicroGREEN','#sec-modules'],
              ['MicroBEV','#sec-modules'],
              ['Rolo OS','#sec-os'],
            ]],
            ['Company', [
              ['Press','#sec-press'],
              ['Deployment','#sec-deploy'],
              ['Contact','#sec-cta'],
            ]],
          ].map(([h,items])=>(
            <div key={h}>
              <h5 className="mono" style={{fontSize:11,letterSpacing:'0.22em',textTransform:'uppercase',color:'#9A958A',margin:'0 0 14px'}}>{h}</h5>
              <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:8}}>
                {items.map(([label,href])=>(
                  <li key={label}>
                    <a href={href} style={{fontSize:13,color:'#FAF5E9',textDecoration:'none',borderBottom:'1px solid transparent',transition:'border-color .2s'}}
                       onMouseEnter={e=>e.currentTarget.style.borderBottomColor='var(--rr-gold)'}
                       onMouseLeave={e=>e.currentTarget.style.borderBottomColor='transparent'}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mono" style={{marginTop:36,paddingTop:18,borderTop:'1px solid #2A2926',fontSize:10,letterSpacing:'0.18em',textTransform:'uppercase',color:'#6F6B5F',display:'flex',justifyContent:'space-between'}}>
          <span>Reimagining food service.</span>
          <span>Built in Singapore</span>
        </div>
      </div>
    </React.Fragment>
  );
}

function Socials({ dark }) {
  const items = [
    { key:'li', label:'LinkedIn', url:'https://www.linkedin.com/company/rolorobotics',
      svg: (<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v15H.22V8zm7.85 0h4.37v2.05h.06c.61-1.16 2.1-2.38 4.32-2.38 4.62 0 5.47 3.04 5.47 6.99V23h-4.56v-6.66c0-1.59-.03-3.63-2.21-3.63-2.22 0-2.56 1.73-2.56 3.52V23H8.07V8z"/></svg>) },
    { key:'yt', label:'YouTube', url:'https://www.youtube.com/@rolorobotics',
      svg: (<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.4 31.4 0 0 0 0 12a31.4 31.4 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.4 31.4 0 0 0 24 12a31.4 31.4 0 0 0-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z"/></svg>) },
  ];
  return (
    <div style={{display:'flex',gap:10}}>
      {items.map(it => (
        <a key={it.key} href={it.url} target="_blank" rel="noopener" aria-label={it.label} style={{
          width:40,height:40,borderRadius:999,
          border: dark ? '1px solid rgba(255,255,255,0.3)' : '1px solid var(--wf-line)',
          display:'inline-flex',alignItems:'center',justifyContent:'center',
          color: dark ? '#FAF5E9' : 'var(--wf-ink)',
          textDecoration:'none'
        }}>{it.svg}</a>
      ))}
    </div>
  );
}

function CTAVariants() {
  return (
    <React.Fragment>
      {/* A — Per brief */}
      <window.Variant
        letter="A"
        title="Big centered headline · per brief"
        desc="Headline + two buttons (ink filled + gold outline) + contact email + social row. Black footer below with logo, address, nav links."
        notes={['Two CTA buttons', 'Email + social row', 'Black footer · muted links']}
      >
        <CTAFooter>
          <div className="frame wide wf-reveal" style={{minHeight:420,textAlign:'center',display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',padding:'72px 32px',background:'#FFF'}}>
            <span className="wf-eyebrow" style={{justifyContent:'center'}}>Talk to us</span>
            <h2 style={{fontSize:'clamp(48px,6.4vw,96px)',fontWeight:700,letterSpacing:'-0.04em',lineHeight:0.96,maxWidth:'18ch',margin:'18px 0 0'}}>Hungry to see what this can do?</h2>
            <div style={{display:'flex',gap:14,marginTop:36}}>
              <a href={BOOK_DEMO_URL} className="wf-btn" style={{padding:'14px 28px',fontSize:14}}>Book a Demo →</a>
              <a href={CONTACT_URL} className="wf-btn outline gold" style={{padding:'14px 28px',fontSize:14}}>Get in Touch</a>
            </div>
            <div style={{marginTop:28,fontSize:14,color:'var(--wf-stamp)'}}>
              or email <a href="mailto:hello@rolorobotics.com" style={{color:'var(--wf-ink)',fontWeight:600,textDecoration:'underline',textDecorationColor:'var(--rr-gold)',textUnderlineOffset:4}}>hello@rolorobotics.com</a>
            </div>
            <div style={{marginTop:24}}><Socials /></div>
            <span className="wf-anno" style={{top:14,right:20}}>Ink-filled + gold-outline buttons</span>
          </div>
        </CTAFooter>
      </window.Variant>

      {/* B — Diagonal noise bg behind copy */}
      <window.Variant
        letter="B"
        title="Cinematic dark CTA"
        desc="Same content, but on a dark canvas with the hero's animated diagonal lines treatment. The two-button group lights up against it."
        notes={['Dark CTA surface', 'Reuses hero treatment', 'Brings the page full circle']}
      >
        <CTAFooter>
          <div className="frame wide wf-reveal" style={{minHeight:420,textAlign:'center',display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',padding:'72px 32px',background:'#0B0B0C',color:'#FAF5E9',position:'relative',overflow:'hidden'}}>
            <div className="wf-noise-bg"></div>
            <div style={{position:'absolute',inset:0,background:'rgba(17,12,8,0.36)'}}></div>
            <div style={{position:'relative',zIndex:2,display:'flex',flexDirection:'column',alignItems:'center'}}>
              <span className="wf-eyebrow" style={{justifyContent:'center',color:'rgba(255,255,255,0.7)'}}>Talk to us</span>
              <h2 style={{fontSize:'clamp(48px,6.4vw,96px)',fontWeight:700,letterSpacing:'-0.04em',lineHeight:0.96,maxWidth:'18ch',margin:'18px 0 0',color:'#FFF'}}>Hungry to see what this can do?</h2>
              <div style={{display:'flex',gap:14,marginTop:36}}>
                <a href={BOOK_DEMO_URL} className="wf-btn gold" style={{padding:'14px 28px',fontSize:14}}>Book a Demo →</a>
                <a href={CONTACT_URL} className="wf-btn outline" style={{padding:'14px 28px',fontSize:14}}>Get in Touch</a>
              </div>
              <div style={{marginTop:28,fontSize:14,color:'rgba(255,255,255,0.7)'}}>
                or email <a href="mailto:hello@rolorobotics.com" style={{color:'#FFF',fontWeight:600,textDecoration:'underline',textDecorationColor:'var(--rr-gold)',textUnderlineOffset:4}}>hello@rolorobotics.com</a>
              </div>
              <div style={{marginTop:24}}><Socials dark /></div>
            </div>
            <span className="wf-anno" style={{top:14,right:20,color:'#E0BD63'}}>Closes with the hero's atmosphere</span>
          </div>
        </CTAFooter>
      </window.Variant>

      {/* C — Minimal split */}
      <window.Variant
        letter="C"
        title="Minimal split"
        desc="No fanfare. One headline left, contact column right (email + buttons + socials inline). Compact CTA + compact footer."
        notes={['Two-column quiet finish', 'No headline scale flex', 'Reads like a contact card']}
      >
        <CTAFooter>
          <div className="frame wf-reveal" style={{display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:64,alignItems:'center',background:'#FFF',padding:'64px clamp(28px,4vw,56px)',minHeight:360}}>
            <div>
              <span className="wf-eyebrow">Talk to us</span>
              <h2 style={{fontSize:'clamp(36px,4.2vw,60px)',fontWeight:700,letterSpacing:'-0.03em',lineHeight:1,margin:'14px 0 0',maxWidth:'18ch'}}>Hungry to see what this can do?</h2>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:18,alignItems:'flex-start'}}>
              <a href="mailto:hello@rolorobotics.com" style={{fontSize:18,color:'var(--wf-ink)',fontWeight:600,textDecoration:'underline',textDecorationColor:'var(--rr-gold)',textUnderlineOffset:4}}>hello@rolorobotics.com</a>
              <div className="wf-cta-actions" style={{display:'flex',gap:10}}>
                <a href={BOOK_DEMO_URL} className="wf-btn" style={{padding:'11px 22px',fontSize:13}}>Book a Demo</a>
              </div>
              <Socials />
            </div>
            <span className="wf-anno" style={{top:14,right:20}}>Smallest finish · contact-card energy</span>
          </div>
        </CTAFooter>
      </window.Variant>
    </React.Fragment>
  );
}
window.CTAVariants = CTAVariants;