// hero.jsx — Kiruko landing hero
const { useState, useEffect, useRef, useMemo } = React;

const APP = {
  bg: '#07060F',
  bgDeep: '#0A0714',
  violet: '#8B5CF6',
  violet2: '#6D28D9',
  pink: '#EC4899',
  magenta: '#C026D3',
  cyan: '#22D3EE',
  orange: '#F59E0B',
  star: '#FBBF24',
  fire: '#EF4444',
  text: '#FFFFFF',
  muted: 'rgba(255,255,255,0.65)',
  dim: 'rgba(255,255,255,0.45)'
};

const APP_STORE_URL = 'https://apps.apple.com/app/id6760727949';

function StarfieldBg({ t, density = 'medium' }) {
  const starCount = density === 'high' ? 180 : density === 'low' ? 60 : 110;
  const bokehCount = density === 'high' ? 55 : density === 'low' ? 22 : 38;

  const stars = useMemo(() => {
    const arr = [];
    for (let i = 0; i < starCount; i++) {
      arr.push({
        x: Math.random(), y: Math.random(),
        r: 0.3 + Math.random() * 1.4,
        tw: Math.random() * Math.PI * 2,
        speed: 0.3 + Math.random() * 1.2
      });
    }
    return arr;
  }, [starCount]);

  const bokeh = useMemo(() => {
    const arr = [];
    for (let i = 0; i < bokehCount; i++) {
      arr.push({
        x: Math.random(),
        y: Math.random(),
        r: 4 + Math.random() * 18,
        c: Math.random() < 0.55 ? 'gold' : Math.random() < 0.5 ? 'violet' : 'pink',
        op: 0.2 + Math.random() * 0.45,
        drift: Math.random() * Math.PI * 2,
        speed: 0.4 + Math.random() * 0.8
      });
    }
    return arr;
  }, [bokehCount]);

  const W = 1920, H = 1080;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      pointerEvents: 'none'
    }}>
      <defs>
        <radialGradient id="blobV" cx="50%" cy="50%">
          <stop offset="0%" stopColor={APP.violet} stopOpacity="0.5" />
          <stop offset="100%" stopColor={APP.violet} stopOpacity="0" />
        </radialGradient>
        <radialGradient id="blobP" cx="50%" cy="50%">
          <stop offset="0%" stopColor={APP.pink} stopOpacity="0.35" />
          <stop offset="100%" stopColor={APP.pink} stopOpacity="0" />
        </radialGradient>
        <radialGradient id="blobC" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#4C1D95" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#4C1D95" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="starG" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#fff" stopOpacity="1" />
          <stop offset="100%" stopColor="#fff" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="bokehGold" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#FCD34D" stopOpacity="0.9" />
          <stop offset="50%" stopColor="#F59E0B" stopOpacity="0.5" />
          <stop offset="100%" stopColor="#F59E0B" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="bokehViolet" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#A78BFA" stopOpacity="0.8" />
          <stop offset="50%" stopColor="#8B5CF6" stopOpacity="0.4" />
          <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="bokehPink" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#F9A8D4" stopOpacity="0.75" />
          <stop offset="50%" stopColor="#EC4899" stopOpacity="0.35" />
          <stop offset="100%" stopColor="#EC4899" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx={380 + Math.sin(t * 0.25) * 60} cy={280} r="540" fill="url(#blobV)" />
      <circle cx={1480 + Math.cos(t * 0.22) * 70} cy={820} r="620" fill="url(#blobP)" />
      <circle cx={W * 0.5} cy={H * 0.55} r="540" fill="url(#blobC)" opacity="0.5" />
      {stars.map((s, i) => {
        const tw = 0.5 + Math.sin(t * s.speed + s.tw) * 0.5;
        return <circle key={i} cx={s.x * W} cy={s.y * H} r={s.r * (0.8 + tw * 0.6)}
          fill="url(#starG)" opacity={0.3 + tw * 0.6} />;
      })}
      {bokeh.map((d, i) => {
        const ox = Math.cos(t * 0.2 * d.speed + d.drift) * 20;
        const oy = Math.sin(t * 0.2 * d.speed + d.drift) * 15;
        return <circle key={i}
          cx={d.x * W + ox} cy={d.y * H + oy} r={d.r}
          fill={`url(#bokeh${d.c === 'gold' ? 'Gold' : d.c === 'violet' ? 'Violet' : 'Pink'})`}
          opacity={d.op} />;
      })}
    </svg>
  );
}

