hanzo.ai/app/(marketing)/founder/page.tsx

'use client'

/**
 * /founder — Hanzo Founding Contributor & Open Source Builder Program.
 *
 * Game loop:
 *  1. Pick an issue or fork any of Hanzo's 824+ open source repos.
 *  2. Merge a PR (bug fix, feature, kernel, MCP server, benchmark, or doc).
 *  3. Unlock Free Pro AI compute: 1 Week for Level 1, 1 Month for Level 2 (no Level 3).
 *  4. Instant access to private Founders Slack (#founders with Zach Kelling & Antje Worring).
 *  5. Verified Founder Badge on public hanzo.id profile with 1-click social sharing.
 *  6. Customers get direct invoice credits on their cloud bills.
 *
 * Designed to 100% match the look and feel, spacing, typography, and controls
 * of the core hanzo.ai pages:
 *  - Atmospheric dot cloud canvases (Opening, Dither)
 *  - Classic macOS-style draggable terminal windows (Win, Reading)
 *  - Canonical marketing typography (Display, Title, Lede)
 *  - Canonical pill badges (Label, Chip, Mark)
 *  - Canonical controls (Action fill, Action, More)
 *  - Consistent section rhythms (py={56} $md={{ py: 80 }}, maxW={1240}, gap={40})
 *  - Semantic design tokens ($panel, var(--border), var(--foreground), var(--muted-foreground))
 */

import React, { useEffect, useState } from 'react'
import {
  Sparkles,
  Check,
  Copy as CopyIcon,
  ShieldCheck,
  Terminal,
  Zap,
  Gift,
  Share2,
  CheckCircle2,
  Rocket,
  Code,
  Building2,
  ArrowRight,
  ArrowUpRight,
  Mail,
  LifeBuoy,
  MessageSquare,
  Users,
  Percent,
  GitPullRequest,
  GitMerge,
} from 'lucide-react'
import { Input, Text, View, XStack, YStack } from '@hanzo/ui'
import { HanzoMark } from '@hanzogui/shell'
import { Github } from '@/components/brand'
import { useIam } from '@hanzo/iam/react'
import { paid, useTier } from '@hanzo/app/lib/tier'
import { Action, Chip, Display, Faq, Lede, More, Title } from '@hanzo/ui/marketing'
import { Dither, Opening, Reading, Section, Win } from '@/components/home/chrome'
import { Label } from '@/components/home/label'
import { Mark } from '@/components/pricing/kit'

const CRM_API = 'https://api.hanzo.ai/v1/marketing/leads'
const GITHUB_HANZO_URL = 'https://github.com/hanzoai'
const FOUNDER_COUPON = '50OFFfounder'
const FOUNDER_OFFER_URL = `/pricing?coupon=${FOUNDER_COUPON}`

const TIERS = [
  {
    level: 'Level 1',
    name: 'Founding Contributor',
    badge: '🥉 Level 1',
    requirement: '1 Merged Pull Request',
    requirementDetail: 'Approved & merged by Hanzo maintainers into main',
    rewardTitle: '1 Week Free',
    rewardSub: 'Hanzo Pro AI Plan ($5 value)',
    details: '1M-token context window, vision, reasoning & tool calling',
    perks: [
      '1 Week Free Hanzo Pro AI compute credits (unlocked on PR merge)',
      'Invite to private #founders Slack channel (direct line to Zach & Antje)',
      'Verified "Founding Contributor" badge on your public hanzo.id profile',
      'Name immortalized on the Hanzo Open Source Contributor Wall',
      'Early alpha access to new model weights & SDKs before public drops',
    ],
    popular: false,
    cta: 'Claim Level 1 Reward',
  },
  {
    level: 'Level 2',
    name: 'Founding Builder',
    badge: '🥈 Level 2',
    requirement: '3+ Merged PRs or 1,000+ LoC',
    requirementDetail: '3 approved merged PRs or 1,000+ lines merged into production',
    rewardTitle: '1 Month Free',
    rewardSub: 'Pro AI Plan + Founder Swag ($20 value)',
    details: 'Includes limited-edition heavyweight hoodie shipped worldwide',
    perks: [
      '1 Full Month Free Hanzo Pro AI compute credits ($20 value)',
      'Limited Edition Hanzo Founder Heavyweight Hoodie & holographic stickers',
      'Priority inference queue & elevated API rate limits',
      'Feature spotlight in the Hanzo Developer Dispatch newsletter (4.0M+ audience)',
      'All Level 1 perks included',
    ],
    popular: true,
    cta: 'Level Up to Builder',
  },
] as const

const BOUNTIES = [
  {
    repo: 'hanzoai/engine',
    title: 'Speculative Decoding Kernel for Zen 6 (Rust / C++)',
    desc: 'Implement draft-model speculative verification kernel in the Rust engine runtime for 2.4x token generation speedup.',
    stack: 'Rust',
    reward: '1 Mo Pro AI + Founder Swag',
    difficulty: 'Hard',
    url: 'https://github.com/hanzoai/engine/issues',
    category: 'rust',
  },
  {
    repo: 'hanzo-apps/console',
    title: 'Multi-Column Sorting & Filter Presets in CRM (Next.js)',
    desc: 'Add server-side multi-column sorting presets and quick saved filters for the 4.0M+ developer lead database in crm.hanzo.ai.',
    stack: 'TypeScript',
    reward: '1 Wk Pro AI',
    difficulty: 'Medium',
    url: 'https://github.com/hanzo-apps/console/issues',
    category: 'ts',
  },
  {
    repo: 'hanzoai/flow',
    title: 'Deep Research Autonomous Agent Node (Python / LangChain)',
    desc: 'Create an automated web research & citation synthesis workflow node with recursive document clustering.',
    stack: 'Python',
    reward: '1 Wk Pro AI',
    difficulty: 'Medium',
    url: 'https://github.com/hanzoai/flow/issues',
    category: 'python',
  },
  {
    repo: 'hanzoai/cli',
    title: 'Hanzo MCP Tooling Integration for Cursor & Claude Desktop',
    desc: 'Package Hanzo CLI toolsets as an interactive Model Context Protocol (MCP) server for local IDE copilots.',
    stack: 'TypeScript',
    reward: '1 Wk Pro AI',
    difficulty: 'Easy',
    url: 'https://github.com/hanzoai/cli/issues',
    category: 'mcp',
  },
  {
    repo: 'hanzoai/models',
    title: '4-bit AWQ & EXL2 Quantization Harness for Zen-Coder-4B',
    desc: 'Automate post-training quantization matrix generation and publish verified GGUF / AWQ weights on HuggingFace.',
    stack: 'Python',
    reward: '1 Mo Pro AI + Founder Swag',
    difficulty: 'Hard',
    url: 'https://github.com/hanzoai/models/issues',
    category: 'ai',
  },
  {
    repo: 'hanzoai/ui',
    title: 'High-Performance Virtualized Table Component for Edge CRM',
    desc: 'Build a 60fps windowed table capable of smoothly scrolling 100,000+ customer records with inline cell editing.',
    stack: 'TypeScript',
    reward: '1 Wk Pro AI',
    difficulty: 'Medium',
    url: 'https://github.com/hanzoai/ui/issues',
    category: 'ts',
  },
] as const

