// anTee-Up landing page — sections (bottom half of page). Motion-rich.
const t2 = window.A;

// ─── How it works (3 steps with animated connector) ──────────────
function HowItWorks() {
  const [ref, visible] = useReveal({ threshold: 0.3 });
  return (
    <Section id="how" bg={t2.bgPrimary}>
      <SectionHead
        eyebrow="Simple by design"
        title={<>Up and running before<br />the first tee</>}
        body="Getting your group set up takes less time than finding a cart." />
      
      <div ref={ref} className="triple-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40,
        maxWidth: 940, margin: '0 auto', position: 'relative'
      }}>
        {/* draw-line connector */}
        <div style={{
          position: 'absolute', top: 32, left: '16%', right: '16%', height: 1,
          background: 'linear-gradient(90deg, rgba(201,168,76,0.08), rgba(201,168,76,0.5), rgba(201,168,76,0.08))',
          transformOrigin: '0% 50%',
          transform: visible ? 'scaleX(1)' : 'scaleX(0)',
          transition: `transform 1100ms ${EASE_OUT_EXPO} 400ms`
        }} />
        {[
        ['1', 'Create your round', 'Choose your course, set your format and stakes, send the group an invite link. The whole setup takes under 90 seconds.'],
        ['2', 'Score hole by hole', 'Enter scores as you play. Every bet, press, and skin updates live on every phone in the group — no refresh needed.'],
        ['3', 'Settle up automatically', "Round over. anTee-Up calculates every side game result and shows each player's exact balance — who owes who, and how much."]].
        map(([n, ttl, body], i) =>
        <Reveal key={n} delay={200 + i * 120} dy={28} duration={800}>
            <Step n={n} title={ttl} body={body} />
          </Reveal>
        )}
      </div>
    </Section>);

}

function Step({ n, title, body }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center', gap: 18
      }}>
      <div style={{
        width: 64, height: 64, borderRadius: '50%',
        background: 'linear-gradient(135deg, rgba(201,168,76,0.18), rgba(201,168,76,0.05))',
        border: '1.5px solid rgba(201,168,76,0.36)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        font: `900 26px/1 ${t2.display}`, color: t2.gold,
        position: 'relative', zIndex: 1,
        transform: hover ? 'scale(1.08)' : 'scale(1)',
        boxShadow: hover ? '0 8px 24px rgba(201,168,76,0.25)' : 'none',
        transition: `transform 380ms ${EASE_OUT_EXPO}, box-shadow 380ms ease`
      }}>{n}</div>
      <div style={{ font: `700 20px/1.3 ${t2.display}`, color: t2.textPri }}>{title}</div>
      <p style={{ font: `300 14px/1.7 ${t2.body}`, color: t2.textSec, maxWidth: 250, margin: 0 }}>{body}</p>
    </div>);

}

// ─── Inside a round (split: text + phone, slide from opposite sides) ──
function InsideRound() {
  return (
    <Section id="inside" bg={t2.bgDarkest}>
      <div className="split-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        maxWidth: 1100, margin: '0 auto', alignItems: 'center'
      }}>
        <SlideIn dx={-40}>
          <div>
            <div style={{
              font: `600 11px/1 ${t2.body}`, letterSpacing: 3.5,
              textTransform: 'uppercase', color: t2.gold, marginBottom: 16
            }}>Inside an active round</div>
            <h2 style={{
              font: `700 clamp(34px, 4.4vw, 52px)/1.08 ${t2.display}`,
              color: t2.textPri, letterSpacing: '-1.5px', margin: '0 0 24px'
            }}>
              Every score on<br />every phone, <em style={{ color: t2.gold, fontStyle: 'italic' }}>instantly.</em>
            </h2>
            <p style={{ font: `300 17px/1.7 ${t2.body}`, color: t2.textSec, marginBottom: 32 }}>
              Tap in a score and watch it move across every player's leaderboard before they've put the
              flagstick back. Every format running at once — Stableford, Match Play, Skins — switchable with one tap.
            </p>
            <BulletList items={[
            ['Live position changes', 'Who moved up, who slid back, who pressed.'],
            ['Carry-skin tracker', 'Watch the pot grow as holes tie out. Win one, take everything.'],
            ['Your-row highlight', 'Find yourself at a glance — even on a packed leaderboard.'],
            ['Per-hole net', "Strokes applied automatically using each player's handicap index."]]
            } />
          </div>
        </SlideIn>
        <SlideIn dx={40}>
          <FloatingPhone phoneW={280} phoneH={580} image="assets/landing-screens/active_round.png" alt="Live Skins leaderboard"/>
        </SlideIn>
      </div>
    </Section>);

}

