// anTee-Up landing page — sections (top of page).
// Motion-rich. See landing/motion.jsx for primitives.

const t = window.A;

// ─── Sticky nav (hides on scroll down, returns on scroll up) ─────
function Nav() {
  const [hidden, setHidden] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const lastY = React.useRef(0);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const dir = y > lastY.current && y > 120;
      setHidden(dir);
      setScrolled(y > 24);
      lastY.current = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: scrolled ? '12px 48px' : '18px 48px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: scrolled
        ? 'rgba(9,25,16,0.92)'
        : 'linear-gradient(to bottom, rgba(9,25,16,0.96) 0%, rgba(9,25,16,0.5) 100%)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: scrolled ? '1px solid rgba(201,168,76,0.12)' : '1px solid transparent',
      transform: hidden ? 'translateY(-110%)' : 'translateY(0)',
      transition: `transform 350ms ${EASE_OUT_EXPO}, padding 220ms ${EASE_OUT_EXPO}, background 220ms linear, border-color 220ms linear`,
    }}>
      <a href="#top" style={{
        font: `700 20px/1 ${t.display}`, color: t.gold,
        letterSpacing: '-0.2px', textDecoration: 'none',
        whiteSpace: 'nowrap', flexShrink: 0,
      }}>
        an<em style={{ color: t.textPri, fontStyle: 'normal' }}>Tee-Up</em>
      </a>
      <ul style={{ display: 'flex', gap: 32, listStyle: 'none', alignItems: 'center', margin: 0, padding: 0 }}>
        {[['Features','#features'],['Formats','#formats'],['How','#how'],['Pricing','#pricing'],['FAQ','#faq']].map(([l, h]) => (
          <li key={l}>
            <a href={h} style={{
              color: t.textSec, textDecoration: 'none',
              font: `500 14px/1 ${t.body}`,
              position: 'relative',
              transition: `color 180ms ease`,
            }}
              onMouseEnter={e => e.currentTarget.style.color = t.gold}
              onMouseLeave={e => e.currentTarget.style.color = t.textSec}
            >{l}</a>
          </li>
        ))}
        <li>
          <MagneticButton href="#cta" strength={0.35} style={{
            background: t.gold, color: t.bgDarkest,
            padding: '9px 22px', borderRadius: 100,
            font: `600 13px/1 ${t.body}`, textDecoration: 'none', cursor: 'pointer',
          }}>Get the app</MagneticButton>
        </li>
      </ul>
    </nav>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────
