// variant-fiesta.jsx — Variant C: FILIPINO FIESTA
// Banderitas, jeepney chrome, fiesta tablecloth, backyard party, family karaoke.

const FT = {
  // Philippine flag palette + warm fiesta cream
  cream: '#fff3c8',
  banana: '#ffe27a',
  sunYellow: '#fcd116',     // PH flag yellow
  flagRed: '#ce1126',       // PH flag red
  flagBlue: '#0038a8',      // PH flag blue
  ink: '#1a0d05',           // warm near-black
  inkDim: 'rgba(26,13,5,0.65)',
  white: '#fffaf0',
  pink: '#ff2d92',          // brand pink stays
  hair: 'rgba(26,13,5,0.18)',
  parol: '#ff6f3c',         // parol orange
};

const ftDisplay = "'Big Shoulders Display', system-ui, sans-serif";
const ftMono = "'JetBrains Mono', ui-monospace, monospace";
const ftSerif = "'Instrument Serif', serif";

// ── BANDERITAS — triangular bunting flags ───────────────────────────
function Banderitas({ count = 22, swag = 28, height = 56 }) {
  // Repeating cycle of flag colors
  const palette = [FT.flagRed, FT.sunYellow, FT.flagBlue, FT.white, FT.parol, FT.pink];
  // Each flag = triangle; together they sway in a shallow arc via the SVG path
  return (
    <svg viewBox={`0 0 ${count * 50} ${height + swag}`}
         preserveAspectRatio="none"
         width="100%" height={height + swag}
         style={{ display: 'block' }}>
      {/* twine — gentle arc */}
      <path d={`M 0 ${swag} Q ${count * 25} ${swag * 2} ${count * 50} ${swag}`}
            stroke={FT.ink} strokeWidth="2" fill="none" opacity="0.7" />
      {Array.from({ length: count }).map((_, i) => {
        const x = i * 50 + 25;
        const t = i / (count - 1);
        // approximate quadratic curve y-position
        const y = swag + Math.sin(t * Math.PI) * swag;
        const color = palette[i % palette.length];
        const rot = (Math.sin(t * Math.PI) - 0.5) * 14;
        return (
          <g key={i} transform={`translate(${x} ${y}) rotate(${rot})`}>
            {/* string knot */}
            <circle cx="0" cy="0" r="2" fill={FT.ink} />
            <polygon points={`-18,0 18,0 0,${height}`} fill={color} stroke={FT.ink} strokeWidth="1.5" />
          </g>
        );
      })}
    </svg>
  );
}

// Tablecloth checker pattern — red/white gingham
function TableclothBG({ color1 = FT.flagRed, color2 = FT.white, size = 40, opacity = 1 }) {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0,
      backgroundColor: color2,
      backgroundImage: `
        linear-gradient(45deg, ${color1} 25%, transparent 25%),
        linear-gradient(-45deg, ${color1} 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, ${color1} 75%),
        linear-gradient(-45deg, transparent 75%, ${color1} 75%)
      `,
      backgroundSize: `${size}px ${size}px`,
      backgroundPosition: `0 0, 0 ${size/2}px, ${size/2}px -${size/2}px, -${size/2}px 0px`,
      opacity,
    }} />
  );
}

// Philippine sun (8 rays around a circle) — geometric, OK per spec
function PHSun({ size = 80, color = FT.sunYellow, spin = true }) {
  const rays = Array.from({ length: 8 }).map((_, i) => {
    const a = (i * 360 / 8) * Math.PI / 180;
    const inner = size * 0.18;
    const outer = size * 0.48;
    const w = size * 0.06;
    const cx = size / 2, cy = size / 2;
    const x1 = cx + Math.cos(a) * inner, y1 = cy + Math.sin(a) * inner;
    const x2 = cx + Math.cos(a) * outer, y2 = cy + Math.sin(a) * outer;
    return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth={w} strokeLinecap="round" />;
  });
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
         style={spin ? { animation: 'badge-spin 24s linear infinite', transformOrigin: 'center' } : null}>
      {rays}
      <circle cx={size/2} cy={size/2} r={size * 0.14} fill={color} />
    </svg>
  );
}