// ─── Wallet section (reverse split) ───────────────────────────────
function WalletSection() {
  return (
    <Section id="wallet" bg={t2.bgPrimary}>
      <div className="split-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        maxWidth: 1100, margin: '0 auto', alignItems: 'center'
      }}>
        <SlideIn dx={-40}>
          <FloatingPhone phoneW={280} phoneH={580} image="assets/landing-screens/wallet.png" alt="Wager wallet reservation"/>
        </SlideIn>
        <SlideIn dx={40}>
          <div>
            <div style={{
              font: `600 11px/1 ${t2.body}`, letterSpacing: 3.5,
              textTransform: 'uppercase', color: t2.gold, marginBottom: 16
            }}>Settlement, not spreadsheets</div>
            <h2 style={{
              font: `700 clamp(34px, 4.4vw, 52px)/1.08 ${t2.display}`,
              color: t2.textPri, letterSpacing: '-1.5px', margin: '0 0 24px'
            }}>
              Twenty minutes<br />becomes <em style={{ color: t2.gold, fontStyle: 'italic' }}>zero.</em>
            </h2>
            <p style={{ font: `300 17px/1.7 ${t2.body}`, color: t2.textSec, marginBottom: 32 }}>
              Round ends, app does the math. Every Nassau leg, every skin carry, every press, every snake — added
              up, broken down, and matched against your group so nobody owes the same person twice.
            </p>
            <BulletList items={[
            ['Per-bet breakdown', 'See exactly what won what — not just a total.'],
            ['Optimized payouts', 'Four players, three transfers. Nobody pays the same person twice.'],
            ['Cash, Venmo, or in-app', 'Mark settled however your group handles it.'],
            ['Round history', 'Every round, every wager, searchable forever.']]
            } />
          </div>
        </SlideIn>
      </div>
    </Section>);

}

// ─── Slide-in wrapper (uses stylesheet-driven Reveal with horizontal offset) ─
function SlideIn({ children, dx = 0, dy = 0, delay = 0, duration = 800, threshold = 0.18 }) {
  return (
    <Reveal dx={dx} dy={dy} delay={delay} duration={duration} threshold={threshold}>
      {children}
    </Reveal>);

}

// Subtle floating phone with tilt
function FloatingPhone({ phoneW = 280, phoneH = 580, children, image, alt }) {
  const [tiltRef, transform] = useTilt({ max: 5, perspective: 1400 });
  const reduced = useReducedMotion();
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div ref={tiltRef} style={{
        transform,
        transition: `transform 240ms ${EASE_OUT_EXPO}`,
        willChange: 'transform'
      }}>
        <div style={{
          animation: reduced ? 'none' : 'anteeFloat 6s ease-in-out infinite'
        }}>
          <PhoneShell w={phoneW} h={phoneH} image={image} alt={alt}>{children}</PhoneShell>
        </div>
      </div>
    </div>);

}

function BulletList({ items }) {
  return (
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
      {items.map(([h, b], i) =>
      <Reveal key={h} delay={i * 90} dy={12} duration={600}>
          <li style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <span style={{
            width: 22, height: 22, borderRadius: 999,
            background: 'rgba(201,168,76,0.12)', color: t2.gold,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0, marginTop: 2,
            border: '1px solid rgba(201,168,76,0.25)'
          }}><AIcons.check /></span>
            <div>
              <div style={{ font: `600 15px/1.4 ${t2.body}`, color: t2.textPri }}>{h}</div>
              <div style={{ font: `300 13px/1.5 ${t2.body}`, color: t2.textMuted, marginTop: 2 }}>{b}</div>
            </div>
          </li>
        </Reveal>
      )}
    </ul>);

}