function FloatBadge({ kind, top, left, right, bottom, delay = 0, t }) {
  const float = Math.sin(t * 1.2 + delay) * 6;
  const rot = Math.sin(t * 0.8 + delay) * 2;

  const variants = {
    xp: {
      icon: <svg width="16" height="16" viewBox="0 0 16 16"><path d="M9 1L3 9h4v6l6-9H9V1z" fill="#FCD34D" stroke="#000" strokeWidth="0.8" strokeLinejoin="round" /></svg>,
      label: '30 XP', bg: 'rgba(245,158,11,0.18)', border: 'rgba(245,158,11,0.5)', color: '#FCD34D'
    },
    star: {
      icon: <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 1l2 5 5 .5-4 3.5 1.2 5L8 12l-4.2 3 1.2-5L1 6.5 6 6z" fill="#FBBF24" /></svg>,
      label: '3 stars', bg: 'rgba(168,85,247,0.18)', border: 'rgba(168,85,247,0.5)', color: '#C4B5FD'
    },
    fire: {
      icon: <span style={{ fontSize: 14 }}>🔥</span>,
      label: '1 day streak', bg: 'rgba(239,68,68,0.18)', border: 'rgba(239,68,68,0.5)', color: '#FCA5A5'
    },
    completed: {
      icon: <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="6" fill="#8B5CF6" /><path d="M4 7l2 2 4-4" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>,
      label: 'Completed', bg: 'rgba(139,92,246,0.2)', border: 'rgba(139,92,246,0.5)', color: '#C4B5FD'
    },
    lesson: {
      icon: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3c2 0 3.5.5 5 1.5 1.5-1 3-1.5 5-1.5v8c-2 0-3.5.5-5 1.5-1.5-1-3-1.5-5-1.5V3z" stroke="#A78BFA" strokeWidth="1.3" strokeLinejoin="round" /><path d="M7 4.5v8" stroke="#A78BFA" strokeWidth="1.3" /></svg>,
      label: '32 lessons', bg: 'rgba(139,92,246,0.15)', border: 'rgba(139,92,246,0.4)', color: '#DDD6FE'
    }
  };
  const v = variants[kind];

  return (
    <div style={{
      position: 'absolute', top, left, right, bottom,
      transform: `translateY(${float}px) rotate(${rot}deg)`,
      padding: '9px 14px 9px 11px',
      background: `linear-gradient(180deg, ${v.bg}, ${v.bg.replace('0.1', '0.06').replace('0.2', '0.12')})`,
      backdropFilter: 'blur(18px) saturate(180%)',
      WebkitBackdropFilter: 'blur(18px) saturate(180%)',
      border: `1px solid ${v.border}`,
      borderRadius: 99,
      display: 'flex', alignItems: 'center', gap: 8,
      fontFamily: 'Inter, -apple-system, system-ui',
      color: v.color, fontSize: 13, fontWeight: 700,
      boxShadow: `0 10px 30px rgba(0,0,0,0.4), 0 0 20px ${v.border}`,
      whiteSpace: 'nowrap',
      zIndex: 8
    }}>
      {v.icon}
      {v.label}
    </div>
  );
}

const SCREENS = {
  home: { src: 'assets/IMG_4499.jpg', label: 'Tokens' },
  path: { src: 'assets/IMG_4500.jpg', label: 'Context' },
  map: { src: 'assets/IMG_4501.png', label: 'Journey' },
  network: { src: 'assets/IMG_4502.jpg', label: 'Attention' },
  lesson: { src: 'assets/IMG_4503.jpg', label: 'Memory' }
};

