/* global React */
// THE COMMISSIONER — Marketing homepage V2.
// Original layout preserved. Static screenshots replaced with animated UI mockups.

const { useState: useS, useEffect: useE, useRef: useR, useCallback: useC } = React;

// ─── Design tokens ──────────────────────────────────────────────
const C = {
  bg:      '#0a0a0a',
  surface: '#0e0e0e',
  surf2:   '#141414',
  border:  '#1f1f1f',
  border2: '#2a2a2a',
  text:    '#ededed',
  text2:   '#a3a3a3',
  text3:   '#666',
  text4:   '#404040',
  green:   '#00ff88',
  purple:  '#a855f7',
};

// ─── Atoms ──────────────────────────────────────────────────────
function Wordmark({ size = 15, showText = true }) {
  return (
    <div className="inline-flex items-center gap-2.5" style={{ fontSize: size }}>
      <img src="assets/tc-logo-real.png" alt="The Commissioner" style={{ height: size * 1.5, width: 'auto', display: 'block' }} />
      {showText && <span className="font-semibold tracking-[-0.012em] text-white">The Commissioner</span>}
    </div>
  );
}

function GhostButton({ children, href = '#', className = '' }) {
  return (
    <a href={href} className={`inline-flex items-center gap-1.5 h-9 px-3.5 rounded-lg border border-[#1f1f1f] bg-[#141414] text-[13px] font-medium text-[#ededed] hover:bg-[#1a1a1a] hover:border-[#2a2a2a] transition-colors ${className}`}>
      {children}
    </a>
  );
}

function PrimaryButton({ children, href = '#', className = '' }) {
  return (
    <a href={href} className={`inline-flex items-center gap-1.5 h-9 px-3.5 rounded-lg bg-white text-black text-[13px] font-semibold hover:bg-[#e5e5e5] transition-colors ${className}`}>
      {children}
    </a>
  );
}

function Eyebrow({ accent = C.green, children }) {
  return (
    <div className="inline-flex items-center gap-2 text-[11px] font-medium tracking-[0.02em]" style={{ color: accent }}>
      <span className="w-1 h-1 rounded-full" style={{ background: accent, boxShadow: `0 0 8px ${accent}88` }} />
      {children}
    </div>
  );
}

function ProBadge({ size = 'sm' }) {
  const sz = size === 'sm' ? 'h-4 px-1.5 text-[9px]' : 'h-5 px-2 text-[10px]';
  return (
    <span className={`inline-flex items-center justify-center rounded font-bold tracking-wider uppercase ${sz}`}
          style={{ background: 'rgba(168,85,247,0.15)', color: C.purple, border: '1px solid rgba(168,85,247,0.4)' }}>
      Pro
    </span>
  );
}

function Shot({ src, alt = '', label, badge, accent = 'green', className = '' }) {
  return (
    <div className={`rounded-xl overflow-hidden bg-[#0a0a0a] ${accent === 'purple' ? 'shot-lift-purple' : 'shot-lift'} ${className}`}>
      <div className="h-9 flex items-center px-4 gap-3 bg-[#0d0d0d] border-b border-[#1f1f1f]">
        <div className="flex gap-1.5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
        </div>
        {label && <div className="flex-1 text-center font-mono text-[11px] text-[#525252] truncate">{label}</div>}
        {badge && <div className="ml-auto text-[10px] font-mono text-[#525252]">{badge}</div>}
      </div>
      <img src={src} alt={alt} className="block w-full h-auto" />
    </div>
  );
}

// ─── Animated Chat Mockup ───────────────────────────────────────
// Mimics the real app chat UI with messages appearing one by one

function TypingDots({ color = C.text3 }) {
  return (
    <div className="flex items-center gap-1 px-3 py-2">
      {[0, 1, 2].map(i => (
        <span key={i} className="w-1.5 h-1.5 rounded-full"
              style={{
                background: color,
                animation: 'bounce-dot 1.2s infinite',
                animationDelay: `${i * 150}ms`,
              }} />
      ))}
    </div>
  );
}

function FormatMsg(text) {
  return text.split('\n').map((line, i) => {
    const parts = line.split(/(\*\*.*?\*\*)/g);
    return React.createElement(React.Fragment, { key: i },
      i > 0 && React.createElement('br'),
      ...parts.map((part, j) =>
        part.startsWith('**') && part.endsWith('**')
          ? React.createElement('strong', { key: j, className: 'text-white font-semibold' }, part.slice(2, -2))
          : React.createElement('span', { key: j }, part)
      )
    );
  });
}

