// LingaFlip — Landing page (responsive, animated hero)

const LP_BRAND = {
  cream:   '#F7F1E6',
  creamD:  '#EDE4D2',
  ink:     '#0E1428',
  inkSoft: '#2B3143',
  muted:   '#6B7280',
  cyan:    '#3CC8E8',
  cyanDeep:'#1AA6CC',
  magenta: '#E13A7A',
  orange:  '#FF5A2E',
  mint:    '#7FD1A8',
  rose:    '#F4A5A5',
  gold:    '#F5C24B',
};
const LP_DISPLAY = `'Nunito', system-ui, sans-serif`;

// ─────────────────────────────────────────────────────────────
// Responsive hook
// ─────────────────────────────────────────────────────────────

function useBreakpoint() {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const handler = () => setW(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return { w, isMobile: w < 768, isTablet: w >= 768 && w < 1064, isDesktop: w >= 1064 };
}

// ─────────────────────────────────────────────────────────────
// Primitives
// ─────────────────────────────────────────────────────────────

function HardCard({ bg = LP_BRAND.cream, rotate = 0, children, style = {}, pad = '32px 36px', radius = 28, shadow = 10 }) {
  return (
    <div style={{
      background: bg,
      border: `4px solid ${LP_BRAND.ink}`,
      borderRadius: radius,
      padding: pad,
      boxShadow: `0 ${shadow}px 0 ${LP_BRAND.ink}`,
      transform: rotate ? `rotate(${rotate}deg)` : 'none',
      ...style,
    }}>{children}</div>
  );
}

function Pill({ children, bg = LP_BRAND.ink, color = LP_BRAND.cream, size = 16, style = {} }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      background: bg, color, borderRadius: 999,
      padding: `${size * 0.45}px ${size * 1.1}px`,
      fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: size,
      letterSpacing: 1.2, textTransform: 'uppercase',
      ...style,
    }}>{children}</span>
  );
}

function Sticker({ children, bg = LP_BRAND.gold, color = LP_BRAND.ink, size = 22, rotate = -3, style = {} }) {
  return (
    <span style={{
      display: 'inline-block',
      background: bg, color,
      padding: '6px 16px', borderRadius: 10,
      fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: size,
      transform: `rotate(${rotate}deg)`,
      boxShadow: '0 4px 12px rgba(14,20,40,0.18)',
      ...style,
    }}>{children}</span>
  );
}

function Bubble({ x, y, r, color, opacity = 0.18 }) {
  return <div style={{
    position: 'absolute', left: x, top: y, width: r * 2, height: r * 2,
    borderRadius: '50%', background: color, opacity,
    filter: 'blur(2px)', pointerEvents: 'none',
  }}/>;
}

// ─────────────────────────────────────────────────────────────
// Header
// ─────────────────────────────────────────────────────────────

function LPHeader() {
  const { isMobile, isTablet } = useBreakpoint();
  const [menuOpen, setMenuOpen] = React.useState(false);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(247,241,230,0.95)',
      backdropFilter: 'blur(8px)',
      borderBottom: `3px solid ${LP_BRAND.ink}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '14px 20px' : '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="assets/app-icon.png" alt="LingaFlip" width={isMobile ? 36 : 44} height={isMobile ? 36 : 44}
            style={{ display: 'block', borderRadius: 10 }}/>
          <div style={{
            fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: isMobile ? 22 : 28,
            color: LP_BRAND.ink, letterSpacing: -0.8, lineHeight: 1,
          }}>LingaFlip</div>
        </div>

        {/* Desktop nav */}
        {!isMobile && (
          <nav style={{ display: 'flex', alignItems: 'center', gap: isTablet ? 24 : 36 }}>
            {['Features', 'How it works', 'Pricing'].map(l => (
              <a key={l} href={`#${l.toLowerCase().replace(/\s+/g, '-')}`} style={{
                fontFamily: LP_DISPLAY, fontWeight: 700, fontSize: 17,
                color: LP_BRAND.ink, textDecoration: 'none',
              }}>{l}</a>
            ))}
          </nav>
        )}

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {/* Mobile hamburger */}
          {isMobile && (
            <button onClick={() => setMenuOpen(o => !o)} style={{
              background: 'none', border: `2px solid ${LP_BRAND.ink}`,
              borderRadius: 8, padding: '6px 10px', cursor: 'pointer',
              fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 18, color: LP_BRAND.ink,
            }}>{menuOpen ? '✕' : '☰'}</button>
          )}
        </div>
      </div>

      {/* Mobile dropdown nav */}
      {isMobile && menuOpen && (
        <nav style={{
          borderTop: `2px solid ${LP_BRAND.ink}`,
          padding: '16px 20px',
          display: 'flex', flexDirection: 'column', gap: 4,
          background: LP_BRAND.cream,
        }}>
          {['Features', 'How it works', 'Pricing'].map(l => (
            <a key={l} href={`#${l.toLowerCase().replace(/\s+/g, '-')}`}
              onClick={() => setMenuOpen(false)}
              style={{
                fontFamily: LP_DISPLAY, fontWeight: 700, fontSize: 18,
                color: LP_BRAND.ink, textDecoration: 'none',
                padding: '12px 0',
                borderBottom: `1px solid rgba(14,20,40,0.1)`,
              }}>{l}</a>
          ))}
        </nav>
      )}
    </header>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────

