// Cavivo Ads — marketing landing page

// ─── 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}}>Kimitai</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 = () => (
  <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 className="lp-header-inner" style={{maxWidth:1200,margin:'0 auto',padding:'14px 32px',
      display:'flex',alignItems:'center',justifyContent:'space-between'}}>
      <div className="lp-header-brand" style={{display:'flex',alignItems:'center',gap:36}}>
        <CavivoMark/>
        <nav className="lp-nav-links" style={{display:'flex',gap:26,fontSize:13.5,color:'#4a4356',fontWeight:500}}>
          <a href="#offers" style={navLink}>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}}>
        <a href="dashboard.html" style={{...navLink,fontWeight:500}}>Sign in</a>
      </div>
    </div>
  </header>
);
const navLink = {color:'#4a4356',textDecoration:'none',transition:'color .15s'};

const MODE_LABELS = {
  text: 'Text',
  image: 'Image',
  voice: 'Voice',
  animate: 'Animate',
  hybrid: 'Hybrid',
  create: 'Create',
  compose: 'Compose',
};

const PHONE_GRADIENTS = [
  'linear-gradient(180deg,#C8B6FF 0%,#F5B8D0 65%,#FFD4A8 100%)',
  'linear-gradient(180deg,#B5E5D6 0%,#D6F0F5 60%,#FFFFFF 100%)',
  'linear-gradient(180deg,#FFD4A8 0%,#FFE8DC 55%,#FFF4D6 100%)',
];

async function fetchDiscoverPublic(limit = 3) {
  const cfg = window.LANDING_CONFIG;
  if (!cfg?.supabaseUrl || !cfg?.supabaseAnonKey) return [];
  const res = await fetch(`${cfg.supabaseUrl}/functions/v1/get-discover-public`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      apikey: cfg.supabaseAnonKey,
      Authorization: `Bearer ${cfg.supabaseAnonKey}`,
    },
    body: JSON.stringify({ limit }),
  });
  if (!res.ok) return [];
  const data = await res.json();
  return Array.isArray(data?.items) ? data.items : [];
}