function Hero({ accentWord = '19th' }) {
  const reduced = useReducedMotion();
  const mouse = useMousePosition();
  const heroRef = React.useRef(null);
  const [tiltRef, tiltTransform] = useTilt({ max: 5, perspective: 1400 });

  // cursor-following gold glow
  const [glow, setGlow] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    if (reduced || !heroRef.current) return;
    const rect = heroRef.current.getBoundingClientRect();
    setGlow({
      x: mouse.x - rect.left - rect.width / 2,
      y: Math.max(mouse.y - rect.top - 200, -200),
    });
  }, [mouse, reduced]);

  // parallax for the phone cluster
  const scrollY = useScroll();
  const phoneCluster = Math.min(scrollY * 0.18, 120);

  return (
    <section id="top" ref={heroRef} style={{
      minHeight: 'min(100vh, 920px)',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'flex-start',
      textAlign: 'center', padding: '128px 24px 60px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(201,168,76,0.035) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(201,168,76,0.035) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%)',
        pointerEvents: 'none',
      }}/>

      {/* static ambient glow */}
      <div style={{
        position: 'absolute', top: '8%', left: '50%', transform: 'translateX(-50%)',
        width: 800, height: 500,
        background: 'radial-gradient(ellipse, rgba(201,168,76,0.10) 0%, transparent 70%)',
        pointerEvents: 'none',
      }}/>

      {/* cursor-following glow */}
      {!reduced && (
        <div style={{
          position: 'absolute', left: '50%', top: 0,
          width: 480, height: 480, pointerEvents: 'none',
          background: 'radial-gradient(circle, rgba(201,168,76,0.10) 0%, transparent 70%)',
          transform: `translate(${glow.x - 240}px, ${glow.y + 120}px)`,
          transition: 'transform 1200ms cubic-bezier(0.16, 1, 0.3, 1)',
          willChange: 'transform',
          mixBlendMode: 'screen',
        }}/>
      )}

      <Reveal delay={50} dy={12} duration={600}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          font: `600 11px/1 ${t.body}`, letterSpacing: 3, textTransform: 'uppercase',
          color: t.gold,
          padding: '6px 16px', border: '1px solid rgba(201,168,76,0.25)',
          borderRadius: 100, background: 'rgba(201,168,76,0.05)',
          position: 'relative',
        }}>
          <span style={{
            width: 6, height: 6, background: t.gold, borderRadius: 999,
            animation: 'anteeBlink 2.2s ease-in-out infinite',
          }}/>
          For the group that plays for money
        </div>
      </Reveal>

      <Reveal delay={180} dy={24} duration={900}>
        <h1 style={{
          font: `900 clamp(56px, 9vw, 112px)/1.05 ${t.display}`,
          letterSpacing: '-3px', color: t.textPri,
          marginTop: 28, marginBottom: 0, position: 'relative',
          paddingBottom: '0.12em',
        }}>
          Settle up<br/>before the <em style={{
            color: t.gold, fontStyle: 'italic', position: 'relative',
            display: 'inline-block',
          }}>{accentWord}<span style={{
            position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,
            pointerEvents: 'none',
            background: 'linear-gradient(90deg, transparent 0%, rgba(255,240,200,0.45) 50%, transparent 100%)',
            backgroundSize: '200% 100%',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            animation: reduced ? 'none' : 'anteeShimmer 5s linear infinite',
          }}>{accentWord}</span></em>.
        </h1>
      </Reveal>

      <Reveal delay={320} dy={16} duration={800}>
        <p style={{
          font: `300 clamp(16px, 1.4vw, 19px)/1.7 ${t.body}`,
          color: t.textSec, maxWidth: 580,
          margin: '24px auto 40px', position: 'relative',
        }}>
          Track Nassau, Skins, Wolf, and 30+ other formats in real time.
          Live leaderboards, automatic wager settlement, and a wallet that handles every press, skin, and carry.
          Built for groups that have been doing this on paper.
        </p>
      </Reveal>

      <Reveal delay={440} dy={16} duration={800}>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', position: 'relative' }}>
          <Cta tone="gold"  pre="Download on the" name="App Store"/>
          <Cta tone="ghost" pre="Get it on"       name="Google Play"/>
        </div>
      </Reveal>

      <Reveal delay={540} dy={8} duration={600}>
        <div style={{
          font: `400 12px/1 ${t.body}`, color: t.textMuted,
          marginTop: 16, letterSpacing: '0.3px', position: 'relative',
        }}>Free during early access · No credit card · Cancel any time</div>
      </Reveal>

      <Reveal delay={660} dy={36} duration={1100}>
        <div style={{
          display: 'flex', gap: 18, justifyContent: 'center', alignItems: 'flex-end',
          marginTop: 56, position: 'relative',
          transform: `translateY(${-phoneCluster}px)`,
          transition: 'transform 80ms linear',
        }}>
          <div style={{
            animation: reduced ? 'none' : 'anteeFloatGentle 7s ease-in-out infinite',
            animationDelay: '0s',
          }}>
            <PhoneShell w={180} h={380} image="assets/landing-screens/home.png" alt="Active rounds list"/>
          </div>
          <div ref={tiltRef} style={{
            transform: tiltTransform,
            transition: `transform 200ms ${EASE_OUT_EXPO}`,
            willChange: 'transform',
            transformStyle: 'preserve-3d',
          }}>
            <div style={{
              animation: reduced ? 'none' : 'anteeFloat 5.5s ease-in-out infinite',
            }}>
              <PhoneShell w={210} h={440} featured image="assets/landing-screens/active_round.png" alt="Live leaderboard with Skins"/>
            </div>
          </div>
          <div style={{
            animation: reduced ? 'none' : 'anteeFloatGentle 7s ease-in-out infinite',
            animationDelay: '-3.5s',
          }}>
            <PhoneShell w={180} h={380} image="assets/landing-screens/wallet.png" alt="Wager wallet reservation"/>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function Cta({ tone, pre, name }) {
  const styles = tone === 'gold'
    ? { background: t.gold, color: t.bgDarkest, boxShadow: '0 8px 32px rgba(201,168,76,0.28)' }
    : { background: 'rgba(255,255,255,0.05)', color: t.textPri, border: '1px solid rgba(255,255,255,0.1)' };
  return (
    <MagneticButton strength={0.25} style={{
      padding: '13px 26px', borderRadius: 14, textDecoration: 'none', cursor: 'pointer',
      transition: `box-shadow .25s ease, background .2s ease, transform 400ms ${EASE_OUT_EXPO}`,
      ...styles,
    }}>
      <span style={{ display: 'flex', flexDirection: 'column', textAlign: 'left' }}>
        <span style={{ font: `400 10px/1.1 ${t.body}`, opacity: 0.75, letterSpacing: 0.3 }}>{pre}</span>
        <span style={{ font: `700 17px/1.2 ${t.body}`, marginTop: 2 }}>{name}</span>
      </span>
    </MagneticButton>
  );
}