function LPHero() {
  const { isMobile, isTablet } = useBreakpoint();
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: LP_BRAND.cream,
      padding: isMobile ? '60px 20px 80px' : isTablet ? '70px 32px 100px' : '90px 32px 120px',
    }}>
      {!isMobile && <Bubble x={60} y={120} r={140} color={LP_BRAND.cyan} opacity={0.18}/>}
      {!isMobile && <Bubble x="80%" y={80} r={90} color={LP_BRAND.rose} opacity={0.35}/>}
      {!isMobile && <Bubble x="6%" y={620} r={120} color={LP_BRAND.mint} opacity={0.22}/>}
      {!isMobile && <Bubble x="88%" y={580} r={130} color={LP_BRAND.gold} opacity={0.18}/>}

      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile || isTablet ? '1fr' : '1.05fr 0.95fr',
        gap: isMobile ? 48 : 80,
        alignItems: 'center', position: 'relative',
      }}>
        {/* LEFT: copy */}
        <div>
          <Pill bg={LP_BRAND.cream} color={LP_BRAND.ink} size={isMobile ? 12 : 14}
            style={{ border: `3px solid ${LP_BRAND.ink}`, boxShadow: `0 4px 0 ${LP_BRAND.ink}`, marginBottom: isMobile ? 24 : 32 }}>
            🇬🇧 → 🇩🇪 🇪🇸 🇫🇷 🇮🇹 · 9 languages
          </Pill>

          <h1 style={{
            fontFamily: LP_DISPLAY, fontWeight: 900,
            fontSize: isMobile ? '48px' : 'clamp(48px, 6vw, 86px)',
            color: LP_BRAND.ink, lineHeight: 0.95,
            letterSpacing: isMobile ? -2 : -2.5, margin: 0,
          }}>
            Learn languages
            {' '}
            <span style={{
              background: LP_BRAND.ink, color: LP_BRAND.cream,
              padding: '0 18px', borderRadius: 16,
              display: 'inline-block', transform: 'rotate(-1.5deg)',
            }}>smarter.</span>
            <br/>
            Build sentences
            <br/>
            <span style={{
              background: LP_BRAND.cyan, color: LP_BRAND.ink,
              padding: '0 18px', borderRadius: 16,
              display: 'inline-block', transform: 'rotate(1.5deg)',
              border: `3px solid ${LP_BRAND.ink}`,
            }}>faster.</span>
            {' '}
            <span style={{ color: LP_BRAND.magenta }}>Forget less.</span>
          </h1>

          <p style={{
            fontFamily: LP_DISPLAY, fontWeight: 500,
            fontSize: isMobile ? 18 : 21, lineHeight: 1.4, color: LP_BRAND.inkSoft,
            margin: `${isMobile ? 24 : 32}px 0 0`, maxWidth: 560,
          }}>
            Master the sentence structures real speakers actually use.
            Increase speaking speed and keep all your languages active —
            with adaptive flashcards, 5 minutes a day.
          </p>

          {/* App store buttons */}
          <div style={{ display: 'flex', gap: 16, marginTop: isMobile ? 32 : 40, flexWrap: 'wrap' }}>
            <a href="https://apps.apple.com/tr/app/lingaflip-language-flashcard/id6756842037" style={{
              display: 'flex', alignItems: 'center', gap: 12,
              background: LP_BRAND.ink, color: LP_BRAND.cream,
              padding: isMobile ? '14px 20px' : '16px 26px', borderRadius: 18,
              textDecoration: 'none',
              boxShadow: `0 6px 0 ${LP_BRAND.orange}`,
            }}>
              <svg width={isMobile ? 24 : 28} height={isMobile ? 24 : 28} viewBox="0 0 24 24" fill="currentColor">
                <path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"/>
              </svg>
              <div style={{ textAlign: 'left', lineHeight: 1.1 }}>
                <div style={{ fontSize: 11, opacity: 0.7, fontFamily: LP_DISPLAY, fontWeight: 600, letterSpacing: 1.5 }}>DOWNLOAD ON</div>
                <div style={{ fontSize: isMobile ? 16 : 19, fontWeight: 800, fontFamily: LP_DISPLAY }}>App Store</div>
              </div>
            </a>
            <a href="#" style={{
              display: 'flex', alignItems: 'center', gap: 12,
              background: LP_BRAND.cream, color: LP_BRAND.ink,
              padding: isMobile ? '14px 20px' : '16px 26px', borderRadius: 18,
              textDecoration: 'none',
              border: `3px solid ${LP_BRAND.ink}`,
              opacity: 0.45,
              pointerEvents: 'none',
            }}>
              <svg width={isMobile ? 24 : 28} height={isMobile ? 24 : 28} viewBox="0 0 24 24" fill="currentColor">
                <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.61 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
              </svg>
              <div style={{ textAlign: 'left', lineHeight: 1.1 }}>
                <div style={{ fontSize: 11, opacity: 0.7, fontFamily: LP_DISPLAY, fontWeight: 600, letterSpacing: 1.5 }}>GET IT ON</div>
                <div style={{ fontSize: isMobile ? 16 : 19, fontWeight: 800, fontFamily: LP_DISPLAY }}>Google Play</div>
              </div>
            </a>
          </div>

        </div>

        {/* RIGHT: stacked flip cards — hidden on mobile/tablet */}
        {!isMobile && !isTablet && <LPHeroVisual/>}

        {/* On tablet: show a simplified inline card preview */}
        {isTablet && <LPHeroVisualTablet/>}
      </div>
    </section>
  );
}

// Card data — 3 cards cycle through the deck
const HERO_CARDS = [
  {
    bg: LP_BRAND.cyan, fromFlag: '🇫🇷', toFlag: '🇩🇪',
    front: 'Wohin gehst du?',
    back:  'Où vas-tu ?',
  },
  {
    bg: LP_BRAND.gold, fromFlag: '🇬🇧', toFlag: '🇮🇹',
    front: 'Come stai oggi?',
    back:  'How are you today?',
  },
  {
    bg: LP_BRAND.rose, fromFlag: '🇬🇧', toFlag: '🇪🇸',
    front: '¿Hablas meme?',
    back:  'Do you speak meme?',
  },
];

// Three slot positions: 0 = front (active), 1 = mid, 2 = back
const HERO_SLOTS = [
  { x:  '50%', y:  20, scale: 1.00, rot: -2, z: 3, dx: -50 },
  { x:  '78%', y:  62, scale: 0.86, rot:  7, z: 2, dx: -50 },
  { x:  '22%', y:  46, scale: 0.86, rot: -8, z: 1, dx: -50 },
];