function MockChat({ conversations, accent = 'green', label = 'Commissioner' }) {
  const accentColor = accent === 'green' ? C.green : C.purple;
  const [convoIdx, setConvoIdx] = useS(0);
  const [visibleMsgs, setVisibleMsgs] = useS(0);
  const [typing, setTyping] = useS(false);
  const scrollRef = useR(null);

  const convo = conversations[convoIdx];
  const msgs = convo.messages;

  useE(() => {
    if (visibleMsgs >= msgs.length) {
      const t = setTimeout(() => {
        setConvoIdx(v => (v + 1) % conversations.length);
        setVisibleMsgs(0);
        setTyping(false);
      }, 5000);
      return () => clearTimeout(t);
    }
    const nextMsg = msgs[visibleMsgs];
    const delay = nextMsg.role === 'user' ? 800 : 1200;
    setTyping(true);
    const t1 = setTimeout(() => {
      setTyping(false);
      setVisibleMsgs(v => v + 1);
    }, delay);
    return () => clearTimeout(t1);
  }, [visibleMsgs, convoIdx, msgs]);

  useE(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [visibleMsgs, typing]);

  return (
    <div className="rounded-xl overflow-hidden shot-lift" style={{ background: accent === 'purple' ? undefined : undefined }}>
      {/* Browser chrome */}
      <div className="h-9 flex items-center px-4 gap-3 bg-[#0d0d0d] border-b border-[#1f1f1f]">
        <div className="flex gap-1.5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
        </div>
        <div className="flex-1 text-center font-mono text-[11px] text-[#525252] truncate">
          thecommissioner.ai · {label}
        </div>
        <div className="text-[10px] font-mono" style={{ color: accentColor }}>AI</div>
      </div>

      {/* Chat header */}
      <div className="px-4 py-3 border-b border-[#1f1f1f] bg-[#0c0c0c] flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <div className="w-7 h-7 rounded-lg flex items-center justify-center text-[10px] font-bold"
               style={{ background: accentColor, color: '#0a0a0a' }}>
            {accent === 'green' ? 'C' : 'L'}
          </div>
          <div>
            <div className="text-[13px] font-semibold text-white">{label}</div>
            <div className="text-[10px]" style={{ color: accentColor }}>Online</div>
          </div>
        </div>
        <div className="flex items-center gap-2 text-[#525252]">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
        </div>
      </div>

      {/* Scenario label */}
      <div className="px-4 py-2 bg-[#080808] border-b border-[#141414]">
        <span className="text-[10px] uppercase tracking-wider font-medium" style={{ color: accentColor }}>
          {convo.title}
        </span>
        <span className="text-[10px] text-[#333] ml-2">{convo.trigger}</span>
      </div>

      {/* Messages */}
      <div ref={scrollRef} className="p-4 space-y-3 bg-[#0a0a0a]" style={{ height: 320, overflowY: 'auto', scrollbarWidth: 'none' }}>
        {msgs.slice(0, visibleMsgs).map((msg, i) => (
          <div key={i} className="chat-msg-enter" style={{ animationDelay: '0ms' }}>
            {msg.role === 'user' ? (
              <div className="flex justify-end">
                <div className="rounded-2xl rounded-br-sm px-4 py-2.5 max-w-[85%]"
                     style={{ background: '#1f1f1f' }}>
                  <p className="text-[13px] text-[#d4d4d4] leading-[1.5]">{msg.text}</p>
                </div>
              </div>
            ) : (
              <div className="flex items-start gap-2.5">
                <div className="shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-[9px] font-bold mt-0.5"
                     style={{ background: `${accentColor}20`, color: accentColor }}>
                  {accent === 'green' ? 'C' : 'L'}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="text-[13px] text-[#e5e5e5] leading-[1.55]">
                    {FormatMsg(msg.text)}
                  </div>
                </div>
              </div>
            )}
          </div>
        ))}
        {typing && visibleMsgs < msgs.length && (
          <div className="flex items-start gap-2.5">
            {msgs[visibleMsgs].role !== 'user' && (
              <div className="shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-[9px] font-bold mt-0.5"
                   style={{ background: `${accentColor}20`, color: accentColor }}>
                {accent === 'green' ? 'C' : 'L'}
              </div>
            )}
            <TypingDots color={accentColor} />
          </div>
        )}
      </div>

      {/* Input area */}
      <div className="px-4 py-3 border-t border-[#1f1f1f] bg-[#0c0c0c]">
        <div className="flex items-center gap-2 rounded-lg bg-[#141414] border border-[#1f1f1f] px-3 py-2">
          <span className="text-[13px] text-[#333] flex-1">Ask anything...</span>
          <div className="w-6 h-6 rounded-md flex items-center justify-center" style={{ background: accentColor }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Animated Activity Feed ─────────────────────────────────────
function MockActivityFeed() {
  const items = [
    { type: 'commissioner', label: 'Commissioner', color: '#a855f7', bg: 'rgba(168,85,247,0.1)', text: 'Week 11 power rankings published. Team 2 takes the #1 spot.', time: '2m ago' },
    { type: 'trade', label: 'Trade', color: '#f59e0b', bg: 'rgba(245,158,11,0.1)', text: "Trade accepted: Team 4 sends DJ Moore + 2026 1st to Team 7 for Ja'Marr Chase.", time: '1h ago' },
    { type: 'commissioner', label: 'Commissioner', color: '#a855f7', bg: 'rgba(168,85,247,0.1)', text: 'League dues reminder sent to 3 unpaid owners. Deadline: Aug 28.', time: '3h ago' },
    { type: 'waiver', label: 'Waiver', color: '#6366f1', bg: 'rgba(99,102,241,0.1)', text: 'Team 3 claims Kyren Williams (RB, LAR) — $22 FAAB.', time: '5h ago' },
    { type: 'commissioner', label: 'Commissioner', color: '#a855f7', bg: 'rgba(168,85,247,0.1)', text: 'Stat corrections applied for Week 11. One matchup result flipped.', time: '1d ago' },
    { type: 'add_drop', label: 'Add/Drop', color: '#10b981', bg: 'rgba(16,185,129,0.1)', text: 'Team 9 drops Jahan Dotson (WR, WAS), adds Quentin Johnston (WR, LAC).', time: '1d ago' },
  ];

  const [visible, setVisible] = useS(3);
  useE(() => {
    if (visible >= items.length) {
      const t = setTimeout(() => { setVisible(3); }, 4000);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => { setVisible(v => v + 1); }, 2500);
    return () => clearTimeout(t);
  }, [visible]);

  return (
    <div className="rounded-xl overflow-hidden shot-lift">
      <div className="h-9 flex items-center px-4 gap-3 bg-[#0d0d0d] border-b border-[#1f1f1f]">
        <div className="flex gap-1.5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
        </div>
        <div className="flex-1 text-center font-mono text-[11px] text-[#525252]">
          /leagues/dynasty-warriors/activity
        </div>
      </div>
      <div className="bg-[#0a0a0a] divide-y divide-[#1f1f1f]" style={{ maxHeight: 360, overflow: 'hidden' }}>
        {items.slice(0, visible).map((item, i) => (
          <div key={i} className="flex items-start gap-3 px-4 py-3 chat-msg-enter">
            <span className="shrink-0 mt-0.5 text-[10px] font-bold px-2 py-0.5 rounded whitespace-nowrap"
                  style={{ background: item.bg, color: item.color }}>
              {item.label}
            </span>
            <div className="flex-1 min-w-0">
              <p className="text-[13px] text-[#e5e5e5] leading-snug">{item.text}</p>
            </div>
            <span className="text-[11px] text-[#525252] whitespace-nowrap shrink-0">{item.time}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Animated Action Center (Lieutenant) ────────────────────────
function MockActionCenter() {
  const alerts = [
    { urgency: 'high', color: '#ef4444', league: 'Dynasty Warriors', text: 'McCaffrey ruled OUT. Roschon Johnson available as backup.', action: 'Swap in backup' },
    { urgency: 'high', color: '#ef4444', league: 'Keeper League', text: 'Trade offer expires in 3 hours. Their 1st + Moore for your Chase.', action: 'Review trade' },
    { urgency: 'medium', color: '#f59e0b', league: 'Dynasty Warriors', text: 'Drake London active but on pitch count. WR3 decision needed.', action: 'Check status' },
    { urgency: 'low', color: '#10b981', league: 'Redraft Heroes', text: 'Lineup is optimized. No changes needed this week.', action: null },
    { urgency: 'medium', color: '#f59e0b', league: 'Empire League', text: 'Opponent has 3 players on bye. Projected to win by 22.', action: null },
  ];

  const [visible, setVisible] = useS(2);
  useE(() => {
    if (visible >= alerts.length) {
      const t = setTimeout(() => { setVisible(2); }, 5000);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => { setVisible(v => v + 1); }, 2000);
    return () => clearTimeout(t);
  }, [visible]);

  return (
    <div className="rounded-xl overflow-hidden shot-lift-purple">
      <div className="h-9 flex items-center px-4 gap-3 bg-[#0d0d0d] border-b border-[#1f1f1f]">
        <div className="flex gap-1.5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
        </div>
        <div className="flex-1 text-center font-mono text-[11px] text-[#525252]">
          /lieutenant/action-center
        </div>
        <div className="text-[10px] font-mono text-[#a855f7]">PRO</div>
      </div>

      {/* Header */}
      <div className="px-4 py-3 bg-[#0c0c0c] border-b border-[#1f1f1f] flex items-center justify-between">
        <div>
          <div className="text-[13px] font-semibold text-white">Sunday Morning Brief</div>
          <div className="text-[11px] text-[#525252]">Week 11 · 5 leagues</div>
        </div>
        <div className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 rounded-full bg-[#a855f7]" style={{ boxShadow: '0 0 6px #a855f7' }} />
          <span className="text-[10px] font-medium text-[#a855f7]">LIVE</span>
        </div>
      </div>

      <div className="bg-[#0a0a0a] divide-y divide-[#141414]" style={{ maxHeight: 320, overflow: 'hidden' }}>
        {alerts.slice(0, visible).map((a, i) => (
          <div key={i} className="px-4 py-3 chat-msg-enter">
            <div className="flex items-center gap-2 mb-1.5">
              <span className="w-1.5 h-1.5 rounded-full" style={{ background: a.color }} />
              <span className="text-[11px] font-semibold text-white">{a.league}</span>
              <span className="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded"
                    style={{ background: `${a.color}15`, color: a.color }}>
                {a.urgency}
              </span>
            </div>
            <p className="text-[13px] text-[#a3a3a3] leading-snug">{a.text}</p>
            {a.action && (
              <button className="mt-2 text-[11px] font-medium px-2.5 py-1 rounded-md"
                      style={{ background: `${C.purple}15`, color: C.purple, border: `1px solid ${C.purple}30` }}>
                {a.action} →
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Nav ────────────────────────────────────────────────────────
function Nav() {
  const [mobileOpen, setMobileOpen] = useS(false);
  return (
    React.createElement(React.Fragment, null,
      React.createElement('nav', {
        className: 'sticky top-0 z-50 backdrop-blur-md',
        style: { background: 'rgba(10,10,10,0.7)', borderBottom: '1px solid rgba(255,255,255,0.06)' }
      },
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6 h-14 flex items-center gap-8">
          <Wordmark />
          <div className="hidden md:flex items-center gap-6 text-[13px] font-medium text-[#a3a3a3]">
            <a href="#commissioner" className="hover:text-white transition-colors">Commissioner</a>
            <a href="#lieutenant"   className="hover:text-white transition-colors">Lieutenant</a>
            <a href="#draft"        className="hover:text-white transition-colors">Draft</a>
            <a href="#formats"      className="hover:text-white transition-colors">Formats</a>
            <a href="#compare"      className="hover:text-white transition-colors">Compare</a>
          </div>
          <div className="ml-auto flex items-center gap-2">
            <a href="/ball/login" className="text-[13px] font-medium text-[#a3a3a3] hover:text-white transition-colors hidden sm:inline-block">Sign in</a>
            <PrimaryButton href="#waitlist">Join waitlist →</PrimaryButton>
            <button onClick={() => { setMobileOpen(true); }} className="md:hidden ml-1 p-2 text-[#a3a3a3] hover:text-white">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
            </button>
          </div>
        </div>
      ),
      mobileOpen && (
        <div className="fixed inset-0 z-[60]" onClick={() => { setMobileOpen(false); }}>
          <div className="absolute inset-0 bg-black/60" />
          <div className="absolute top-0 right-0 bottom-0 w-72 bg-[#0a0a0a] border-l border-[#1f1f1f] p-6"
               onClick={e => { e.stopPropagation(); }}>
            <button onClick={() => { setMobileOpen(false); }} className="absolute top-4 right-4 text-[#a3a3a3] hover:text-white">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </button>
            <div className="mt-12 flex flex-col gap-1">
              {['Commissioner','Lieutenant','Draft','Formats','Compare'].map(l => (
                <a key={l} href={`#${l.toLowerCase()}`} onClick={() => { setMobileOpen(false); }}
                   className="px-4 py-3 text-[#a3a3a3] hover:text-white hover:bg-white/5 rounded-lg transition-colors">{l}</a>
              ))}
              <hr className="border-[#1f1f1f] my-3" />
              <a href="/ball/login" className="px-4 py-3 text-[#a3a3a3] hover:text-white hover:bg-white/5 rounded-lg">Sign in</a>
              <a href="#waitlist" onClick={() => { setMobileOpen(false); }}
                 className="mt-2 text-center text-[13px] font-semibold bg-white text-black px-4 py-3 rounded-lg hover:bg-[#e5e5e5]">
                Join waitlist →
              </a>
            </div>
          </div>
        </div>
      )
    )
  );
}

// ─── Hero ───────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none hero-glow" />
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 pt-20 sm:pt-24 pb-12 sm:pb-16 relative">
        <div className="flex justify-center mb-8">
          <a href="#draft" className="inline-flex items-center gap-2 h-7 pl-1 pr-3 rounded-full bg-white/[0.03] border border-white/[0.08] text-[12px] text-[#a3a3a3] hover:bg-white/[0.05] hover:text-white transition-colors">
            <span className="h-5 px-2 inline-flex items-center rounded-full bg-[#00ff88] text-black text-[10px] font-bold uppercase tracking-wider">New</span>
            <span className="hidden sm:inline">AI mock drafts are here. Practice against bots trained on your actual league mates</span>
            <span className="sm:hidden">AI mock drafts are live</span>
            <span className="text-[#525252]">→</span>
          </a>
        </div>
        <h1 className="text-center text-white mx-auto max-w-[920px]"
            style={{ fontSize: 'clamp(40px, 6.5vw, 88px)', fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 0.98 }}>
          Two Fantasy Agents.<br/>
          One for your league.<br/>
          One for your lineups.
        </h1>
        <p className="text-center text-[#a3a3a3] mt-7 mx-auto max-w-[640px] leading-[1.55] px-4"
           style={{ fontSize: 'clamp(15px, 2vw, 18px)', textWrap: 'pretty' }}>
          An AI commissioner that handles your league top to bottom: settings, scoring, disputes, weekly recaps.
          A personal AI advisor that helps you make smarter calls: draft strategy, lineup decisions, trade analysis, waivers.
          Across every league you're in.
        </p>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-9 px-4">
          <PrimaryButton href="#waitlist" className="w-full sm:w-auto justify-center h-11 px-6 text-[14px]">Join the waitlist →</PrimaryButton>
          <GhostButton href="#draft" className="w-full sm:w-auto justify-center h-11 px-6 text-[14px]">Watch the draft demo</GhostButton>
        </div>
        <div className="text-center mt-7 text-[12px] text-[#525252]">
          Free in beta · Importing 100 leagues a week · Bring yours from ESPN, Sleeper, Yahoo, or anywhere
        </div>
      </div>
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6 pb-16 sm:pb-20 relative">
        <div className="relative">
          <Shot src="assets/screens/league-home.png" alt="The Commissioner — league home"
                label="thecommissioner.ai  ·  Dynasty Warriors" />
          <div className="absolute bottom-0 left-0 right-0 h-32 pointer-events-none rounded-b-xl"
               style={{ background: 'linear-gradient(to bottom, transparent 0%, rgba(10,10,10,0.4) 100%)' }} />
        </div>
      </div>
    </section>
  );
}

// ─── Import Strip ───────────────────────────────────────────────
function ImportStrip() {
  const platforms = ['ESPN', 'Sleeper', 'Yahoo', 'NFL.com', 'MyFantasyLeague', 'Fleaflicker', 'Fantrax', 'CBS'];
  return (
    <section className="py-12 sm:py-16 border-y border-[#1f1f1f] bg-[#080808]">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <div className="text-center text-[12px] text-[#525252] mb-6 sm:mb-7">Imports your existing league from anywhere</div>
        <div className="flex flex-wrap items-center justify-center gap-x-5 sm:gap-x-10 gap-y-3">
          {platforms.map(p => (
            <span key={p} className="text-[13px] sm:text-[15px] font-medium text-[#525252]" style={{ letterSpacing: '-0.005em' }}>{p}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Feature Section ────────────────────────────────────────────
function FeatureSection({ id, eyebrow, accent = C.green, headline, lede, bullets, visual, reverse = false, kicker }) {
  return (
    <section id={id} className="py-20 sm:py-32 relative">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
          <div className={`lg:col-span-5 ${reverse ? 'lg:col-start-8' : ''}`}>
            <Eyebrow accent={accent}>{eyebrow}</Eyebrow>
            <h2 className="text-white mt-4"
                style={{ fontSize: 'clamp(32px, 4.2vw, 56px)', fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1.02, textWrap: 'balance' }}>
              {headline}
            </h2>
            <p className="text-[#a3a3a3] mt-5 leading-[1.55]" style={{ fontSize: 'clamp(15px, 1.8vw, 17px)', textWrap: 'pretty' }}>
              {lede}
            </p>
            {bullets && (
              <ul className="mt-7 space-y-3.5">
                {bullets.map((b, i) => (
                  <li key={i} className="flex gap-3 text-[14px] sm:text-[15px] text-[#d4d4d4]">
                    <span className="shrink-0 mt-2 w-1 h-1 rounded-full" style={{ background: accent }} />
                    <span className="leading-[1.5]" style={{ textWrap: 'pretty' }}>{b}</span>
                  </li>
                ))}
              </ul>
            )}
            {kicker && (
              <p className="text-[13px] text-[#525252] mt-7 italic leading-[1.5]" style={{ textWrap: 'pretty' }}>{kicker}</p>
            )}
          </div>
          <div className={`lg:col-span-7 ${reverse ? 'lg:col-start-1 lg:row-start-1' : ''}`}>
            {visual}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Commissioner Section ───────────────────────────────────────
function CommissionerSection() {
  const conversations = window.MKT.COMMISSIONER_SCENARIOS.slice(0, 5).map(s => ({
    title: s.title,
    trigger: s.trigger,
    messages: [
      ...(s.trigger.includes('asks') || s.trigger.includes('messages')
        ? [{ role: 'user', text: s.trigger.replace(/^.*?"/, '').replace(/"$/, '') }]
        : []),
      { role: 'assistant', text: s.response },
    ],
  }));

  return (
    <FeatureSection
      id="commissioner"
      eyebrow="The Commissioner"
      accent={C.green}
      headline="Meet the AI that runs your league."
      lede="The Commissioner is a league-level AI that handles everything a great commissioner would: settings, rules, scheduling, dues, dispute resolution, weekly recaps. It never burns out, never plays favorites, and never forgets to follow up. Every league gets one, free."
      bullets={[
        'Configures every league setting, scoring rule, and roster requirement, then explains its choices in plain English.',
        "Resolves disputes with written reasoning anyone can review. Overridable anytime, but most leagues trust the call.",
        "Tracks dues, sends reminders, knows who's paid. The most thankless job in fantasy, fully automated.",
        "Generates a weekly recap with power rankings, highlights, and smack talk in your league's actual voice.",
      ]}
      kicker="Think of it as a commissioner who read every rule in your constitution and actually remembers them all."
      visual={<MockChat conversations={conversations} accent="green" label="Commissioner" />}
    />
  );
}

// ─── Lieutenant Section ─────────────────────────────────────────
function LieutenantSection() {
  const conversations = window.MKT.LIEUTENANT_SCENARIOS.slice(0, 5).map(s => ({
    title: s.title,
    trigger: s.trigger,
    messages: [
      ...(s.userMessage ? [{ role: 'user', text: s.userMessage }] : []),
      { role: 'assistant', text: s.response },
    ],
  }));

  return (
    <FeatureSection
      id="lieutenant"
      eyebrow={React.createElement(React.Fragment, null, 'The Lieutenant ', React.createElement(ProBadge))}
      accent={C.purple}
      headline="The AI advisor that helps you win."
      lede="The Lieutenant is a personal AI that works across every league you're in. It watches your rosters, tracks the wire, evaluates trades, and surfaces the decisions that matter most this week. You still make every call. It just makes sure you never miss one."
      bullets={[
        "Action Center: every lineup risk, expiring trade, and waiver opportunity across all your leagues, sorted by what matters most.",
        "Draft co-pilot trained on your league's actual draft history. It knows the tendencies, the reaches, the patterns.",
        "Portfolio view: see which players are producing across leagues and where your best trade value sits right now.",
        "Monitors injuries, news, and status changes in real time. Set rules and it acts on them.",
      ]}
      kicker="Like having a fantasy analyst on call, except it actually knows your roster, your league, and your schedule."
      reverse
      visual={<MockChat conversations={conversations} accent="purple" label="Lieutenant" />}
    />
  );
}

// ─── Draft Section ──────────────────────────────────────────────
function DraftSection() {
  return (
    <section id="draft" className="py-20 sm:py-32 relative border-t border-[#1f1f1f]" style={{ background: 'radial-gradient(ellipse at 50% 0%, rgba(0,255,136,0.04) 0%, transparent 60%)' }}>
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 mb-12 text-center">
        <Eyebrow>The Draft Room</Eyebrow>
        <h2 className="text-white mt-4 mx-auto max-w-[820px]"
            style={{ fontSize: 'clamp(32px, 4.2vw, 56px)', fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1.02 }}>
          Draft night, the way it should be.
        </h2>
        <p className="text-[#a3a3a3] mt-5 mx-auto max-w-[600px] leading-[1.55] px-4" style={{ fontSize: 'clamp(15px, 1.8vw, 17px)', textWrap: 'pretty' }}>
          Six layouts. Built-in video call. An AI co-pilot whispering in your ear.
          Real-time board, pick timer, auto-draft queue, live chat.
        </p>
      </div>
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <div className="relative rounded-xl overflow-hidden shot-lift">
          <div className="h-9 flex items-center px-4 gap-3 bg-[#0d0d0d] border-b border-[#1f1f1f]">
            <div className="flex gap-1.5">
              <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
              <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
              <span className="w-2.5 h-2.5 rounded-full bg-[#262626]" />
            </div>
            <div className="flex-1 text-center font-mono text-[11px] text-[#525252]">/draft/dynasty-warriors · War Room</div>
            <div className="inline-flex items-center gap-1.5 text-[10px] font-mono text-[#00ff88]">
              <span className="w-1.5 h-1.5 rounded-full bg-[#00ff88]" style={{ boxShadow: '0 0 6px #00ff88' }} />
              LIVE
            </div>
          </div>
          <DraftMini />
        </div>
        <div className="mt-6 sm:mt-7 flex flex-wrap items-center justify-center gap-2">
          <span className="text-[12px] text-[#525252] mr-3">Six layouts to choose from</span>
          {['Classic','War Room','Spotlight','Scout','Co-Pilot','Pocket'].map(l => (
            <span key={l} className="px-2.5 h-7 inline-flex items-center rounded-full bg-white/[0.04] border border-white/[0.06] text-[12px] text-[#a3a3a3]">{l}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// Draft mini (preserved from original)
function DraftMini() {
  const F = [
    { abbr: 'TPT', color: '#dc2626' }, { abbr: 'BSV', color: '#16a34a' },
    { abbr: 'PG',  color: '#f59e0b' }, { abbr: 'HSG', color: '#8b5cf6' },
    { abbr: 'CMR', color: '#00ff88', isMine: true }, { abbr: 'MCM', color: '#0ea5e9' },
    { abbr: 'MHM', color: '#ef4444' }, { abbr: 'CDL', color: '#06b6d4' },
    { abbr: 'JFA', color: '#a855f7' }, { abbr: 'SQN', color: '#f97316' },
    { abbr: 'CHC', color: '#eab308' }, { abbr: 'BJN', color: '#84cc16' },
  ];
  const PICKS = [
    { n: 'McCaffrey', p: 'RB' }, { n: 'Lamb', p: 'WR' }, { n: 'Chase', p: 'WR' }, { n: 'Hill', p: 'WR' },
    { n: 'Bijan', p: 'RB' }, { n: 'Jefferson', p: 'WR' }, { n: 'Hall', p: 'RB' }, { n: 'Barkley', p: 'RB' },
    { n: 'St. Brown', p: 'WR' }, { n: 'Taylor', p: 'RB' }, { n: 'Gibbs', p: 'RB' }, { n: 'Nacua', p: 'WR' },
    { n: 'Mahomes', p: 'QB' }, { n: 'Wilson', p: 'WR' }, { n: 'Adams', p: 'WR' }, { n: 'Etienne', p: 'RB' },
    { n: 'Kelce', p: 'TE' }, { n: 'London', p: 'WR' },
  ];
  const PC = { QB:'#ef4444', RB:'#22c55e', WR:'#3b82f6', TE:'#f97316' };
  const [t, setT] = useS(73);
  useE(() => { const i = setInterval(() => { setT(v => v > 0 ? v - 1 : 90); }, 1000); return () => clearInterval(i); }, []);
  const tColor = t <= 10 ? '#ef4444' : t <= 30 ? '#f59e0b' : '#00ff88';
  return (
    <div className="bg-[#0a0a0a] text-white p-3 sm:p-4 overflow-x-auto">
      <div className="flex items-center gap-4 mb-3 pb-3 border-b border-[#1f1f1f]">
        <div className="text-[11px] font-mono text-[#525252] uppercase tracking-wider whitespace-nowrap">Round 2 · Pick 7</div>
        <div className="hidden sm:inline-flex items-center gap-2 px-2.5 py-1 rounded-md bg-[#00ff8810] border border-[#00ff8855]">
          <span className="w-1.5 h-1.5 rounded-full bg-[#00ff88]" style={{ boxShadow: '0 0 6px #00ff88' }} />
          <span className="text-[10px] font-semibold uppercase tracking-wider text-[#00ff88]">You're on the clock</span>
        </div>
        <div className="ml-auto font-mono tabular-nums text-xl sm:text-2xl font-bold" style={{ color: tColor }}>
          {Math.floor(t/60)}:{String(t%60).padStart(2,'0')}
        </div>
      </div>
      <div className="grid gap-1 sm:gap-1.5 min-w-[700px]" style={{ gridTemplateColumns: '28px repeat(12, minmax(0, 1fr))' }}>
        <div></div>
        {F.map(f => (
          <div key={f.abbr} className="flex items-center justify-center" style={{ background: f.isMine ? '#00ff8810' : 'transparent' }}>
            <div className="text-[8px] sm:text-[9px] font-extrabold tracking-tight inline-flex items-center justify-center w-5 sm:w-6 h-5 sm:h-6 rounded"
                 style={{ background: f.color + '22', color: f.color, border: `1px solid ${f.color}55` }}>{f.abbr}</div>
          </div>
        ))}
        {[1,2,3].map(r => {
          const rev = r % 2 === 0;
          return (
            React.createElement(React.Fragment, { key: r },
              <div className="text-center text-[9px] font-mono text-[#525252] font-bold flex items-center justify-center">R{r}</div>,
              ...F.map((f, idx) => {
                const rIdx = rev ? 11 - idx : idx;
                const pIdx = (r - 1) * 12 + rIdx;
                const pick = PICKS[pIdx];
                const cur = r === 2 && idx === 4;
                return (
                  <div key={f.abbr} className="h-10 sm:h-12 rounded-md px-1 sm:px-1.5 py-1 relative"
                       style={{ background: cur ? '#00ff8820' : pick ? '#141414' : '#0a0a0a', border: `1px solid ${cur ? '#00ff88' : '#1f1f1f'}` }}>
                    {pick && (
                      <div className="text-[8px] sm:text-[9.5px] leading-tight">
                        <div className="flex items-center gap-0.5">
                          <span className="w-1 h-1 rounded-full" style={{ background: PC[pick.p] }} />
                          <span className="font-mono font-bold text-[#a3a3a3] text-[7px] sm:text-[8.5px]">{pick.p}</span>
                        </div>
                        <div className="font-semibold text-white truncate mt-0.5">{pick.n}</div>
                      </div>
                    )}
                    {!pick && cur && <div className="h-full flex items-center justify-center font-mono text-[#00ff88] text-[9px] sm:text-[10px] font-bold animate-pulse">PICK</div>}
                  </div>
                );
              })
            )
          );
        })}
      </div>
      <div className="mt-3 pt-3 border-t border-[#1f1f1f] grid grid-cols-1 sm:grid-cols-12 gap-3">
        <div className="sm:col-span-5 rounded-lg border border-[#1f1f1f] bg-[#0f0f0f] p-3">
          <div className="text-[10px] font-medium uppercase tracking-wider text-[#525252] mb-2">Available · top 4</div>
          {[
            { n: 'Sam LaPorta', p: 'TE', t: 'DET', adp: 21.1, top: true },
            { n: "De'Von Achane", p: 'RB', t: 'MIA', adp: 23.8 },
            { n: 'Nico Collins', p: 'WR', t: 'HOU', adp: 24.5 },
            { n: 'DeVonta Smith', p: 'WR', t: 'PHI', adp: 25.7 },
          ].map((pl, i) => (
            <div key={i} className={`flex items-center gap-2 py-1 ${pl.top ? 'text-white' : 'text-[#a3a3a3]'}`}>
              <span className="inline-flex items-center justify-center w-7 h-4 rounded text-[9px] font-bold text-white" style={{ background: PC[pl.p] }}>{pl.p}</span>
              <span className="text-[11px] font-medium flex-1 truncate">{pl.n}</span>
              <span className="text-[10px] font-mono text-[#525252]">{pl.t}</span>
              <span className="text-[11px] font-mono font-bold">{pl.adp.toFixed(1)}</span>
            </div>
          ))}
        </div>
        <div className="sm:col-span-7 rounded-lg border border-[#1f1f1f] bg-[#0f0f0f] p-3">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-[10px] font-medium uppercase tracking-wider text-[#525252]">Lieutenant says</span>
            <ProBadge />
          </div>
          <p className="text-[13px] text-white leading-snug mb-1">
            <span className="text-[#a855f7] font-semibold">Take LaPorta.</span> Last Tier-1 TE — he won't return to you at 3.7.
          </p>
          <p className="text-[11.5px] text-[#a3a3a3] leading-snug">
            The drop after T1 TEs is ~6 PPG. Highest expected-value pick on the board.
          </p>
        </div>
      </div>
    </div>
  );
}

// ─── Multi-League Section ───────────────────────────────────────
function MultiLeagueSection() {
  return (
    <FeatureSection
      id="multi"
      eyebrow="Mission Control"
      accent={C.green}
      headline="Every league you're in. One place to manage them all."
      lede="Your QB is questionable in three leagues. Your RB1 is on bye in two. A trade is expiring in a fourth. The Lieutenant surfaces all of it before kickoff, so you make every decision with time to spare."
      bullets={[
        "One dashboard for every team you own: conflicts, opportunities, and deadlines in one view.",
        "Bye-week and injury overlap warnings weeks in advance, so you can plan instead of react.",
        "Apply a lineup change across every league it affects. One decision, done.",
      ]}
      kicker="Built for the person who loves being in six leagues but needs help keeping track of six leagues."
      visual={<MockActionCenter />}
    />
  );
}

// ─── Formats ────────────────────────────────────────────────────
function FormatsSection() {
  const formats = [
    { name: 'Redraft',    sub: 'Standard, PPR, half-PPR, custom scoring' },
    { name: 'Keeper',     sub: '1-12 keepers with round penalties or none' },
    { name: 'Dynasty',    sub: 'Rookie drafts, taxi squads, multi-year contracts' },
    { name: 'Empire',     sub: 'Multi-year crowns and tribute mechanics' },
    { name: 'Devy',       sub: 'Full NCAA database, declarations, transfer portal' },
    { name: 'IDP',        sub: 'Defensive lineups with position-specific scoring' },
    { name: 'Salary Cap', sub: 'Contracts, dead money, franchise tags' },
    { name: 'Auction',    sub: 'Slow and live auction, nomination strategy AI' },
    { name: 'Best-Ball',  sub: 'No lineups, all draft, all year' },
    { name: 'Survivor',   sub: 'Pick-em with rosters and elimination rounds' },
    { name: 'Guillotine', sub: 'Lowest score eliminated each week' },
    { name: 'Custom',     sub: 'Any rule you can describe, the AI will enforce it' },
  ];
  return (
    <section id="formats" className="py-20 sm:py-32 border-t border-[#1f1f1f]">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
          <div className="lg:col-span-5">
            <Eyebrow>Every format</Eyebrow>
            <h2 className="text-white mt-4" style={{ fontSize: 'clamp(32px, 4.2vw, 56px)', fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1.02 }}>
              If you can describe it, we can run it.
            </h2>
            <p className="text-[#a3a3a3] mt-5 leading-[1.55]" style={{ fontSize: 'clamp(15px, 1.8vw, 17px)', textWrap: 'pretty' }}>
              Twelve built-in formats and a custom rules engine the AI Commissioner configures in plain English. The weird scoring system your group chat invented at 1am? In scope.
            </p>
            <p className="text-[13px] text-[#525252] mt-5 italic">"Quarterback gets +5 if it rains in their stadium" is a real rule someone asked for. We said yes.</p>
          </div>
          <div className="lg:col-span-7">
            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 sm:gap-y-5">
              {formats.map(f => (
                <li key={f.name} className="border-t border-[#1f1f1f] pt-3">
                  <div className="text-[14px] sm:text-[15px] font-semibold text-white" style={{ letterSpacing: '-0.01em' }}>{f.name}</div>
                  <div className="text-[12px] sm:text-[13px] text-[#666] mt-1 leading-[1.4]">{f.sub}</div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Compare ────────────────────────────────────────────────────
function CompareSection() {
  const rows = [
    { label: 'AI Commissioner',                tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'AI Lieutenant (personal advisor)',tc:'yes',   espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'AI mock drafts vs your league',  tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'Dynasty + taxi + contracts',     tc: 'yes',  espn: 'partial',sleeper: 'yes',    yahoo: 'no'    },
    { label: 'Devy (with NCAA player DB)',     tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'Empire leagues',                 tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'Salary cap + dead money',        tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'IDP scoring',                    tc: 'yes',  espn: 'yes',    sleeper: 'yes',    yahoo: 'yes'   },
    { label: 'Import from any platform',       tc: 'yes',  espn: 'no',     sleeper: 'partial',yahoo: 'no'    },
    { label: 'Multi-league dashboard',         tc: 'yes',  espn: 'partial',sleeper: 'partial',yahoo: 'partial' },
    { label: 'Built-in video call in draft',   tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'Custom rules engine',            tc: 'yes',  espn: 'no',     sleeper: 'partial',yahoo: 'no'    },
    { label: 'AI weekly recap + podcast',      tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'Auto dues collection',           tc: 'yes',  espn: 'no',     sleeper: 'no',     yahoo: 'no'    },
    { label: 'Proactive injury/news alerts',   tc: 'yes',  espn: 'partial',sleeper: 'partial',yahoo: 'partial' },
  ];
  const Cell = ({ v }) => {
    if (v === 'yes')     return <span className="text-[#00ff88]" style={{ fontSize: 13 }}>●</span>;
    if (v === 'partial') return <span className="text-[#666]"   style={{ fontSize: 13 }}>◐</span>;
    return <span className="text-[#2a2a2a]" style={{ fontSize: 13 }}>○</span>;
  };
  return (
    <section id="compare" className="py-20 sm:py-32 border-t border-[#1f1f1f]">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <div className="max-w-[640px] mb-12">
          <Eyebrow>The comparison</Eyebrow>
          <h2 className="text-white mt-4" style={{ fontSize: 'clamp(32px, 4.2vw, 56px)', fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1.02 }}>
            What you've been asking for. For ten years.
          </h2>
          <p className="text-[#a3a3a3] mt-5 leading-[1.55]" style={{ fontSize: 'clamp(15px, 1.8vw, 17px)' }}>
            ESPN, Sleeper, and Yahoo are great at what they do. We built everything they haven't gotten to yet.
          </p>
        </div>
        <div className="rounded-xl border border-[#1f1f1f] overflow-hidden bg-[#0c0c0c] overflow-x-auto">
          <table className="w-full min-w-[580px]">
            <thead>
              <tr className="border-b border-[#1f1f1f]">
                <th className="text-left px-4 sm:px-6 py-4 text-[11px] font-medium uppercase tracking-wider text-[#525252]">Feature</th>
                <th className="text-center px-2 sm:px-4 py-4 text-[11px] font-medium uppercase tracking-wider" style={{ color: C.green }}>TC</th>
                <th className="text-center px-2 sm:px-4 py-4 text-[11px] font-medium uppercase tracking-wider text-[#525252]">ESPN</th>
                <th className="text-center px-2 sm:px-4 py-4 text-[11px] font-medium uppercase tracking-wider text-[#525252]">Sleeper</th>
                <th className="text-center px-2 sm:px-4 py-4 text-[11px] font-medium uppercase tracking-wider text-[#525252]">Yahoo</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} className="border-b border-[#1f1f1f]/50 last:border-0 hover:bg-white/[0.015]">
                  <td className="px-4 sm:px-6 py-3 text-[13px] sm:text-[14px] text-[#d4d4d4]">{r.label}</td>
                  <td className="text-center px-2 sm:px-4 py-3" style={{ background: r.tc === 'yes' ? 'rgba(0,255,136,0.04)' : 'transparent' }}><Cell v={r.tc} /></td>
                  <td className="text-center px-2 sm:px-4 py-3"><Cell v={r.espn} /></td>
                  <td className="text-center px-2 sm:px-4 py-3"><Cell v={r.sleeper} /></td>
                  <td className="text-center px-2 sm:px-4 py-3"><Cell v={r.yahoo} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="mt-4 flex items-center gap-5 text-[11px] text-[#525252]">
          <span><span className="text-[#00ff88]">●</span> Built-in</span>
          <span><span className="text-[#666]">◐</span> Partial</span>
          <span><span className="text-[#2a2a2a]">○</span> Not supported</span>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────
function FAQSection() {
  const items = window.MKT.FAQ;
  const [open, setOpen] = useS(-1);
  return (
    <section className="py-20 sm:py-32 border-t border-[#1f1f1f]">
      <div className="max-w-[860px] mx-auto px-4 sm:px-6">
        <div className="text-center mb-12 sm:mb-14">
          <Eyebrow>FAQ</Eyebrow>
          <h2 className="text-white mt-4" style={{ fontSize: 'clamp(32px, 4.2vw, 56px)', fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1.02 }}>
            Reasonable questions.
          </h2>
        </div>
        <div className="divide-y divide-[#1f1f1f] border-t border-b border-[#1f1f1f]">
          {items.map((f, i) => (
            <div key={i}>
              <button onClick={() => { setOpen(open === i ? -1 : i); }}
                      className="w-full flex items-center justify-between gap-4 sm:gap-6 py-5 sm:py-6 text-left group">
                <span className="text-[14px] sm:text-[16px] font-medium text-white">{f.q}</span>
                <span className="shrink-0 text-[18px] text-[#525252] group-hover:text-white transition-colors">{open === i ? '–' : '+'}</span>
              </button>
              {open === i && (
                <p className="pb-6 sm:pb-7 -mt-2 text-[14px] sm:text-[15px] text-[#a3a3a3] leading-[1.6] max-w-[720px]" style={{ textWrap: 'pretty' }}>{f.a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA ────────────────────────────────────────────────────────
function CTASection() {
  return (
    <section id="waitlist" className="py-28 sm:py-40 border-t border-[#1f1f1f] relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" style={{ background: 'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,255,136,0.06) 0%, transparent 70%)' }} />
      <div className="max-w-[760px] mx-auto px-4 sm:px-6 text-center relative">
        <Eyebrow>Beta</Eyebrow>
        <h2 className="text-white mt-4" style={{ fontSize: 'clamp(36px, 5.5vw, 76px)', fontWeight: 600, letterSpacing: '-0.032em', lineHeight: 1, textWrap: 'balance' }}>
          Your league, upgraded.
        </h2>
        <p className="text-[#a3a3a3] mt-7 mx-auto max-w-[520px] leading-[1.55]" style={{ fontSize: 'clamp(15px, 1.8vw, 17px)', textWrap: 'pretty' }}>
          Free in beta. Import your league from ESPN, Sleeper, Yahoo, MFL, or anywhere else. Takes about three minutes.
        </p>
        <form className="mt-10 flex flex-col sm:flex-row items-center gap-2 max-w-md mx-auto" onSubmit={e => { e.preventDefault(); }}>
          <input type="email" placeholder="commissioner@yourleague.com"
            className="w-full sm:flex-1 h-11 px-4 rounded-lg bg-[#141414] border border-[#1f1f1f] text-white placeholder-[#525252] focus:outline-none focus:border-[#2a2a2a] focus:bg-[#1a1a1a] transition-colors"
            style={{ fontSize: 14 }} />
          <button type="submit" className="w-full sm:w-auto h-11 px-5 rounded-lg bg-white text-black text-[14px] font-semibold hover:bg-[#e5e5e5] transition-colors">
            Join waitlist
          </button>
        </form>
        <div className="text-[12px] text-[#525252] mt-5">
          No spam. One email a month, max. We're better at follow-through than most commissioners.
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="border-t border-[#1f1f1f] py-12 sm:py-14">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-12 gap-8 pb-10 border-b border-[#1f1f1f]">
          <div className="col-span-2 sm:col-span-4 lg:col-span-4">
            <Wordmark size={15} />
            <p className="text-[13px] text-[#525252] mt-4 max-w-md leading-[1.55]">Fantasy football, with two minds of its own. Free in beta.</p>
          </div>
          {[
            { h: 'Product', items: ['Draft Room','Commissioner','Lieutenant','Mock Draft','Portfolio'] },
            { h: 'Formats', items: ['Dynasty','Devy','Empire','Salary Cap','IDP'] },
            { h: 'Compare', items: ['vs. ESPN','vs. Sleeper','vs. Yahoo','Import guide'] },
            { h: 'Company', items: ['About','Blog','Changelog','Contact'] },
          ].map(c => (
            <div key={c.h} className="col-span-1 lg:col-span-2">
              <div className="text-[12px] font-semibold text-white mb-3">{c.h}</div>
              <ul className="space-y-2 text-[13px] text-[#a3a3a3]">
                {c.items.map(i => <li key={i}><a href="#" className="hover:text-white transition-colors">{i}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-[12px] text-[#525252]">
          <div>© 2026 The Commissioner. Not affiliated with the NFL, ESPN, or your friend Marcus.</div>
          <div className="flex gap-6">
            <a href="#" className="hover:text-white transition-colors">Privacy</a>
            <a href="#" className="hover:text-white transition-colors">Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── Page ───────────────────────────────────────────────────────
function MarketingHome() {
  return (
    <div className="min-h-screen" style={{ background: C.bg, color: C.text }}>
      <Nav />
      <Hero />
      <ImportStrip />
      <CommissionerSection />
      <LieutenantSection />
      <DraftSection />
      <MultiLeagueSection />
      <FormatsSection />
      <CompareSection />
      <FAQSection />
      <CTASection />
      <Footer />
    </div>
  );
}

window.MarketingHome = MarketingHome;