const FAQS = [
  {
    q: 'What is the Hanzo Founder Program?',
    a: 'The Hanzo Founder Program is an open-source builder initiative. By contributing bug fixes, features, or integrations into Hanzo’s 824+ open repositories, developers earn free access to our frontier AI models, entry into our private #founders Slack channel with CEO Antje Worring and CTO Zach Kelling, and verified profile credentials.',
  },
  {
    q: 'What are the reward tiers?',
    a: 'We have strictly two levels: Level 1 (Founding Contributor) unlocks 1 Week Free of Hanzo Pro AI for your first merged PR. Level 2 (Founding Builder) unlocks 1 Month Free of Hanzo Pro AI plus our custom heavyweight founder hoodie and holographic stickers for merging 3+ PRs or contributing 1,000+ lines of code. There is no Level 3.',
  },
  {
    q: 'How does the customer cloud invoice credit work?',
    a: 'If you or your team are already Hanzo Cloud customers, any merged pull request made by an engineer from your organization will directly credit your company’s monthly cloud invoice: 1 week of Pro compute credit for Level 1, and 1 full month of Pro compute credit for Level 2.',
  },
  {
    q: 'How do I access the private #founders Slack?',
    a: 'Once your PR merges, submit your PR URL and email in the Claim form on this page. Our team verifies the merge and emails you an instant invite link to the private #founders channel within 24 hours.',
  },
  {
    q: 'Which repositories qualify?',
    a: 'Any public repository in the Hanzo ecosystem qualifies, including hanzoai/engine, hanzoai/flow, hanzoai/cli, hanzoai/base, hanzoai/cloud, and hanzo-apps/*. PRs must be meaningful contributions (bug fixes, feature additions, benchmark suites, MCP tooling, or substantial docs).',
  },
  {
    q: 'How do I claim the Hanzo Founder Hoodie?',
    a: 'Builders who reach Level 2 (3+ merged PRs or 1,000+ lines of code) receive a swag voucher code via email to claim our custom heavyweight hoodie and sticker pack, shipped anywhere in the world free of charge.',
  },
  {
    q: 'How does the 50% founder discount work?',
    a: 'Founders receive 50% off their first 3 monthly billing cycles across all Pro and Max plans using code 50OFFfounder. Clicking "Sign In & Claim 50% Off" signs you in and opens the founder plan picker with the discount automatically applied.',
  },
  {
    q: 'Where can I find Hanzo repos to contribute to?',
    a: 'All 824+ public repositories are hosted under https://github.com/hanzoai. Key repos include hanzoai/engine (inference runtime), hanzoai/flow (agent graphs), hanzoai/cli (MCP tooling & terminal dev), hanzo-apps/console (CRM & cloud apps), and hanzoai/base (data primitives).',
  },
  {
    q: 'Who do I contact with questions about the Founder Program?',
    a: 'You can email CEO Antje Worring and CTO Zach Kelling directly at [email protected]. For general engineering and compute voucher support, email [email protected]. You can also explore our complete company contact directory at hanzo.ai/contact.',
  },
] as const

/** Single command copy block matching Start.tsx */
function QuickCommand({ label, command }: { label: string; command: string }) {
  const [copied, setCopied] = useState(false)
  return (
    <YStack gap={8} width="100%">
      <XStack items="center" justify="space-between" gap={12}>
        <Text fontSize="$2" lineHeight="$2" fontWeight="500" color="var(--foreground)">
          {label}
        </Text>
        <XStack
          render={
            <button
              type="button"
              aria-label={copied ? 'Copied' : `Copy: ${label}`}
              onClick={async () => {
                try {
                  await navigator.clipboard.writeText(command)
                  setCopied(true)
                  setTimeout(() => setCopied(false), 2000)
                } catch {
                  setCopied(false)
                }
              }}
            />
          }
          items="center"
          gap={6}
          px={10}
          py={4}
          rounded={9999}
          bg="transparent"
          borderWidth={1}
          borderColor="var(--border)"
          cursor="pointer"
          hoverStyle={{ bg: 'var(--secondary)', borderColor: 'var(--border-strong)' }}
          $platform-web={{ borderRadius: '9999px', borderStyle: 'solid' }}
        >
          {copied ? <Check size={14} strokeWidth={2} color="var(--state-success)" /> : <CopyIcon size={14} strokeWidth={1.5} color="var(--muted-foreground)" />}
          <Text fontSize="$1" fontWeight="500" color={copied ? 'var(--state-success)' : 'var(--muted-foreground)'}>
            {copied ? 'Copied' : 'Copy'}
          </Text>
        </XStack>
      </XStack>
      <View
        render="pre"
        m={0}
        px={14}
        py={12}
        borderWidth={1}
        borderColor="var(--border)"
        rounded={14}
        bg="var(--surface-card-quiet, var(--card))"
        $platform-web={{ overflowX: 'auto', whiteSpace: 'pre' }}
      >
        <Text render="code" display="block" fontFamily="$mono" fontSize="$2" lineHeight="1.4rem" color="var(--foreground)">
          <Text render="span" aria-hidden color="var(--muted-foreground)" $platform-web={{ userSelect: 'none' }}>
            ${' '}
          </Text>
          {command}
        </Text>
      </View>
    </YStack>
  )
}