function PhoneStack({ t, order, active, setActive, variant, scale = 1 }) {
  const N = order.length;
  const activeIdx = Math.max(0, order.indexOf(active));

  const baseW = (variant === 'fan' ? 360 : 400) * scale;
  const spread = variant === 'fan' ? 310 : 170;

  return (
    <div style={{
      position: 'relative',
      width: (variant === 'fan' ? 1100 : 900) * scale,
      maxWidth: '100%',
      height: 820 * scale,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      perspective: '2200px'
    }}>
      {order.map((k, i) => {
        let d = ((i - activeIdx) % N + N) % N;
        if (d > N / 2) d -= N;

        const isCenter = d === 0;
        const isAdjacent = Math.abs(d) === 1;
        const visible = isCenter || isAdjacent;
        const offset = d;
        const bob = Math.sin(t * 1.1 + offset * 1.5) * 6;

        const positionTransform = variant === 'fan' ?
          `translate(${offset * spread * scale}px, ${isCenter ? -20 : 30}px) rotate(${offset * 6}deg) scale(${isCenter ? 1.0 : 0.82})` :
          `translate(${offset * spread * scale}px, ${isCenter ? 0 : 50}px) rotateY(${-offset * 14}deg) rotateX(${isCenter ? -4 : -2}deg) scale(${isCenter ? 1.0 : 0.78})`;

        return (
          <div key={k} onClick={() => visible && setActive(k)} style={{
            position: 'absolute',
            transform: positionTransform,
            transition: 'transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms ease-in-out, filter 600ms ease-in-out',
            transformStyle: 'preserve-3d',
            zIndex: isCenter ? 3 : isAdjacent ? 2 : 0,
            opacity: visible ? 1 : 0,
            pointerEvents: visible ? 'auto' : 'none',
            filter: isCenter ?
              `drop-shadow(0 30px 60px rgba(139,92,246,0.35)) drop-shadow(0 8px 24px rgba(0,0,0,0.5))` :
              'brightness(0.65) saturate(0.8) drop-shadow(0 20px 40px rgba(0,0,0,0.6))',
            cursor: visible ? 'pointer' : 'default',
            willChange: 'transform, opacity'
          }}>
            <div style={{
              transform: `translateY(${bob}px)`,
              willChange: 'transform'
            }}>
              <img src={SCREENS[k].src} alt={SCREENS[k].label} style={{
                width: baseW,
                display: 'block',
                userSelect: 'none',
                pointerEvents: 'none'
              }} draggable={false} />
            </div>
          </div>
        );
      })}
    </div>
  );
}

function MascotFloat({ size = 220, top, left, right, bottom, t, delay = 0, showHalo = true }) {
  const y = Math.sin(t * 0.9 + delay) * 10;
  const r = Math.sin(t * 0.6 + delay) * 3;
  return (
    <div style={{
      position: 'absolute', top, left, right, bottom,
      width: size, height: size,
      transform: `translateY(${y}px) rotate(${r}deg)`,
      zIndex: 6, pointerEvents: 'none'
    }}>
      {showHalo &&
        <div style={{
          position: 'absolute', inset: -size * 0.25,
          background: 'radial-gradient(circle, rgba(236,72,153,0.35), rgba(139,92,246,0.18) 40%, transparent 70%)',
          filter: 'blur(20px)'
        }} />
      }
      <img src="assets/mascot.png" alt="Kiruko" style={{
        width: '100%', height: '100%', objectFit: 'contain',
        filter: 'drop-shadow(0 10px 30px rgba(139,92,246,0.5))'
      }} />
    </div>
  );
}