// ─── Groups & seasons ─────────────────────────────────────────────
function GroupFeatures() {
  const items = [
  ['Recurring rounds', 'Saturday Nassau, Wednesday Wolf, Sunday Skins. Pre-set the format and stakes so the round is one tap away.'],
  ['Season standings', 'Cumulative leaderboard across every round in a season. Total winnings, best-round, longest streak.'],
  ['Tournaments & events', "Buy-in deadlines, RSVP, automatic seeding. Run a member-guest the way you'd run a Tuesday round."]];

  return (
    <Section id="groups" bg={t2.bgDarkest}>
      <SectionHead
        eyebrow="Groups & seasons"
        title={<>For the same eight guys,<br />every Saturday in October.</>}
        body="Set up a recurring group once. Format, stakes, players — saved. Roll the next round in two taps." />
      
      <div className="triple-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        maxWidth: 1080, margin: '0 auto'
      }}>
        <Stagger step={100} dy={28}>
          {items.map(([h, b], i) =>
          <div key={h} style={{
            background: t2.cardBg, border: `1px solid ${t2.cardBorder}`,
            borderRadius: 22, padding: 36,
            height: '100%', boxSizing: 'border-box',
          }}>
              <div style={{
              font: `900 38px/1 ${t2.display}`, color: t2.gold, opacity: 0.4, marginBottom: 16
            }}>0{i + 1}</div>
              <div style={{ font: `700 22px/1.25 ${t2.display}`, color: t2.textPri, marginBottom: 12 }}>{h}</div>
              <p style={{ font: `300 14px/1.7 ${t2.body}`, color: t2.textSec, margin: 0 }}>{b}</p>
            </div>
          )}
        </Stagger>
      </div>
    </Section>);

}

// ─── Testimonials ─────────────────────────────────────────────────
function Testimonials() {
  const items = [
  { initial: 'M', name: 'Mark S.', detail: '7.4 hdcp  ·  Atlanta, GA',
    quote: "We've run the same Saturday Nassau game for six years. Settling up used to take twenty minutes and somebody always disputed something. With anTee-Up, everyone sees the same numbers in real time. Haven't had an argument since." },
  { initial: 'J', name: 'Jennifer P.', detail: '14.2 hdcp  ·  Scottsdale, AZ',
    quote: "Wolf is almost impossible to track manually — who's up, who went solo, what the point value is by the back nine. anTee-Up handles all of it automatically. Our group switched to Wolf permanently." },
  { initial: 'C', name: 'Chris D.', detail: '3.1 hdcp  ·  Charlotte, NC',
    quote: "First hole I entered my score and watched it appear on my buddy's phone across the fairway. That was it for me. The live leaderboard keeps everyone honest and makes the back nine feel like an actual tournament." }];

  return (
    <Section id="reviews" bg={t2.bgPrimary}>
      <SectionHead
        eyebrow="From early-access members"
        title={<>Groups that stopped<br />doing post-round math</>}
        body="What it's like when every bet, press, and skin is tracked automatically." />
      
      <div className="triple-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        maxWidth: 1080, margin: '0 auto'
      }} data-comment-anchor="c729a56f00-div-259-7">
        <Stagger step={120} dy={28}>
          {items.map((it) => <TestimonialCard key={it.name} {...it} />)}
        </Stagger>
      </div>
    </Section>);

}

function TestimonialCard({ quote, name, detail, initial }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: t2.cardBg,
        border: `1px solid ${hover ? t2.cardBorderHover : t2.cardBorder}`,
        borderRadius: 22, padding: 36,
        display: 'flex', flexDirection: 'column', gap: 22,
        height: '100%', boxSizing: 'border-box',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: `border-color .35s ease, transform .35s ${EASE_OUT_EXPO}`
      }}>
      <div style={{ display: 'flex', gap: 2, color: t2.gold }}>
        {[0, 1, 2, 3, 4].map((i) => <AIcons.star key={i} />)}
      </div>
      <p style={{ font: `300 15px/1.75 ${t2.body}`, color: t2.textPri, flex: 1, margin: 0 }}>"{quote}"</p>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        paddingTop: 18, borderTop: `1px solid ${t2.divider}`
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%',
          background: `linear-gradient(135deg, ${t2.bgMid}, ${t2.bgLight})`,
          border: '1.5px solid rgba(201,168,76,0.22)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          font: `600 15px/1 ${t2.display}`, color: t2.gold
        }}>{initial}</div>
        <div>
          <div style={{ font: `600 14px/1.35 ${t2.body}`, color: t2.textPri }}>{name}</div>
          <div style={{ font: `300 12px/1 ${t2.body}`, color: t2.textMuted, marginTop: 4 }}>{detail}</div>
        </div>
      </div>
    </div>);

}