// ─── Trust bar (counts-up) ────────────────────────────────────────
function TrustBar() {
  const items = [
    { num: 90,    suffix: 's',  label: 'round setup time' },
    { num: 10,    suffix: '+',  label: 'side-game formats' },
    { num: 4200,  suffix: '+',  label: 'rounds tracked' },
    { num: 100,   suffix: '%',  label: 'auto-settled bets' },
  ];
  return (
    <div style={{
      background: t.bgDark,
      borderTop: `1px solid ${t.divider}`, borderBottom: `1px solid ${t.divider}`,
      padding: '32px 48px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: 'linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.35) 50%, transparent 100%)',
      }}/>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        maxWidth: 1080, margin: '0 auto', flexWrap: 'wrap', gap: 24,
      }}>
        {items.map((it, i) => (
          <React.Fragment key={it.label}>
            <TrustItem {...it} delay={i * 100}/>
            {i < items.length - 1 && (
              <div style={{ width: 1, height: 44, background: t.divider }}/>
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function TrustItem({ num, suffix, label, delay }) {
  const [ref, value] = useCounter(num, { duration: 1600 });
  return (
    <Reveal delay={delay} dy={20} duration={700}>
      <div ref={ref} style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        padding: '0 32px', minWidth: 180,
      }}>
        <div style={{
          font: `900 36px/1 ${t.display}`, color: t.gold,
          letterSpacing: '-1px', display: 'flex', alignItems: 'baseline', gap: 1,
        }}>
          <span>{value.toLocaleString()}</span>
          <span style={{ font: `700 24px/1 ${t.display}`, color: t.gold }}>{suffix}</span>
        </div>
        <div style={{
          font: `500 12px/1.3 ${t.body}`, color: t.textSec,
          textTransform: 'uppercase', letterSpacing: 1.5,
        }}>{label}</div>
      </div>
    </Reveal>
  );
}

// ─── Section scaffolding ───────────────────────────────────────────
function Section({ id, bg, children, padX = 24, padY = 108 }) {
  return (
    <section id={id} style={{
      padding: `${padY}px ${padX}px`, background: bg, position: 'relative',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: 'linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.35) 50%, transparent 100%)',
      }}/>
      {children}
    </section>
  );
}

function SectionHead({ eyebrow, title, body, align = 'center' }) {
  return (
    <div style={{ textAlign: align, marginBottom: 64 }}>
      <Reveal dy={14} duration={600}>
        <div style={{
          font: `600 11px/1 ${t.body}`, letterSpacing: 3.5,
          textTransform: 'uppercase', color: t.gold, marginBottom: 16,
        }}>{eyebrow}</div>
      </Reveal>
      <Reveal delay={100} dy={24} duration={800}>
        <h2 style={{
          font: `700 clamp(34px, 5vw, 56px)/1.08 ${t.display}`,
          color: t.textPri, letterSpacing: '-1.5px',
          margin: '0 auto 16px', maxWidth: 720,
        }}>{title}</h2>
      </Reveal>
      <Reveal delay={220} dy={16} duration={700}>
        <p style={{
          font: `300 16px/1.7 ${t.body}`, color: t.textSec,
          maxWidth: 540, margin: align === 'center' ? '0 auto' : '0',
        }}>{body}</p>
      </Reveal>
    </div>
  );
}

// ─── Features ──────────────────────────────────────────────────────
function FeatureCard({ icon, title, body }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: t.cardBg,
        border: `1px solid ${hovered ? t.cardBorderHover : t.cardBorder}`,
        borderRadius: 22, padding: '36px 28px',
        transform: hovered ? 'translateY(-6px)' : 'translateY(0)',
        boxShadow: hovered ? '0 24px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.08)' : 'none',
        transition: `border-color .35s ease, box-shadow .35s ease, transform .35s ${EASE_OUT_EXPO}`,
        position: 'relative', overflow: 'hidden',
      }}>
      {/* hover sheen */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(circle 240px at 50% 0%, rgba(201,168,76,0.07), transparent)',
        opacity: hovered ? 1 : 0,
        transition: 'opacity .35s ease',
      }}/>
      <div style={{
        width: 52, height: 52, borderRadius: 14,
        background: hovered
          ? 'linear-gradient(135deg, rgba(201,168,76,0.22), rgba(201,168,76,0.06))'
          : 'linear-gradient(135deg, rgba(201,168,76,0.14), rgba(201,168,76,0.04))',
        border: '1px solid rgba(201,168,76,0.2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: t.gold, marginBottom: 22,
        transform: hovered ? 'rotate(-4deg)' : 'rotate(0)',
        transition: `transform .35s ${EASE_OUT_EXPO}, background .35s ease`,
      }}>{icon}</div>
      <div style={{ font: `700 19px/1.3 ${t.display}`, color: t.textPri, marginBottom: 10 }}>{title}</div>
      <p style={{ font: `300 14px/1.7 ${t.body}`, color: t.textSec, margin: 0 }}>{body}</p>
    </div>
  );
}