function useViewportWidth() {
  const [w, setW] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
  useEffect(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return w;
}

const TWEAKS = {
  layout: 'split',
  phoneVariant: 'tilted',
  bgDensity: 'medium',
  showBadges: true,
  showChapters: true,
  showMascot: 'right',
  screens: ['home', 'path', 'map', 'network', 'lesson'],
  headline: 'Learn AI.|For real.'
};

function EmailSignup({ isMobile }) {
  const [state, setState] = useState(() => {
    if (typeof window !== 'undefined' && localStorage.getItem('kiruko_subscribed')) return 'subscribed';
    return 'idle';
  });
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    const trimmed = email.trim();
    if (!trimmed.includes('@') || !trimmed.includes('.')) {
      setError('Please enter a valid email address.');
      return;
    }
    setError('');
    setState('saving');
    try {
      localStorage.setItem('kiruko_subscribed', '1');
      localStorage.setItem('kiruko_email', trimmed);
    } catch (_) {}
    try {
      await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: trimmed })
      });
    } catch (_) {}
    setState('subscribed');
  };

  if (state === 'subscribed') {
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '12px 22px', borderRadius: 99,
        background: 'rgba(139,92,246,0.14)',
        border: '1px solid rgba(139,92,246,0.4)',
        color: '#C4B5FD', fontSize: 14, fontWeight: 600
      }}>
        <svg width="16" height="16" viewBox="0 0 14 14"><circle cx="7" cy="7" r="6" fill="#8B5CF6" /><path d="M4 7l2 2 4-4" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
        You're in! We'll let you know when new chapters drop.
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{
      display: 'flex', flexDirection: 'column',
      gap: 8, maxWidth: 460,
      width: '100%', margin: '0 auto'
    }}>
      <div style={{
        display: 'flex', gap: 8,
        flexDirection: isMobile ? 'column' : 'row'
      }}>
        <input
          type="email" required autoComplete="email"
          placeholder="you@example.com"
          value={email} onChange={(e) => setEmail(e.target.value)}
          style={{
            flex: 1,
            background: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(139,92,246,0.35)',
            borderRadius: 99,
            padding: '13px 20px',
            fontSize: 15, color: '#fff',
            fontFamily: 'inherit', outline: 'none'
          }} />
        <button type="submit" disabled={state === 'saving'} style={{
          padding: '13px 22px', borderRadius: 99,
          background: 'linear-gradient(135deg, #8B5CF6, #C026D3)',
          color: '#fff', border: 'none',
          fontSize: 14, fontWeight: 700,
          cursor: 'pointer', fontFamily: 'inherit',
          whiteSpace: 'nowrap',
          boxShadow: '0 8px 20px rgba(139,92,246,0.35)',
          opacity: state === 'saving' ? 0.6 : 1
        }}>
          {state === 'saving' ? 'Saving…' : 'Subscribe'}
        </button>
      </div>
      {error && <div style={{ color: 'rgba(255,120,120,0.9)', fontSize: 13 }}>{error}</div>}
    </form>
  );
}