// ─── Phone mockup — plays Discover feed videos ─────────────────────────────
const PhoneAd = ({ item, rotate = 0, lift = 0, index = 0 }) => {
  const gradient = PHONE_GRADIENTS[index % PHONE_GRADIENTS.length];
  const modeLabel = item ? (MODE_LABELS[item.mode] ?? item.mode) : null;
  const prompt = item?.prompt
    ? (item.prompt.length > 72 ? `${item.prompt.slice(0, 69)}…` : item.prompt)
    : null;

  const screenRadius = 26;

  return (
    <div style={{
      width: 200,
      height: 418,
      borderRadius: 34,
      padding: 8,
      boxSizing: 'border-box',
      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,
      overflow: 'hidden',
    }}>
      <div style={{
        width: '100%',
        height: '100%',
        borderRadius: screenRadius,
        overflow: 'hidden',
        position: 'relative',
        background: '#1c1c1c',
        isolation: 'isolate',
      }}>
        <div style={{
          position: 'absolute',
          inset: 0,
          borderRadius: screenRadius,
          overflow: 'hidden',
          clipPath: `inset(0 round ${screenRadius}px)`,
          WebkitClipPath: `inset(0 round ${screenRadius}px)`,
          zIndex: 0,
        }}>
          {item?.videoUrl ? (
            <video
              src={item.videoUrl}
              poster={item.thumbnailUrl || undefined}
              autoPlay
              muted
              loop
              playsInline
              style={{
                display: 'block',
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                objectPosition: 'center',
                borderRadius: screenRadius,
              }}
            />
          ) : item?.thumbnailUrl ? (
            <img
              src={item.thumbnailUrl}
              alt=""
              style={{
                display: 'block',
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                objectPosition: 'center',
                borderRadius: screenRadius,
              }}
            />
          ) : (
            <div style={{ width: '100%', height: '100%', background: gradient }} />
          )}
        </div>

        <div style={{
          position: 'absolute',
          top: 8,
          left: '50%',
          transform: 'translateX(-50%)',
          width: 60,
          height: 14,
          borderRadius: 10,
          background: '#1c1c1c',
          zIndex: 4,
        }} />

        <div style={{
          position: 'absolute',
          inset: 0,
          background: 'linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72) 100%)',
          pointerEvents: 'none',
        }} />

        {item ? (
          <>
            <div style={{
              position: 'absolute',
              top: 36,
              left: 14,
              right: 14,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: 8,
              zIndex: 2,
            }}>
              <div style={{
                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,
                maxWidth: '58%',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}>
                {item.creator || '@creator'}
              </div>
              {modeLabel ? (
                <div style={{
                  padding: '4px 8px',
                  background: 'rgba(122,90,224,.85)',
                  borderRadius: 6,
                  color: '#fff',
                  fontSize: 9.5,
                  fontWeight: 700,
                  flexShrink: 0,
                }}>
                  {modeLabel}
                </div>
              ) : null}
            </div>

            {prompt ? (
              <div style={{
                position: 'absolute',
                left: 14,
                right: 14,
                bottom: 18,
                fontSize: 11,
                lineHeight: 1.4,
                color: 'rgba(255,255,255,.95)',
                fontWeight: 500,
                zIndex: 2,
                textShadow: '0 1px 6px rgba(0,0,0,.45)',
              }}>
                "{prompt}"
              </div>
            ) : null}
          </>
        ) : null}
      </div>
    </div>
  );
};

const HeroPhoneCluster = ({ items, loading }) => {
  const slots = [0, 1, 2];
  const transforms = [
    { rotate: -9, lift: 20, x: -115, scale: 0.82, z: 1 },
    { rotate: 0, lift: 0, x: 0, scale: 1, z: 3 },
    { rotate: 9, lift: 20, x: 115, scale: 0.82, z: 1 },
  ];

  return (
    <div className="lp-hero-phones" style={{
      position: 'relative',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: 460,
      minHeight: 460,
    }}>
      {slots.map((i) => {
        const t = transforms[i];
        const item = items[i] ?? null;
        return (
          <div
            key={i}
            style={{
              position: i === 1 ? 'relative' : 'absolute',
              transform: i === 1
                ? undefined
                : `translateX(${t.x}px) scale(${t.scale})`,
              transformOrigin: 'center',
              zIndex: t.z,
            }}
          >
            <PhoneAd item={item} rotate={t.rotate} lift={t.lift} index={i} />
          </div>
        );
      })}
      {!loading && items.length === 0 ? (
        <div style={{
          position: 'absolute',
          bottom: 0,
          left: '50%',
          transform: 'translateX(-50%)',
          padding: '8px 14px',
          background: '#FFFFFF',
          border: '1px solid #E0DAE8',
          borderRadius: 12,
          fontSize: 12,
          color: '#6b6377',
          whiteSpace: 'nowrap',
        }}>
          Featured videos appear when published to Discover
        </div>
      ) : null}
      {items.length > 0 ? (
        <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 }}>From Discover</span>
        </div>
      ) : null}
    </div>
  );
};

// ─── Hero ───────────────────────────────────────────────────────────────────
const Hero = () => {
  const [discoverItems, setDiscoverItems] = React.useState([]);
  const [discoverLoading, setDiscoverLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    fetchDiscoverPublic(3)
      .then((items) => {
        if (!cancelled) setDiscoverItems(items);
      })
      .catch(() => {
        if (!cancelled) setDiscoverItems([]);
      })
      .finally(() => {
        if (!cancelled) setDiscoverLoading(false);
      });
    return () => { cancelled = true; };
  }, []);

  return (
  <section className="lp-hero-section" style={{position:'relative',overflow:'hidden'}}>
    {/* Ambient pastel blobs */}
    <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 className="lp-hero-inner" 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>
          Kimitai — AI video studio
        </div>

        <h1 className="lp-hero-title" style={{margin:0,fontSize:52,lineHeight:1.04,letterSpacing:'-.025em',
          fontWeight:500,color:'#1c1c1c'}}>
          Create AI videos from text, photos and clips{' '}
          <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'}}>
            in your pocket
          </span>
        </h1>

        <p className="lp-hero-sub" style={{marginTop:22,marginBottom:0,fontSize:18,lineHeight:1.55,color:'#4a4356',
          maxWidth:540,textWrap:'pretty'}}>
          Turn prompts and images into studio-quality video in minutes. Create from text or photos,
          animate any image, or mix media in Compose—powered by credits you buy once, with no subscription.
        </p>

        <p style={{marginTop:26,fontSize:13.5,lineHeight:1.55,color:'#6b6377',maxWidth:520}}>
          Built for creators and brands who need TikTok-ready, Reels, and Shorts videos
          without an editor or production crew.
        </p>

        {/* Mini trust strip */}
        <div className="lp-hero-trust" 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 className="lp-hero-trust-text" 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>

      <HeroPhoneCluster items={discoverItems} loading={discoverLoading} />
    </div>
  </section>
  );
};

