// Cavivo Ads — marketing landing page

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showAmbientBlobs": true,
  "heroStyle": "serif-italic",
  "accentColor": "#7A5AE0",
  "heroBadge": "Cavivo Ads — now in early access"
} /*EDITMODE-END*/;

// ─── Icons reused ────────────────────────────────────────────────────────────
const LIcon = ({ d, size = 20, stroke = 1.6, fill = "none" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const L = {
  check: <LIcon d={<><path d="m5 12 5 5 10-11"/></>} stroke={2.2}/>,
  arrow: <LIcon d={<><path d="M5 12h14M13 6l6 6-6 6"/></>}/>,
  play:  <LIcon d={<><path d="M8 5v14l12-7Z" fill="currentColor"/></>} fill="currentColor"/>,
  spark: <LIcon d={<><path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6Z"/></>}/>,
  link:  <LIcon d={<><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 1 0-5.7-5.7L11 7"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 1 0 5.7 5.7L13 17"/></>}/>,
  pen:   <LIcon d={<><path d="M4 20h4l11-11-4-4L4 16Z"/></>}/>,
  zap:   <LIcon d={<><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></>}/>,
  ugc:   <LIcon d={<><circle cx="12" cy="8" r="3.5"/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6"/></>} stroke={1.7}/>,
  diamond: <LIcon d={<><path d="M12 3 4 11l8 10 8-10Z"/><path d="M4 11h16M9 11l3-8M15 11l-3-8"/></>} stroke={1.5}/>,
  demo:  <LIcon d={<><rect x="3" y="5" width="14" height="11" rx="2"/><path d="M21 8v8"/><path d="m9 9 4 2.5L9 14V9Z" fill="currentColor"/></>} stroke={1.7}/>,
  asmr:  <LIcon d={<><path d="M5 12c0-3 2-6 4-6"/><path d="M3 12c0-5 4-9 8-9"/><circle cx="14" cy="14" r="6"/><path d="M11 14h6M14 11v6"/></>} stroke={1.6}/>,
  layers:<LIcon d={<><path d="m12 3 9 5-9 5-9-5Z"/><path d="m3 13 9 5 9-5M3 18l9 5 9-5"/></>} stroke={1.6}/>,
  beaker:<LIcon d={<><path d="M9 3h6M10 3v6L5 19a2 2 0 0 0 1.7 3h10.6A2 2 0 0 0 19 19L14 9V3"/><path d="M7 14h10"/></>} stroke={1.6}/>,
  globe: <LIcon d={<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>}/>,
  reels: <LIcon d={<><rect x="4" y="3" width="16" height="18" rx="3"/><circle cx="12" cy="11" r="3.5"/><path d="m11 10 3 1.5-3 1.5Z" fill="currentColor"/></>} stroke={1.6}/>,
  avatar:<LIcon d={<><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/><circle cx="18" cy="6" r="2" fill="currentColor"/></>} stroke={1.6}/>,
  caption:<LIcon d={<><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 11h4M7 14h6M13 11h4"/></>}/>,
  shop:  <LIcon d={<><path d="M5 8h14l-1 12H6Z"/><path d="M9 8a3 3 0 0 1 6 0"/></>}/>,
  bolt:  <LIcon d={<><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z" fill="currentColor"/></>} fill="currentColor"/>,
  burger: <LIcon d={<><path d="M4 7h16M4 12h16M4 17h16"/></>}/>,
};

// ─── Logo (re-stated; landing is standalone) ────────────────────────────────
const CavivoMark = ({ size = 28 }) => (
  <div style={{display:'flex',alignItems:'center',gap:9}}>
    <svg width={size} height={size} viewBox="0 0 40 40">
      <defs>
        <linearGradient id="ll" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#C8B6FF"/><stop offset=".5" stopColor="#F5B8D0"/><stop offset="1" stopColor="#FFD4A8"/>
        </linearGradient>
      </defs>
      <path d="M20 4c8.8 0 16 7.2 16 16 0 4-3 5-7 5s-5-2-9-2-5 4-9 4-7-2-7-7c0-8.8 7.2-16 16-16Z" fill="url(#ll)"/>
      <circle cx="14" cy="18" r="2.4" fill="#1c1c1c"/><circle cx="24" cy="18" r="2.4" fill="#1c1c1c"/>
    </svg>
    <div style={{fontFamily:'"Instrument Serif",serif',fontSize:24,fontStyle:'italic',color:'#1c1c1c',letterSpacing:'-.01em',lineHeight:1}}>Notloom</div>
  </div>
);

// ─── Primary button ─────────────────────────────────────────────────────────
const CTAButton = ({ children, size = 'lg', variant = 'primary', icon, onClick }) => {
  const [h, setH] = React.useState(false);
  const padding = size === 'lg' ? '15px 26px' : '11px 18px';
  const font = size === 'lg' ? 15.5 : 14;
  if (variant === 'primary') {
    return (
      <button onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
        style={{position:'relative',padding,borderRadius:999,border:'none',cursor:'pointer',
          fontFamily:'inherit',fontWeight:600,fontSize:font,color:'#1c1c1c',
          background:'linear-gradient(120deg,#C8B6FF 0%,#F5B8D0 50%,#C8B6FF 100%)',
          backgroundSize:'200% 100%',backgroundPosition: h ? '100% 0' : '0 0',
          boxShadow: h ? '0 12px 28px rgba(122,90,224,.32)' : '0 6px 18px rgba(122,90,224,.22)',
          transition:'background-position .5s, box-shadow .2s, transform .15s',
          transform: h ? 'translateY(-1px)' : 'translateY(0)',
          display:'inline-flex',alignItems:'center',gap:9}}>
        {children}{icon && <span style={{display:'flex'}}>{icon}</span>}
      </button>
    );
  }
  return (
    <button onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
      style={{padding,borderRadius:999,border:'1px solid '+(h?'#1c1c1c':'#E0DAE8'),cursor:'pointer',
        fontFamily:'inherit',fontWeight:600,fontSize:font,color:'#1c1c1c',background:'#FFFFFF',
        transition:'border-color .15s',display:'inline-flex',alignItems:'center',gap:9}}>
      {children}{icon && <span style={{display:'flex'}}>{icon}</span>}
    </button>
  );
};

// ─── Top nav ────────────────────────────────────────────────────────────────
const Nav = ({ onSignIn }) => (
  <header style={{position:'sticky',top:0,zIndex:50,background:'rgba(250,247,254,.78)',
    backdropFilter:'blur(14px)',WebkitBackdropFilter:'blur(14px)',
    borderBottom:'1px solid rgba(224,218,232,.6)'}}>
    <div style={{maxWidth:1200,margin:'0 auto',padding:'14px 32px',
      display:'flex',alignItems:'center',justifyContent:'space-between'}}>
      <div style={{display:'flex',alignItems:'center',gap:36}}>
        <CavivoMark/>
        <nav style={{display:'flex',gap:26,fontSize:13.5,color:'#4a4356',fontWeight:500}}>
          <a href="#offers" style={navLink}>Ad styles</a>
          <a href="#process" style={navLink}>How it works</a>
          <a href="#pricing" style={navLink}>Pricing</a>
          <a href="#" style={navLink}>Examples</a>
        </nav>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <button type="button" onClick={onSignIn}
          style={{...navLink,fontWeight:500,background:'transparent',border:'none',cursor:'pointer',fontFamily:'inherit',fontSize:13.5,padding:0}}>
          Sign in
        </button>
        <a href="/dashboard/" style={{...navLink,fontWeight:500}}>Open app</a>
        <CTAButton size="sm" icon={L.arrow}>Generate your first ad</CTAButton>
      </div>
    </div>
  </header>
);
const navLink = {color:'#4a4356',textDecoration:'none',transition:'color .15s'};

// ─── Phone mockup ad preview ────────────────────────────────────────────────
const PhoneAd = ({ rotate = 0, lift = 0, palette, hook, brand, badge, caption, accent }) => (
  <div style={{
    width:200,height:418,borderRadius:34,padding:8,
    background:'linear-gradient(160deg,#2a1f3d 0%,#1c1c1c 100%)',
    boxShadow:`0 30px 60px -20px rgba(60,30,80,.45), 0 0 0 1px rgba(255,255,255,.05) inset`,
    transform:`rotate(${rotate}deg) translateY(${lift}px)`,
    flexShrink:0}}>
    <div style={{width:'100%',height:'100%',borderRadius:26,overflow:'hidden',position:'relative',
      background:palette.bg}}>
      {/* notch */}
      <div style={{position:'absolute',top:8,left:'50%',transform:'translateX(-50%)',
        width:60,height:14,borderRadius:10,background:'#1c1c1c',zIndex:3}}/>
      {/* product visual area */}
      <div style={{position:'absolute',inset:0,background:palette.gradient}}/>
      <div style={{position:'absolute',top:'30%',left:'50%',transform:'translate(-50%,-50%)',
        width:120,height:120,borderRadius:24,background:palette.product,
        boxShadow:'0 20px 40px rgba(0,0,0,.18)'}}/>
      {/* "video chrome" overlay */}
      <div style={{position:'absolute',top:36,left:14,display:'flex',alignItems:'center',gap:6,
        padding:'4px 9px',background:'rgba(0,0,0,.32)',backdropFilter:'blur(8px)',
        borderRadius:999,color:'#fff',fontSize:9.5,fontWeight:600,letterSpacing:'.04em'}}>
        <span style={{width:6,height:6,borderRadius:6,background:'#ff5b5b'}}/>LIVE · {brand}
      </div>
      <div style={{position:'absolute',top:36,right:14,
        padding:'4px 8px',background:accent,borderRadius:6,color:'#fff',fontSize:9.5,fontWeight:700}}>
        {badge}
      </div>
      {/* Hook headline */}
      <div style={{position:'absolute',left:14,right:14,bottom:96,
        fontFamily:'"Inter",sans-serif',fontWeight:800,fontSize:18,lineHeight:1.15,color:'#fff',
        textShadow:'0 2px 12px rgba(0,0,0,.4)',letterSpacing:'-.01em'}}>{hook}</div>
      {/* Caption */}
      <div style={{position:'absolute',left:14,right:14,bottom:62,
        fontSize:10.5,color:'rgba(255,255,255,.92)',lineHeight:1.35}}>{caption}</div>
      {/* CTA pill */}
      <div style={{position:'absolute',left:14,right:14,bottom:14,
        background:'#fff',borderRadius:10,padding:'9px 12px',
        display:'flex',alignItems:'center',justifyContent:'space-between',
        fontSize:11,fontWeight:700,color:'#1c1c1c'}}>
        Shop now
        <span style={{color:accent,display:'flex'}}>{L.arrow}</span>
      </div>
      {/* Side rail (like / comment / share) */}
      <div style={{position:'absolute',right:10,top:'42%',display:'flex',flexDirection:'column',gap:14,
        color:'#fff',fontSize:8.5,fontWeight:600,textAlign:'center'}}>
        {['12.4K','842','203'].map((n,i) => (
          <div key={i} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:3}}>
            <div style={{width:28,height:28,borderRadius:14,background:'rgba(0,0,0,.32)',
              backdropFilter:'blur(8px)',display:'flex',alignItems:'center',justifyContent:'center'}}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill={i===0?'#ff5b8a':'none'} stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                {i===0 && <path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z"/>}
                {i===1 && <path d="M21 12a8 8 0 0 1-12 7l-5 1 1-4a8 8 0 1 1 16-4Z"/>}
                {i===2 && <><circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="m8 11 8-4M8 13l8 4"/></>}
              </svg>
            </div>
            <span style={{textShadow:'0 1px 4px rgba(0,0,0,.5)'}}>{n}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const phoneA = {
  bg:'#2a1f3d',
  gradient:'linear-gradient(180deg,#C8B6FF 0%,#F5B8D0 65%,#FFD4A8 100%)',
  product:'linear-gradient(135deg,#FFFFFF 0%,#FCE0EC 100%)'
};
const phoneB = {
  bg:'#1a2b2a',
  gradient:'linear-gradient(180deg,#B5E5D6 0%,#D6F0F5 60%,#FFFFFF 100%)',
  product:'linear-gradient(135deg,#FFFFFF 0%,#D6F0F5 100%)'
};
const phoneC = {
  bg:'#3a2b1a',
  gradient:'linear-gradient(180deg,#FFD4A8 0%,#FFE8DC 55%,#FFF4D6 100%)',
  product:'linear-gradient(135deg,#FFFFFF 0%,#FFE8DC 100%)'
};

// ─── Hero ───────────────────────────────────────────────────────────────────
const Hero = ({ t }) => {
  const accent = t.accentColor;
  const heroAccent = t.heroStyle === 'serif-italic'
    ? { fontFamily: '"Instrument Serif",serif', fontStyle: 'italic', fontWeight: 400 }
    : { fontFamily: 'inherit', fontStyle: 'normal', fontWeight: 700 };
  const sourceOptions = React.useMemo(() => ([
    { label: 'Generate from links', icon: L.link, input: 'https://' },
    { label: 'Generate from images', icon: L.demo, input: 'Upload image...' },
    { label: 'Generate from text', icon: L.caption, input: 'Type your prompt...' }
  ]), []);
  const [sourceIndex, setSourceIndex] = React.useState(0);
  const [sourceVisible, setSourceVisible] = React.useState(true);

  React.useEffect(() => {
    const rotate = setInterval(() => {
      setSourceVisible(false);
      setTimeout(() => {
        setSourceIndex((prev) => (prev + 1) % sourceOptions.length);
        setSourceVisible(true);
      }, 220);
    }, 6000);
    return () => clearInterval(rotate);
  }, [sourceOptions.length]);

  const currentSource = sourceOptions[sourceIndex];
  return (
  <section style={{position:'relative',overflow:'hidden'}}>
    {t.showAmbientBlobs && (
      <>
        <div style={{position:'absolute',top:-160,left:-100,width:520,height:520,borderRadius:'50%',
          background:'radial-gradient(circle,#E8DFFA 0%,transparent 65%)',pointerEvents:'none'}}/>
        <div style={{position:'absolute',top:120,left:'30%',width:380,height:380,borderRadius:'50%',
          background:'radial-gradient(circle,#FCE0EC 0%,transparent 65%)',pointerEvents:'none',opacity:.7}}/>
        <div style={{position:'absolute',top:-80,right:-120,width:480,height:480,borderRadius:'50%',
          background:'radial-gradient(circle,#FFE8DC 0%,transparent 65%)',pointerEvents:'none'}}/>
      </>
    )}

    <div style={{position:'relative',maxWidth:1200,margin:'0 auto',padding:'72px 32px 60px',
      display:'grid',gridTemplateColumns:'1.05fr .95fr',gap:48,alignItems:'center'}}>
      <div>
        <div style={{display:'inline-flex',alignItems:'center',gap:8,padding:'6px 12px 6px 8px',
          background:'#FFFFFF',border:'1px solid #E0DAE8',borderRadius:999,
          fontSize:12,fontWeight:600,color:'#4a4356',marginBottom:22,
          boxShadow:'0 2px 6px rgba(122,90,224,.06)'}}>
          <span style={{width:22,height:22,borderRadius:6,
            background:'linear-gradient(135deg,#C8B6FF,#F5B8D0)',
            display:'flex',alignItems:'center',justifyContent:'center',color:'#fff'}}>
            {L.spark}
          </span>
          {t.heroBadge}
        </div>

        <h1 style={{margin:0,fontSize:52,lineHeight:1.04,letterSpacing:'-.025em',
          fontWeight:500,color:'#1c1c1c'}}>
          Generate Scroll-Stopping Videos That{' '}
          <span style={{...heroAccent,
            background:`linear-gradient(120deg,${accent} 0%,#C4407A 50%,#D08550 100%)`,
            WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text'}}>
            built to convert
          </span>
        </h1>

        <p style={{marginTop:22,marginBottom:0,fontSize:18,lineHeight:1.55,color:'#4a4356',
          maxWidth:540,textWrap:'pretty'}}>
          Create videos for products, real estate, fashion, and brands all from a single workflow.
        </p>

        {/* CTA cluster + product URL input */}
        <div style={{marginTop:30,display:'flex',gap:10,flexWrap:'wrap',alignItems:'center'}}>
          <div style={{display:'flex',alignItems:'center',background:'#FFFFFF',
            border:'1px solid #E0DAE8',borderRadius:999,padding:'6px 6px 6px 16px',
            boxShadow:'0 4px 14px rgba(122,90,224,.08)'}}>
            <div style={{padding:'11px 18px',borderRadius:999,
              background:'linear-gradient(120deg,#C8B6FF 0%,#F5B8D0 50%,#C8B6FF 100%)',
              backgroundSize:'200% 100%',backgroundPosition:'0 0',color:'#1c1c1c',
              fontSize:13.5,fontWeight:600,display:'inline-flex',alignItems:'center',gap:8,
              width:'max-content',whiteSpace:'nowrap',justifyContent:'center',marginRight:10,
              opacity: sourceVisible ? 1 : 0, transform: sourceVisible ? 'translateY(0)' : 'translateY(6px)',
              transition:'opacity .22s ease, transform .22s ease'}}>
              <span style={{display:'flex',color:'#1c1c1c'}}>{currentSource.icon}</span>
              {currentSource.label}
            </div>
            <input value={currentSource.input} placeholder="Paste product URL" readOnly
              style={{border:'none',outline:'none',background:'transparent',flex:1,minWidth:160,
                fontFamily:'inherit',fontSize:14,color:'#1c1c1c'}}/>
          </div>
        </div>

        <p style={{marginTop:26,fontSize:13.5,lineHeight:1.55,color:'#6b6377',maxWidth:520}}>
          Built for ecommerce brands, real estate teams, agencies, and creators who want everything from research to ready-to-post video ads in one place.
        </p>

        {/* Mini trust strip */}
        <div style={{marginTop:28,display:'flex',gap:22,alignItems:'center'}}>
          <div style={{display:'flex'}}>
            {['#C8B6FF','#F5B8D0','#FFD4A8','#B5E5D6'].map((c,i) => (
              <div key={i} style={{width:30,height:30,borderRadius:30,background:c,
                border:'2px solid #FAF7FE',marginLeft:i?-8:0,
                display:'flex',alignItems:'center',justifyContent:'center',
                fontSize:11,fontWeight:700,color:'#fff'}}>
                {['MR','JT','LS','AN'][i]}
              </div>
            ))}
          </div>
          <div style={{fontSize:12.5,color:'#6b6377',lineHeight:1.4}}>
            <strong style={{color:'#1c1c1c',fontWeight:600}}>2,400+ brands</strong> ship
            their first ad in under 10 minutes
          </div>
        </div>
      </div>

      {/* Phone cluster */}
      <div style={{position:'relative',display:'flex',justifyContent:'center',alignItems:'center',
        height:460}}>
        <div style={{position:'absolute',transform:'translateX(-115px) scale(.82)',transformOrigin:'center',zIndex:1}}>
          <PhoneAd palette={phoneB} rotate={-9} lift={20} brand="GLOWWELL"
            badge="UGC"
            hook="3 days. Glass-skin glow."
            caption="The serum 32K girls swapped routines for ✨"
            accent="#2A8060"/>
        </div>
        <div style={{position:'relative',zIndex:3}}>
          <PhoneAd palette={phoneA} rotate={0} lift={0} brand="VELVÉT"
            badge="LUXURY"
            hook="Wear what whispers, not shouts."
            caption="Hand-finished silk · ships from Milan"
            accent="#C4407A"/>
        </div>
        <div style={{position:'absolute',transform:'translateX(115px) scale(.82)',transformOrigin:'center',zIndex:1}}>
          <PhoneAd palette={phoneC} rotate={9} lift={20} brand="OAK&CO"
            badge="ASMR"
            hook="Crack. Pop. Pour."
            caption="The unboxing 4M kept replaying 🎧"
            accent="#C46A20"/>
        </div>
        {/* Floating chips */}
        <div style={{position:'absolute',top:30,left:-10,padding:'8px 12px',
          background:'#FFFFFF',border:'1px solid #E0DAE8',borderRadius:12,fontSize:12,
          boxShadow:'0 6px 18px rgba(122,90,224,.12)',display:'flex',alignItems:'center',gap:8}}>
          <span style={{width:8,height:8,borderRadius:8,background:'#2A8060'}}/>
          <span style={{color:'#1c1c1c',fontWeight:600}}>GPT analysis done</span>
          <span style={{color:'#9089A0'}}>· 0.4s</span>
        </div>
        <div style={{position:'absolute',bottom:36,right:-12,padding:'8px 12px',
          background:'#FFFFFF',border:'1px solid #E0DAE8',borderRadius:12,fontSize:12,
          boxShadow:'0 6px 18px rgba(122,90,224,.12)',display:'flex',alignItems:'center',gap:8}}>
          <span style={{color:'#7A5AE0',display:'flex'}}>{L.spark}</span>
          <span style={{color:'#1c1c1c',fontWeight:600}}>9:16 · TikTok-ready</span>
        </div>
      </div>
    </div>
  </section>
  );
};

// ─── Offers grid ────────────────────────────────────────────────────────────
const offers = [
  { icon:L.ugc,     name:'AI UGC Video Ads',     sub:'Avatar-led, authentic, scroll-native', tint:'#E8DFFA', ink:'#7A5AE0'},
  { icon:L.diamond, name:'Luxury Product Ads',   sub:'Slow, cinematic, premium reveal', tint:'#FCE0EC', ink:'#C4407A'},
  { icon:L.demo,    name:'Product Demo Ads',     sub:'Feature highlights with clear CTA', tint:'#D6F0F5', ink:'#2A8060'},
  { icon:L.asmr,    name:'ASMR Unboxing Ads',    sub:'Tactile, sensory, attention-locking', tint:'#FFE8DC', ink:'#C46A20'},
  { icon:L.layers,  name:'Static Ad Creatives',  sub:'Carousels and singles for Meta + Google', tint:'#FFF4D6', ink:'#A87A20'},
  { icon:L.beaker,  name:'Creative Testing Packs',sub:'Variations engineered to A/B test', tint:'#E5F5EE', ink:'#3A9075'},
];

const OffersGrid = () => (
  <section id="offers" style={{maxWidth:1200,margin:'0 auto',padding:'40px 32px 80px'}}>
    <div style={{textAlign:'center',marginBottom:36}}>
      <div style={eyebrow}>Six ad styles, one engine</div>
      <h2 style={h2}>Every creative direction your funnel needs</h2>
    </div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}}>
      {offers.map((o,i) => <OfferCard key={i} {...o}/>)}
    </div>
  </section>
);

const OfferCard = ({ icon, name, sub, tint, ink }) => {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
      style={{padding:'22px 22px 24px',background:'#FFFFFF',border:'1px solid #E0DAE8',
        borderRadius:18,cursor:'pointer',position:'relative',overflow:'hidden',
        transform:h?'translateY(-3px)':'translateY(0)',
        boxShadow:h?'0 14px 30px rgba(122,90,224,.12)':'0 1px 2px rgba(28,28,28,.03)',
        transition:'transform .18s, box-shadow .18s'}}>
      <div style={{position:'absolute',top:-30,right:-30,width:150,height:150,borderRadius:'50%',
        background:tint,opacity:h?.55:.35,filter:'blur(20px)',transition:'opacity .25s',pointerEvents:'none'}}/>
      <div style={{position:'relative',display:'flex',alignItems:'flex-start',gap:14}}>
        <div style={{width:44,height:44,borderRadius:11,background:tint,color:ink,
          display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>{icon}</div>
        <div style={{flex:1}}>
          <div style={{fontSize:15,fontWeight:600,color:'#1c1c1c',letterSpacing:'-.005em'}}>{name}</div>
          <div style={{fontSize:13,color:'#6b6377',marginTop:4,lineHeight:1.5}}>{sub}</div>
        </div>
        <span style={{color:'#9089A0',opacity:h?1:.4,transform:h?'translateX(2px)':'translateX(0)',
          transition:'opacity .15s, transform .15s'}}>{L.arrow}</span>
      </div>
    </div>
  );
};

// ─── Benefits section ───────────────────────────────────────────────────────
const benefits = [
  'Paste a product URL and analyze the page with ChatGPT',
  'Generate product descriptions, scripts and ad-copy angles',
  'Edit hooks, captions and Seedance prompts before rendering',
  'Choose avatars for UGC-style ads',
  'Create Arabic and English ad variations side by side',
  'Export vertical ads for TikTok, Reels, Shorts and Meta',
];

const Benefits = () => (
  <section style={{background:'linear-gradient(180deg,#FAF7FE 0%,#F0E5F8 100%)',
    borderTop:'1px solid #E0DAE8',borderBottom:'1px solid #E0DAE8'}}>
    <div style={{maxWidth:1200,margin:'0 auto',padding:'80px 32px',
      display:'grid',gridTemplateColumns:'1fr 1.15fr',gap:60,alignItems:'center'}}>
      <div>
        <div style={eyebrow}>Better creative, more often</div>
        <h2 style={{...h2,textAlign:'left',maxWidth:480}}>
          Winning ads start with{' '}
          <span style={{fontFamily:'"Instrument Serif",serif',fontStyle:'italic',fontWeight:400,
            color:'#7A5AE0'}}>better creative</span>
        </h2>
        <p style={{marginTop:18,fontSize:16,lineHeight:1.6,color:'#4a4356',maxWidth:460}}>
          Generate multiple ad angles for one product so you can test faster,
          learn faster and scale what actually works.
        </p>
        <ul style={{margin:'30px 0 0',padding:0,listStyle:'none',display:'flex',
          flexDirection:'column',gap:12}}>
          {benefits.map((b,i) => (
            <li key={i} style={{display:'flex',gap:12,alignItems:'flex-start',fontSize:14.5,
              lineHeight:1.5,color:'#1c1c1c'}}>
              <span style={{width:24,height:24,borderRadius:24,flexShrink:0,
                background:'linear-gradient(135deg,#C8B6FF,#F5B8D0)',color:'#fff',
                display:'flex',alignItems:'center',justifyContent:'center'}}>{L.check}</span>
              {b}
            </li>
          ))}
        </ul>
      </div>

      {/* Concept editor mockup */}
      <ConceptEditorMock/>
    </div>
  </section>
);

const ConceptEditorMock = () => (
  <div style={{position:'relative'}}>
    <div style={{position:'absolute',inset:-20,borderRadius:28,
      background:'linear-gradient(135deg,#C8B6FF 0%,#F5B8D0 50%,#FFD4A8 100%)',filter:'blur(28px)',opacity:.35}}/>
    <div style={{position:'relative',background:'#FFFFFF',border:'1px solid #E0DAE8',
      borderRadius:18,boxShadow:'0 30px 60px -25px rgba(122,90,224,.35)',overflow:'hidden'}}>
      {/* App chrome */}
      <div style={{padding:'12px 16px',borderBottom:'1px solid #E0DAE8',background:'#F7F2FB',
        display:'flex',alignItems:'center',gap:10}}>
        <div style={{display:'flex',gap:5}}>
          {['#F5B8D0','#FFD4A8','#B5E5D6'].map((c,i)=><span key={i} style={{width:10,height:10,borderRadius:10,background:c}}/>)}
        </div>
        <div style={{flex:1,height:24,background:'#FFFFFF',border:'1px solid #E0DAE8',
          borderRadius:7,padding:'0 10px',fontSize:11,color:'#9089A0',
          display:'flex',alignItems:'center',gap:6}}>
          <span style={{display:'flex'}}>{L.link}</span>
          app.cavivo.com/concepts/glowwell-serum-30ml
        </div>
        <div style={{padding:'5px 10px',background:'linear-gradient(135deg,#C8B6FF,#F5B8D0)',
          color:'#fff',fontSize:11,fontWeight:700,borderRadius:7}}>Render ad →</div>
      </div>

      {/* Concept body */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1.2fr',minHeight:340}}>
        <div style={{padding:'18px 18px 18px 20px',borderRight:'1px solid #E0DAE8',
          background:'#FBF8FD'}}>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:14}}>
            <span style={{padding:'3px 8px',background:'#E8DFFA',color:'#7A5AE0',
              fontSize:10,fontWeight:700,letterSpacing:'.04em',borderRadius:6}}>CONCEPT 02</span>
            <span style={{fontSize:11,color:'#9089A0'}}>UGC · 18s · EN/AR</span>
          </div>
          <div style={{fontSize:11,color:'#9089A0',fontWeight:600,letterSpacing:'.06em',
            textTransform:'uppercase',marginBottom:6}}>Hook</div>
          <div style={{padding:10,background:'#FFFFFF',border:'1px solid #E0DAE8',borderRadius:9,
            fontSize:13,color:'#1c1c1c',lineHeight:1.45,fontWeight:500}}>
            "3 days in. My skin actually looks different — and I'm not the<br/>only one who noticed."
          </div>
          <div style={{fontSize:11,color:'#9089A0',fontWeight:600,letterSpacing:'.06em',
            textTransform:'uppercase',marginTop:14,marginBottom:6}}>Script beats</div>
          <div style={{display:'flex',flexDirection:'column',gap:6}}>
            {[
              ['0:00','Mirror close-up · skeptical face'],
              ['0:04','Bottle pour · golden-hour light'],
              ['0:09','Side-by-side day-3 vs day-1'],
              ['0:14','CTA: "Shop Glowwell — link in bio"'],
            ].map(([t,c],i)=>(
              <div key={i} style={{display:'flex',gap:8,fontSize:12,color:'#4a4356'}}>
                <span style={{color:'#7A5AE0',fontWeight:700,minWidth:30}}>{t}</span>
                <span>{c}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{padding:18,display:'flex',flexDirection:'column',gap:12}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <div style={{fontSize:12,color:'#1c1c1c',fontWeight:600}}>Avatar</div>
            <div style={{display:'flex',gap:6}}>
              {['#C8B6FF','#F5B8D0','#FFD4A8','#B5E5D6'].map((c,i) => (
                <div key={i} style={{width:30,height:30,borderRadius:30,background:c,
                  border:i===1?'2px solid #1c1c1c':'2px solid transparent'}}/>
              ))}
              <div style={{width:30,height:30,borderRadius:30,border:'1.5px dashed #9089A0',
                color:'#9089A0',display:'flex',alignItems:'center',justifyContent:'center',fontSize:18,lineHeight:1}}>+</div>
            </div>
          </div>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <div style={{fontSize:12,color:'#1c1c1c',fontWeight:600}}>Aspect</div>
            <div style={{display:'flex',gap:6,fontSize:11,fontWeight:600}}>
              {[['9:16','#1c1c1c','#fff'],['1:1','#fff','#4a4356'],['4:5','#fff','#4a4356']].map(([l,bg,fg],i)=>(
                <span key={i} style={{padding:'5px 9px',borderRadius:6,
                  background:bg,color:fg,border:'1px solid #E0DAE8'}}>{l}</span>
              ))}
            </div>
          </div>
          {/* Preview frame */}
          <div style={{flex:1,position:'relative',borderRadius:12,overflow:'hidden',
            background:'linear-gradient(180deg,#C8B6FF 0%,#F5B8D0 60%,#FFD4A8 100%)',
            minHeight:170}}>
            <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',
              width:78,height:78,borderRadius:18,background:'rgba(255,255,255,.85)',
              boxShadow:'0 12px 30px rgba(0,0,0,.18)'}}/>
            <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
              <div style={{width:46,height:46,borderRadius:46,background:'rgba(28,28,28,.78)',
                color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',
                boxShadow:'0 6px 16px rgba(0,0,0,.25)'}}>{L.play}</div>
            </div>
            <div style={{position:'absolute',bottom:8,left:8,right:8,padding:'6px 9px',
              background:'rgba(255,255,255,.92)',borderRadius:8,fontSize:11,fontWeight:600,
              color:'#1c1c1c',display:'flex',justifyContent:'space-between'}}>
              <span>Seedance prompt · v3</span>
              <span style={{color:'#7A5AE0'}}>Edit</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// ─── Process ────────────────────────────────────────────────────────────────
const steps = [
  { n:'01', title:'Add your product',
    body:'Paste a product URL or upload product images. ChatGPT reads the page and extracts the product promise, pricing, proof and visuals.',
    icon:L.link, tint:'#E8DFFA', ink:'#7A5AE0'},
  { n:'02', title:'Review AI concepts',
    body:'Get product descriptions, hooks, scripts, ad copy and Seedance prompts generated automatically - each one a testable angle.',
    icon:L.spark, tint:'#FCE0EC', ink:'#C4407A'},
  { n:'03', title:'Generate your ads',
    body:'Accept the AI draft or edit it manually, then send the approved prompt to Seedance to render ready-to-post video ads.',
    icon:L.bolt, tint:'#FFE8DC', ink:'#C46A20'},
];

const Process = () => (
  <section id="process" style={{maxWidth:1200,margin:'0 auto',padding:'90px 32px 60px'}}>
    <div style={{textAlign:'center',marginBottom:48}}>
      <div style={eyebrow}>How it works</div>
      <h2 style={h2}>From product link to first ad in 3 steps</h2>
    </div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,position:'relative'}}>
      {/* Connecting dashed line */}
      <div style={{position:'absolute',top:48,left:'12%',right:'12%',height:1,
        backgroundImage:'linear-gradient(90deg,#C9C2D4 50%,transparent 50%)',
        backgroundSize:'8px 1px',pointerEvents:'none',zIndex:0}}/>
      {steps.map((s,i) => (
        <div key={i} style={{position:'relative',zIndex:1,padding:'26px 22px',
          background:'#FFFFFF',border:'1px solid #E0DAE8',borderRadius:18,
          boxShadow:'0 1px 2px rgba(28,28,28,.03)'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}}>
            <div style={{width:46,height:46,borderRadius:13,background:s.tint,color:s.ink,
              display:'flex',alignItems:'center',justifyContent:'center'}}>{s.icon}</div>
            <div style={{fontFamily:'"Instrument Serif",serif',fontStyle:'italic',
              fontSize:34,color:s.ink,opacity:.55,lineHeight:1}}>{s.n}</div>
          </div>
          <div style={{fontSize:18,fontWeight:600,color:'#1c1c1c',letterSpacing:'-.01em',marginBottom:8}}>
            {s.title}
          </div>
          <div style={{fontSize:13.5,lineHeight:1.55,color:'#6b6377'}}>{s.body}</div>
        </div>
      ))}
    </div>
  </section>
);

// ─── Pricing ────────────────────────────────────────────────────────────────
const Pricing = () => (
  <section id="pricing" style={{maxWidth:1200,margin:'0 auto',padding:'40px 32px 90px'}}>
    <div style={{textAlign:'center',marginBottom:40}}>
      <div style={eyebrow}>Pricing</div>
      <h2 style={h2}>
        Start generating product ads{' '}
        <span style={{fontFamily:'"Instrument Serif",serif',fontStyle:'italic',fontWeight:400,
          color:'#C46A20'}}>instantly</span>
      </h2>
      <p style={{fontSize:15.5,color:'#6b6377',marginTop:14,maxWidth:560,marginLeft:'auto',marginRight:'auto'}}>
        Choose credits based on how many videos you need each month — or unlock unlimited
        generation with a membership.
      </p>
    </div>

    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18}}>
      {/* Credits card */}
      <div style={{position:'relative',padding:'34px 32px',background:'#FFFFFF',
        border:'1px solid #E0DAE8',borderRadius:22}}>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:14}}>
          <div style={{width:38,height:38,borderRadius:10,background:'#E8DFFA',color:'#7A5AE0',
            display:'flex',alignItems:'center',justifyContent:'center'}}>{L.zap}</div>
          <div style={{fontSize:18,fontWeight:600,color:'#1c1c1c'}}>Credits</div>
        </div>
        <div style={{fontSize:13.5,color:'#6b6377',marginBottom:22,lineHeight:1.55}}>
          Pay only for what you generate. Top up any time, no contract.
        </div>
        <div style={{display:'flex',alignItems:'baseline',gap:6,marginBottom:26}}>
          <span style={{fontSize:46,fontWeight:600,color:'#1c1c1c',letterSpacing:'-.02em'}}>$0.80</span>
          <span style={{fontSize:14,color:'#6b6377'}}>per video credit</span>
        </div>
        <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:10}}>
          {['Choose any pack: 25 / 100 / 500 credits','All 6 ad styles included','Avatars + EN/AR variations','Standard render queue'].map((x,i)=>(
            <li key={i} style={{display:'flex',gap:10,fontSize:13.5,color:'#1c1c1c'}}>
              <span style={{color:'#7A5AE0',display:'flex'}}>{L.check}</span>{x}
            </li>
          ))}
        </ul>
        <div style={{marginTop:26}}>
          <CTAButton variant="secondary" size="lg" icon={L.arrow}>Buy credits</CTAButton>
        </div>
      </div>

      {/* Membership card — peach → pink → violet */}
      <div style={{position:'relative',padding:'34px 32px',color:'#1c1c1c',borderRadius:22,
        background:'linear-gradient(135deg,#FFD4A8 0%,#F5B8D0 55%,#C8B6FF 100%)',
        boxShadow:'0 30px 60px -25px rgba(196,106,32,.35)',overflow:'hidden'}}>
        <div style={{position:'absolute',top:18,right:18,padding:'5px 11px',
          background:'rgba(28,28,28,.85)',color:'#fff',fontSize:11,fontWeight:700,
          letterSpacing:'.04em',borderRadius:999}}>FOR AGENCIES</div>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:14}}>
          <div style={{width:38,height:38,borderRadius:10,background:'rgba(255,255,255,.75)',
            color:'#C46A20',display:'flex',alignItems:'center',justifyContent:'center'}}>{L.diamond}</div>
          <div style={{fontSize:18,fontWeight:600}}>Membership</div>
        </div>
        <div style={{fontSize:14,marginBottom:22,lineHeight:1.55,maxWidth:380,color:'rgba(28,28,28,.78)'}}>
          For agencies and high-volume brands. Bulk generation, faster processing,
          saved brand styles and priority support.
        </div>
        <div style={{display:'flex',alignItems:'baseline',gap:6,marginBottom:26}}>
          <span style={{fontSize:46,fontWeight:600,letterSpacing:'-.02em'}}>$399</span>
          <span style={{fontSize:14,color:'rgba(28,28,28,.7)'}}>/ month · unlimited</span>
        </div>
        <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:10}}>
          {['Unlimited bulk generations','Priority render queue (3× faster)','Saved brand styles + reusable templates','Multi-seat workspace + priority support'].map((x,i)=>(
            <li key={i} style={{display:'flex',gap:10,fontSize:13.5}}>
              <span style={{width:20,height:20,borderRadius:20,background:'#1c1c1c',color:'#FFD4A8',
                display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>{L.check}</span>{x}
            </li>
          ))}
        </ul>
        <div style={{marginTop:26}}>
          <button style={{padding:'14px 24px',borderRadius:999,border:'none',cursor:'pointer',
            fontFamily:'inherit',fontWeight:600,fontSize:15,color:'#FFD4A8',background:'#1c1c1c',
            display:'inline-flex',alignItems:'center',gap:8,
            boxShadow:'0 8px 20px rgba(28,28,28,.25)'}}>
            Start membership <span style={{display:'flex'}}>{L.arrow}</span>
          </button>
        </div>
      </div>
    </div>
  </section>
);

// ─── Final CTA ──────────────────────────────────────────────────────────────
const FinalCTA = () => (
  <section style={{padding:'60px 32px 80px'}}>
    <div style={{maxWidth:1100,margin:'0 auto',position:'relative',overflow:'hidden',
      borderRadius:28,padding:'70px 60px',
      background:'linear-gradient(135deg,#F0E5F8 0%,#FCE0EC 40%,#FFE8DC 100%)',
      border:'1px solid #E0DAE8'}}>
      <div style={{position:'absolute',top:-80,right:-80,width:340,height:340,borderRadius:'50%',
        background:'radial-gradient(circle,#C8B6FF 0%,transparent 65%)',opacity:.6,pointerEvents:'none'}}/>
      <div style={{position:'absolute',bottom:-100,left:-60,width:300,height:300,borderRadius:'50%',
        background:'radial-gradient(circle,#FFD4A8 0%,transparent 65%)',opacity:.5,pointerEvents:'none'}}/>

      <div style={{position:'relative',textAlign:'center',maxWidth:700,margin:'0 auto'}}>
        <h2 style={{margin:0,fontSize:54,lineHeight:1.05,letterSpacing:'-.02em',fontWeight:500,color:'#1c1c1c'}}>
          Create more ads.<br/>
          Test faster.{' '}
          <span style={{fontFamily:'"Instrument Serif",serif',fontStyle:'italic',fontWeight:400,
            background:'linear-gradient(120deg,#9070D0 0%,#C4407A 50%,#D08550 100%)',
            WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text'}}>
            Scale smarter.
          </span>
        </h2>
        <p style={{fontSize:16,color:'#4a4356',marginTop:18,marginBottom:32,lineHeight:1.55}}>
          Your next winning creative is one product link away.
        </p>
        <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
          <CTAButton size="lg" icon={L.arrow}>Generate your first ad</CTAButton>
          <CTAButton variant="secondary" size="lg">See ad examples</CTAButton>
        </div>
        <div style={{fontSize:12.5,color:'#6b6377',marginTop:18}}>
          No credit card · first 3 ads on us
        </div>
      </div>
    </div>
  </section>
);

// ─── Footer ─────────────────────────────────────────────────────────────────
const Footer = () => (
  <footer style={{borderTop:'1px solid #E0DAE8',background:'#FAF7FE'}}>
    <div style={{maxWidth:1200,margin:'0 auto',padding:'40px 32px',
      display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:20}}>
      <CavivoMark/>
      <div style={{display:'flex',gap:26,fontSize:13,color:'#6b6377'}}>
        <a href="#" style={navLink}>Privacy</a>
        <a href="#" style={navLink}>Terms</a>
        <a href="#" style={navLink}>Contact</a>
        <a href="/dashboard/" style={navLink}>Open workspace →</a>
      </div>
      <div style={{fontSize:12,color:'#9089A0'}}>© 2026 Cavivo. Crafted in pastel.</div>
    </div>
  </footer>
);

// ─── Shared styles ──────────────────────────────────────────────────────────
const eyebrow = {display:'inline-block',padding:'5px 11px',background:'#FFFFFF',
  border:'1px solid #E0DAE8',borderRadius:999,fontSize:11.5,fontWeight:600,
  color:'#7A5AE0',letterSpacing:'.06em',textTransform:'uppercase',marginBottom:18};
const h2 = {margin:0,fontSize:42,lineHeight:1.1,letterSpacing:'-.02em',fontWeight:500,
  color:'#1c1c1c',textAlign:'center',maxWidth:720,marginLeft:'auto',marginRight:'auto'};

// ─── App ────────────────────────────────────────────────────────────────────
function LandingApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const auth = useSupabaseAuth();
  const [authOpen, setAuthOpen] = React.useState(false);

  const openSignIn = () => {
    if (auth.user) {
      window.location.href = '/dashboard/';
      return;
    }
    setAuthOpen(true);
  };

  React.useEffect(() => {
    if (auth.user && authOpen) {
      window.location.href = '/dashboard/';
    }
  }, [auth.user, authOpen]);

  return (
    <div style={{background:'#FAF7FE',color:'#1c1c1c',
      fontFamily:'"Inter","SF Pro Text",ui-sans-serif,system-ui,sans-serif',minHeight:'100vh'}}>
      <Nav onSignIn={openSignIn}/>
      <AuthModal open={authOpen} onClose={() => setAuthOpen(false)} auth={auth} />
      <Hero t={t}/>
      <OffersGrid/>
      <Benefits/>
      <Process/>
      <Pricing/>
      <FinalCTA/>
      <Footer/>
      <TweaksPanel title="Landing tweaks">
        <TweakSection label="Hero" />
        <TweakText label="Badge" value={t.heroBadge}
          onChange={(v) => setTweak('heroBadge', v)} />
        <TweakRadio label="Accent style" value={t.heroStyle}
          options={['serif-italic', 'sans']}
          onChange={(v) => setTweak('heroStyle', v)} />
        <TweakColor label="Accent color" value={t.accentColor}
          options={['#7A5AE0', '#C4407A', '#2A8060', '#C46A20']}
          onChange={(v) => setTweak('accentColor', v)} />
        <TweakSection label="Atmosphere" />
        <TweakToggle label="Ambient blobs" value={t.showAmbientBlobs}
          onChange={(v) => setTweak('showAmbientBlobs', v)} />
      </TweaksPanel>
    </div>
  );
}

const landingRoot = ReactDOM.createRoot(document.getElementById('root'));
landingRoot.render(<LandingApp/>);