function Features() {
  const cards = [
    [<AIcons.flag/>,     '10+ side-game formats',  "Nassau, Skins, Wolf, Stableford, Presses, Snake, Birdie Pool. Configure your format once — every hole is tracked automatically from tee to green."],
    [<AIcons.activity/>, 'Live leaderboards',      "Scores sync instantly across every player's phone — iOS and Android. The moment a score drops, the leaderboard updates for everyone."],
    [<AIcons.wallet/>,   'Wager wallet',           "A running ledger for every side bet, press, and carryover skin. When the round ends, the app shows exactly who owes who."],
    [<AIcons.shield/>,   'Handicap tracking',      "Enter each player's handicap once. anTee-Up allocates strokes per-hole so every player competes on a level field — no manual lookup, no on-tee math."],
    [<AIcons.users/>,    'Groups & seasons',       "Create your crew, schedule recurring rounds, track season standings. Running a Saturday game? Set it up once."],
    [<AIcons.clock/>,    'Round setup in 90s',     "Set your course, choose your format, name your stakes, send invites. Nobody waits on the first tee while you configure a scoring app."],
  ];
  return (
    <Section id="features" bg={t.bgPrimary}>
      <SectionHead
        eyebrow="Everything your group needs"
        title={<>Built for the way<br/>serious golfers play</>}
        body="Ten formats. Live leaderboards. Automatic settlement. Everything your group has been doing on paper or in a group chat — done right."
      />
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        maxWidth: 1080, margin: '0 auto',
      }}>
        <Stagger step={80} dy={32}>
          {cards.map(([icon, ttl, body]) => (
            <FeatureCard key={ttl} icon={icon} title={ttl} body={body}/>
          ))}
        </Stagger>
      </div>
    </Section>
  );
}