function Hero({ tweaks }) {
  const [t, setT] = useState(0);
  const [active, setActive] = useState('home');
  const userTouched = useRef(false);
  const rafRef = useRef(0);
  const vw = useViewportWidth();
  const isMobile = vw < 760;
  const isTablet = vw >= 760 && vw < 1100;

  useEffect(() => {
    let start;
    const tick = (now) => {
      if (start === undefined) start = now;
      setT((now - start) / 1000);
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, []);

  const screenOrder = tweaks.screens;
  useEffect(() => {
    if (userTouched.current) return;
    const id = setInterval(() => {
      setActive((prev) => {
        const idx = screenOrder.indexOf(prev);
        return screenOrder[(idx + 1) % screenOrder.length];
      });
    }, 4500);
    return () => clearInterval(id);
  }, [screenOrder]);

  useEffect(() => {
    if (!screenOrder.includes(active)) setActive(screenOrder[0]);
  }, [screenOrder]);

  const pick = (k) => { userTouched.current = true; setActive(k); };

  const lines = tweaks.headline.split('|');

  return (
    <div style={{
      position: 'relative', width: '100%',
      background: APP.bg,
      color: APP.text, overflow: 'hidden', fontFamily: "Inter, system-ui"
    }}>
      <StarfieldBg t={t} density={tweaks.bgDensity} />

      <nav style={{
        position: 'relative', zIndex: 10,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '18px 20px' : '24px 48px',
        maxWidth: 1800, margin: '0 auto',
        gap: 12
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/mascot.png" alt="" style={{
            width: isMobile ? 56 : 72, height: isMobile ? 56 : 72,
            filter: 'drop-shadow(0 4px 14px rgba(245,158,11,0.5))',
            objectFit: 'contain'
          }} />
          <div>
            <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 800, letterSpacing: -0.5 }}>Kiruko</div>
            <div style={{ fontSize: 11, color: APP.muted, marginTop: -1 }}>AI fluency in 5 min a day</div>
          </div>
        </div>
        {!isMobile && !isTablet &&
          <div style={{ display: 'flex', gap: 32, fontSize: 14, fontWeight: 500, color: APP.muted }}>
            <a href="#chapters" style={{ color: 'inherit', textDecoration: 'none' }}>Chapters</a>
            <a href="#signup" style={{ color: 'inherit', textDecoration: 'none' }}>Newsletter</a>
            <a href="/support" style={{ color: 'inherit', textDecoration: 'none' }}>Support</a>
          </div>
        }
        <a href={APP_STORE_URL}
          style={{
            padding: isMobile ? '9px 14px' : '10px 18px', borderRadius: 99,
            background: 'linear-gradient(135deg, #8B5CF6, #C026D3)',
            color: '#fff', fontSize: isMobile ? 12 : 13, fontWeight: 700,
            display: 'flex', alignItems: 'center', gap: 8,
            textDecoration: 'none',
            boxShadow: '0 8px 20px rgba(139,92,246,0.45)',
            whiteSpace: 'nowrap'
          }}>
          <svg width="14" height="17" viewBox="0 0 814 1000" fill="currentColor" style={{ marginTop: -1 }}><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg>
          Get the app
        </a>
      </nav>

      <div style={{
        position: 'relative', zIndex: 5,
        display: 'grid',
        gridTemplateColumns: isMobile || tweaks.layout === 'centered' ? '1fr' : '1fr 1.15fr',
        gap: isMobile ? 20 : 40,
        alignItems: isMobile ? 'center' : 'start',
        padding: isMobile ?
          '10px 20px 30px' :
          tweaks.layout === 'centered' ? '20px 48px 40px' : '20px 48px 60px 80px',
        maxWidth: 1800, margin: '0 auto'
      }}>
        <div style={{
          textAlign: isMobile || tweaks.layout === 'centered' ? 'center' : 'left',
          maxWidth: isMobile || tweaks.layout === 'centered' ? 820 : 620,
          margin: isMobile || tweaks.layout === 'centered' ? '0 auto' : 0,
          position: 'relative'
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '7px 14px 7px 7px', borderRadius: 99,
            background: 'rgba(139,92,246,0.12)',
            border: '1px solid rgba(139,92,246,0.35)',
            fontSize: 12, fontWeight: 600, color: '#C4B5FD',
            marginBottom: 24, letterSpacing: 0.2
          }}>
            <div style={{
              padding: '3px 9px', borderRadius: 99, fontSize: 10, fontWeight: 800,
              background: 'linear-gradient(135deg,#8B5CF6,#C026D3)', color: '#fff', letterSpacing: 0.5
            }}>NEW</div>
            Now on the App Store · iPhone + iPad
          </div>

          <h1 style={{
            fontSize: isMobile ? 'clamp(44px, 12vw, 64px)' : 'clamp(52px, 6.5vw, 104px)',
            fontWeight: 900, lineHeight: 0.94,
            letterSpacing: isMobile ? -1.8 : -3.4, margin: '0 0 22px',
            textWrap: 'balance'
          }}>
            {lines.map((line, i) =>
              <div key={i} style={{
                position: 'relative',
                marginTop: i === 1 ? (isMobile ? 4 : 8) : 0
              }}>
                {i === 1 ? (
                  <span style={{
                    fontFamily: "'Fraunces', 'Times New Roman', serif",
                    fontStyle: 'italic',
                    fontWeight: 900,
                    fontVariationSettings: "'opsz' 144, 'SOFT' 100, 'WONK' 1",
                    letterSpacing: isMobile ? -2 : -4,
                    background: 'linear-gradient(100deg, #C4B5FD 0%, #F472B6 45%, #FB923C 95%)',
                    WebkitBackgroundClip: 'text', backgroundClip: 'text',
                    color: 'transparent',
                    filter: 'drop-shadow(0 0 28px rgba(236, 72, 153, 0.45)) drop-shadow(0 6px 20px rgba(245, 158, 11, 0.25))',
                    paddingRight: '0.08em'
                  }}>{line}</span>
                ) : (
                  <span style={{
                    background: 'linear-gradient(180deg, #FFFFFF 35%, #E9D5FF 100%)',
                    WebkitBackgroundClip: 'text', backgroundClip: 'text',
                    color: 'transparent',
                    textShadow: '0 1px 0 rgba(255,255,255,0.04)'
                  }}>{line}</span>
                )}
              </div>
            )}
          </h1>

          <p style={{
            fontSize: isMobile ? 15 : 'clamp(16px, 1.3vw, 20px)',
            lineHeight: 1.45, color: APP.muted,
            maxWidth: 540,
            margin: isMobile || tweaks.layout === 'centered' ? '0 auto 28px' : '0 0 32px',
            textWrap: 'pretty'
          }}>
            Transformers, neural networks, the AI winter — in bite-size lessons you actually <em style={{ fontStyle: 'normal', color: APP.text, fontWeight: 600, background: 'linear-gradient(transparent 80%, rgba(236,72,153,0.35) 80%)' }}>tap, swipe, and drag</em>. No buzzword soup. No coding. Just 5 minutes a day.
          </p>

          <div style={{
            display: 'flex', gap: 12, flexWrap: 'wrap',
            justifyContent: isMobile || tweaks.layout === 'centered' ? 'center' : 'flex-start',
            marginBottom: isMobile ? 30 : 44
          }}>
            <a href={APP_STORE_URL} style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              padding: '14px 22px 14px 18px', borderRadius: 14,
              background: '#fff', color: '#000', textDecoration: 'none',
              fontSize: 15, fontWeight: 700,
              boxShadow: '0 16px 40px rgba(139,92,246,0.3), 0 0 0 1px rgba(255,255,255,0.1)'
            }}>
              <svg width="22" height="26" viewBox="0 0 22 26" fill="currentColor"><path d="M17.5 13.7c-.1-2.9 2.3-4.3 2.5-4.4-1.3-2-3.5-2.2-4.8-2.3-2-.2-3.9 1.2-4.9 1.2s-2.6-1.2-4.3-1.1c-2.2 0-4.2 1.3-5.3 3.3-2.3 3.9-.6 9.7 1.6 12.9 1.1 1.5 2.4 3.3 4.1 3.2 1.6-.1 2.3-1.1 4.3-1.1s2.5 1.1 4.3 1c1.8 0 2.9-1.6 4-3.2 1.3-1.8 1.8-3.6 1.8-3.7-.1-.1-3.3-1.3-3.3-5zm-3.3-9.1c.9-1.1 1.5-2.7 1.4-4.2-1.3.1-2.9.9-3.9 2-.8 1-1.6 2.6-1.4 4.1 1.5.1 3-.7 3.9-1.9z" /></svg>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1 }}>
                <span style={{ fontSize: 10, fontWeight: 500, letterSpacing: 0.3, color: 'rgba(0,0,0,0.6)' }}>Download on the</span>
                <span style={{ fontSize: 17, fontWeight: 700, marginTop: 2 }}>App Store</span>
              </div>
            </a>
          </div>

          <div style={{
            display: 'flex', gap: 0,
            justifyContent: isMobile || tweaks.layout === 'centered' ? 'center' : 'flex-start',
            flexWrap: 'wrap'
          }}>
            {[
              { k: '32', l: 'bite-size lessons' },
              { k: '5 min', l: 'a day' },
              { k: '0', l: 'code required' }
            ].map((s, i) =>
              <div key={i} style={{
                padding: i > 0 ? '0 24px' : '0 24px 0 0',
                borderLeft: i > 0 ? `1px solid rgba(255,255,255,0.1)` : 'none'
              }}>
                <div style={{
                  fontSize: 28, fontWeight: 800, letterSpacing: -1,
                  background: 'linear-gradient(135deg, #fff, #C4B5FD)',
                  WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent'
                }}>{s.k}</div>
                <div style={{ fontSize: 13, color: APP.muted, marginTop: 2 }}>{s.l}</div>
              </div>
            )}
          </div>

          {!isMobile && tweaks.showMascot === 'left' &&
            <MascotFloat size={260} bottom={-60} right={tweaks.layout === 'centered' ? 40 : -50} t={t} />
          }
        </div>

        <div style={{
          position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          minHeight: isMobile ? 540 : 820,
          marginTop: isMobile ? 10 : 0,
          overflow: isMobile ? 'hidden' : 'visible',
          width: '100%'
        }}>
          <PhoneStack
            t={t}
            order={tweaks.screens}
            active={active}
            setActive={pick}
            variant={isMobile ? 'tilted' : tweaks.layout === 'centered' ? 'fan' : tweaks.phoneVariant}
            scale={isMobile ? Math.min(0.58, (vw - 40) / 900) : isTablet ? 0.8 : 1} />

          {tweaks.showBadges && !isMobile &&
            <>
              <FloatBadge kind="xp" top={40} right={'4%'} t={t} delay={0} />
              <FloatBadge kind="fire" top={'28%'} left={'2%'} t={t} delay={1.2} />
              <FloatBadge kind="completed" bottom={'26%'} right={'2%'} t={t} delay={2.4} />
              <FloatBadge kind="star" bottom={'8%'} left={'6%'} t={t} delay={3.0} />
              <FloatBadge kind="lesson" top={'12%'} left={'10%'} t={t} delay={4.1} />
            </>
          }
          {tweaks.showBadges && isMobile &&
            <>
              <FloatBadge kind="xp" top={20} right={10} t={t} delay={0} />
              <FloatBadge kind="fire" bottom={60} left={10} t={t} delay={1.2} />
            </>
          }

          {!isMobile && tweaks.showMascot === 'right' &&
            <MascotFloat size={240} top={'-6%'} right={-130} t={t} delay={0.5} />
          }
          {isMobile && tweaks.showMascot !== 'none' &&
            <MascotFloat size={140} top={-30} right={-30} t={t} delay={0.5} />
          }

          <div style={{
            position: 'absolute', bottom: isMobile ? 0 : -10, left: '50%', transform: 'translateX(-50%)',
            display: 'flex', gap: 4,
            padding: 5, borderRadius: 99,
            background: 'rgba(15,10,25,0.85)',
            backdropFilter: 'blur(20px)',
            border: '1px solid rgba(139,92,246,0.25)',
            boxShadow: '0 10px 30px rgba(0,0,0,0.4)',
            zIndex: 10, whiteSpace: 'nowrap'
          }}>
            {tweaks.screens.map((k) =>
              <button key={k} onClick={() => pick(k)} style={{
                padding: isMobile ? '7px 11px' : '8px 14px', borderRadius: 99,
                background: active === k ? 'linear-gradient(135deg,#8B5CF6,#C026D3)' : 'transparent',
                color: active === k ? '#fff' : APP.muted,
                border: 'none', fontSize: isMobile ? 11 : 12, fontWeight: 700,
                cursor: 'pointer', fontFamily: 'inherit',
                letterSpacing: 0.1, transition: 'all 200ms',
                boxShadow: active === k ? '0 4px 12px rgba(139,92,246,0.5)' : 'none'
              }}>
                {SCREENS[k].label}
              </button>
            )}
          </div>
        </div>
      </div>

      {tweaks.showChapters &&
        <div id="chapters" style={{
          position: 'relative', zIndex: 5,
          padding: isMobile ? '10px 20px 40px' : '10px 48px 60px',
          maxWidth: 1800, margin: '0 auto'
        }}>
          <div style={{
            display: 'flex', alignItems: isMobile ? 'flex-start' : 'baseline',
            justifyContent: 'space-between', marginBottom: 18,
            flexDirection: isMobile ? 'column' : 'row',
            gap: isMobile ? 6 : 0
          }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 2, color: '#A78BFA', marginBottom: 6 }}>YOUR LEARNING JOURNEY</div>
              <div style={{ fontSize: isMobile ? 22 : 26, fontWeight: 800, letterSpacing: -0.6 }}>Each unit builds on the last.</div>
            </div>
            {!isMobile && <div style={{ fontSize: 13, color: APP.muted }}>Tap any concept to explore it →</div>}
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr 1fr' : isTablet ? 'repeat(3, 1fr)' : 'repeat(5, 1fr)',
            gap: 12
          }}>
            {[
              { t: 'AI Basics', d: "What AI is & isn't", color: '#F59E0B', dot: '#FDBA74' },
              { t: 'History', d: 'Turing → ChatGPT', color: '#EC4899', dot: '#F9A8D4' },
              { t: 'How AI Learns', d: 'Machine learning basics', color: '#8B5CF6', dot: '#C4B5FD' },
              { t: 'Neural Nets', d: 'Perceptrons → LSTM', color: '#22D3EE', dot: '#67E8F9' },
              { t: 'GenAI', d: 'Transformers & attention', color: '#10B981', dot: '#6EE7B7' }
            ].map((c, i) =>
              <div key={c.t} style={{
                padding: '18px 18px 20px', borderRadius: 18,
                background: 'rgba(255,255,255,0.03)',
                border: `1px solid ${c.color}33`,
                position: 'relative', overflow: 'hidden'
              }}>
                <div style={{
                  position: 'absolute', top: -20, right: -20, width: 80, height: 80,
                  background: `radial-gradient(circle, ${c.color}40, transparent 70%)`
                }} />
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                  <div style={{ width: 8, height: 8, borderRadius: 99, background: c.dot, boxShadow: `0 0 8px ${c.dot}` }} />
                  <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.4, color: c.dot }}>UNIT {i + 1}</div>
                </div>
                <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: -0.3, marginBottom: 4 }}>{c.t}</div>
                <div style={{ fontSize: 13, color: APP.muted, lineHeight: 1.35 }}>{c.d}</div>
              </div>
            )}
          </div>
        </div>
      }

      <div id="signup" style={{
        position: 'relative', zIndex: 5,
        padding: isMobile ? '40px 20px 60px' : '40px 48px 80px',
        maxWidth: 720, margin: '0 auto', textAlign: 'center'
      }}>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 2, color: '#A78BFA', marginBottom: 8 }}>STAY IN THE LOOP</div>
        <div style={{ fontSize: isMobile ? 24 : 30, fontWeight: 800, letterSpacing: -0.6, marginBottom: 10 }}>
          Be the first to know when new chapters drop.
        </div>
        <p style={{ fontSize: 15, color: APP.muted, marginBottom: 22, lineHeight: 1.5 }}>
          No spam. One short email when we release a new unit or ship something big.
        </p>
        <EmailSignup isMobile={isMobile} />
      </div>

      <footer style={{
        position: 'relative', zIndex: 5,
        padding: '30px 20px 40px',
        textAlign: 'center',
        color: 'rgba(255,255,255,0.35)',
        fontSize: 13,
        borderTop: '1px solid rgba(255,255,255,0.06)'
      }}>
        <div>© 2026 Rinirvtech LLC. All rights reserved.</div>
        <div style={{ marginTop: 8 }}>
          <a href="/privacy" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none', margin: '0 10px' }}>Privacy Policy</a>
          <a href="/support" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none', margin: '0 10px' }}>Support</a>
        </div>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Hero tweaks={TWEAKS} />);