function HeroFlashcard({ card, slot, isFront, flipped }) {
  const transform = `translate(${slot.dx}%, 0) rotate(${slot.rot}deg) scale(${slot.scale})`;
  return (
    <div style={{
      position: 'absolute',
      left: slot.x, top: slot.y,
      width: 320, height: 320,
      zIndex: slot.z,
      transform,
      transition: 'left 700ms cubic-bezier(.5,1.4,.5,1), top 700ms cubic-bezier(.5,1.4,.5,1), transform 700ms cubic-bezier(.5,1.4,.5,1), opacity 400ms ease, filter 400ms ease',
      filter: isFront ? 'none' : 'saturate(0.85)',
      perspective: 1000,
    }}>
      <div style={{
        position: 'relative', width: '100%', height: '100%',
        transformStyle: 'preserve-3d',
        transition: 'transform 700ms cubic-bezier(.5,1.4,.5,1)',
        transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
      }}>
        {/* FRONT face */}
        <div style={{
          position: 'absolute', inset: 0,
          background: card.bg,
          border: `4px solid ${LP_BRAND.ink}`,
          borderRadius: 28,
          boxShadow: `0 12px 0 ${LP_BRAND.ink}`,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          padding: 28,
          backfaceVisibility: 'hidden',
          WebkitBackfaceVisibility: 'hidden',
        }}>
          {isFront && (
            <div style={{
              position: 'absolute', top: 16, left: 16,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: LP_BRAND.ink, color: LP_BRAND.cream,
              borderRadius: 999, padding: '6px 12px',
              fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: 11,
              letterSpacing: 1.2,
            }}>{card.fromFlag} → {card.toFlag}</div>
          )}
          <div style={{ fontSize: 60, lineHeight: 1, marginBottom: 18 }}>{card.toFlag}</div>
          <div style={{
            fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 34,
            color: LP_BRAND.ink, textAlign: 'center', lineHeight: 1.02, letterSpacing: -0.8,
          }}>{card.front}</div>
        </div>
        {/* BACK face */}
        <div style={{
          position: 'absolute', inset: 0,
          background: LP_BRAND.cream,
          border: `4px solid ${LP_BRAND.ink}`,
          borderRadius: 28,
          boxShadow: `0 12px 0 ${LP_BRAND.ink}`,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          padding: 28,
          backfaceVisibility: 'hidden',
          WebkitBackfaceVisibility: 'hidden',
          transform: 'rotateY(180deg)',
        }}>
          <div style={{
            display: 'inline-flex', gap: 8, alignItems: 'center',
            fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: 13,
            color: LP_BRAND.muted, letterSpacing: 1.5, textTransform: 'uppercase',
            marginBottom: 18,
          }}>
            <span style={{ fontSize: 22 }}>{card.fromFlag}</span> Translation
          </div>
          <div style={{
            fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 32,
            color: LP_BRAND.ink, textAlign: 'center', lineHeight: 1.05, letterSpacing: -0.8,
          }}>{card.back}</div>
          <div style={{
            marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 8,
            background: LP_BRAND.mint, color: LP_BRAND.ink,
            border: `3px solid ${LP_BRAND.ink}`, borderRadius: 999,
            padding: '6px 14px',
            fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: 12, letterSpacing: 1,
          }}>✓ Got it</div>
        </div>
      </div>
    </div>
  );
}

function LPHeroVisual() {
  const [pos, setPos] = React.useState(0);
  const [phase, setPhase] = React.useState('idle');

  React.useEffect(() => {
    let cancelled = false;
    const wait = (ms) => new Promise(r => setTimeout(r, ms));
    async function loop() {
      while (!cancelled) {
        await wait(2000);
        if (cancelled) return;
        setPhase('flipping');
        await wait(900);
        if (cancelled) return;
        setPhase('flipped');
        await wait(1600);
        if (cancelled) return;
        setPhase('advancing');
        await wait(700);
        if (cancelled) return;
        setPos(p => (p + 1) % HERO_CARDS.length);
        setPhase('idle');
      }
    }
    loop();
    return () => { cancelled = true; };
  }, []);

  const flipped = phase === 'flipping' || phase === 'flipped';

  return (
    <div style={{ position: 'relative', height: 560, width: '100%' }}>
      <div style={{
        position: 'absolute', top: 18, right: 6, zIndex: 6,
        animation: 'lp-bob 3.4s ease-in-out infinite',
      }}>
        <Sticker bg={LP_BRAND.magenta} color={LP_BRAND.cream} size={18} rotate={-8}>
          Tap to flip
        </Sticker>
      </div>

      <div style={{
        position: 'absolute', inset: 0,
        animation: 'lp-float 6s ease-in-out infinite',
      }}>
        {HERO_CARDS.map((card, i) => {
          const slotIdx = (i - pos + HERO_CARDS.length) % HERO_CARDS.length;
          const slot = HERO_SLOTS[slotIdx];
          const isFront = slotIdx === 0;
          return (
            <HeroFlashcard
              key={i}
              card={card}
              slot={slot}
              isFront={isFront}
              flipped={isFront && flipped}
            />
          );
        })}
      </div>

      <div style={{
        position: 'absolute', bottom: 24, left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex', gap: 18, zIndex: 5,
      }}>
        <div style={{
          width: 84, height: 60, borderRadius: 16,
          background: LP_BRAND.rose, border: `4px solid ${LP_BRAND.ink}`,
          boxShadow: `0 5px 0 ${LP_BRAND.ink}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 26, color: LP_BRAND.ink,
          transition: 'transform 200ms ease',
          transform: phase === 'flipped' ? 'translateY(2px)' : 'none',
          opacity: phase === 'flipped' ? 0.55 : 1,
        }}>✕</div>
        <div style={{
          width: 84, height: 60, borderRadius: 16,
          background: LP_BRAND.mint, border: `4px solid ${LP_BRAND.ink}`,
          boxShadow: phase === 'flipped' ? `0 1px 0 ${LP_BRAND.ink}` : `0 5px 0 ${LP_BRAND.ink}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 26, color: LP_BRAND.ink,
          transition: 'box-shadow 200ms ease, transform 200ms ease',
          transform: phase === 'flipped' ? 'translateY(4px) scale(1.05)' : 'none',
        }}>✓</div>
      </div>
    </div>
  );
}