// Sticker / sign
function FTSticker({ children, color = FT.flagRed, rot = -3, fg = FT.white }) {
  return (
    <span style={{
      display: 'inline-block', background: color, color: fg,
      fontFamily: ftDisplay, fontWeight: 800, fontStretch: '125%', fontSize: 16,
      letterSpacing: '0.05em', textTransform: 'uppercase',
      padding: '8px 14px', borderRadius: 4, border: `2px solid ${FT.ink}`,
      transform: `rotate(${rot}deg)`,
      boxShadow: `3px 3px 0 0 ${FT.ink}`,
    }}>{children}</span>
  );
}

// Chunky pill button
function FTButton({ children, href, bg = FT.flagRed, fg = FT.white, big = false }) {
  return (
    <a href={href} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%',
      fontSize: big ? 28 : 18, letterSpacing: '0.01em', textTransform: 'uppercase',
      color: fg, background: bg,
      padding: big ? '20px 36px' : '12px 24px', textDecoration: 'none',
      borderRadius: big ? 12 : 8, border: `3px solid ${FT.ink}`,
      boxShadow: `${big ? 8 : 5}px ${big ? 8 : 5}px 0 0 ${FT.ink}`,
    }}>{children}</a>
  );
}

// Photo placeholder — striped, with caption (per spec)
function PhotoPlaceholder({ label, height = 220, color = FT.flagRed, bg = FT.banana }) {
  return (
    <div style={{
      position: 'relative', height, background: bg,
      border: `3px solid ${FT.ink}`, borderRadius: 8,
      overflow: 'hidden', display: 'grid', placeItems: 'center',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(45deg, ${color} 0 14px, transparent 14px 28px)`,
        opacity: 0.25,
      }} />
      <div style={{
        position: 'relative', fontFamily: ftMono, fontWeight: 700, fontSize: 12,
        letterSpacing: '0.25em', textTransform: 'uppercase', color: FT.ink,
        background: bg, padding: '8px 14px', border: `2px dashed ${FT.ink}`, borderRadius: 4,
      }}>
        ▸ PHOTO: {label}
      </div>
    </div>
  );
}

// ── NAV ─────────────────────────────────────────────────────────────
function FTNav() {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 20, background: FT.cream, borderBottom: `3px solid ${FT.ink}` }}>
      <div style={{ height: 40, background: FT.flagBlue, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, marginTop: -10 }}>
          <Banderitas count={28} swag={18} height={32} />
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 40px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <PHSun size={36} color={FT.sunYellow} />
          <span style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 26, letterSpacing: '-0.02em' }}>
            kantahan<span style={{ color: FT.flagRed }}>.app</span>
          </span>
        </div>
        <nav style={{ display: 'flex', gap: 28, fontFamily: ftDisplay, fontWeight: 700, fontStretch: '125%', fontSize: 18 }}>
          <a href="#how"      style={{ color: FT.ink, textDecoration: 'none' }}>How it works</a>
          <a href="#features" style={{ color: FT.ink, textDecoration: 'none' }}>Features</a>
          <a href="#pricing"  style={{ color: FT.ink, textDecoration: 'none' }}>Pricing</a>
          <a href="#kantahan" style={{ color: FT.ink, textDecoration: 'none' }}>The fiesta</a>
          <a href="#faq"      style={{ color: FT.ink, textDecoration: 'none' }}>FAQ</a>
        </nav>
        <FTButton href={SITE.display} bg={FT.flagRed}>▶ Launch</FTButton>
      </div>
    </div>
  );
}

// ── HERO ────────────────────────────────────────────────────────────
function FTHero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: FT.cream, paddingBottom: 60 }}>
      {/* banderitas across top */}
      <div style={{ position: 'relative', height: 100, marginTop: -10 }}>
        <Banderitas count={22} swag={28} height={62} />
      </div>

      {/* PH sun spinning behind */}
      <div aria-hidden style={{ position: 'absolute', top: 220, right: -100, opacity: 0.18 }}>
        <PHSun size={520} color={FT.flagRed} />
      </div>
      <div aria-hidden style={{ position: 'absolute', top: 660, left: -120, opacity: 0.15 }}>
        <PHSun size={420} color={FT.flagBlue} />
      </div>

      <div style={{ position: 'relative', textAlign: 'center', padding: '20px 40px 0', maxWidth: 1100, margin: '0 auto' }}>
        <FTSticker color={FT.sunYellow} fg={FT.ink} rot={-4}>♪  KANTAHAN PARA SA LAHAT  ♪</FTSticker>

        <h1 style={{
          fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%',
          fontSize: 168, lineHeight: 0.85, letterSpacing: '-0.04em',
          margin: '24px 0 8px', color: FT.ink, textWrap: 'balance',
        }}>
          Walang <span style={{
            color: FT.flagRed, fontStyle: 'italic',
            textShadow: `4px 4px 0 ${FT.sunYellow}, 8px 8px 0 ${FT.ink}`,
          }}>fiesta</span><br />
          kung walang <span style={{ background: FT.flagRed, color: FT.sunYellow, padding: '0 14px', borderRadius: 10, display: 'inline-block' }}>kantahan.</span>
        </h1>

        <p style={{
          fontFamily: ftSerif, fontStyle: 'italic', fontSize: 28, lineHeight: 1.35,
          color: FT.ink, margin: '22px auto 32px', maxWidth: 760, textWrap: 'pretty',
        }}>
          Browser-based karaoke built for backyards, basement halls, and birthday tents.
          Plug in a TV, hand out the QR — and let your titos and titas <em>cook.</em>
        </p>

        <div style={{ display: 'flex', gap: 18, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 56 }}>
          <FTButton href={SITE.display} bg={FT.flagRed} fg={FT.white} big>▶ Start a fiesta — free</FTButton>
          <FTButton href="#how" bg={FT.sunYellow} fg={FT.ink} big>See it in action</FTButton>
        </div>

        {/* Hero showcase — TV mounted under banderitas, on a tablecloth */}
        <div style={{ position: 'relative', maxWidth: 980, margin: '0 auto' }}>
          {/* tablecloth strip behind */}
          <div style={{ position: 'absolute', inset: '-22px -40px 60px', borderRadius: 14, overflow: 'hidden', border: `3px solid ${FT.ink}` }}>
            <TableclothBG color1={FT.flagRed} color2={FT.white} size={48} />
          </div>

          {/* the TV */}
          <div style={{
            position: 'relative',
            background: FT.ink, borderRadius: 16, padding: 18,
            border: `4px solid ${FT.ink}`, boxShadow: `12px 12px 0 0 ${FT.flagBlue}`,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 10px 14px' }}>
              <div style={{ display: 'flex', gap: 7 }}>
                <span style={{ width: 12, height: 12, borderRadius: '50%', background: FT.flagRed }} />
                <span style={{ width: 12, height: 12, borderRadius: '50%', background: FT.sunYellow }} />
                <span style={{ width: 12, height: 12, borderRadius: '50%', background: FT.flagBlue }} />
              </div>
              <span style={{ fontFamily: ftMono, fontSize: 11, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.2em' }}>{SITE.displayPath}</span>
              <span style={{ fontFamily: ftMono, fontSize: 11, color: '#4ade80', letterSpacing: '0.2em' }}>● HANDA NA</span>
            </div>
            <div style={{ background: '#0a0612', borderRadius: 10, padding: '40px 24px', overflow: 'hidden' }}>
              <AnimatedLogo width={520} showMirror={true} />
              <div style={{ marginTop: 18, fontFamily: ftMono, fontSize: 13, color: '#f5ecff', letterSpacing: '0.25em', textAlign: 'center', opacity: 0.7 }}>
                ▸ I-SCAN ANG QR  ▸  PUMILI NG KANTA  ▸  IBIGAY ANG MIC
              </div>
            </div>
          </div>

          {/* Floating stickers on the TV scene */}
          <div style={{ position: 'absolute', top: -20, left: -40 }}>
            <FTSticker color={FT.sunYellow} fg={FT.ink} rot={-10}>✨ HANDA NA!</FTSticker>
          </div>
          <div style={{ position: 'absolute', bottom: 40, right: -50 }}>
            <FTSticker color={FT.flagBlue} fg={FT.sunYellow} rot={8}>NO INSTALL</FTSticker>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── MARQUEE ─────────────────────────────────────────────────────────
function FTMarquee({ text = 'KANTAHAN ★ FIESTA ★ FAMILY ★ SARAP ★ LECHON ★ MABUHAY ★ ', bg = FT.flagRed, color = FT.sunYellow }) {
  const repeated = (text + text + text + text);
  return (
    <div style={{
      borderTop: `3px solid ${FT.ink}`, borderBottom: `3px solid ${FT.ink}`,
      background: bg, color, overflow: 'hidden', padding: '16px 0',
    }}>
      <div style={{
        whiteSpace: 'nowrap', display: 'inline-block',
        fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 52, letterSpacing: '-0.02em',
        animation: 'marquee 32s linear infinite',
      }}>
        {repeated}
      </div>
    </div>
  );
}

// ── HOW IT WORKS ────────────────────────────────────────────────────
function FTHow() {
  const steps = [
    { n: 1, t: 'I-plug ang TV.', body: `Open ${SITE.displayPath} on a laptop. Point a TV at it. Tapos.`, mock: MockDisplay, color: FT.sunYellow, ink: FT.ink },
    { n: 2, t: 'Pasa-pasa ang QR.', body: 'I-scan ng pamilya. Maghahanap sila ng kanta sa kanilang phone. Walang install — promise!', mock: MockRequest, color: FT.flagRed, ink: FT.white },
    { n: 3, t: 'Mic. Niyog. Tawa.', body: 'Singer rotation para fair-share. "Get a drink" banner. Babagsak ka sa kantahan, promise.', mock: MockDJ, color: FT.flagBlue, ink: FT.sunYellow },
  ];
  return (
    <section id="how" style={{ padding: '80px 40px', background: FT.cream, position: 'relative' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <FTSticker color={FT.flagBlue} fg={FT.sunYellow} rot={-3}>PAANO ITO GUMAGANA</FTSticker>
        <h2 style={{
          fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 96, lineHeight: 0.88,
          margin: '14px 0 8px', letterSpacing: '-0.03em', color: FT.ink,
        }}>
          Tatlong hakbang. <span style={{ color: FT.flagRed, fontStyle: 'italic' }}>Walang stress.</span>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            background: s.color, color: s.ink,
            border: `4px solid ${FT.ink}`, borderRadius: 18, padding: 26,
            boxShadow: `8px 8px 0 0 ${FT.ink}`,
            transform: `rotate(${(i - 1) * 1}deg)`,
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 150, lineHeight: 0.8,
              letterSpacing: '-0.04em', color: 'currentColor', opacity: 0.18,
            }}>{s.n}</div>
            <h3 style={{
              fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 50, lineHeight: 0.95,
              margin: '-34px 0 14px', letterSpacing: '-0.02em',
            }}>{s.t}</h3>
            <p style={{ fontFamily: ftDisplay, fontWeight: 600, fontSize: 19, lineHeight: 1.4, margin: '0 0 18px' }}>{s.body}</p>
            <div style={{ borderRadius: 10, overflow: 'hidden', background: '#0a0612', border: `3px solid ${FT.ink}`, height: 200, marginTop: 'auto' }}>
              <s.mock />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── FEATURES ON A TABLECLOTH ────────────────────────────────────────
function FTFeatures() {
  const cardColors = [
    { bg: FT.white, ink: FT.ink, accent: FT.flagRed },
    { bg: FT.flagRed, ink: FT.white, accent: FT.sunYellow },
    { bg: FT.sunYellow, ink: FT.ink, accent: FT.flagRed },
    { bg: FT.flagBlue, ink: FT.sunYellow, accent: FT.white },
    { bg: FT.parol, ink: FT.ink, accent: FT.flagBlue },
    { bg: FT.white, ink: FT.ink, accent: FT.flagBlue },
  ];
  return (
    <section id="features" style={{ position: 'relative', padding: '80px 40px', overflow: 'hidden' }}>
      <TableclothBG color1={FT.flagRed} color2={FT.white} size={56} opacity={0.55} />
      {/* darken tablecloth slightly with cream wash */}
      <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'rgba(255,243,200,0.35)' }} />

      <div style={{ position: 'relative', textAlign: 'center', marginBottom: 48 }}>
        <FTSticker color={FT.flagRed} fg={FT.white} rot={3}>♪  LAHAT NG KAILANGAN MO  ♪</FTSticker>
        <h2 style={{
          fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 110, lineHeight: 0.88,
          margin: '14px 0 8px', letterSpacing: '-0.03em', color: FT.ink,
        }}>
          Spread on the <span style={{ color: FT.flagRed }}>table.</span>
        </h2>
        <p style={{ fontFamily: ftSerif, fontStyle: 'italic', fontSize: 22, color: FT.ink, margin: 0 }}>
          Lahat sa isang tingin — like a pinoy fiesta buffet, but for features.
        </p>
      </div>

      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
        {FEATURES.map((f, i) => {
          const c = cardColors[i % cardColors.length];
          return (
            <div key={i} style={{
              background: c.bg, color: c.ink,
              border: `3px solid ${FT.ink}`, borderRadius: 14, padding: 24,
              boxShadow: `6px 6px 0 0 ${FT.ink}`, minHeight: 240,
              transform: `rotate(${((i % 3) - 1) * 0.6}deg)`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <span style={{
                  fontFamily: ftMono, fontWeight: 700, fontSize: 11, letterSpacing: '0.25em', opacity: 0.85,
                }}>{f.monoTag}</span>
                <span style={{
                  display: 'inline-grid', placeItems: 'center', width: 30, height: 30,
                  background: c.accent, color: c.bg, border: `2px solid ${FT.ink}`,
                  borderRadius: '50%', fontFamily: ftDisplay, fontWeight: 900, fontSize: 14,
                }}>{i + 1}</span>
              </div>
              <h3 style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 44, lineHeight: 0.95, margin: '0 0 6px', letterSpacing: '-0.02em' }}>{f.title}</h3>
              <div style={{ fontFamily: ftSerif, fontStyle: 'italic', fontSize: 18, marginBottom: 12 }}>{f.sub}</div>
              <p style={{ fontFamily: ftDisplay, fontWeight: 600, fontSize: 16, lineHeight: 1.4, margin: 0 }}>{f.body}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ── PRICING ─────────────────────────────────────────────────────────
function FTPricing() {
  return (
    <section id="pricing" style={{
      padding: '80px 40px', background: FT.banana, position: 'relative', overflow: 'hidden',
      borderTop: `3px solid ${FT.ink}`, borderBottom: `3px solid ${FT.ink}`,
    }}>
      {/* PH sun decoration */}
      <div aria-hidden style={{ position: 'absolute', top: 60, right: -120, opacity: 0.2 }}>
        <PHSun size={500} color={FT.flagRed} />
      </div>

      <div style={{ position: 'relative', textAlign: 'center', marginBottom: 48 }}>
        <FTSticker color={FT.flagRed} fg={FT.sunYellow} rot={-3}>PRESYO · PRICING</FTSticker>
        <h2 style={{
          fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 110, lineHeight: 0.88,
          margin: '14px 0 6px', letterSpacing: '-0.03em', color: FT.ink,
        }}>
          Free para sa <span style={{ color: FT.flagRed }}>bahay.</span><br />
          Pro para sa <span style={{ color: FT.flagBlue }}>venue.</span>
        </h2>
      </div>

      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, maxWidth: 1180, margin: '0 auto' }}>
        {[PRICING.free, PRICING.paid].map((tier, idx) => {
          const isPro = idx === 1;
          return (
            <div key={tier.name} style={{
              background: isPro ? FT.flagBlue : FT.white,
              color: isPro ? FT.sunYellow : FT.ink,
              border: `4px solid ${FT.ink}`, borderRadius: 18, padding: 30,
              boxShadow: `10px 10px 0 0 ${isPro ? FT.flagRed : FT.flagBlue}`,
              transform: `rotate(${isPro ? 1 : -1}deg)`,
              position: 'relative',
            }}>
              {isPro && (
                <div style={{ position: 'absolute', top: -24, right: 24, transform: 'rotate(8deg)' }}>
                  <FTSticker color={FT.flagRed} fg={FT.sunYellow} rot={0}>FOR THE VENUE</FTSticker>
                </div>
              )}
              {!isPro && (
                <div style={{ position: 'absolute', top: -24, left: 24, transform: 'rotate(-6deg)' }}>
                  <FTSticker color={FT.sunYellow} fg={FT.ink} rot={0}>★ FOREVER FREE</FTSticker>
                </div>
              )}
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 6 }}>
                <span style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 78, lineHeight: 0.9, letterSpacing: '-0.03em' }}>{tier.name}</span>
                {isPro && <PHSun size={48} color={FT.sunYellow} />}
              </div>
              <div style={{ fontFamily: ftSerif, fontStyle: 'italic', fontSize: 22, margin: '6px 0 18px', color: isPro ? FT.cream : FT.ink, opacity: 0.85 }}>{tier.sub}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
                <span style={{
                  fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 104, lineHeight: 0.85,
                  color: isPro ? FT.sunYellow : FT.flagRed,
                }}>{tier.price}</span>
                {!isPro && <span style={{ fontFamily: ftMono, fontSize: 13 }}>/ habang-buhay</span>}
              </div>
              <p style={{ fontFamily: ftDisplay, fontWeight: 600, fontSize: 18, lineHeight: 1.4, margin: '0 0 22px' }}>{tier.blurb}</p>

              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 26px', display: 'grid', gap: 8 }}>
                {tier.features.map((f, i) => (
                  <li key={i} style={{
                    fontFamily: ftDisplay, fontWeight: 600, fontSize: 17,
                    opacity: f.t ? 1 : 0.45,
                    textDecoration: f.t ? 'none' : 'line-through',
                    display: 'flex', alignItems: 'center', gap: 10,
                  }}>
                    <span style={{
                      display: 'inline-grid', placeItems: 'center', width: 22, height: 22,
                      background: f.t ? FT.flagRed : 'transparent', color: f.t ? FT.sunYellow : 'currentColor',
                      border: `2px solid ${isPro ? FT.sunYellow : FT.ink}`,
                      borderRadius: 5, fontFamily: ftMono, fontWeight: 700, fontSize: 13,
                    }}>{f.t ? '✓' : '×'}</span>
                    {f.label}
                  </li>
                ))}
              </ul>

              <FTButton href={tier.href} bg={isPro ? FT.sunYellow : FT.flagRed} fg={FT.ink} big>
                {tier.cta} →
              </FTButton>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ── KANTAHAN MEANING — backyard fiesta section ──────────────────────
function FTKantahan() {
  return (
    <section id="kantahan" style={{
      padding: '90px 40px', background: FT.flagRed, color: FT.white,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Banderitas at top */}
      <div style={{ position: 'absolute', top: -10, left: 0, right: 0 }}>
        <Banderitas count={20} swag={26} height={50} />
      </div>
      {/* Sun behind */}
      <div aria-hidden style={{ position: 'absolute', top: 120, left: '50%', transform: 'translateX(-50%)', opacity: 0.15 }}>
        <PHSun size={680} color={FT.sunYellow} />
      </div>

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1200, margin: '0 auto', textAlign: 'center', paddingTop: 80 }}>
        <FTSticker color={FT.sunYellow} fg={FT.ink} rot={-5}>ANO BA ANG KANTAHAN?</FTSticker>
        <div style={{
          fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 240, lineHeight: 0.85,
          letterSpacing: '-0.04em', margin: '20px 0 8px', color: FT.sunYellow,
          textShadow: `6px 6px 0 ${FT.flagBlue}, 12px 12px 0 ${FT.ink}`,
        }}>
          kantahán
        </div>
        <div style={{ fontFamily: ftSerif, fontStyle: 'italic', fontSize: 30, marginBottom: 32, color: FT.sunYellow, opacity: 0.9 }}>
          /kan·ta·hán/ &nbsp;·&nbsp; Filipino, noun &amp; verb
        </div>

        <p style={{
          fontFamily: ftSerif, fontStyle: 'italic', fontSize: 40, lineHeight: 1.3,
          margin: '0 auto 40px', maxWidth: 980, textWrap: 'balance', color: FT.white,
        }}>
          "Karaoke isn't a <em>feature</em> in Filipino life — it's <span style={{ background: FT.sunYellow, color: FT.flagRed, padding: '0 12px', borderRadius: 6 }}>furniture</span>.
          The machine sits next to the rice cooker."
        </p>

        {/* Three "tables" — fiesta scenes */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, maxWidth: 1080, margin: '40px auto 0',
          textAlign: 'left',
        }}>
          {[
            { color: FT.sunYellow, ink: FT.ink, h: '🐷 Lechon',  body: 'The lechon comes out at 6pm. The microphone comes out at 6:01pm. The two will not be separated.' },
            { color: FT.flagBlue,  ink: FT.sunYellow, h: 'Birthdays',  body: 'Tito sings before the cake. Tita cries during "My Way." A cousin attempts Bruno Mars and almost gets there.' },
            { color: FT.white,     ink: FT.ink, h: 'Backyards', body: 'No occasion required. Someone says "kantahan tayo" — and that\'s the occasion. The neighbors will know.' },
          ].map((c, i) => (
            <div key={i} style={{
              background: c.color, color: c.ink,
              border: `4px solid ${FT.ink}`, borderRadius: 14, padding: 24,
              boxShadow: `6px 6px 0 0 ${FT.ink}`,
              transform: `rotate(${(i - 1) * 1.2}deg)`,
            }}>
              <div style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 40, lineHeight: 1, marginBottom: 10, letterSpacing: '-0.02em' }}>{c.h}</div>
              <p style={{ fontFamily: ftDisplay, fontWeight: 600, fontSize: 17, lineHeight: 1.45, margin: 0 }}>{c.body}</p>
            </div>
          ))}
        </div>

        {/* The lechon — placeholder, since real lechon photo would belong here */}
        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24, alignItems: 'center', textAlign: 'left' }}>
          <PhotoPlaceholder label="lechon · whole roast pig" height={280} color={FT.flagRed} bg={FT.banana} />
          <div>
            <div style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.03em', color: FT.sunYellow, marginBottom: 14 }}>
              The mic is the second guest of honor.
            </div>
            <p style={{ fontFamily: ftSerif, fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: FT.white, margin: 0 }}>
              We named the app after the <em>thing itself</em> — not the machine. Kantahan is what happens between bites:
              the heckles, the duets nobody asked for, the auntie who pretends she can't sing and then sings.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ─────────────────────────────────────────────────────────────
function FTFAQ() {
  const [open, setOpen] = React.useState(0);
  const cardColors = [
    { bg: FT.sunYellow, ink: FT.ink },
    { bg: FT.flagBlue,  ink: FT.sunYellow },
    { bg: FT.white,     ink: FT.ink },
    { bg: FT.flagRed,   ink: FT.sunYellow },
    { bg: FT.parol,     ink: FT.ink },
    { bg: FT.banana,    ink: FT.ink },
  ];
  return (
    <section id="faq" style={{ padding: '80px 40px', background: FT.cream }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <FTSticker color={FT.flagBlue} fg={FT.sunYellow} rot={3}>MAY TANONG KA?</FTSticker>
        <h2 style={{
          fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 96, lineHeight: 0.9,
          margin: '14px 0 0', letterSpacing: '-0.03em', color: FT.ink,
        }}>
          May tanong? <span style={{ color: FT.flagRed, fontStyle: 'italic' }}>May sagot.</span>
        </h2>
      </div>
      <div style={{ maxWidth: 920, margin: '0 auto', display: 'grid', gap: 14 }}>
        {FAQS.map((item, i) => {
          const c = cardColors[i % cardColors.length];
          const isOpen = open === i;
          return (
            <div key={i} style={{
              background: c.bg, color: c.ink,
              border: `3px solid ${FT.ink}`, borderRadius: 14,
              boxShadow: `5px 5px 0 0 ${FT.ink}`, overflow: 'hidden',
              transform: `rotate(${((i % 2) - 0.5) * 0.6}deg)`,
            }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                background: 'transparent', border: 'none', padding: '18px 24px', cursor: 'pointer',
                fontFamily: ftDisplay, fontWeight: 800, fontStretch: '125%', fontSize: 26,
                letterSpacing: '-0.01em', color: c.ink, textAlign: 'left',
              }}>
                <span>{item.q}</span>
                <span style={{ fontFamily: ftDisplay, fontWeight: 900, fontSize: 36, lineHeight: 1 }}>{isOpen ? '−' : '+'}</span>
              </button>
              {isOpen && (
                <div style={{ padding: '0 24px 22px' }}>
                  <p style={{ fontFamily: ftDisplay, fontWeight: 600, fontSize: 18, lineHeight: 1.5, margin: 0 }}>{item.a}</p>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ── CTA STRIP ───────────────────────────────────────────────────────
function FTCTA() {
  return (
    <section style={{ padding: '80px 40px', background: FT.flagBlue, color: FT.sunYellow, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: -10, left: 0, right: 0 }}>
        <Banderitas count={24} swag={22} height={44} />
      </div>
      <div aria-hidden style={{ position: 'absolute', top: 140, right: -80, opacity: 0.2 }}>
        <PHSun size={420} color={FT.sunYellow} />
      </div>

      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center', paddingTop: 60 }}>
        <h2 style={{
          fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 138, lineHeight: 0.85,
          letterSpacing: '-0.04em', margin: 0, color: FT.sunYellow,
          textShadow: `4px 4px 0 ${FT.flagRed}, 8px 8px 0 ${FT.ink}`,
        }}>
          MABUHAY ang <span style={{ fontStyle: 'italic', color: FT.white }}>kantahan!</span>
        </h2>
        <p style={{
          fontFamily: ftSerif, fontStyle: 'italic', fontSize: 28, margin: '20px auto 32px',
          maxWidth: 720, color: FT.cream,
        }}>
          One URL. One TV. One family that can't agree on whose turn it is.
        </p>
        <div style={{ display: 'flex', gap: 18, justifyContent: 'center', flexWrap: 'wrap' }}>
          <FTButton href={SITE.display} bg={FT.flagRed} fg={FT.white} big>▶ Start your fiesta</FTButton>
          <FTButton href="#pricing" bg={FT.sunYellow} fg={FT.ink} big>Tingnan ang presyo</FTButton>
        </div>
      </div>
    </section>
  );
}

// ── FOOTER ──────────────────────────────────────────────────────────
function FTFooter() {
  return (
    <footer style={{ padding: '52px 40px 24px', background: FT.cream, color: FT.ink, borderTop: `3px solid ${FT.ink}`, position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr', gap: 32, marginBottom: 36 }}>
        <div>
          <div style={{ background: FT.ink, padding: 18, borderRadius: 12, display: 'inline-block' }}>
            <AnimatedLogo width={240} showMirror={false} wordmarkColor={FT.cream} />
          </div>
          <p style={{ fontFamily: ftDisplay, fontWeight: 600, fontSize: 17, marginTop: 16, maxWidth: 320, lineHeight: 1.45 }}>
            Karaoke built for the backyard, the basement hall, the birthday tent — anywhere a Filipino party happens.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 22, marginBottom: 10, color: FT.flagRed }}>Product</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 6, fontFamily: ftDisplay, fontWeight: 600, fontSize: 16 }}>
            <li><a href={SITE.display} style={{ color: FT.ink }}>Display</a></li>
            <li><a href={SITE.request} style={{ color: FT.ink }}>Request</a></li>
            <li><a href={SITE.dj} style={{ color: FT.ink }}>DJ console</a></li>
            <li><a href="#pricing" style={{ color: FT.ink }}>Pricing</a></li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 22, marginBottom: 10, color: FT.flagBlue }}>Kausapin kami</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 6, fontFamily: ftDisplay, fontWeight: 600, fontSize: 16 }}>
            <li><a href={SITE.mailto} style={{ color: FT.ink }}>{SITE.email}</a></li>
            <li><a href="#" style={{ color: FT.ink }}>github</a></li>
            <li><a href="#" style={{ color: FT.ink }}>instagram</a></li>
            <li><a href="#" style={{ color: FT.ink }}>tiktok</a></li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 22, marginBottom: 10, color: FT.flagRed }}>Pro waitlist</div>
          <div style={{ display: 'flex', gap: 0, border: `3px solid ${FT.ink}`, borderRadius: 999, overflow: 'hidden', background: FT.white }}>
            <input placeholder="your email" style={{
              flex: 1, background: 'transparent', border: 'none', padding: '12px 16px',
              fontFamily: ftDisplay, fontWeight: 600, fontSize: 15, color: FT.ink, outline: 'none',
            }} />
            <button style={{
              background: FT.flagRed, color: FT.sunYellow, border: 'none',
              fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 16, padding: '0 18px', cursor: 'pointer',
            }}>SALI</button>
          </div>
        </div>
      </div>

      {/* Giant outlined wordmark */}
      <div style={{
        fontFamily: ftDisplay, fontWeight: 900, fontStretch: '125%', fontSize: 280, lineHeight: 0.85,
        letterSpacing: '-0.05em',
        color: 'transparent',
        WebkitTextStroke: `2px ${FT.flagRed}`,
        textAlign: 'center', margin: '0 0 10px', userSelect: 'none',
      }}>kantahan</div>

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: ftMono, fontSize: 11, letterSpacing: '0.2em', color: FT.inkDim, textTransform: 'uppercase',
        borderTop: `2px solid ${FT.ink}`, paddingTop: 16, marginTop: 8,
      }}>
        <span>© 2026 kantahan.app · Pinoy at heart</span>
        <span>Mabuhay ang kantahan 🇵🇭</span>
      </div>
    </footer>
  );
}

// ── MAIN ────────────────────────────────────────────────────────────
function VariantFiesta() {
  return (
    <div style={{ background: FT.cream, color: FT.ink, minHeight: '100%' }}>
      <FTNav />
      <FTHero />
      <FTMarquee />
      <FTHow />
      <FTFeatures />
      <FTMarquee text="★ I-SCAN ★ KUMANTA ★ TUMAWA ★ TUMANGIS ★ ULITIN ★ " bg={FT.flagBlue} color={FT.sunYellow} />
      <FTPricing />
      <FTKantahan />
      <FTFAQ />
      <FTCTA />
      <FTFooter />
    </div>
  );
}

window.VariantFiesta = VariantFiesta;