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 open source repos.
 *  2. Merge a PR (bug fix, feature, kernel, MCP server, benchmark, or doc).
 *  3. Every merge earns points on the Hanzo leaderboard (hanzo.ai/bounty); Level 2 adds swag.
 *  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.
 *
 * 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 {
  Check,
  Copy as CopyIcon,
  ShieldCheck,
  Share2,
  CheckCircle2,
  Code,
  ArrowRight,
  LifeBuoy,
  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, Display, Faq, Lede, More } from '@hanzo/ui/marketing'
import { Opening, Reading, Section, Win } from '@/components/home/chrome'
import { Label } from '@/components/home/label'
import { Mark } from '@/components/pricing/kit'
import { REPO_FLOOR } from '@/lib/counts'
import listed from '@/lib/data/bounties.json'
import { SNAPSHOT, disclosed } from '@/lib/hanzo/rewards'

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: 'Points + Slack',
    rewardSub: 'Leaderboard points for every merge',
    details: 'What each merge earns is on hanzo.ai/bounty',
    perks: [
      'Points on the Hanzo leaderboard for every merged pull request',
      '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: 'Points + Swag',
    rewardSub: 'Leaderboard points + Founder Swag',
    details: 'Includes limited-edition heavyweight hoodie shipped worldwide',
    perks: [
      'Limited Edition Hanzo Founder Heavyweight Hoodie & holographic stickers',
      '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 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 ${REPO_FLOOR}+ open repositories, developers earn points on the Hanzo leaderboard, 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) is your first merged PR. Level 2 (Founding Builder) adds our custom heavyweight founder hoodie and holographic stickers for merging 3+ PRs or contributing 1,000+ lines of code. There is no Level 3. Every merge also earns points on the Hanzo leaderboard; hanzo.ai/bounty lists what each earns.',
  },
  {
    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 ${REPO_FLOOR}+ 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 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 Slack invite and founder swag (#claim).
  const founderFlowUrl = isPaid
    ? '#claim'
    : isAuthenticated
      ? FOUNDER_OFFER_URL
      : `/signup?next=${encodeURIComponent(FOUNDER_OFFER_URL)}`

  // 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 shareText = `I just joined the @hanzoai Founder Program. Merging open-source code into their AI stack earns points on the Hanzo leaderboard and private Slack access with core founders. Check out the bounties: https://hanzo.ai/founder ${disclosed(SNAPSHOT)}`
  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)">
                Earn points and swag.
              </Text>
            </Display>

            <Lede text="center" mb={6} $platform-web={{ textWrap: 'balance', lineHeight: '1.45' }}>
              Merge pull requests into Hanzo’s {REPO_FLOOR}+ open-source repositories. Every merge earns{' '}
              <strong>points on the Hanzo leaderboard</strong>, Level 2 adds <strong>Founder Swag</strong>, 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 Slack & Swag' : '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 ({REPO_FLOOR}+ 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)">
                      {REPO_FLOOR}+ 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>
                  {isPaid ? null : (
                    <Reading label="Plan Picker">
                      {`/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">
                    Leaderboard points · Slack
                  </Reading>
                  <Reading label="Level 2 Reward">
                    Leaderboard points · 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)">
              {REPO_FLOOR}+
            </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)">
              Points
            </Text>
            <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
              For every merge
            </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>

        </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' : 'EXCLUSIVE FOUNDER OFFER · 50% OFF 3 MONTHS'}
              </Text>
            </XStack>
            {isPaid ? null : <Mark>{`Code: ${FOUNDER_COUPON}`}</Mark>}
          </XStack>

          <Text fontSize="$5" fontWeight="700" color="var(--foreground)">
            {isPaid
              ? 'Already a Hanzo Subscriber? Claim Your Slack Invite'
              : '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 earns points on the Hanzo leaderboard and 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 on Pro and Max plans. 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 Slack & Swag →' : '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 Code."
        lede="Merge code into our production stack. Rewards come only when a maintainer merges your pull request, and every merge into a public Hanzo repository earns points on the leaderboard."
        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)">
                  Founder levels are <strong>earned strictly by merging real code</strong> into Hanzo’s {REPO_FLOOR}+ open repositories. Points, swag and Slack access come only <strong>after your pull request is approved and merged</strong>.
                </Text>
              </YStack>
            </XStack>
            <XStack gap={12} flexWrap="wrap">
              <Action
                render="a"
                href="#bounties"
                $platform-web={{ textDecoration: 'none', whiteSpace: 'nowrap' }}
              >
                Browse Open Bounties ↓
              </Action>
              <More href="/bounty">Points for every merge</More>
            </XStack>
          </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)">
                      ★ EARNED 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>
                      {`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 Merged in Four Steps."
        lede="The fastest way to join our core engineering working group."
        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 / REWARD',
              title: 'Earn Points & Slack',
              desc: 'The merge earns points on the Hanzo leaderboard; claim 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="Open issues labelled bounty across Hanzo’s repositories. Fix a bug or implement a requested feature; the merge earns points on the leaderboard."
        dither
      >
        {/* The open bounties GitHub lists (lib/data/bounties.json, written at build), never a list typed here. */}
        {listed.issues.length ? (
          <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))' }}
          >
            {listed.issues.slice(0, 6).map((b) => (
              <YStack
                key={b.url}
                p={20}
                rounded={20}
                bg="$panel"
                borderWidth={1}
                borderColor="var(--border)"
                hoverStyle={{ borderColor: 'var(--border-strong)' }}
                justify="space-between"
                gap={16}
                $platform-web={{ borderRadius: '20px', transition: 'border-color 0.15s ease' }}
              >
                <YStack gap={10}>
                  <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--foreground)">
                    {`${b.repo}#${b.number}`}
                  </Text>
                  <Text fontSize="$4" fontWeight="600" color="var(--foreground)" lineHeight={24}>
                    {b.title}
                  </Text>
                  <Text fontSize="$2" lineHeight={20} color="var(--muted-foreground)">
                    {b.labels.join(' · ')}
                  </Text>
                </YStack>
                <More href={b.url} target="_blank" rel="noopener noreferrer">
                  Open Issue ↗
                </More>
              </YStack>
            ))}
          </View>
        ) : (
          <Text fontSize="$3" lineHeight={24} color="var(--muted-foreground)" maxW={760}>
            No open issue in Hanzo’s repositories is labelled bounty right now. Every open issue is fair game: a merged fix earns the same points.
          </Text>
        )}

        <XStack items="center" gap={20} flexWrap="wrap">
          <More href="/bounty">See every bounty and what each merge earns</More>
          <XStack items="center" gap={6}>
            <Github size={15} color="var(--muted-foreground)" />
            <More href={GITHUB_HANZO_URL} target="_blank" rel="noopener noreferrer">
              View all {REPO_FLOOR}+ repos on GitHub ↗
            </More>
          </XStack>
        </XStack>
      </Section>

      {/* ── 7. CLAIM & APPLICATION WINDOW ───────────────────────────────────── */}
      <Section
        id="claim"
        label="Founder.Claim"
        title="Claim Your Slack Access & Swag"
        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 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>
            <Text fontSize="$2" color="var(--muted-foreground)" data-slot="rewards-disclosure">
              {SNAPSHOT.disclosure}
            </Text>
          </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 or enterprise PR sponsorship? 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 Support
              </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 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)">
                {REPO_FLOOR}+ 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 levels, points, swag and private Slack access."
        dither
      >
        <View width="100%" maxW={860} mx="auto">
          <Faq items={FAQS} />
        </View>
      </Section>
    </View>
  )
}