// ─── Pricing ──────────────────────────────────────────────────────
function Pricing() {
  const tiers = [
  {
    name: 'Solo', price: 'Free', sub: 'For trying it out',
    featured: false, cta: 'Get started',
    perks: ['Up to 3 active rounds / mo', 'All scoring formats', 'Live leaderboards', 'Basic wager tracking', 'Solo handicap']
  },
  {
    name: 'Group', price: '$6', period: '/ player / mo', sub: 'For the Saturday crew',
    featured: true, cta: 'Start free 30-day trial',
    perks: ['Unlimited rounds', 'Up to 16-player groups', 'Full wager wallet', 'Recurring round templates', 'Access to 30+ game modes', 'Season standings', 'Priority support']
  },
  {
    name: 'Crew', price: '$24', period: '/ group / mo', sub: 'For the club-house regulars',
    featured: false, cta: 'Get in touch',
    perks: ['Everything in Group', 'Unlimited group size', 'Tournaments & events', 'Member-guest mode', 'Custom branding', 'Course operator dashboard', 'Dedicated support']
  }];

  return (
    <Section id="pricing" bg={t2.bgDarkest}>
      <SectionHead
        eyebrow="Pricing"
        title={<>Free to set up.<br />Cheaper than a sleeve.</>}
        body="Try it free during early access. When you're ready to commit, our most popular plan is less than a Pro V1." />
      
      <div className="triple-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        maxWidth: 1080, margin: '0 auto', alignItems: 'stretch'
      }} data-comment-anchor="199b92e362-div-335-7">
        <Stagger step={130} dy={32}>
          {tiers.map((tier) => <PricingCard key={tier.name} {...tier} />)}
        </Stagger>
      </div>
    </Section>);

}

function PricingCard({ name, price, period, sub, featured, cta, perks }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: featured ? 'rgba(201,168,76,0.04)' : t2.cardBg,
        border: `1px solid ${featured ? 'rgba(201,168,76,0.38)' : t2.cardBorder}`,
        borderRadius: 22, padding: 32,
        display: 'flex', flexDirection: 'column',
        height: '100%', boxSizing: 'border-box',
        position: 'relative',
        transform: hover ? 'translateY(-6px)' : 'translateY(0)',
        boxShadow: hover ?
        '0 24px 64px rgba(0,0,0,0.4)' :
        featured ? '0 12px 32px rgba(201,168,76,0.08)' : 'none',
        transition: `transform .35s ${EASE_OUT_EXPO}, box-shadow .35s ease, border-color .35s ease`
      }}>
      {featured &&
      <div style={{
        position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
        background: t2.gold, color: t2.bgDarkest,
        padding: '5px 14px', borderRadius: 999,
        font: `700 10px/1 ${t2.body}`, letterSpacing: 1.5, textTransform: 'uppercase',
        whiteSpace: 'nowrap',
        animation: 'anteeRingPulse 2.6s ease-out infinite'
      }}>Most popular</div>
      }
      <div style={{ font: `700 22px/1 ${t2.display}`, color: t2.textPri }}>{name}</div>
      <div style={{ font: `300 13px/1 ${t2.body}`, color: t2.textMuted, marginTop: 6 }}>{sub}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 22 }}>
        <span style={{ font: `900 44px/1 ${t2.display}`, color: featured ? t2.gold : t2.textPri }}>{price}</span>
        {period && <span style={{ font: `400 13px/1 ${t2.body}`, color: t2.textMuted }}>{period}</span>}
      </div>
      <ul style={{
        listStyle: 'none', padding: 0, margin: '24px 0 28px',
        display: 'flex', flexDirection: 'column', gap: 11, flex: 1
      }}>
        {perks.map((p) =>
        <li key={p} style={{ display: 'flex', gap: 10, alignItems: 'flex-start',
          font: `300 14px/1.5 ${t2.body}`, color: t2.textSec }}>
            <span style={{ color: t2.gold, flexShrink: 0, marginTop: 2 }}><AIcons.check /></span>
            {p}
          </li>
        )}
      </ul>
      <MagneticButton strength={featured ? 0.15 : 0.08} style={{
        display: 'block', textAlign: 'center', cursor: 'pointer',
        padding: '13px 22px', borderRadius: 12, textDecoration: 'none',
        font: `600 14px/1 ${t2.body}`,
        ...(featured ?
        { background: t2.gold, color: t2.bgDarkest, boxShadow: '0 8px 24px rgba(201,168,76,0.24)' } :
        { background: 'rgba(255,255,255,0.04)', color: t2.textPri, border: '1px solid rgba(255,255,255,0.12)' })

      }}>{cta}</MagneticButton>
    </div>);

}

