function Home() {
  const { IconArrowRight, IconClock, IconDownload, IconCalc, IconBook, IconCheck } = window.Icons;

  const blueprints = [
    {
      eyebrow: 'Case study · Solana Breakpoint 2025',
      wp: 'green',
      icon: IconBook,
      title: 'Gamifying Breakpoint',
      desc: 'How 19 partner booths ran one interconnected quest system across the conference — 763,241 quests, 813 attendees on the leaderboard, $250K airdropped from a drone show.',
      time: '~12 min read',
      href: 'https://domino.run/campaigns/breakpoint',
      cta: 'Read the case study',
    },
    {
      eyebrow: 'Playbook · For your next booth',
      wp: 'indigo',
      icon: IconBook,
      title: 'The Booth Gamification Playbook',
      desc: 'The Engage → Exchange → Reward loop that turns foot traffic into attributed pipeline — and the staff leaderboard that drives it. Build it yourself with Claude Code in a week.',
      time: '~10 min read',
      href: 'playbook.html',
      cta: 'Read the playbook',
    },
  ];

  return (
    <React.Fragment>
      {/* Hero */}
      <section style={{ padding: '0 8px 8px' }}>
        <div className="wp wp-green grain" style={{ borderRadius: 16, overflow: 'hidden' }}>
          <div className="container" style={{ padding: '112px 24px 96px', display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start', maxWidth: 920 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 12px', borderRadius: 9999, background: 'rgba(0,0,0,.18)', color: 'white', fontSize: 13, fontWeight: 500 }}>
              Booth Blueprint · Conference & events
            </span>
            <h1 className="h-display">
              Foot traffic, <em style={{ fontStyle: 'italic' }}>converted into pipeline.</em>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.6, color: 'rgba(255,255,255,.78)', maxWidth: '54ch' }}>
              A free resource for teams who run conference booths. One real case study, one production-ready playbook, and a calculator for the ROI conversation with your CFO.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
              <a href="#blueprints" className="btn btn-light lg">Read the blueprints <IconArrowRight /></a>
              <a href="roi-calculator.html" className="btn btn-plain-light lg">Open the calculator</a>
            </div>
            <div style={{ display: 'flex', gap: 24, marginTop: 16, flexWrap: 'wrap', fontSize: 13, color: 'rgba(255,255,255,.65)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconCheck /> No signup</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconCheck /> Web · PDF · Markdown</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconCheck /> Built from real client work</span>
            </div>
          </div>
        </div>
      </section>

      {/* Blueprints */}
      <section id="blueprints" className="section" style={{ paddingTop: 80 }}>
        <div className="container">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 40, maxWidth: 720 }}>
            <div className="eyebrow">The blueprints</div>
            <h2 className="h-section">Two reads. One mechanic. Different stages of belief.</h2>
            <p className="p-body">Start with the case study if you want proof. Start with the playbook if you want to ship one in two weeks.</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
            {blueprints.map(b => {
              const Icon = b.icon;
              return (
                <a key={b.title} href={b.href} className="card" style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none', transition: 'background-color .15s ease' }}>
                  <div className={`wp wp-${b.wp} grain`} style={{ borderRadius: 10, aspectRatio: '16/9', padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                    <div style={{ width: 44, height: 44, background: 'rgba(0,0,0,.22)', borderRadius: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                      <Icon />
                    </div>
                    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,.8)' }}>{b.eyebrow}</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '-0.02em', lineHeight: 1.05, color: 'white' }}>{b.title}</div>
                    </div>
                  </div>
                  <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--olive-700)' }}>{b.desc}</p>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--olive-500)' }}>
                        <IconClock /> {b.time}
                      </div>
                      <div className="link" style={{ fontSize: 13 }}>{b.cta} <IconArrowRight /></div>
                    </div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* Calculator card */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <a href="roi-calculator.html" className="card" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 0, textDecoration: 'none', overflow: 'hidden' }}>
            <div style={{ padding: '40px 32px 40px 24px', display: 'flex', flexDirection: 'column', gap: 16, justifyContent: 'center' }}>
              <div style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 8, padding: '4px 10px', borderRadius: 9999, background: 'rgba(0,0,0,.06)', fontSize: 12, fontWeight: 600, color: 'var(--olive-700)' }}>
                <span style={{ width: 6, height: 6, borderRadius: 9999, background: '#22CE8A' }} /> Live · Free tool
              </div>
              <h3 className="h-section" style={{ fontSize: 'clamp(28px, 3vw, 36px)' }}>Booth ROI Calculator</h3>
              <p className="p-body" style={{ maxWidth: '52ch' }}>
                Plug in your booth size, deal value, and conference length. See the leads, pipeline, and payback you'd unlock by running a gamified booth — versus the baseline of a passive one.
              </p>
              <div className="link" style={{ marginTop: 4 }}>Open the calculator <IconArrowRight /></div>
            </div>
            <div className="wp wp-brown grain" style={{ borderRadius: 10, margin: 8, padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 240 }}>
              <div style={{ width: 44, height: 44, background: 'rgba(0,0,0,.22)', borderRadius: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                <IconCalc />
              </div>
              <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid rgba(255,255,255,.18)', paddingBottom: 8 }}>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,.7)' }}>Baseline leads</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'white' }}>180</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid rgba(255,255,255,.18)', paddingBottom: 8 }}>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,.7)' }}>Gamified leads</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'white' }}>+450</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,.7)' }}>Net pipeline</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'white' }}>$1.35M</span>
                </div>
              </div>
            </div>
          </a>
        </div>
      </section>

      {/* What's inside */}
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'flex-start' }}>
            <div>
              <div className="eyebrow">What's inside</div>
              <h2 className="h-section" style={{ marginTop: 16 }}>Built for the people running the booth — not the people who approved it.</h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {[
                { t: 'The IBV loop', d: 'Engage → Exchange → Reward — what an Ideal Booth Visitor does, in order, and how to engineer it.' },
                { t: 'Staff leaderboard', d: 'How attribution turns your team into a competing, coachable, measurable booth.' },
                { t: 'Tiered merch', d: 'Why the keyboard on the shelf matters more than the lanyard in the bag.' },
                { t: 'The mascot quest', d: 'One suit, one extra body, dozens of organic posts — the highest-leverage hire of the week.' },
                { t: 'Build with Claude Code', d: 'A 7-day shipping plan: schema, quest engine, OAuth, photo verification, admin TV view.' },
                { t: 'CFO-ready ROI', d: 'A calculator your finance team will actually look at twice.' },
              ].map(x => (
                <div key={x.t} style={{ background: 'rgba(0,0,0,.025)', borderRadius: 12, padding: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--olive-950)' }}>{x.t}</div>
                  <div style={{ fontSize: 13, color: 'var(--olive-700)', lineHeight: 1.65 }}>{x.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '0 8px 0' }}>
        <div className="wp wp-green grain" style={{ borderRadius: 16, overflow: 'hidden' }}>
          <div className="container" style={{ padding: '80px 24px', display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center', textAlign: 'center' }}>
            <h2 className="h-display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', maxWidth: '22ch' }}>
              Build your own booth, ship it in a week.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,.78)', maxWidth: '52ch', lineHeight: 1.6 }}>
              The build prompt has the schema, the quest engine, three app surfaces, and the integrations. Copy it, paste it into Claude Code or Cursor, iterate from there. The same loop is powering Solana, Solflare, MonkeDAO and 60+ more.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
              {window.CopyPromptButton && <window.CopyPromptButton className="btn btn-light lg" label="Copy for agent" />}
              <a href="https://domino.run/campaigns/breakpoint" className="btn btn-plain-light lg">See Breakpoint case study</a>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.Home = Home;