export default function FounderPage() {
  const { user, isAuthenticated } = useIam()
  const held = useTier(isAuthenticated).tier
  const isPaid = paid(held)

  // If someone is already paying, don't bring them to the plan page.
  // Instead, direct them to claim their founder reward, Slack invite, and cloud invoice credits (#claim).
  const founderFlowUrl = isPaid
    ? '#claim'
    : isAuthenticated
      ? FOUNDER_OFFER_URL
      : `/signup?next=${encodeURIComponent(FOUNDER_OFFER_URL)}`

  const [filter, setFilter] = useState<'all' | 'rust' | 'ts' | 'python' | 'mcp' | 'ai'>('all')

  // Form State
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [github, setGithub] = useState('')
  const [prUrl, setPrUrl] = useState('')
  const [summary, setSummary] = useState('')
  const [consent, setConsent] = useState(true)
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
  const [badgeCopied, setBadgeCopied] = useState(false)

  // Auto pre-fill authenticated user's email and display name if available
  useEffect(() => {
    if (user?.email && !email) setEmail(user.email)
    const displayName = user?.displayName || user?.name
    if (displayName && !name) setName(displayName)
  }, [user])

  const filteredBounties = filter === 'all' ? BOUNTIES : BOUNTIES.filter((b) => b.category === filter)

  const shareText = `I just joined the @hanzoai Founder Program! 🚀 Merging open-source code into their AI stack earns free Pro AI compute (1 week for Level 1, 1 month for Level 2) & private Slack access with core founders. Check out the bounties: https://hanzo.ai/founder`
  const badgeMarkdown = `[![Hanzo Founding Contributor](https://img.shields.io/badge/Hanzo-Founding_Contributor_2026-blue.svg?logo=github)](https://hanzo.ai/founder)`

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email || !github || !consent) return
    setStatus('submitting')
    try {
      const res = await fetch(CRM_API, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email,
          name: name || github,
          consent: true,
          program: 'founder',
          stage: prUrl ? 'claimed' : 'applicant',
          source: 'hanzo.ai/founder',
          need: `GitHub: @${github.replace(/^@/, '')} | PR: ${prUrl || 'Applicant'} | Summary: ${summary || 'Joined Founder Program'}`,
        }),
      })
      if (res.ok) {
        setStatus('success')
      } else {
        setStatus('error')
      }
    } catch {
      setStatus('error')
    }
  }

  return (
    <View width="100%" $platform-web={{ color: 'var(--foreground)', overflowX: 'clip' }}>
      {/* ── 1. HERO SECTION ─────────────────────────────────────────────────── */}
      <View
        render="section"
        data-slot="hero"
        aria-labelledby="founder-hero-title"
        position="relative"
        width="100%"
        overflow="hidden"
        $platform-web={{ overflowX: 'clip' }}
      >
        <Opening />

        <XStack
          position="relative"
          width="100%"
          maxW={1320}
          mx="auto"
          px="var(--page-gutter)"
          pt="max(48px, min(8vh, 88px))"
          pb="max(48px, min(8vh, 80px))"
          gap="max(32px, min(5vw, 64px))"
          items="center"
          $max-lg={{ flexDirection: 'column', items: 'stretch' }}
        >
          {/* Left Column: Headline, Lede, Quick Command, Action Buttons */}
          <YStack flex={6} minW={0} gap="$4" items="center" $max-lg={{ flexBasis: 'auto' }}>
            <Label center href={GITHUB_HANZO_URL}>
              HANZO.FOUNDER
            </Label>

            <Display id="founder-hero-title" data-fit="" width="100%" text="center" mt={4}>
              <span>Build in the open.</span>{' '}
              <Text render="span" color="var(--muted-foreground)">
                Get Free Pro AI.
              </Text>
            </Display>

            <Lede text="center" mb={6} $platform-web={{ textWrap: 'balance', lineHeight: '1.45' }}>
              Merge pull requests into Hanzo’s 824+ open-source repositories. Earn{' '}
              <strong>1 Week of Free Pro AI</strong> for Level 1, or <strong>1 Month of Free Pro AI + Founder Swag</strong> for Level 2, plus instant access to <strong>50% off your first 3 months</strong> on Pro and Max plans with code <Text render="code" fontFamily="$mono">{FOUNDER_COUPON}</Text> and entry to our private <strong>#founders Slack</strong>.
            </Lede>

            {/* Quick Command Block */}
            <View width="100%" maxW={540} mx="auto" my={4}>
              <QuickCommand
                label="Clone & explore core engine"
                command="git clone https://github.com/hanzoai/engine && cd engine"
              />
            </View>

            {/* Actions matching canonical Action components */}
            <XStack gap={12} items="center" justify="center" flexWrap="wrap" mt={6}>
              <Action
                fill
                render="a"
                href={founderFlowUrl}
                $platform-web={{ textDecoration: 'none', minWidth: 160, textAlign: 'center', justifyContent: 'center' }}
              >
                <XStack items="center" justify="center" gap={8}>
                  <span>{isPaid ? 'Claim Founder Reward & Slack' : 'Sign In & Claim 50% Off'}</span>
                  <ArrowRight size={16} />
                </XStack>
              </Action>

              <Action
                render="a"
                href="#bounties"
                $platform-web={{ textDecoration: 'none', minWidth: 160, textAlign: 'center', justifyContent: 'center' }}
              >
                Explore Bounties ↓
              </Action>

              <Action
                render="a"
                href="#claim"
                $platform-web={{ textDecoration: 'none', minWidth: 140, textAlign: 'center', justifyContent: 'center' }}
              >
                Claim Merged PR
              </Action>
            </XStack>

            <XStack items="center" gap={8} mt={2}>
              <Github size={15} color="var(--muted-foreground)" />
              <More href={GITHUB_HANZO_URL} target="_blank" rel="noopener noreferrer">
                Explore Hanzo on GitHub (824+ Repos) ↗
              </More>
            </XStack>
          </YStack>

          {/* Right Column: macOS Draggable Window */}
          <YStack flex={5} minW={0} position="relative" $max-lg={{ flexBasis: 'auto' }}>
            <Win title="Hanzo.Founder" icon={<HanzoMark size={14} />} slot="founder" open>
              <YStack p={16} gap={16}>
                <XStack
                  items="center"
                  justify="space-between"
                  p={10}
                  rounded={10}
                  bg="var(--secondary)"
                  borderWidth={1}
                  borderColor="var(--border)"
                >
                  <XStack items="center" gap={8}>
                    <View width={8} height={8} rounded={9999} bg="var(--state-success)" $platform-web={{ borderRadius: '9999px' }} />
                    <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--foreground)" textTransform="uppercase">
                      Ecosystem live
                    </Text>
                  </XStack>
                  <XStack
                    render={<a href={GITHUB_HANZO_URL} target="_blank" rel="noopener noreferrer" />}
                    items="center"
                    gap={4}
                    $platform-web={{ textDecoration: 'none' }}
                  >
                    <Github size={13} color="var(--muted-foreground)" />
                    <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
                      824+ Repositories ↗
                    </Text>
                  </XStack>
                </XStack>

                <YStack gap={2} px={4}>
                  <Reading label="Leadership" strong>
                    Antje Worring · Zach Kelling
                  </Reading>
                  <Reading label="Private Slack" strong>
                    #founders (Direct line)
                  </Reading>
                  <Reading label="Founder Offer" strong>
                    50% Off First 3 Months
                  </Reading>
                  <Reading label="Coupon Code" strong>
                    {FOUNDER_COUPON}
                  </Reading>
                  <Reading label="Account Status" strong>
                    {isPaid ? 'Active Subscriber' : isAuthenticated ? 'Signed In' : 'Guest'}
                  </Reading>
                  <Reading label={isPaid ? 'Subscriber Benefit' : 'Plan Picker'}>
                    {isPaid ? 'Cloud Invoice Credits' : `/pricing?coupon=${FOUNDER_COUPON}`}
                  </Reading>
                  <Reading label="Direct Email" strong>
                    founders@hanzo.ai
                  </Reading>
                  <Reading label="Directory">
                    hanzo.ai/contact
                  </Reading>
                  <Reading label="Level 1 Reward">
                    1 Week Free Pro AI ($5 value)
                  </Reading>
                  <Reading label="Level 2 Reward">
                    1 Month Free Pro + Swag
                  </Reading>
                  <Reading label="Level 3">
                    None (Strictly 2 Tiers)
                  </Reading>
                  <Reading label="GitHub Org">
                    github.com/hanzoai
                  </Reading>
                </YStack>

                <View p={12} rounded={12} borderWidth={1} borderColor="var(--border)" bg="var(--surface-card-quiet, var(--card))">
                  <XStack items="center" justify="space-between" mb={8}>
                    <XStack items="center" gap={6}>
                      <ShieldCheck size={16} color="var(--state-success)" />
                      <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--foreground)">
                        Verified Profile Badge
                      </Text>
                    </XStack>
                    <XStack
                      render={
                        <button
                          type="button"
                          onClick={async () => {
                            try {
                              await navigator.clipboard.writeText(badgeMarkdown)
                              setBadgeCopied(true)
                              setTimeout(() => setBadgeCopied(false), 2000)
                            } catch {
                              setBadgeCopied(false)
                            }
                          }}
                        />
                      }
                      items="center"
                      gap={4}
                      px={8}
                      py={3}
                      rounded={9999}
                      bg="transparent"
                      borderWidth={1}
                      borderColor="var(--border)"
                      cursor="pointer"
                      hoverStyle={{ bg: 'var(--secondary)' }}
                      $platform-web={{ borderRadius: '9999px', borderStyle: 'solid' }}
                    >
                      {badgeCopied ? <Check size={12} color="var(--state-success)" /> : <CopyIcon size={12} color="var(--muted-foreground)" />}
                      <Text fontSize="$1" color={badgeCopied ? 'var(--state-success)' : 'var(--muted-foreground)'}>
                        {badgeCopied ? 'Copied' : 'Copy'}
                      </Text>
                    </XStack>
                  </XStack>

                  <View
                    p={8}
                    rounded={8}
                    bg="var(--secondary)"
                    borderWidth={1}
                    borderColor="var(--border)"
                    $platform-web={{ overflowX: 'auto' }}
                  >
                    <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
                      {badgeMarkdown}
                    </Text>
                  </View>
                </View>
              </YStack>
            </Win>
          </YStack>
        </XStack>
      </View>

      {/* ── 2. METRICS STRIP ────────────────────────────────────────────────── */}
      <View
        width="100%"
        borderTopWidth={1}
        borderBottomWidth={1}
        borderColor="var(--border)"
        bg="$panel"
        py={28}
      >
        <XStack
          width="100%"
          maxW={1240}
          mx="auto"
          px="var(--page-gutter)"
          justify="space-between"
          flexWrap="wrap"
          gap={24}
        >
          <YStack minW={160} gap={4}>
            <Text fontSize="$6" fontWeight="700" color="var(--foreground)">
              824+
            </Text>
            <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
              Open Repositories
            </Text>
          </YStack>

          <YStack minW={160} gap={4}>
            <Text fontSize="$6" fontWeight="700" color="var(--foreground)">
              Free Pro AI
            </Text>
            <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
              1 Wk (L1) · 1 Mo (L2)
            </Text>
          </YStack>

          <YStack minW={160} gap={4}>
            <Text fontSize="$6" fontWeight="700" color="var(--foreground)">
              #founders
            </Text>
            <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
              Private Founder Slack
            </Text>
          </YStack>

          <YStack minW={160} gap={4}>
            <Text fontSize="$6" fontWeight="700" color="var(--foreground)">
              100% Compute
            </Text>
            <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
              Zero Vanity Tokens
            </Text>
          </YStack>
        </XStack>
      </View>

      {/* ── 2.5 EXCLUSIVE FOUNDER 50% OFF OFFER ─────────────────────────────── */}
      <View width="100%" maxW={1240} mx="auto" px="var(--page-gutter)" py={28}>
        <YStack
          p="$6"
          rounded={24}
          bg="$panel"
          borderWidth={1}
          borderColor="var(--border-strong)"
          boxShadow="0 24px 60px -28px color-mix(in srgb, var(--pure-black) 45%, transparent)"
          gap={16}
          $platform-web={{ borderRadius: '24px' }}
        >
          <XStack items="center" justify="space-between" flexWrap="wrap" gap={12}>
            <XStack items="center" gap={8}>
              <Percent size={20} color="var(--state-success)" />
              <Text fontFamily="$mono" fontSize="$2" fontWeight="600" color="var(--state-success)">
                {isPaid ? 'ACTIVE SUBSCRIBER · CLOUD INVOICE CREDITS' : 'EXCLUSIVE FOUNDER OFFER · 50% OFF 3 MONTHS'}
              </Text>
            </XStack>
            <Mark>{isPaid ? 'Direct Cloud Bill Offset' : `Code: ${FOUNDER_COUPON}`}</Mark>
          </XStack>

          <Text fontSize="$5" fontWeight="700" color="var(--foreground)">
            {isPaid
              ? 'Already a Hanzo Subscriber? Get Direct Invoice Credits'
              : '50% Off Your First 3 Months on Pro & Max Plans'}
          </Text>

          <Text fontSize="$3" lineHeight={26} color="var(--muted-foreground)" maxW={920}>
            {isPaid
              ? 'As an active subscriber, you never need to purchase another plan. Any merged pull request directly credits your existing monthly subscription invoice (1 week off for Level 1, 1 full month off for Level 2) plus grants immediate access to the private #founders Slack channel.'
              : 'As an open-source founder building the Hanzo ecosystem, claim 50% off your first three monthly billing cycles across all personal and developer compute tiers. Sign in to enter the verified founder plan picker with the discount pre-applied.'}
          </Text>

          <XStack items="center" gap={16} flexWrap="wrap" mt={4}>
            <Action
              fill
              render="a"
              href={founderFlowUrl}
              $platform-web={{ textDecoration: 'none' }}
            >
              {isPaid ? 'Claim Founder Reward & Credit →' : 'Sign In to Plan Picker →'}
            </Action>

            <More href={GITHUB_HANZO_URL} target="_blank" rel="noopener noreferrer">
              View Hanzo Repositories on GitHub ↗
            </More>
          </XStack>
        </YStack>
      </View>

      {/* ── 3. TWO REWARD TIERS (LEVEL 1 & LEVEL 2 ONLY) ────────────────────── */}
      <Section
        id="tiers"
        label="Founder.Tiers"
        title="Two Levels. Real Compute."
        lede="No points or leaderboards that go nowhere. Merge code into our production stack to earn Pro compute credits. Rewards unlock only when a maintainer merges your pull request."
        dither
      >
        {/* High-visibility Callout: Pull Request Merge Required */}
        <View
          p={18}
          rounded={18}
          bg="var(--surface-card-quiet, var(--card))"
          borderWidth={1}
          borderColor="var(--border-strong)"
          maxW={960}
          mx="auto"
          mb={24}
          width="100%"
          boxShadow="0 14px 36px -16px color-mix(in srgb, var(--pure-black) 35%, transparent)"
          $platform-web={{ borderRadius: '18px' }}
        >
          <XStack items="center" justify="space-between" flexWrap="wrap" gap={12}>
            <XStack items="center" gap={12} flex={1} minW={280}>
              <View p={10} rounded={12} bg="var(--secondary)" shrink={0}>
                <GitPullRequest size={22} color="var(--art-ember)" />
              </View>
              <YStack gap={3}>
                <XStack items="center" gap={8} flexWrap="wrap">
                  <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="var(--art-ember)" textTransform="uppercase">
                    Pull request merge required
                  </Text>
                  <Mark>Code Contribution Only</Mark>
                </XStack>
                <Text fontSize="$2" lineHeight={20} color="var(--foreground)">
                  Free Pro AI tiers are <strong>earned strictly by merging real code</strong> into Hanzo’s 824+ open repositories. You only receive compute credits and Slack access <strong>after your pull request is approved and merged</strong>.
                </Text>
              </YStack>
            </XStack>
            <Action
              render="a"
              href="#bounties"
              $platform-web={{ textDecoration: 'none', whiteSpace: 'nowrap' }}
            >
              Browse Open Bounties ↓
            </Action>
          </XStack>
        </View>

        <View
          display="grid"
          width="100%"
          maxW={960}
          mx="auto"
          gap={24}
          gridTemplateColumns="minmax(0, 1fr)"
          $md={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
        >
          {TIERS.map((t) => (
            <YStack
              key={t.level}
              rounded={24}
              p="$6"
              borderWidth={1}
              borderColor={t.popular ? 'var(--border-strong)' : 'var(--border)'}
              bg="$panel"
              boxShadow="0 24px 60px -28px color-mix(in srgb, var(--pure-black) 45%, transparent)"
              hoverStyle={{ borderColor: 'var(--border-strong)' }}
              justify="space-between"
              gap={24}
              $platform-web={{ borderRadius: '24px', transition: 'border-color 0.15s ease' }}
            >
              <YStack gap={16}>
                <XStack items="center" justify="space-between">
                  <Text fontFamily="$mono" fontSize="$2" fontWeight="600" color="var(--muted-foreground)">
                    {t.badge}
                  </Text>
                  {t.popular ? <Mark>Founding Elite</Mark> : null}
                </XStack>

                <YStack gap={8}>
                  <Text fontSize="$5" fontWeight="700" color="var(--foreground)">
                    {t.name}
                  </Text>

                  {/* High-visibility PR requirement callout */}
                  <XStack
                    items="center"
                    gap={10}
                    p={10}
                    rounded={12}
                    bg="var(--secondary)"
                    borderWidth={1}
                    borderColor="var(--border-strong)"
                  >
                    <GitMerge size={18} color="var(--state-success)" />
                    <YStack gap={2}>
                      <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="var(--state-success)">
                        PR REQUIREMENT: {t.requirement.toUpperCase()}
                      </Text>
                      <Text fontSize="$1" color="var(--muted-foreground)" lineHeight={15}>
                        {t.requirementDetail}
                      </Text>
                    </YStack>
                  </XStack>
                </YStack>

                {/* Big Reward Display */}
                <View p={16} rounded={16} bg="var(--secondary)" borderWidth={1} borderColor="var(--border)">
                  <XStack items="center" justify="space-between" mb={6}>
                    <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="var(--art-ember)">
                      ★ UNLOCKS ONLY ON MERGE
                    </Text>
                    <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
                      {t.level === 'Level 1' ? '1st Merged PR' : '3+ Merged PRs'}
                    </Text>
                  </XStack>
                  <Text fontSize="$6" fontWeight="800" color="var(--foreground)">
                    {t.rewardTitle}
                  </Text>
                  <Text fontSize="$2" fontWeight="600" color="var(--foreground)" mt={2}>
                    {t.rewardSub}
                  </Text>
                  <Text fontSize="$1" color="var(--muted-foreground)" mt={4}>
                    {t.details}
                  </Text>
                </View>

                {/* Perks List */}
                <YStack gap={10} mt={8}>
                  {t.perks.map((p, i) => (
                    <XStack key={i} items="flex-start" gap={10}>
                      <View mt={2} shrink={0}>
                        <Check size={16} color="var(--state-success)" strokeWidth={2.2} />
                      </View>
                      <Text fontSize="$2" lineHeight={20} color="var(--foreground)">
                        {p}
                      </Text>
                    </XStack>
                  ))}
                </YStack>
              </YStack>

              <YStack gap={10} width="100%">
                <XStack items="center" justify="center" gap={6}>
                  <ShieldCheck size={14} color="var(--state-success)" />
                  <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)" text="center">
                    Requires verified merged PR URL to claim
                  </Text>
                </XStack>

                <Action
                  fill={t.popular}
                  render="a"
                  href="#claim"
                  $platform-web={{ textDecoration: 'none', width: '100%', textAlign: 'center', justifyContent: 'center' }}
                >
                  <XStack items="center" justify="center" gap={8}>
                    <GitMerge size={15} />
                    <span>
                      {isPaid
                        ? (t.level === 'Level 1' ? 'Claim 1-Wk Invoice Credit (Merged PR)' : 'Claim 1-Mo Invoice Credit & Swag (Merged PR)')
                        : `Claim ${t.level} (Merged PR Required)`}
                    </span>
                  </XStack>
                </Action>

                <More href="#bounties" self="center">
                  Haven't merged yet? Find an issue to work on ↓
                </More>
              </YStack>
            </YStack>
          ))}
        </View>
      </Section>

      {/* ── 4. THE 4-STEP LOOP ──────────────────────────────────────────────── */}
      <Section
        id="how-it-works"
        label="How.It.Works"
        title="From Clone to Pro AI in Four Steps."
        lede="The fastest way to join our core engineering working group and unlock free frontier compute."
        dither
      >
        <View
          display="grid"
          width="100%"
          gap={16}
          gridTemplateColumns="minmax(0, 1fr)"
          $sm={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
          $lg={{ gridTemplateColumns: 'repeat(4, minmax(0, 1fr))' }}
        >
          {[
            {
              step: '01 / PICK',
              title: 'Find an Issue or Propose',
              desc: 'Select a GitHub issue on our bounty board, or open an RFC with an architectural improvement for any Hanzo repo.',
            },
            {
              step: '02 / BUILD',
              title: 'Fork, Code & Verify',
              desc: 'Implement your solution with clean tests. Run hanzo dev or project harnesses locally to verify everything passes.',
            },
            {
              step: '03 / MERGE',
              title: 'Review & Pull Merge',
              desc: 'Submit your PR. CEO Antje, CTO Zach, or repository maintainers review within 24-48 hours and merge to main.',
            },
            {
              step: '04 / UNLOCK',
              title: 'Claim Compute & Slack',
              desc: 'Instantly unlock Free Pro AI credits (1 week for L1, 1 month for L2), your Slack invite, and verified profile badge.',
            },
          ].map((s) => (
            <YStack
              key={s.step}
              p={20}
              rounded={20}
              bg="$panel"
              borderWidth={1}
              borderColor="var(--border)"
              boxShadow="0 20px 48px -24px color-mix(in srgb, var(--pure-black) 40%, transparent)"
              hoverStyle={{ borderColor: 'var(--border-strong)' }}
              gap={10}
              $platform-web={{ borderRadius: '20px', transition: 'border-color 0.15s ease' }}
            >
              <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--muted-foreground)">
                {s.step}
              </Text>
              <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                {s.title}
              </Text>
              <Text fontSize="$2" lineHeight={22} color="var(--muted-foreground)">
                {s.desc}
              </Text>
            </YStack>
          ))}
        </View>
      </Section>

      {/* ── 5. ACTIVE GITHUB BOUNTIES ───────────────────────────────────────── */}
      <Section
        id="bounties"
        label="Open.Issues"
        title="Pick an Issue. Ship Code."
        lede="High-impact bounties across Rust, TypeScript, Python, and AI kernels. Fix a bug or implement a requested feature to claim your reward."
        dither
      >
        {/* Category Filter Pills using Chip design & GitHub Link */}
        <XStack items="center" justify="space-between" flexWrap="wrap" gap={12}>
          <XStack gap={8} flexWrap="wrap" items="center">
            <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)" mr={4}>
              Filter:
            </Text>
            {(
              [
                ['all', 'All Bounties'],
                ['rust', 'Rust & Engine'],
                ['ts', 'TypeScript & Console'],
                ['python', 'Python & Agents'],
                ['mcp', 'MCP Servers'],
                ['ai', 'AI Kernels'],
              ] as const
            ).map(([key, label]) => {
              const active = filter === key
              return (
                <XStack
                  key={key}
                  render={<button type="button" onClick={() => setFilter(key)} />}
                  px={12}
                  py={6}
                  rounded={9999}
                  bg={active ? 'var(--foreground)' : 'transparent'}
                  borderWidth={1}
                  borderColor={active ? 'var(--foreground)' : 'var(--border)'}
                  cursor="pointer"
                  hoverStyle={active ? undefined : { bg: 'var(--secondary)', borderColor: 'var(--border-strong)' }}
                  $platform-web={{ borderRadius: '9999px', borderStyle: 'solid' }}
                >
                  <Text
                    fontFamily="$mono"
                    fontSize="$1"
                    fontWeight="600"
                    color={active ? 'var(--background)' : 'var(--muted-foreground)'}
                  >
                    {label}
                  </Text>
                </XStack>
              )
            })}
          </XStack>

          <XStack items="center" gap={6}>
            <Github size={15} color="var(--muted-foreground)" />
            <More href={GITHUB_HANZO_URL} target="_blank" rel="noopener noreferrer">
              View all 824+ repos on GitHub ↗
            </More>
          </XStack>
        </XStack>

        {/* Bounties Grid */}
        <View
          display="grid"
          width="100%"
          gap={16}
          gridTemplateColumns="minmax(0, 1fr)"
          $sm={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
          $lg={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
        >
          {filteredBounties.map((b) => (
            <YStack
              key={b.title}
              p={20}
              rounded={20}
              bg="$panel"
              borderWidth={1}
              borderColor="var(--border)"
              boxShadow="0 24px 60px -28px color-mix(in srgb, var(--pure-black) 45%, transparent)"
              hoverStyle={{ borderColor: 'var(--border-strong)' }}
              justify="space-between"
              gap={16}
              $platform-web={{ borderRadius: '20px', transition: 'border-color 0.15s ease' }}
            >
              <YStack gap={10}>
                <XStack items="center" justify="space-between" flexWrap="wrap" gap={8}>
                  <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--foreground)">
                    {b.repo}
                  </Text>
                  <XStack items="center" gap={6}>
                    <View px={8} py={2} rounded={9999} bg="var(--secondary)" borderWidth={1} borderColor="var(--border)">
                      <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
                        {b.stack}
                      </Text>
                    </View>
                    <View px={8} py={2} rounded={9999} bg="var(--secondary)" borderWidth={1} borderColor="var(--border)">
                      <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
                        {b.difficulty}
                      </Text>
                    </View>
                  </XStack>
                </XStack>

                <Text fontSize="$4" fontWeight="600" color="var(--foreground)" lineHeight={24}>
                  {b.title}
                </Text>

                <Text fontSize="$2" lineHeight={20} color="var(--muted-foreground)">
                  {b.desc}
                </Text>
              </YStack>

              <XStack items="center" justify="space-between" pt={12} borderTopWidth={1} borderColor="var(--border)">
                <View px={8} py={3} rounded={9999} bg="var(--secondary)">
                  <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--state-success)">
                    {b.reward}
                  </Text>
                </View>

                <More href={b.url} target="_blank" rel="noopener noreferrer">
                  Open Issue ↗
                </More>
              </XStack>
            </YStack>
          ))}
        </View>
      </Section>

      {/* ── 6. CUSTOMER CLOUD INVOICE CREDITS ───────────────────────────────── */}
      <Section
        id="customers"
        label="Customer.Credits"
        title="Direct Cloud Invoice Credits for Customer Teams."
        lede="We believe paying customers who improve our software should be rewarded directly on their bottom line."
        dither
      >
        <YStack
          p="$6"
          rounded={24}
          bg="$panel"
          borderWidth={1}
          borderColor="var(--border)"
          boxShadow="0 24px 60px -28px color-mix(in srgb, var(--pure-black) 45%, transparent)"
          gap={16}
          $platform-web={{ borderRadius: '24px' }}
        >
          <XStack items="center" gap={8}>
            <Building2 size={20} color="var(--foreground)" />
            <Text fontFamily="$mono" fontSize="$2" fontWeight="600" color="var(--muted-foreground)">
              ENTERPRISE &amp; CLOUD ORGANIZATIONS
            </Text>
          </XStack>

          <Text fontSize="$5" fontWeight="700" color="var(--foreground)">
            Automatic Billing Offsets on Production Invoices
          </Text>

          <Text fontSize="$3" lineHeight={26} color="var(--muted-foreground)" maxW={920}>
            Are you an existing Hanzo customer? Any pull request merged by an engineer from your organization automatically credits your company’s monthly cloud billing invoice: <strong>1 week of Pro compute credit for Level 1</strong>, and <strong>1 full month of Pro compute credit for Level 2</strong>. Submit your corporate account email and PR URL in the claim form below.
          </Text>
        </YStack>
      </Section>

      {/* ── 7. CLAIM & APPLICATION WINDOW ───────────────────────────────────── */}
      <Section
        id="claim"
        label="Founder.Claim"
        title="Claim Your Reward & Slack Access"
        lede="Submit your merged PR URL or apply to join our core open source working group. Maintainers review daily."
        dither
      >
        <View width="100%" maxW={760} mx="auto">
          <Win title="Founder.Application" icon={<HanzoMark size={14} />} slot="claim" open>
            <YStack p={24} gap={20}>
              {status === 'success' ? (
                <YStack items="center" justify="center" p={32} gap={16}>
                  <CheckCircle2 size={48} color="var(--state-success)" />
                  <Text fontSize="$5" fontWeight="700" color="var(--foreground)" text="center">
                    Application &amp; Claim Received!
                  </Text>
                  <Text fontSize="$2" color="var(--muted-foreground)" maxW={460} lineHeight={22} text="center">
                    Thank you for building Hanzo with us! Our maintainers are verifying your contribution and will send your private Slack invite and credit voucher to <strong>{email}</strong> within 24 hours.
                  </Text>
                  <Action
                    render="button"
                    type="button"
                    mt={12}
                    onClick={() => {
                      setStatus('idle')
                      setPrUrl('')
                      setSummary('')
                    }}
                  >
                    Submit Another PR
                  </Action>
                </YStack>
              ) : (
                <View
                  render={<form onSubmit={handleSubmit} />}
                  display="flex"
                  flexDirection="column"
                  gap={16}
                >
                  <XStack gap={16} flexWrap="wrap">
                    <YStack flex={1} minW={240} gap={6}>
                      <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
                        Full Name
                      </Text>
                      <Input
                        value={name}
                        onChangeText={setName}
                        placeholder="Ada Lovelace"
                        rounded={8}
                        bg="var(--secondary)"
                        borderColor="var(--border)"
                        $platform-web={{ borderRadius: '8px' }}
                      />
                    </YStack>

                    <YStack flex={1} minW={240} gap={6}>
                      <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
                        Email Address *
                      </Text>
                      <Input
                        value={email}
                        onChangeText={setEmail}
                        placeholder="[email protected]"
                        keyboardType="email-address"
                        required
                        rounded={8}
                        bg="var(--secondary)"
                        borderColor="var(--border)"
                        $platform-web={{ borderRadius: '8px' }}
                      />
                    </YStack>
                  </XStack>

                  <XStack gap={16} flexWrap="wrap">
                    <YStack flex={1} minW={240} gap={6}>
                      <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
                        GitHub Username *
                      </Text>
                      <Input
                        value={github}
                        onChangeText={setGithub}
                        placeholder="octocat"
                        required
                        rounded={8}
                        bg="var(--secondary)"
                        borderColor="var(--border)"
                        $platform-web={{ borderRadius: '8px' }}
                      />
                    </YStack>

                    <YStack flex={1} minW={240} gap={6}>
                      <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
                        Merged PR URL (or repository target)
                      </Text>
                      <Input
                        value={prUrl}
                        onChangeText={setPrUrl}
                        placeholder="https://github.com/hanzoai/engine/pull/123"
                        rounded={8}
                        bg="var(--secondary)"
                        borderColor="var(--border)"
                        $platform-web={{ borderRadius: '8px' }}
                      />
                    </YStack>
                  </XStack>

                  <YStack gap={6}>
                    <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
                      What did you build or what would you like to build?
                    </Text>
                    <Input
                      value={summary}
                      onChangeText={setSummary}
                      placeholder="Briefly describe your pull request, bug fix, or proposed feature..."
                      rounded={8}
                      bg="var(--secondary)"
                      borderColor="var(--border)"
                      $platform-web={{ borderRadius: '8px' }}
                    />
                  </YStack>

                  {/* Affirmative Consent Checkbox */}
                  <XStack items="flex-start" gap={10} mt={6}>
                    <View
                      render={<input type="checkbox" id="founder-consent" checked={consent} onChange={(e) => setConsent(e.target.checked)} required />}
                      mt={3}
                      $platform-web={{ accentColor: "var(--foreground)", display: "inline-block" }}
                    />
                    <Text
                      render={<label htmlFor="founder-consent" />}
                      fontSize="$2"
                      color="var(--muted-foreground)"
                      $platform-web={{ lineHeight: "18px" }}
                    >
                      I agree to receive communications regarding the Hanzo Founder Program, developer releases, and product updates. I can unsubscribe at any time.
                    </Text>
                  </XStack>

                  {status === 'error' ? (
                    <Text fontSize="$2" color="var(--state-error)">
                      Something went wrong submitting your claim. Please check your connection or email [email protected].
                    </Text>
                  ) : null}

                  <Action
                    fill
                    render="button"
                    type="submit"
                    mt={10}
                    disabled={status === 'submitting' || !email || !github || !consent}
                    $platform-web={{ width: '100%', textAlign: 'center', justifyContent: 'center' }}
                  >
                    {status === 'submitting' ? 'Submitting...' : 'Submit Claim & Join Slack'}
                  </Action>
                </View>
              )}
            </YStack>
          </Win>
        </View>
      </Section>

      {/* ── 8. BADGE & 1-CLICK SOCIAL SHARING ───────────────────────────────── */}
      <Section
        id="share"
        label="Founder.Badge"
        title="Showcase Your Contributor Badge."
        lede="Add verified badges to your GitHub profile and share your contributions with the global developer network."
        dither
      >
        <View
          display="grid"
          width="100%"
          maxW={960}
          mx="auto"
          gap={24}
          gridTemplateColumns="minmax(0, 1fr)"
          $md={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
        >
          {/* GitHub Markdown Card */}
          <YStack
            p={24}
            rounded={20}
            bg="$panel"
            borderWidth={1}
            borderColor="var(--border)"
            boxShadow="0 24px 60px -28px color-mix(in srgb, var(--pure-black) 45%, transparent)"
            gap={16}
            $platform-web={{ borderRadius: '20px' }}
          >
            <XStack items="center" gap={8}>
              <Code size={18} color="var(--foreground)" />
              <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                GitHub Profile README Badge
              </Text>
            </XStack>

            <Text fontSize="$2" color="var(--muted-foreground)" lineHeight={20}>
              Embed this verified markdown shield on your GitHub profile to showcase your Founding Contributor status:
            </Text>

            <View p={12} rounded={10} bg="var(--secondary)" borderWidth={1} borderColor="var(--border)">
              <Text fontFamily="$mono" fontSize="$1" color="var(--foreground)">
                {badgeMarkdown}
              </Text>
            </View>

            <Action
              render="button"
              type="button"
              onClick={async () => {
                try {
                  await navigator.clipboard.writeText(badgeMarkdown)
                  setBadgeCopied(true)
                  setTimeout(() => setBadgeCopied(false), 2000)
                } catch {
                  setBadgeCopied(false)
                }
              }}
              $platform-web={{ alignSelf: 'flex-start' }}
            >
              <XStack items="center" gap={6}>
                {badgeCopied ? <Check size={14} color="var(--state-success)" /> : <CopyIcon size={14} />}
                <span>{badgeCopied ? 'Badge Markdown Copied!' : 'Copy Markdown'}</span>
              </XStack>
            </Action>
          </YStack>

          {/* Social Share Card */}
          <YStack
            p={24}
            rounded={20}
            bg="$panel"
            borderWidth={1}
            borderColor="var(--border)"
            boxShadow="0 24px 60px -28px color-mix(in srgb, var(--pure-black) 45%, transparent)"
            gap={16}
            $platform-web={{ borderRadius: '20px' }}
          >
            <XStack items="center" gap={8}>
              <Share2 size={18} color="var(--foreground)" />
              <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                Share on Twitter / X
              </Text>
            </XStack>

            <Text fontSize="$2" color="var(--muted-foreground)" lineHeight={20}>
              Tell the community you’re building open source with Hanzo and invite other developers to join the program:
            </Text>

            <View p={12} rounded={10} bg="var(--secondary)" borderWidth={1} borderColor="var(--border)">
              <Text fontSize="$2" color="var(--muted-foreground)" lineHeight={20} fontStyle="italic">
                "{shareText}"
              </Text>
            </View>

            <Action
              fill
              render="a"
              href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`}
              target="_blank"
              rel="noopener noreferrer"
              $platform-web={{ textDecoration: 'none', alignSelf: 'flex-start' }}
            >
              <XStack items="center" gap={6}>
                <Share2 size={14} />
                <span>Share Announcement on X</span>
              </XStack>
            </Action>
          </YStack>
        </View>
      </Section>

      {/* ── 9. DIRECT CONTACT & LEADERSHIP ───────────────────────────────── */}
      <Section
        id="contact"
        label="Direct.Contact"
        title="Direct Line to Founders &amp; Maintainers."
        lede="Have questions about open-source architecture, enterprise PR sponsorship, or custom compute allocations? Reach our leadership team directly."
        dither
      >
        <View
          display="grid"
          width="100%"
          gap={16}
          gridTemplateColumns="minmax(0, 1fr)"
          $sm={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
          $lg={{ gridTemplateColumns: 'repeat(4, minmax(0, 1fr))' }}
        >
          {/* Card 1: Leadership / Founders */}
          <YStack
            p={20}
            rounded={20}
            bg="$panel"
            borderWidth={1}
            borderColor="var(--border)"
            boxShadow="0 20px 48px -24px color-mix(in srgb, var(--pure-black) 40%, transparent)"
            hoverStyle={{ borderColor: 'var(--border-strong)' }}
            gap={12}
            justify="space-between"
            $platform-web={{ borderRadius: '20px', transition: 'border-color 0.15s ease' }}
          >
            <YStack gap={8}>
              <XStack items="center" gap={8}>
                <Users size={18} color="var(--foreground)" />
                <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--muted-foreground)" textTransform="uppercase">
                  Executive leadership
                </Text>
              </XStack>
              <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                Antje Worring &amp; Zach Kelling
              </Text>
              <Text fontSize="$2" lineHeight={20} color="var(--muted-foreground)">
                CEO and CTO of Hanzo AI. Direct review of architecture RFCs, core model kernels, and strategic contributors.
              </Text>
            </YStack>
            <More href="mailto:[email protected]">
              [email protected] ↗
            </More>
          </YStack>

          {/* Card 2: Developer & OSS Support */}
          <YStack
            p={20}
            rounded={20}
            bg="$panel"
            borderWidth={1}
            borderColor="var(--border)"
            boxShadow="0 20px 48px -24px color-mix(in srgb, var(--pure-black) 40%, transparent)"
            hoverStyle={{ borderColor: 'var(--border-strong)' }}
            gap={12}
            justify="space-between"
            $platform-web={{ borderRadius: '20px', transition: 'border-color 0.15s ease' }}
          >
            <YStack gap={8}>
              <XStack items="center" gap={8}>
                <LifeBuoy size={18} color="var(--foreground)" />
                <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--muted-foreground)" textTransform="uppercase">
                  Developer support
                </Text>
              </XStack>
              <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                Engineering &amp; Vouchers
              </Text>
              <Text fontSize="$2" lineHeight={20} color="var(--muted-foreground)">
                Assistance with claim verification, Pro API keys, rate limits, and continuous model inference quotas.
              </Text>
            </YStack>
            <More href="mailto:[email protected]">
              [email protected] ↗
            </More>
          </YStack>

          {/* Card 3: Enterprise & Customer Invoices */}
          <YStack
            p={20}
            rounded={20}
            bg="$panel"
            borderWidth={1}
            borderColor="var(--border)"
            boxShadow="0 20px 48px -24px color-mix(in srgb, var(--pure-black) 40%, transparent)"
            hoverStyle={{ borderColor: 'var(--border-strong)' }}
            gap={12}
            justify="space-between"
            $platform-web={{ borderRadius: '20px', transition: 'border-color 0.15s ease' }}
          >
            <YStack gap={8}>
              <XStack items="center" gap={8}>
                <Building2 size={18} color="var(--foreground)" />
                <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--muted-foreground)" textTransform="uppercase">
                  Customer credits
                </Text>
              </XStack>
              <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                Cloud Invoice Matching
              </Text>
              <Text fontSize="$2" lineHeight={20} color="var(--muted-foreground)">
                Connect your organization’s merged PRs to your company’s monthly cloud invoice and billing credits.
              </Text>
            </YStack>
            <More href="/contact-sales">
              Contact Sales ↗
            </More>
          </YStack>

          {/* Card 4: GitHub Organization & Community */}
          <YStack
            p={20}
            rounded={20}
            bg="$panel"
            borderWidth={1}
            borderColor="var(--border)"
            boxShadow="0 20px 48px -24px color-mix(in srgb, var(--pure-black) 40%, transparent)"
            hoverStyle={{ borderColor: 'var(--border-strong)' }}
            gap={12}
            justify="space-between"
            $platform-web={{ borderRadius: '20px', transition: 'border-color 0.15s ease' }}
          >
            <YStack gap={8}>
              <XStack items="center" gap={8}>
                <Github size={18} color="var(--foreground)" />
                <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--muted-foreground)" textTransform="uppercase">
                  Open source ecosystem
                </Text>
              </XStack>
              <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                github.com/hanzoai
              </Text>
              <Text fontSize="$2" lineHeight={20} color="var(--muted-foreground)">
                824+ repositories spanning Rust, Go, TypeScript, and Python. Fork repos, star projects, and join our active community.
              </Text>
            </YStack>
            <XStack items="center" gap={12} flexWrap="wrap">
              <More href={GITHUB_HANZO_URL} target="_blank" rel="noopener noreferrer">
                github.com/hanzoai ↗
              </More>
              <More href="https://discord.gg/XthHQQj" target="_blank" rel="noopener noreferrer">
                Discord ↗
              </More>
            </XStack>
          </YStack>
        </View>
      </Section>

      {/* ── 10. FREQUENTLY ASKED QUESTIONS ─────────────────────────────────── */}
      <Section
        id="faq"
        label="Questions"
        title="Frequently Asked Questions."
        lede="Everything you need to know about rewards, compute credits, and private Slack access."
        dither
      >
        <View width="100%" maxW={860} mx="auto">
          <Faq items={FAQS} />
        </View>
      </Section>
    </View>
  )
}