// ─── FAQ ──────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
  ['What formats does anTee-Up support?',
  'On launch: Nassau, Skins, Match Play, Stroke Play, Wolf, Stableford, Presses, Snake, Birdie Pool, and Bingo Bango Bongo. Subscribers get access to the full library of 30+ side-game modes as we roll them out — and you can stack multiple formats in the same round.'],
  ['Do I need to track my handicap manually?',
  "You can enter your handicap once during setup and anTee-Up allocates strokes hole-by-hole. There's no GHIN integration yet, but the math runs the same way whether your index is official or your group-agreed."],
  ['Does the app work without cell signal?',
  'Yes. You enter scores offline, and they sync the moment any phone in the group regains signal. The leaderboard updates as soon as one player reaches a tower.'],
  ['How does settlement actually work?',
  'The app calculates every bet, every press, every skin carry. It then optimizes the payouts so nobody pays the same person twice. You can mark each transfer settled (cash, Venmo, in-app) and the ledger updates.'],
  ['What if my group plays a custom format?',
  'Most "custom" formats are variants of the ten we ship — stakes, carry rules, point values are all configurable. If yours genuinely isn\'t there, tell us. Our Crew plan includes custom formats.'],
  ['Can I cancel?',
  "Yes, any time. Your round history stays with you forever. We don't hold your data hostage."]];

  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" bg={t2.bgPrimary}>
      <SectionHead
        eyebrow="Frequently asked"
        title="Questions, answered"
        body="If yours isn't here, hit us up via the in-app chat. We're real golfers, and we usually reply between rounds." />
      
      <div style={{ maxWidth: 780, margin: '0 auto' }}>
        <Stagger step={70} dy={14}>
          {qs.map(([q, a], i) =>
          <FAQItem key={q} q={q} a={a} isOpen={open === i} isLast={i === qs.length - 1}
          onToggle={() => setOpen(open === i ? -1 : i)} />
          )}
        </Stagger>
      </div>
    </Section>);

}

function FAQItem({ q, a, isOpen, isLast, onToggle }) {
  const ref = React.useRef(null);
  const [maxH, setMaxH] = React.useState(0);
  React.useLayoutEffect(() => {
    if (ref.current) setMaxH(isOpen ? ref.current.scrollHeight + 24 : 0);
  }, [isOpen, a]);
  return (
    <div style={{
      borderTop: `1px solid ${t2.divider}`,
      borderBottom: isLast ? `1px solid ${t2.divider}` : 'none'
    }}>
      <button onClick={onToggle}
      style={{
        width: '100%', background: 'transparent', border: 'none',
        padding: '24px 0', textAlign: 'left',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        cursor: 'pointer', color: t2.textPri,
        font: `600 18px/1.4 ${t2.body}`,
        transition: `color 200ms ease`
      }}
      onMouseEnter={(e) => e.currentTarget.style.color = t2.gold}
      onMouseLeave={(e) => e.currentTarget.style.color = t2.textPri}>
        <span>{q}</span>
        <span style={{
          color: t2.gold, flexShrink: 0, marginLeft: 16,
          transition: `transform 350ms ${EASE_OUT_EXPO}`,
          transform: isOpen ? 'rotate(180deg)' : 'rotate(0)'
        }}><AIcons.chevDown /></span>
      </button>
      <div style={{
        maxHeight: maxH,
        overflow: 'hidden',
        transition: `max-height 420ms ${EASE_IN_OUT}`
      }}>
        <p ref={ref} style={{
          font: `300 15px/1.75 ${t2.body}`, color: t2.textSec,
          margin: 0, paddingBottom: 24, maxWidth: 640
        }}>{a}</p>
      </div>
    </div>);

}