function LPHeroVisualTablet() {
  return (
    <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
      {[
        { flag: '🇩🇪', text: 'Wohin gehst du?', bg: LP_BRAND.cyan },
        { flag: '🇪🇸', text: '¿Cómo estás hoy?', bg: LP_BRAND.gold },
        { flag: '🇫🇷', text: 'Où vas-tu ?', bg: LP_BRAND.rose },
      ].map((c, i) => (
        <HardCard key={i} bg={c.bg} radius={24} pad="24px 20px" shadow={6}
          style={{ flex: '1 1 160px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{ fontSize: 36 }}>{c.flag}</div>
          <div style={{
            fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 16,
            color: LP_BRAND.ink, textAlign: 'center', marginTop: 12, lineHeight: 1.2,
          }}>{c.text}</div>
        </HardCard>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Marquee
// ─────────────────────────────────────────────────────────────

function LPMarquee() {
  const langs = [
    { name: 'English', flag: '🇬🇧' }, { name: 'Deutsch', flag: '🇩🇪' },
    { name: 'Español', flag: '🇪🇸' }, { name: 'Français', flag: '🇫🇷' },
    { name: 'Italiano', flag: '🇮🇹' }, { name: '中文', flag: '🇨🇳' },
    { name: 'Türkçe', flag: '🇹🇷' }, { name: 'Русский', flag: '🇷🇺' },
    { name: '日本語', flag: '🇯🇵' },
  ];
  const row = [...langs, ...langs];
  return (
    <div style={{
      background: LP_BRAND.ink, color: LP_BRAND.cream,
      borderTop: `3px solid ${LP_BRAND.ink}`, borderBottom: `3px solid ${LP_BRAND.ink}`,
      padding: '18px 0', overflow: 'hidden',
      transform: 'rotate(-1.2deg)', margin: '-30px 0 0',
    }}>
      <div style={{
        display: 'flex', gap: 56, whiteSpace: 'nowrap',
        animation: 'lp-marquee 40s linear infinite',
      }}>
        {[...row, ...row].map((l, i) => (
          <div key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: 26,
          }}>
            <span style={{ fontSize: 32 }}>{l.flag}</span>
            {l.name}
            <span style={{ color: LP_BRAND.orange, marginLeft: 16, fontSize: 22 }}>✦</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Demo / flexible learning
// ─────────────────────────────────────────────────────────────

function LPDemo() {
  const { isMobile, isTablet } = useBreakpoint();
  return (
    <section style={{
      background: LP_BRAND.cream,
      padding: isMobile ? '80px 20px 80px' : '120px 32px 100px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile || isTablet ? '1fr' : '1fr 1fr',
          gap: isMobile ? 48 : 80,
          alignItems: 'center',
        }}>
          <div>
            <Pill bg={LP_BRAND.orange} color={LP_BRAND.cream} size={13}>Flexible learning</Pill>
            <h2 style={{
              fontFamily: LP_DISPLAY, fontWeight: 900,
              fontSize: isMobile ? '40px' : 'clamp(40px, 4.6vw, 68px)',
              color: LP_BRAND.ink, lineHeight: 0.95,
              letterSpacing: -2, margin: '20px 0 0',
            }}>
              Any language,
              <br/>from any{' '}
              <span style={{
                background: LP_BRAND.gold, padding: '0 14px', borderRadius: 12,
                display: 'inline-block', transform: 'rotate(-1.5deg)',
                border: `3px solid ${LP_BRAND.ink}`,
              }}>language</span>.
            </h2>

            <p style={{
              fontFamily: LP_DISPLAY, fontWeight: 500, fontSize: isMobile ? 18 : 20,
              lineHeight: 1.45, color: LP_BRAND.inkSoft,
              margin: '28px 0 0', maxWidth: 500,
            }}>
              No fixed base language. Learn German <em>through</em> Spanish.
              Practice three or more languages in one session.
            </p>

            <ul style={{
              listStyle: 'none', padding: 0, margin: '32px 0 0',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              {[
                ['🧠', 'Real, everyday sentence patterns — not textbook drills.'],
                ['⚡', 'Active sentence creation builds speaking speed.'],
                ['🔁', 'Spaced repetition keeps dormant languages alive.'],
              ].map(([icon, txt], i) => (
                <li key={i} style={{
                  display: 'flex', gap: 16, alignItems: 'flex-start',
                  fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: 18,
                  color: LP_BRAND.inkSoft,
                }}>
                  <span style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: LP_BRAND.creamD, border: `2px solid ${LP_BRAND.ink}`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, fontSize: 18,
                  }}>{icon}</span>
                  <span style={{ paddingTop: 8 }}>{txt}</span>
                </li>
              ))}
            </ul>
          </div>

          <LPDemoVisual/>
        </div>
      </div>
    </section>
  );
}

function LPDemoVisual() {
  return (
    <div style={{ position: 'relative', marginTop: 20 }}>
      <Sticker bg={LP_BRAND.cyan} color={LP_BRAND.ink} size={18} rotate={6}
        style={{
          position: 'absolute', top: -22, right: 0, zIndex: 5,
          border: `3px solid ${LP_BRAND.ink}`,
        }}>
        Live in app →
      </Sticker>

      <HardCard bg={LP_BRAND.creamD} pad="0" radius={42} shadow={12}
        style={{ overflow: 'hidden', position: 'relative' }}>
        <div style={{
          padding: '36px 36px 28px', borderBottom: `3px solid ${LP_BRAND.ink}`,
          background: LP_BRAND.cream, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 22 }}>🇪🇸</span>
            <span style={{
              fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: 16,
              color: LP_BRAND.inkSoft, letterSpacing: 1.5, textTransform: 'uppercase',
            }}>→ 🇩🇪 German</span>
          </div>
          <div style={{
            fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: 14,
            color: LP_BRAND.muted, letterSpacing: 1.2,
          }}>DAY 7 · 32%</div>
        </div>

        <div style={{ padding: '20px 36px 0' }}>
          <div style={{
            width: '100%', height: 12, background: LP_BRAND.cream,
            border: `2px solid ${LP_BRAND.ink}`, borderRadius: 8, overflow: 'hidden',
          }}>
            <div style={{ width: '32%', height: '100%', background: LP_BRAND.orange }}/>
          </div>
        </div>

        <div style={{ padding: '36px' }}>
          <div style={{
            background: LP_BRAND.cyan,
            border: `3px solid ${LP_BRAND.ink}`,
            borderRadius: 28,
            padding: '54px 36px',
            textAlign: 'center',
            boxShadow: `0 6px 0 ${LP_BRAND.ink}`,
          }}>
            <div style={{ fontSize: 44, lineHeight: 1 }}>🇪🇸</div>
            <div style={{
              fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 34,
              color: LP_BRAND.ink, marginTop: 20, letterSpacing: -0.6, lineHeight: 1.1,
            }}>¿A dónde vas mañana?</div>
            <div style={{
              fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: 14,
              color: 'rgba(14,20,40,0.55)', marginTop: 28, letterSpacing: 1.5, textTransform: 'uppercase',
            }}>Tap to flip card</div>
          </div>
        </div>

        <div style={{
          padding: '0 36px 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        }}>
          <div style={{
            background: LP_BRAND.rose, border: `3px solid ${LP_BRAND.ink}`,
            borderRadius: 16, padding: '18px 0', textAlign: 'center',
            boxShadow: `0 4px 0 ${LP_BRAND.ink}`,
            fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 28, color: LP_BRAND.ink,
          }}>✕</div>
          <div style={{
            background: LP_BRAND.mint, border: `3px solid ${LP_BRAND.ink}`,
            borderRadius: 16, padding: '18px 0', textAlign: 'center',
            boxShadow: `0 4px 0 ${LP_BRAND.ink}`,
            fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 28, color: LP_BRAND.ink,
          }}>✓</div>
        </div>
      </HardCard>

    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Features
// ─────────────────────────────────────────────────────────────

function LPFeatures() {
  const { isMobile, isTablet } = useBreakpoint();
  const cols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';

  const items = [
    { tag: '01', bg: LP_BRAND.cyan,   title: 'Multi-language practice',       body: 'Practice multiple languages simultaneously. Switch from German to Spanish to Japanese without losing context.',                        emoji: '🌍' },
    { tag: '02', bg: LP_BRAND.gold,   title: 'Adaptive sentence progression', body: 'From beginner to advanced. Real, contextual sentences that adapt to your pace — not the other way around.',                            emoji: '🧠' },
    { tag: '03', bg: LP_BRAND.rose,   title: 'Listen & repeat',               body: 'Native-speaker audio for every sentence. Hear the rhythm, mimic the accent, train your ear and tongue together.',                     emoji: '🎧' },
    { tag: '04', bg: LP_BRAND.mint,   title: 'Speed in sentence creation',    body: 'Repeated structure practice means you stop translating in your head and just speak.',                                                   emoji: '💬' },
    { tag: '05', bg: LP_BRAND.orange, title: 'Long-term memory retention',    body: 'Spaced repetition keeps dormant languages alive. Pick up Italian after a year off — it\'s still there.',                               emoji: '🎯' },
    { tag: '06', bg: LP_BRAND.cream,  title: 'Intelligent progress tracking', body: 'The system remembers what you struggled with last week and quietly brings it back.',                                                    emoji: '📊' },
  ];
  return (
    <section id="features" style={{
      background: LP_BRAND.ink, padding: isMobile ? '80px 20px 100px' : '120px 32px 140px',
      borderTop: `3px solid ${LP_BRAND.ink}`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 48 : 80 }}>
          <Pill bg={LP_BRAND.orange} color={LP_BRAND.cream} size={14}>Why it works</Pill>
          <h2 style={{
            fontFamily: LP_DISPLAY, fontWeight: 900,
            fontSize: isMobile ? '40px' : 'clamp(40px, 5vw, 76px)',
            color: LP_BRAND.cream, lineHeight: 0.95,
            letterSpacing: -2.5, margin: '20px 0 0',
          }}>
            Built for{' '}
            <span style={{
              background: LP_BRAND.cyan, color: LP_BRAND.ink,
              padding: '0 16px', borderRadius: 14,
              display: 'inline-block', transform: 'rotate(-1.5deg)',
            }}>real speakers</span>,<br/>not lesson tourists.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 24 }}>
          {items.map((it, i) => (
            <HardCard key={i} bg={it.bg} radius={28} pad="32px 28px" shadow={8}
              style={{ minHeight: 280, position: 'relative' }}>
              <div style={{
                fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 13,
                color: 'rgba(14,20,40,0.5)', letterSpacing: 2, marginBottom: 10,
              }}>{it.tag}</div>
              <div style={{ fontSize: 44, lineHeight: 1, marginBottom: 16 }}>{it.emoji}</div>
              <div style={{
                fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 24,
                color: LP_BRAND.ink, lineHeight: 1.1, letterSpacing: -0.6,
              }}>{it.title}</div>
              <div style={{
                fontFamily: LP_DISPLAY, fontWeight: 500, fontSize: 15,
                color: LP_BRAND.inkSoft, lineHeight: 1.45, marginTop: 12,
              }}>{it.body}</div>
            </HardCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// How it works
// ─────────────────────────────────────────────────────────────

function LPHow() {
  const { isMobile, isTablet } = useBreakpoint();
  const steps = [
    { n: '01', emoji: '🎯', bg: LP_BRAND.cyan, title: 'Pick languages', body: 'Choose your source, target & level. No fixed base — go from any language to any.' },
    { n: '02', emoji: '🃏', bg: LP_BRAND.rose, title: 'Flip the cards', body: 'Real sentences, not isolated words. Mark what you knew. Skip what you didn\'t.' },
    { n: '03', emoji: '📈', bg: LP_BRAND.mint, title: 'Stay fluent',    body: 'Spaced repetition surfaces what you\'re forgetting before you forget it.' },
  ];
  return (
    <section id="how-it-works" style={{
      background: LP_BRAND.gold, padding: isMobile ? '80px 20px' : '120px 32px',
      borderTop: `4px solid ${LP_BRAND.ink}`, borderBottom: `4px solid ${LP_BRAND.ink}`,
      position: 'relative', overflow: 'hidden',
    }}>
      {!isMobile && <Bubble x="-2%" y={60} r={140} color={LP_BRAND.orange} opacity={0.18}/>}
      {!isMobile && <Bubble x="92%" y={420} r={120} color={LP_BRAND.magenta} opacity={0.15}/>}

      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 56 : 70 }}>
          <Pill bg={LP_BRAND.ink} color={LP_BRAND.cream} size={14}>How it works</Pill>
          <h2 style={{
            fontFamily: LP_DISPLAY, fontWeight: 900,
            fontSize: isMobile ? '40px' : 'clamp(40px, 5vw, 72px)',
            color: LP_BRAND.ink, lineHeight: 0.95,
            letterSpacing: -2, margin: '20px 0 0',
          }}>
            Three steps. Five minutes.
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile || isTablet ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 36 : 32,
        }}>
          {steps.map((s, i) => (
            <HardCard key={i} bg={LP_BRAND.cream} radius={32} pad="40px 32px" shadow={10}
              rotate={isMobile ? 0 : (i === 1 ? 0 : (i === 0 ? -1.5 : 1.5))}
              style={{ position: 'relative', minHeight: 280 }}>
              <div style={{
                position: 'absolute', top: -20, left: 24,
                background: s.bg, border: `4px solid ${LP_BRAND.ink}`,
                borderRadius: 16, padding: '8px 16px',
                fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 22,
                color: LP_BRAND.ink, letterSpacing: 1, boxShadow: `0 4px 0 ${LP_BRAND.ink}`,
              }}>STEP {s.n}</div>
              <div style={{ fontSize: 64, lineHeight: 1, marginTop: 14, marginBottom: 18 }}>{s.emoji}</div>
              <div style={{
                fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 30,
                color: LP_BRAND.ink, lineHeight: 1, letterSpacing: -0.8,
              }}>{s.title}</div>
              <div style={{
                fontFamily: LP_DISPLAY, fontWeight: 500, fontSize: 17,
                color: LP_BRAND.inkSoft, lineHeight: 1.45, marginTop: 12,
              }}>{s.body}</div>
            </HardCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// vs Others
// ─────────────────────────────────────────────────────────────

function LPCompare() {
  const { isMobile, isTablet } = useBreakpoint();
  const others = ['20-minute daily lessons', 'Gamified guilt trips', 'Birds yelling at you', 'Same 50 words forever'];
  const ours   = ['Flip a card. Done.', 'Spaced repetition, quietly', 'No streak shame, no nags', '6,000+ real sentences'];
  return (
    <section style={{
      background: LP_BRAND.cream,
      padding: isMobile ? '80px 20px' : '120px 32px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1140, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 60 }}>
          <Pill bg={LP_BRAND.cyan} color={LP_BRAND.ink} size={14}
            style={{ border: `3px solid ${LP_BRAND.ink}` }}>Why flashcards</Pill>
          <h2 style={{
            fontFamily: LP_DISPLAY, fontWeight: 900,
            fontSize: isMobile ? '40px' : 'clamp(40px, 5vw, 72px)',
            color: LP_BRAND.ink, lineHeight: 0.95,
            letterSpacing: -2, margin: '20px 0 0',
          }}>
            Less app.{' '}<span style={{
              background: LP_BRAND.magenta, color: LP_BRAND.cream,
              padding: '0 16px', borderRadius: 14,
              display: 'inline-block', transform: 'rotate(-1.5deg)',
            }}>More language.</span>
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile || isTablet ? '1fr' : '1fr 1fr',
          gap: 24,
        }}>
          <HardCard bg={LP_BRAND.creamD} radius={32} pad="36px 32px" shadow={8}>
            <div style={{
              fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 17,
              color: LP_BRAND.muted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 22,
            }}>Other apps</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {others.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: 18,
                  color: LP_BRAND.inkSoft,
                }}>
                  <span style={{
                    width: 30, height: 30, borderRadius: '50%',
                    background: LP_BRAND.rose, border: `2px solid ${LP_BRAND.ink}`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 900, color: LP_BRAND.ink, flexShrink: 0,
                  }}>✕</span>
                  <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(14,20,40,0.3)' }}>{t}</span>
                </li>
              ))}
            </ul>
          </HardCard>
          <HardCard bg={LP_BRAND.ink} radius={32} pad="36px 32px" shadow={8}>
            <div style={{
              fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 17,
              color: LP_BRAND.orange, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 22,
            }}>LingaFlip</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {ours.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  fontFamily: LP_DISPLAY, fontWeight: 700, fontSize: 18,
                  color: LP_BRAND.cream,
                }}>
                  <span style={{
                    width: 30, height: 30, borderRadius: '50%',
                    background: LP_BRAND.mint,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 900, color: LP_BRAND.ink, flexShrink: 0,
                  }}>✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </HardCard>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Pricing
// ─────────────────────────────────────────────────────────────

function LPPricing() {
  const { isMobile, isTablet } = useBreakpoint();
  const plans = [
    {
      name: 'Basic', price: '€0', period: 'forever', popular: false,
      desc: 'Get a feel for the system. Forever free.',
      bg: LP_BRAND.cream, accent: LP_BRAND.ink,
      features: ['Up to 3 languages', 'Limited daily session', '1 deck download', 'Ad-supported'],
      cta: 'Start free',
    },
    {
      name: 'Pro Yearly', price: '€24.99', period: 'per year', popular: true,
      desc: 'Best value. Save 30% vs monthly.', sub: '€2.08 / month',
      bg: LP_BRAND.ink, accent: LP_BRAND.orange,
      features: ['Unlimited languages', 'Unlimited daily sessions', 'Unlimited deck downloads', 'Ad-free'],
      cta: 'Get yearly',
    },
    {
      name: 'Pro Monthly', price: '€2.99', period: 'per month', popular: false,
      desc: 'Simple monthly billing. Cancel anytime.',
      bg: LP_BRAND.cream, accent: LP_BRAND.ink,
      features: ['Unlimited languages', 'Unlimited daily sessions', 'Unlimited deck downloads',  'Ad-free'],
      cta: 'Choose monthly',
    },
  ];

  const cols = isMobile || isTablet ? '1fr' : 'repeat(3, 1fr)';

  return (
    <section id="pricing" style={{
      background: LP_BRAND.cream,
      padding: isMobile ? '80px 20px 100px' : '120px 32px 140px',
      position: 'relative',
      borderTop: `3px solid ${LP_BRAND.ink}`,
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 48 : 70 }}>
          <Pill bg={LP_BRAND.mint} color={LP_BRAND.ink} size={14}
            style={{ border: `3px solid ${LP_BRAND.ink}` }}>Pricing</Pill>
          <h2 style={{
            fontFamily: LP_DISPLAY, fontWeight: 900,
            fontSize: isMobile ? '38px' : 'clamp(40px, 5vw, 72px)',
            color: LP_BRAND.ink, lineHeight: 0.95,
            letterSpacing: -2, margin: '20px 0 12px',
          }}>
            Free forever.{' '}<span style={{
              background: LP_BRAND.gold, padding: '0 14px', borderRadius: 12,
              display: 'inline-block', transform: 'rotate(-1.5deg)',
              border: `3px solid ${LP_BRAND.ink}`,
            }}>Pro if you want it.</span>
          </h2>
          <div style={{
            fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: isMobile ? 17 : 19,
            color: LP_BRAND.inkSoft, marginTop: 16,
          }}>🎁 7-day free trial on every plan.</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 24, alignItems: 'stretch' }}>
          {plans.map((p, i) => (
            <div key={i} style={{ position: 'relative', display: 'flex' }}>
              {p.popular && (
                <Sticker bg={LP_BRAND.orange} color={LP_BRAND.cream} size={15} rotate={-4}
                  style={{
                    position: 'absolute', top: -16, left: '50%',
                    transform: 'translateX(-50%) rotate(-4deg)', zIndex: 5,
                    border: `3px solid ${LP_BRAND.ink}`,
                    whiteSpace: 'nowrap',
                  }}>
                  ⚡ Most popular
                </Sticker>
              )}
              <HardCard
                bg={p.bg} radius={32} pad="36px 28px 32px" shadow={p.popular ? 12 : 8}
                style={{
                  flex: 1, display: 'flex', flexDirection: 'column',
                  transform: (p.popular && !isMobile && !isTablet) ? 'translateY(-12px)' : 'none',
                }}>
                <div style={{
                  fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 22,
                  color: p.popular ? LP_BRAND.cream : LP_BRAND.ink,
                  letterSpacing: -0.5,
                }}>{p.name}</div>
                <div style={{
                  fontFamily: LP_DISPLAY, fontWeight: 500, fontSize: 15,
                  color: p.popular ? 'rgba(247,241,230,0.65)' : LP_BRAND.inkSoft,
                  marginTop: 6, lineHeight: 1.4,
                }}>{p.desc}</div>

                <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <div style={{
                    fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 56,
                    color: p.popular ? LP_BRAND.cream : LP_BRAND.ink,
                    letterSpacing: -2, lineHeight: 1,
                  }}>{p.price}</div>
                  <div style={{
                    fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: 14,
                    color: p.popular ? 'rgba(247,241,230,0.6)' : LP_BRAND.muted,
                  }}>{p.period}</div>
                </div>
                {p.sub && (
                  <div style={{
                    fontFamily: LP_DISPLAY, fontWeight: 700, fontSize: 13,
                    color: p.accent, marginTop: 4, letterSpacing: 0.5,
                  }}>{p.sub}</div>
                )}

                <ul style={{
                  listStyle: 'none', padding: 0, margin: '24px 0 0',
                  display: 'flex', flexDirection: 'column', gap: 11, flex: 1,
                }}>
                  {p.features.map((f, j) => (
                    <li key={j} style={{
                      display: 'flex', gap: 12, alignItems: 'flex-start',
                      fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: 15,
                      color: p.popular ? 'rgba(247,241,230,0.85)' : LP_BRAND.inkSoft,
                    }}>
                      <span style={{
                        width: 22, height: 22, borderRadius: '50%',
                        background: LP_BRAND.mint, color: LP_BRAND.ink,
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 13, fontWeight: 900, flexShrink: 0, marginTop: 1,
                      }}>✓</span>
                      <span style={{ lineHeight: 1.35 }}>{f}</span>
                    </li>
                  ))}
                </ul>

                <a href="#" style={{
                  marginTop: 24, display: 'block', textAlign: 'center',
                  background: p.popular ? LP_BRAND.orange : LP_BRAND.ink,
                  color: LP_BRAND.cream,
                  padding: '15px 20px', borderRadius: 14,
                  fontFamily: LP_DISPLAY, fontWeight: 800, fontSize: 17,
                  textDecoration: 'none', letterSpacing: 0.5,
                  boxShadow: p.popular ? `0 5px 0 ${LP_BRAND.cream}` : `0 5px 0 ${LP_BRAND.orange}`,
                }}>{p.cta} →</a>
              </HardCard>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Final CTA
// ─────────────────────────────────────────────────────────────

function LPCTA() {
  const { isMobile } = useBreakpoint();
  return (
    <section id="download" style={{
      background: LP_BRAND.ink,
      padding: isMobile ? '80px 20px' : '120px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', width: 700, height: 700, borderRadius: '50%',
        background: `radial-gradient(circle, ${LP_BRAND.magenta} 0%, rgba(225,58,122,0) 70%)`,
        top: -180, left: -180, filter: 'blur(20px)', opacity: 0.5,
      }}/>
      <div style={{
        position: 'absolute', width: 800, height: 800, borderRadius: '50%',
        background: `radial-gradient(circle, ${LP_BRAND.cyan} 0%, rgba(60,200,232,0) 70%)`,
        bottom: -260, right: -260, filter: 'blur(20px)', opacity: 0.45,
      }}/>

      <div style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <img src="assets/app-icon.png" width={isMobile ? 96 : 120} height={isMobile ? 96 : 120} alt="LingaFlip"
          style={{ display: 'block', margin: '0 auto', borderRadius: 24, border: `4px solid ${LP_BRAND.cream}` }}/>

        <h2 style={{
          fontFamily: LP_DISPLAY, fontWeight: 900,
          fontSize: isMobile ? '54px' : 'clamp(48px, 6vw, 96px)',
          color: LP_BRAND.cream, lineHeight: 0.95,
          letterSpacing: -3, margin: '32px 0 0',
        }}>
          Flip. Learn.{' '}<span style={{
            background: LP_BRAND.orange, color: LP_BRAND.cream,
            padding: '0 22px', borderRadius: 18,
            display: 'inline-block', transform: 'rotate(-1.5deg)',
          }}>Speak.</span>
        </h2>
        <div style={{
          fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: isMobile ? 18 : 22,
          color: 'rgba(247,241,230,0.7)', marginTop: 20,
        }}>Free on iOS & Android.</div>

        <div style={{
          display: 'flex', gap: 16, justifyContent: 'center', marginTop: 40,
          flexWrap: 'wrap',
        }}>
          <a href="https://apps.apple.com/tr/app/lingaflip-language-flashcard/id6756842037" style={{
            display: 'flex', alignItems: 'center', gap: 14,
            background: LP_BRAND.cream, color: LP_BRAND.ink,
            padding: isMobile ? '16px 24px' : '20px 32px', borderRadius: 20,
            textDecoration: 'none',
            boxShadow: `0 6px 0 ${LP_BRAND.orange}`,
          }}>
            <svg width={isMobile ? 28 : 32} height={isMobile ? 28 : 32} viewBox="0 0 24 24" fill="currentColor">
              <path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"/>
            </svg>
            <div style={{ textAlign: 'left', lineHeight: 1.1 }}>
              <div style={{ fontSize: 11, opacity: 0.65, fontFamily: LP_DISPLAY, fontWeight: 600, letterSpacing: 1.5 }}>DOWNLOAD ON</div>
              <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 900, fontFamily: LP_DISPLAY }}>App Store</div>
            </div>
          </a>
          <a href="#" style={{
            display: 'flex', alignItems: 'center', gap: 14,
            background: LP_BRAND.cream, color: LP_BRAND.ink,
            padding: isMobile ? '16px 24px' : '20px 32px', borderRadius: 20,
            textDecoration: 'none',
            opacity: 0.45,
            pointerEvents: 'none',
          }}>
            <svg width={isMobile ? 28 : 32} height={isMobile ? 28 : 32} viewBox="0 0 24 24" fill="currentColor">
              <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.61 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
            </svg>
            <div style={{ textAlign: 'left', lineHeight: 1.1 }}>
              <div style={{ fontSize: 11, opacity: 0.65, fontFamily: LP_DISPLAY, fontWeight: 600, letterSpacing: 1.5 }}>GET IT ON</div>
              <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 900, fontFamily: LP_DISPLAY }}>Google Play</div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────

function LPFooter() {
  const { isMobile } = useBreakpoint();
  return (
    <footer style={{
      background: LP_BRAND.ink, color: LP_BRAND.cream,
      padding: isMobile ? '28px 20px' : '32px',
      borderTop: `3px solid ${LP_BRAND.orange}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        alignItems: isMobile ? 'flex-start' : 'center',
        justifyContent: 'space-between',
        gap: isMobile ? 20 : 24,
        flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/app-icon.png" width={36} height={36} alt="LingaFlip"
            style={{ borderRadius: 8 }}/>
          <div style={{ fontFamily: LP_DISPLAY, fontWeight: 900, fontSize: 22, letterSpacing: -0.5 }}>LingaFlip</div>
        </div>

        <div style={{ display: 'flex', gap: 24, fontFamily: LP_DISPLAY, fontWeight: 600, fontSize: 15, flexWrap: 'wrap' }}>
          <a href="mailto:support@lingaflip.com" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Contact</a>
          <a href="terms.html" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Terms</a>
          <a href="privacy.html" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Privacy</a>
        </div>

        <div style={{ display: 'flex', gap: 12 }}>
          <a href="https://www.youtube.com/@LingaFlip" target="_blank" rel="noopener noreferrer" style={{
            width: 38, height: 38, borderRadius: 10,
            background: 'rgba(247,241,230,0.08)',
            border: '2px solid rgba(247,241,230,0.2)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: LP_BRAND.cream, textDecoration: 'none',
          }}>
            <svg width={18} height={18} viewBox="0 0 24 24" fill="currentColor">
              <path d="M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"/>
            </svg>
          </a>
          <a href="https://www.instagram.com/lingaflip/" target="_blank" rel="noopener noreferrer" style={{
            width: 38, height: 38, borderRadius: 10,
            background: 'rgba(247,241,230,0.08)',
            border: '2px solid rgba(247,241,230,0.2)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: LP_BRAND.cream, textDecoration: 'none',
          }}>
            <svg width={18} height={18} viewBox="0 0 24 24" fill="currentColor">
              <path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/>
            </svg>
          </a>
        </div>

        <div style={{
          fontFamily: LP_DISPLAY, fontWeight: 500, fontSize: 14,
          color: 'rgba(247,241,230,0.45)',
        }}>© {new Date().getFullYear()} LingaFlip</div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// Page
// ─────────────────────────────────────────────────────────────

function LandingPage() {
  return (
    <div style={{
      background: LP_BRAND.cream,
      fontFamily: LP_DISPLAY,
      color: LP_BRAND.ink,
      minHeight: '100vh',
    }}>
      <LPHeader/>
      <LPHero/>
      <LPMarquee/>
      <LPDemo/>
      <LPFeatures/>
      <LPHow/>
      <LPCompare/>
      <LPPricing/>
      <LPCTA/>
      <LPFooter/>
    </div>
  );
}

Object.assign(window, { LandingPage });
ReactDOM.createRoot(document.getElementById('root')).render(<LandingPage/>);