// ─── Offers grid ────────────────────────────────────────────────────────────
const offers = [
  { icon:L.spark,  name:'Built to go viral',       sub:'Turn bold ideas into scroll-stopping clips people replay and share', tint:'#E8DFFA', ink:'#7A5AE0'},
  { icon:L.zap,    name:'Create from a prompt',    sub:'Type a scene or add images — Kimitai renders studio-quality video in minutes', tint:'#FCE0EC', ink:'#C4407A'},
  { icon:L.play,   name:'Animate any photo',       sub:'Make stills move — perfect for trends, reactions, and character-led Reels', tint:'#D6F0F5', ink:'#2A8060'},
  { icon:L.layers, name:'Compose like a studio',   sub:'Mix images, clips, and audio in one flow for richer, layered storytelling', tint:'#FFE8DC', ink:'#C46A20'},
  { icon:L.reels,  name:'9:16 ready to post',      sub:'Export vertical video for TikTok, Reels, and Shorts — no re-editing required', tint:'#FFF4D6', ink:'#A87A20'},
  { icon:L.globe,  name:'Discover & remix',        sub:'Browse what creators are making, then remix prompts and styles in one tap', tint:'#E5F5EE', ink:'#3A9075'},
];

const OffersGrid = () => (
  <section id="offers" className="lp-section" style={{maxWidth:1200,margin:'0 auto',padding:'40px 32px 80px'}}>
    <div style={{textAlign:'center',marginBottom:36}}>
      <div style={eyebrow}>Your AI video studio</div>
      <h2 style={h2}>
        Create videos people{' '}
        <span style={{fontFamily:'"Instrument Serif",serif',fontStyle:'italic',fontWeight:400,
          color:'#7A5AE0'}}>actually stop for</span>
      </h2>
      <p style={{fontSize:15.5,color:'#6b6377',marginTop:14,maxWidth:560,marginLeft:'auto',
        marginRight:'auto',lineHeight:1.55}}>
        From a single prompt to a post-ready clip — Create, Animate, and Compose in one app built for short-form.
      </p>
    </div>
    <div className="lp-grid-3" 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>
  );
};

// ─── Process ────────────────────────────────────────────────────────────────
const steps = [
  { n:'01', title:'Pick your mode',
    body:'Start with Create (text or images → video), Animate (photo to motion), or Compose (mix media in one shot).',
    icon:L.layers, tint:'#E8DFFA', ink:'#7A5AE0'},
  { n:'02', title:'Describe your video',
    body:'Write a prompt, add references, and set aspect ratio, quality, and duration — up to 15s on Boost and above.',
    icon:L.pen, tint:'#FCE0EC', ink:'#C4407A'},
  { n:'03', title:'Generate & post',
    body:'Render with Seedance, save to your library, then share on TikTok, Reels, or Shorts — or feature it on Discover.',
    icon:L.bolt, tint:'#FFE8DC', ink:'#C46A20'},
];