// ─── Final CTA ────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <Section id="cta" bg={t2.bgDarkest} padY={140}>
      <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        {/* gold ambient glow */}
        <div style={{
          position: 'absolute', top: '-40%', left: '50%', width: 600, height: 400,
          transform: 'translateX(-50%)',
          background: 'radial-gradient(ellipse, rgba(201,168,76,0.10) 0%, transparent 70%)',
          pointerEvents: 'none'
        }} />
        <Reveal dy={14} duration={600}>
          <div style={{
            font: `600 11px/1 ${t2.body}`, letterSpacing: 3.5,
            textTransform: 'uppercase', color: t2.gold, marginBottom: 18
          }}>Ready when you are</div>
        </Reveal>
        <Reveal delay={120} dy={24} duration={800}>
          <h2 style={{
            font: `900 clamp(44px, 6vw, 78px)/1.05 ${t2.display}`,
            color: t2.textPri, letterSpacing: '-2px',
            margin: '0 0 24px', paddingBottom: '0.1em'
          }}>
            Bring it to your<br /><em style={{ color: t2.gold, fontStyle: 'italic' }}>Saturday game.</em>
          </h2>
        </Reveal>
        <Reveal delay={260} dy={16} duration={700}>
          <p style={{ font: `300 18px/1.7 ${t2.body}`, color: t2.textSec, marginBottom: 36 }}>
            Free during early access. No credit card required. Two minutes to set up your first round.
          </p>
        </Reveal>
        <Reveal delay={380} dy={16} duration={700}>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Cta tone="gold" pre="Download on the" name="App Store" />
            <Cta tone="ghost" pre="Get it on" name="Google Play" />
          </div>
        </Reveal>
        <Reveal delay={500} dy={8} duration={600}>
          <div style={{
            font: `400 12px/1 ${t2.body}`, color: t2.textMuted,
            marginTop: 20, letterSpacing: 0.3
          }}>Or scan the QR on the in-app pairing screen.</div>
        </Reveal>
      </div>
    </Section>);

}

// ─── Footer ───────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{
      background: t2.bgDarkest, borderTop: `1px solid ${t2.divider}`,
      padding: '56px 48px 32px', color: t2.textMuted
    }}>
      <Reveal dy={16} duration={700}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          gap: 40, flexWrap: 'wrap', maxWidth: 1080, margin: '0 auto'
        }}>
          <div style={{ maxWidth: 280 }}>
            <div style={{ font: `700 22px/1 ${t2.display}`, color: t2.gold, letterSpacing: '-0.2px' }}>
              an<em style={{ color: t2.textPri, fontStyle: 'normal' }}>Tee-Up</em>
            </div>
            <p style={{ font: `300 13px/1.7 ${t2.body}`, color: t2.textSec, marginTop: 14 }}>
              Built for the group that plays for money. Live scoring, automatic settlement,
              no spreadsheet required.
            </p>
          </div>
          {[
          ['Product', ['Features', 'Formats', 'Pricing', 'Changelog', 'iOS app', 'Android app']],
          ['Company', ['About', 'Press', 'Careers', 'Contact', 'Brand kit']],
          ['Legal', ['Privacy', 'Terms', 'Responsible play', 'Support']]].
          map(([h, links]) =>
          <div key={h}>
              <div style={{
              font: `600 11px/1 ${t2.body}`, letterSpacing: 3,
              textTransform: 'uppercase', color: t2.gold, marginBottom: 16
            }}>{h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {links.map((l) =>
              <li key={l}>
                    <a style={{
                  font: `400 13px/1 ${t2.body}`, color: t2.textSec, textDecoration: 'none',
                  cursor: 'pointer', transition: 'color 180ms ease'
                }}
                onMouseEnter={(e) => e.currentTarget.style.color = t2.gold}
                onMouseLeave={(e) => e.currentTarget.style.color = t2.textSec}>
                  {l}</a>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </Reveal>
      <div style={{
        marginTop: 48, paddingTop: 20, borderTop: `1px solid ${t2.divider}`,
        display: 'flex', justifyContent: 'space-between',
        maxWidth: 1080, margin: '48px auto 0',
        font: `400 12px/1 ${t2.body}`, color: t2.textMuted, flexWrap: 'wrap', gap: 12
      }}>
        <div>© 2026 anTee-Up Golf. All rights reserved.</div>
        <div>Made for the back nine.</div>
      </div>
    </footer>);

}

Object.assign(window, {
  HowItWorks, InsideRound, WalletSection, GroupFeatures, Testimonials,
  Pricing, FAQ, FinalCTA, Footer, SlideIn, FloatingPhone, BulletList
});