// ─── Formats (interactive picker with animated indicator) ─────────
function Formats() {
  const formats = [
    { name: 'Nassau',      desc: 'Three matches in one — front nine, back nine, overall 18. The classic. Bet $5 / $5 / $5 and your front-nine loss can carry into the back.' },
    { name: 'Skins',       desc: 'Lowest net score wins the hole. Tied holes "carry" until somebody wins outright. By the back nine, the pot can be huge.' },
    { name: 'Wolf',        desc: 'A rotating "wolf" each hole picks a partner off the tee — or goes solo for double points. Almost impossible to track on paper. anTee-Up does it for you.' },
    { name: 'Match Play',  desc: 'Player vs. player, hole by hole. Win the hole, you go 1-up. Lose, you go 1-down. First to be up by more holes than remain wins.' },
    { name: 'Stroke Play', desc: 'Total strokes over 18. Net or gross. The straightforward one. Use it when nobody wants to think about side games.' },
    { name: 'Stableford',  desc: "Points per hole based on net score relative to par. Triple bogey doesn't blow up your card — it just stops scoring." },
    { name: 'Presses',     desc: 'A new bet inside the existing one. Down 2 going into the 6th? Press — start a new match worth half the original stake from this hole on.' },
    { name: 'Snake',       desc: "Whoever three-putts last is \"holding the snake\" — pays a small amount at round's end. The most-feared putt in golf isn't the four-footer for par." },
    { name: 'Birdie Pool', desc: 'Pre-round pot. Most birdies wins. Tied → split. Some groups add: bogey-free 18 doubles your share.' },
    { name: 'Bingo Bango Bongo', desc: 'Three points per hole: first on, closest once all are on, first in. Rewards short game and pace, not just length. Beloved among mixed-handicap groups.' },
  ];
  const [active, setActive] = React.useState(0);
  const listRef = React.useRef(null);
  const [indicator, setIndicator] = React.useState({ top: 0, height: 0 });
  React.useLayoutEffect(() => {
    const el = listRef.current?.children[active];
    if (!el) return;
    setIndicator({ top: el.offsetTop, height: el.offsetHeight });
  }, [active]);

  return (
    <Section id="formats" bg={t.bgDarkest}>
      <SectionHead
        eyebrow="Ten formats. One app."
        title={<>Pick the game.<br/>The rest is automatic.</>}
        body="From the classic Nassau to formats most apps don't touch — Wolf, Bingo Bango Bongo, Snake. Tap any to see how it works."
      />
      <div className="split-grid" style={{
        display: 'grid', gridTemplateColumns: '320px 1fr', gap: 28,
        maxWidth: 1080, margin: '0 auto',
      }}>
        {/* picker */}
        <div ref={listRef} style={{
          display: 'flex', flexDirection: 'column', gap: 6, position: 'relative',
        }}>
          {/* animated indicator */}
          <div style={{
            position: 'absolute', left: 0, right: 0,
            top: indicator.top, height: indicator.height,
            background: 'rgba(201,168,76,0.10)',
            border: '1px solid rgba(201,168,76,0.35)',
            borderRadius: 12,
            transition: `top 450ms ${EASE_OUT_EXPO}, height 450ms ${EASE_OUT_EXPO}`,
            pointerEvents: 'none',
            boxShadow: '0 8px 24px rgba(201,168,76,0.10)',
          }}/>
          {formats.map((f, i) => (
            <button key={f.name}
              onClick={() => setActive(i)}
              style={{
                textAlign: 'left', cursor: 'pointer',
                background: 'transparent',
                border: '1px solid transparent',
                borderRadius: 12, padding: '14px 18px',
                font: `600 15px/1 ${t.body}`,
                color: i === active ? t.gold : t.textSec,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                transition: `color 280ms ease`,
                position: 'relative', zIndex: 1,
              }}
              onMouseEnter={e => i !== active && (e.currentTarget.style.color = t.textPri)}
              onMouseLeave={e => i !== active && (e.currentTarget.style.color = t.textSec)}>
              {f.name}
              <span style={{
                color: t.gold,
                opacity: i === active ? 1 : 0,
                transform: i === active ? 'translateX(0)' : 'translateX(-6px)',
                transition: `opacity 280ms ease, transform 280ms ${EASE_OUT_EXPO}`,
              }}><AIcons.arrow/></span>
            </button>
          ))}
        </div>

        {/* description card with crossfade swap */}
        <div style={{
          background: t.cardBg, border: `1px solid ${t.cardBorderHover}`,
          borderRadius: 22, padding: 40,
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          minHeight: 360, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: 0, right: 0, width: 240, height: 240,
            background: 'radial-gradient(circle, rgba(201,168,76,0.10), transparent 70%)',
            pointerEvents: 'none',
          }}/>
          <FormatDescription key={active} format={formats[active]} index={active} total={formats.length}/>
        </div>
      </div>
    </Section>
  );
}