const Process = () => (
  <section id="process" className="lp-section" 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 idea to video in 3 steps</h2>
      <p style={{fontSize:15.5,color:'#6b6377',marginTop:14,maxWidth:520,marginLeft:'auto',
        marginRight:'auto',lineHeight:1.55}}>
        Sign in, pick a mode, and get post-ready vertical video in minutes.
      </p>
    </div>
    <div className="lp-grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,position:'relative'}}>
      {/* Connecting dashed line */}
      <div className="lp-process-line" 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 (matches creditsPacks.js / app paywall) ─
const CREDIT_PACKS_LANDING = (typeof window !== 'undefined' && window.KimitaiCredits?.CREDIT_PACKS) || [
  {
    id: 'pack_starter',
    label: 'Starter',
    price: '$7.99',
    credits: 256,
    refVideos: 2,
    savePct: null,
    popular: false,
    perks: ['256 credits', '~2 Animate clips (~10s ref)', 'Expires in 60 days', 'Create · Animate · Compose'],
    stripeUrl: '',
  },
  {
    id: 'pack_boost',
    label: 'Boost',
    price: '$14.99',
    credits: 384,
    refVideos: 3,
    savePct: 17,
    popular: true,
    perks: ['384 credits', '~3 generations', 'Expires in 60 days', 'Motion refs up to 30s'],
    stripeUrl: '',
  },
  {
    id: 'pack_ultra',
    label: 'Ultra',
    price: '$59.99',
    credits: 1920,
    refVideos: 15,
    savePct: 28,
    popular: false,
    perks: ['1,920 credits', '~15 generations', 'Expires in 60 days', 'Heavy generation weeks'],
    stripeUrl: '',
  },
  {
    id: 'pack_max',
    label: 'Max',
    price: '$99.99',
    credits: 3328,
    refVideos: 26,
    savePct: 27,
    popular: false,
    perks: ['3,328 credits', '~26 generations', 'Expires in 60 days', 'Shared balance with the app'],
    stripeUrl: '',
  },
];

const dashboardBuyHref = (packId) => {
  const q = packId ? `?pack=${encodeURIComponent(packId)}` : '';
  return `dashboard.html${q}`;
};

const PackCard = ({ pack }) => {
  const [hover, setHover] = React.useState(false);
  const border = pack.popular ? '2px solid #7A5AE0' : '1px solid #E0DAE8';
  const bg = pack.popular ? 'linear-gradient(180deg,#FAF7FE 0%,#FFFFFF 100%)' : '#FFFFFF';
  const buyLabel = `Buy ${pack.label}`;
  const buyHref = pack.stripeUrl || dashboardBuyHref(pack.id);
  const opensDashboard = !pack.stripeUrl;
  const btnStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    width: '100%',
    marginTop: 22,
    padding: '13px 20px',
    borderRadius: 999,
    border: 'none',
    cursor: 'pointer',
    fontFamily: 'inherit',
    fontWeight: 600,
    fontSize: 14,
    color: '#1c1c1c',
    textDecoration: 'none',
    background: pack.popular
      ? 'linear-gradient(120deg,#C8B6FF 0%,#F5B8D0 50%,#C8B6FF 100%)'
      : '#FFFFFF',
    boxShadow: pack.popular
      ? '0 6px 18px rgba(122,90,224,.22)'
      : '0 1px 2px rgba(28,28,28,.04)',
    borderWidth: pack.popular ? 0 : 1,
    borderStyle: 'solid',
    borderColor: '#E0DAE8',
    opacity: hover ? 0.92 : 1,
    transition: 'opacity .15s, transform .15s',
    transform: hover ? 'translateY(-1px)' : 'translateY(0)',
  };

  const BuyBtn = (
    <a
      href={buyHref}
      target={pack.stripeUrl ? '_blank' : undefined}
      rel={pack.stripeUrl ? 'noopener noreferrer' : undefined}
      style={btnStyle}
      title={opensDashboard ? 'Sign in to buy credits in the dashboard' : undefined}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      {buyLabel} <span style={{ display: 'flex' }}>{L.arrow}</span>
    </a>
  );

  return (
    <div style={{
      position: 'relative',
      padding: '28px 24px 26px',
      background: bg,
      border,
      borderRadius: 20,
      boxShadow: pack.popular ? '0 14px 36px rgba(122,90,224,.14)' : '0 1px 2px rgba(28,28,28,.03)',
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
    }}>
      {pack.popular ? (
        <div style={{
          position: 'absolute',
          top: 14,
          right: 14,
          padding: '4px 10px',
          background: '#F5B8D0',
          color: '#1c1c1c',
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '.06em',
          borderRadius: 8,
        }}>
          POPULAR
        </div>
      ) : null}

      <div style={{ fontSize: 18, fontWeight: 600, color: '#1c1c1c', letterSpacing: '-.01em' }}>
        {pack.label}
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 12 }}>
        <span style={{ fontSize: 36, fontWeight: 600, color: '#1c1c1c', letterSpacing: '-.02em' }}>
          {pack.price}
        </span>
        <span style={{ fontSize: 13, color: '#6b6377' }}>one-time</span>
      </div>

      <div style={{ marginTop: 10, fontSize: 14, fontWeight: 600, color: '#7A5AE0' }}>
        {pack.credits.toLocaleString()} credits
      </div>

      {pack.savePct ? (
        <div style={{ marginTop: 6, fontSize: 12, fontWeight: 600, color: '#C46A20' }}>
          Save {pack.savePct}%
        </div>
      ) : null}

      <ul style={{
        margin: '18px 0 0',
        padding: 0,
        listStyle: 'none',
        display: 'flex',
        flexDirection: 'column',
        gap: 8,
        flex: 1,
      }}>
        {pack.perks.map((perk, i) => (
          <li key={i} style={{ display: 'flex', gap: 8, fontSize: 12.5, lineHeight: 1.45, color: '#4a4356' }}>
            <span style={{ color: '#7A5AE0', display: 'flex', flexShrink: 0, marginTop: 2 }}>{L.check}</span>
            {perk}
          </li>
        ))}
      </ul>

      {BuyBtn}
    </div>
  );
};

const Pricing = () => (
  <section id="pricing" className="lp-section" style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 32px 90px' }}>
    <div style={{ textAlign: 'center', marginBottom: 40 }}>
      <div style={eyebrow}>Pricing</div>
      <h2 style={h2}>
        Get credits when you{' '}
        <span style={{
          fontFamily: '"Instrument Serif", serif',
          fontStyle: 'italic',
          fontWeight: 400,
          color: '#C46A20',
        }}>
          need them
        </span>
      </h2>
      <p style={{
        fontSize: 15.5,
        color: '#6b6377',
        marginTop: 14,
        maxWidth: 560,
        marginLeft: 'auto',
        marginRight: 'auto',
        lineHeight: 1.55,
      }}>
        One-time packs. No subscription. Credits expire 60 days after purchase.
      </p>
    </div>

    <div className="lp-pricing-grid" style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
      gap: 16,
      alignItems: 'stretch',
    }}>
      {CREDIT_PACKS_LANDING.map((pack) => (
        <PackCard key={pack.id} pack={pack} />
      ))}
    </div>
  </section>
);

// ─── Final CTA ──────────────────────────────────────────────────────────────
const FinalCTA = () => (
  <section className="lp-final-cta" style={{padding:'60px 32px 80px'}}>
    <div className="lp-final-cta-inner" 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 videos.<br/>
          Post 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'}}>
            Go viral.
          </span>
        </h2>
        <p style={{fontSize:16,color:'#4a4356',marginTop:18,marginBottom:32,lineHeight:1.55}}>
          Your next scroll-stopping clip is one prompt away. Create, Animate, or Compose — then share on TikTok, Reels, and Shorts.
        </p>
        <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
          <CTAButton size="lg" icon={L.arrow}
            onClick={() => document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' })}>
            Get credits
          </CTAButton>
          <CTAButton variant="secondary" size="lg"
            onClick={() => { window.location.href = 'dashboard.html'; }}>
            Sign in
          </CTAButton>
        </div>
        <div style={{fontSize:12.5,color:'#6b6377',marginTop:18}}>
          One-time packs · No subscription · Credits expire in 60 days
        </div>
      </div>
    </div>
  </section>
);

// ─── Footer ─────────────────────────────────────────────────────────────────
const Footer = () => (
  <footer style={{borderTop:'1px solid #E0DAE8',background:'#FAF7FE'}}>
    <div className="lp-footer-inner" style={{maxWidth:1200,margin:'0 auto',padding:'40px 32px',
      display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:20}}>
      <CavivoMark/>
      <div className="lp-footer-links" style={{display:'flex',gap:26,fontSize:13,color:'#6b6377'}}>
        <a href="privacy.html" style={navLink}>Privacy</a>
        <a href="terms.html" style={navLink}>Terms</a>
        <a href="mailto:contact@lahyal.com" style={navLink}>Contact</a>
        <a href="dashboard.html" style={navLink}>Open workspace →</a>
      </div>
      <div style={{fontSize:12,color:'#9089A0'}}>© 2026 Kimitai. 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() {
  return (
    <div style={{background:'#FAF7FE',color:'#1c1c1c',
      fontFamily:'"Inter","SF Pro Text",ui-sans-serif,system-ui,sans-serif',minHeight:'100vh'}}>
      <Nav/>
      <Hero/>
      <OffersGrid/>
      <Process/>
      <Pricing/>
      <FinalCTA/>
      <Footer/>
    </div>
  );
}

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