// Hero — 3 variants controlled via hero variant prop
// 1. 'dot-matrix' : large animated dot-matrix on the right
// 2. 'split'      : headline left + product-mock card on the right
// 3. 'gradient'   : full-bleed gradient wash with oversized wordmark

const Hero = ({ variant = 'dot-matrix' }) => {
  if (variant === 'gradient') return <HeroGradient />;
  if (variant === 'split')    return <HeroSplit />;
  return <HeroDotMatrix />;
};

// ---------- 1. DOT MATRIX (default) ----------
const HeroDotMatrix = () => (
  <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--bg-canvas)' }}>
    {/* subtle background dots */}
    <div style={{ position: 'absolute', inset: 0, color: 'var(--brand-ember)' }}>
      <DotPattern size={32} dotSize={1.2} opacity={0.09} />
    </div>

    <div style={{
      maxWidth: 1240, margin: '0 auto', padding: '96px 28px 112px',
      position: 'relative', zIndex: 1,
      display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'center',
    }} className="d2-hero-grid">
      <div>
        <Reveal>
          <Pill tone="soft">
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--brand-ember)', animation: 'd2-ping 2s ease-in-out infinite' }}></span>
            Houston, TX · Custom AI engineering
          </Pill>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(44px, 6.2vw, 88px)', lineHeight: 1.02,
            letterSpacing: '-0.035em', margin: '22px 0 20px', color: 'var(--fg-1)',
          }}>
            Building custom<br/>
            software for{' '}
            <span style={{
              background: 'var(--brand-gradient-linear)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>the future.</span>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 540, margin: 0 }}>
            We build AI applications and ready-made white-label businesses — so small teams get the engineering Fortune 500 companies pay millions for.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" href="#products">See what we build <Icon name="arrow" size={16} /></Button>
            <Button variant="secondary" size="lg" href="#newsletter">Get updates</Button>
          </div>
        </Reveal>
        <Reveal delay={320}>
          <div style={{ marginTop: 40, display: 'flex', gap: 28, color: 'var(--fg-3)', fontSize: 13.5, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon name="check" size={15} color="var(--success)" /> Ready day one
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon name="check" size={15} color="var(--success)" /> Enterprise-grade AI
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon name="check" size={15} color="var(--success)" /> Fully brandable
            </span>
          </div>
        </Reveal>
      </div>

      <Reveal delay={200} style={{ justifySelf: 'center' }}>
        <div style={{ position: 'relative', display: 'inline-block' }}>
          {/* Soft glow behind */}
          <div style={{
            position: 'absolute', inset: '-30% -20%', zIndex: 0,
            background: 'radial-gradient(circle at 50% 50%, rgba(255,96,76,0.22) 0%, rgba(255,96,76,0) 60%)',
            filter: 'blur(20px)',
          }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <AnimatedMark size={420} />
          </div>
        </div>
      </Reveal>
    </div>

    <style>{`
      @keyframes d2-ping {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.2); }
      }
    `}</style>
  </section>
);

// ---------- 2. SPLIT (headline + product mock card) ----------
const HeroSplit = () => (
  <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--bg-canvas)' }}>
    <div style={{
      maxWidth: 1240, margin: '0 auto', padding: '88px 28px 104px',
      display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64, alignItems: 'center',
    }} className="d2-hero-grid">
      <div>
        <Pill tone="soft">Engineered in Houston</Pill>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 'clamp(40px, 5.6vw, 80px)', lineHeight: 1.02,
          letterSpacing: '-0.035em', margin: '22px 0 20px',
        }}>
          The same AI that powers <span style={{ color: 'var(--brand-ember)' }}>Fortune 500 companies</span> — built for you.
        </h1>
        <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 540, margin: 0 }}>
          Custom AI applications and ready-built white-label businesses, delivered by engineers from AT&amp;T and Lucent Technologies.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
          <Button variant="primary" size="lg" href="#products">Explore products <Icon name="arrow" size={16} /></Button>
          <Button variant="ghost" size="lg" href="ceo.html">Meet the founder →</Button>
        </div>
      </div>

      {/* Product mock card */}
      <div style={{
        background: '#fff', border: '1px solid var(--border-1)', borderRadius: 'var(--radius-2xl)',
        padding: 4, boxShadow: 'var(--shadow-lg)', position: 'relative', overflow: 'hidden',
      }}>
        {/* window chrome */}
        <div style={{
          background: 'var(--neutral-50)', borderRadius: '24px 24px 0 0', padding: '12px 16px',
          display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--border-1)',
        }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#EA4A35' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#F4B942' }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: '#52BC7B' }} />
          <span style={{ marginLeft: 12, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>
            agent.dub2.ai
          </span>
        </div>
        <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <ChatBubble side="user">Can you pull yesterday's support tickets and draft replies?</ChatBubble>
          <ChatBubble side="agent">On it. 34 tickets found — 12 urgent, 22 standard. Drafts ready for review.</ChatBubble>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '12px 14px', background: 'var(--brand-blush)', border: '1px solid var(--brand-coral)', borderRadius: 12 }}>
            <div style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--brand-ember)', animation: 'd2-ping 1.4s infinite' }} />
            <span style={{ fontSize: 13.5, color: 'var(--fg-1)', fontWeight: 500 }}>Agent running · 3 tools active</span>
            <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--brand-ember)' }}>00:04.3s</span>
          </div>
        </div>
        <div style={{ position: 'absolute', right: -40, bottom: -40, opacity: 0.15 }}>
          <DotGrid w={180} h={180} />
        </div>
      </div>
    </div>
  </section>
);