// Description block re-mounts on key change → entry animation re-runs.
function FormatDescription({ format, index, total }) {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => { const id = requestAnimationFrame(() => setMounted(true)); return () => cancelAnimationFrame(id); }, []);
  const baseStyle = {
    opacity: mounted ? 1 : 0,
    transform: mounted ? 'translateY(0)' : 'translateY(14px)',
    transition: `opacity 500ms ${EASE_OUT_EXPO}, transform 500ms ${EASE_OUT_EXPO}`,
  };
  return (
    <>
      <div style={{
        font: `600 11px/1 ${t.body}`, letterSpacing: 3,
        textTransform: 'uppercase', color: t.gold, marginBottom: 16,
        ...baseStyle,
        transitionDelay: '0ms',
      }}>Format · {String(index + 1).padStart(2, '0')} of {total}</div>
      <h3 style={{
        font: `700 42px/1.05 ${t.display}`, color: t.textPri,
        letterSpacing: '-1.2px', margin: 0, marginBottom: 18,
        ...baseStyle,
        transition: `opacity 600ms ${EASE_OUT_EXPO} 60ms, transform 600ms ${EASE_OUT_EXPO} 60ms`,
      }}>{format.name}</h3>
      <p style={{
        font: `300 17px/1.7 ${t.body}`, color: t.textSec, margin: 0, maxWidth: 520,
        ...baseStyle,
        transition: `opacity 600ms ${EASE_OUT_EXPO} 130ms, transform 600ms ${EASE_OUT_EXPO} 130ms`,
      }}>{format.desc}</p>
      <div style={{
        display: 'flex', gap: 14, marginTop: 32,
        paddingTop: 24, borderTop: `1px solid ${t.divider}`,
        flexWrap: 'wrap',
        ...baseStyle,
        transition: `opacity 600ms ${EASE_OUT_EXPO} 200ms, transform 600ms ${EASE_OUT_EXPO} 200ms`,
      }}>
        <Badge>Auto-scored</Badge>
        <Badge>Handicap-aware</Badge>
        <Badge>Settled in-app</Badge>
      </div>
    </>
  );
}

function Badge({ children }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px', borderRadius: 999,
      background: 'rgba(201,168,76,0.08)',
      border: '1px solid rgba(201,168,76,0.2)',
      color: t.gold, font: `500 11px/1 ${t.body}`, letterSpacing: 0.3,
    }}>
      <span style={{ color: t.gold }}><AIcons.check/></span>
      {children}
    </div>
  );
}

Object.assign(window, { Nav, Hero, TrustBar, Section, SectionHead, Features, Formats, Cta, Badge });