const ChatBubble = ({ side, children }) => (
  <div style={{ display: 'flex', justifyContent: side === 'user' ? 'flex-end' : 'flex-start' }}>
    <div style={{
      maxWidth: '82%', padding: '10px 14px', borderRadius: side === 'user' ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
      background: side === 'user' ? 'var(--neutral-100)' : 'var(--brand-ember)',
      color: side === 'user' ? 'var(--fg-1)' : '#fff',
      fontSize: 14.5, lineHeight: 1.45,
    }}>{children}</div>
  </div>
);

// ---------- 3. GRADIENT WASH ----------
const HeroGradient = () => (
  <section style={{
    position: 'relative', overflow: 'hidden',
    background: 'radial-gradient(ellipse 80% 80% at 30% 30%, #FF604C 0%, #EA4A35 35%, #C21500 75%, #8E1100 100%)',
    color: '#fff',
  }}>
    <div style={{ position: 'absolute', inset: 0, color: '#fff' }}>
      <DotPattern size={28} dotSize={1.4} opacity={0.18} />
    </div>
    <div style={{
      maxWidth: 1240, margin: '0 auto', padding: '120px 28px 140px',
      position: 'relative', zIndex: 1, textAlign: 'center',
    }}>
      <Pill tone="onDark">Building custom software for the future</Pill>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontWeight: 500,
        fontSize: 'clamp(56px, 10vw, 160px)', lineHeight: 0.95,
        letterSpacing: '-0.045em', margin: '28px auto 20px', maxWidth: 1100,
      }}>
        Custom AI,<br/>built for your team.
      </h1>
      <p style={{ fontSize: 'clamp(17px, 1.5vw, 22px)', lineHeight: 1.5, color: 'rgba(255,255,255,0.88)', maxWidth: 620, margin: '0 auto' }}>
        AI applications and ready-made white-label businesses — engineered so small teams get Fortune 500 capability from day one.
      </p>
      <div style={{ display: 'flex', gap: 12, marginTop: 36, justifyContent: 'center', flexWrap: 'wrap' }}>
        <Button variant="onDark" size="lg" href="#products">Explore products <Icon name="arrow" size={16} /></Button>
        <Button variant="onDarkGhost" size="lg" href="#newsletter">Get early access</Button>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });