const Hero = ({ variant = 'orchestration' }) => {
  return (
    <section style={{
      position: 'relative',
      paddingTop: 64,
      paddingBottom: 32,
      overflow: 'hidden',
    }}>
      {/* Background: blueprint grid + radial accent glow */}
      <HeroBackdrop />

      <Container wide style={{ position: 'relative', zIndex: 2 }}>
        {/* Open-source top bar */}
        <div className="hero-pill-bar" style={{
          display: 'flex', justifyContent: 'center',
          marginBottom: 28,
        }}>
          <a href="https://github.com/syedia/autoarchitect" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '5px 12px 5px 6px',
            fontSize: 11.5, color: 'var(--fg-2)',
            background: 'var(--bg-1)',
            border: '1px solid var(--line-2)',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            letterSpacing: '0.04em',
          }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '2px 8px', borderRadius: 999,
              background: 'var(--accent-soft)',
              color: 'var(--accent-2)',
              border: '1px solid var(--line-3)',
              fontWeight: 600,
            }}>
              <I.sparkle size={10} />
              Early access
            </span>
            <span>Autonomous Architect that ships · MIT licensed</span>
          </a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.05fr 1fr',
          gap: 56,
          alignItems: 'center',
          paddingTop: 20,
        }} className="hero-grid">
          {/* LEFT: Headline + sub + CTAs */}
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontFamily: 'var(--font-mono)',
              fontSize: 10.5,
              color: 'var(--fg-3)',
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              marginBottom: 24,
            }}>
              <span style={{
                width: 22, height: 1, background: 'var(--accent)',
                boxShadow: '0 0 6px var(--accent)',
              }} />
              <span>AUTOARCHITECT · SELF-HOSTED</span>
            </div>

            <h1 className="hero-title" style={{
              margin: 0,
              fontSize: 76,
              lineHeight: 0.96,
              letterSpacing: '-0.04em',
              fontWeight: 600,
              color: 'var(--fg-1)',
              textWrap: 'balance',
            }}>
              You + <Italic style={{ color: 'var(--accent-2)' }}>Architect</Italic><br/>
              = <Italic style={{ color: 'var(--accent-2)' }}>shipped</Italic>.
            </h1>

            <p style={{
              marginTop: 28,
              maxWidth: 500,
              fontSize: 17.5,
              lineHeight: 1.55,
              color: 'var(--fg-2)',
              textWrap: 'pretty',
            }}>
              One prompt. A product, shipped. A studio you own. Open-source,
              self-hostable, BYO LLM.
            </p>
            <p className="hero-subhead" style={{
              marginTop: 14,
              maxWidth: 500,
              fontSize: 15,
              lineHeight: 1.55,
              color: 'var(--fg-3)',
              textWrap: 'pretty',
            }}>
              {window.SITE_STATS.toolPaletteCount} tools. Subagents in parallel. An always-on{' '}
              <a href="/code.html" style={{ color: 'var(--fg-1)', textDecoration: 'underline', textDecorationColor: 'var(--accent-2)', textUnderlineOffset: 4, textDecorationThickness: 2 }}>
                Architect substrate
              </a>{' '}
              that iterates until done.
            </p>

            {/* Install command — one-liner, copyable */}
            <div className="hero-install-cmd" style={{
              marginTop: 36,
              padding: '14px 18px',
              borderRadius: 10,
              background: 'rgba(0,0,0,0.35)',
              border: '1px solid var(--line-1)',
              fontFamily: 'var(--font-mono)',
              fontSize: 13.5,
              color: 'var(--fg-1)',
              maxWidth: 560,
              overflowX: 'auto',
              whiteSpace: 'nowrap',
              cursor: 'text',
            }}>
              <span style={{ color: 'var(--accent-2)' }}>$ </span>
              curl -fsSL https://get.autoarchitect.com | sh
            </div>
            <div className="hero-install-note" style={{ marginTop: 8, fontSize: 12, color: 'var(--fg-4)', fontFamily: 'var(--font-mono)' }}>
              # Windows: <span style={{ color: 'var(--fg-3)' }}>iwr https://get.autoarchitect.com -useb | iex</span> &nbsp;·&nbsp;
              needs Docker &nbsp;·&nbsp; runs locally
            </div>

            <div style={{
              marginTop: 28,
              display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
            }} className="hero-ctas">
              <a href="https://github.com/syedia/autoarchitect" style={{ textDecoration: 'none' }}>
                <PrimaryBtn size="lg" icon={<I.github size={16} />}>Star on GitHub</PrimaryBtn>
              </a>
              <a href="/architecture.html" style={{ textDecoration: 'none' }}>
                <GhostBtn size="lg">Read the architecture</GhostBtn>
              </a>
            </div>

            {/* Trust row */}
            <div style={{
              marginTop: 44,
              display: 'flex',
              alignItems: 'center',
              gap: 0,
              borderTop: '1px solid var(--line-1)',
              borderBottom: '1px solid var(--line-1)',
              paddingTop: 14, paddingBottom: 14,
            }} className="hero-trust">
              {[
                { icon: 'server', text: 'Self-hosted' },
                { icon: 'branch', text: 'MIT License' },
                { icon: 'cpu',    text: 'BYO LLM' },
                { icon: 'shield', text: 'Enterprise-First Security' },
              ].map((t, i) => {
                const Icn = I[t.icon];
                return (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    borderLeft: i === 0 ? 'none' : '1px solid var(--line-1)',
                    paddingLeft: i === 0 ? 0 : 14,
                    paddingRight: i === 3 ? 0 : 14,
                    fontSize: 11.5,
                    fontFamily: 'var(--font-mono)',
                    color: 'var(--fg-2)',
                    letterSpacing: '0.04em',
                    whiteSpace: 'nowrap',
                  }}>
                    <Icn size={13} style={{ color: 'var(--accent-2)', flexShrink: 0 }} />
                    <span>{t.text}</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* RIGHT: Orchestration diagram */}
          <div style={{ position: 'relative' }}>
            <HeroDiagramFrame />
          </div>
        </div>

      </Container>
    </section>
  );
};

const HeroBackdrop = () => (
  <>
    {/* Grid paper */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage:
        'linear-gradient(var(--line-1) 1px, transparent 1px),' +
        'linear-gradient(90deg, var(--line-1) 1px, transparent 1px)',
      backgroundSize: '48px 48px',
      opacity: 0.5,
      maskImage: 'radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%)',
      WebkitMaskImage: 'radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%)',
      pointerEvents: 'none',
    }} />
    {/* Accent glow */}
    <div style={{
      position: 'absolute',
      top: -100, right: -200,
      width: 800, height: 800,
      background: 'radial-gradient(circle, var(--accent-soft), transparent 60%)',
      pointerEvents: 'none',
      filter: 'blur(40px)',
    }} />
    <div style={{
      position: 'absolute',
      bottom: -200, left: -100,
      width: 600, height: 600,
      background: 'radial-gradient(circle, rgba(96,165,250,0.06), transparent 60%)',
      pointerEvents: 'none',
      filter: 'blur(40px)',
    }} />
  </>
);

/* Frame around the orchestration diagram with HUD-style corner annotations */
const HeroDiagramFrame = () => (
  <div className="force-dark-panel hero-diagram-frame" style={{
    position: 'relative',
    background: 'linear-gradient(180deg, rgba(139,92,246,0.05), rgba(139,92,246,0))',
    border: '1px solid var(--line-2)',
    borderRadius: 16,
    padding: 16,
    overflow: 'hidden',          /* iPhone fix — clip any SVG overflow */
    minWidth: 0,                  /* allow shrinking inside grid cells */
    boxShadow: '0 40px 80px -20px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02)',
  }}>
    {/* HUD bar top */}
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      paddingBottom: 12,
      borderBottom: '1px dashed var(--line-2)',
      marginBottom: 8,
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      color: 'var(--fg-3)',
      letterSpacing: '0.1em',
    }}>
      {/* Studio sub-brand mark — single source of truth in marks.jsx */}
      <window.StudioMark size={14} withWordmark idKey="hero" style={{ marginRight: 4 }} />

      <span style={{ color: 'var(--fg-4)' }}>·</span>
      <span style={{ color: 'var(--accent-2)' }}>PREVIEW</span>
      <span style={{ color: 'var(--fg-4)' }}>·</span>
      <span>ARCHITECT</span>
      <span style={{ color: 'var(--fg-4)' }}>·</span>
      <span>{window.SITE_STATS.toolPaletteCount}+ TOOLS</span>
      <span style={{ marginLeft: 'auto', color: 'var(--fg-4)' }}>
        runs locally in your Studio
      </span>
    </div>

    <OrchestrationDiagram />

    {/* HUD bar bottom: live stats */}
    <div style={{
      display: 'flex', alignItems: 'center', gap: 0,
      borderTop: '1px dashed var(--line-2)',
      paddingTop: 12,
      marginTop: 4,
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
    }}>
      {[
        ['TOKENS/s', '12.4k', 'var(--accent-2)'],
        ['PLAN DEPTH', '07', 'var(--fg-1)'],
        ['LATENCY', '143ms', 'var(--fg-1)'],
        ['COST', '$0.03', 'var(--ok)'],
      ].map(([k, v, c], i) => (
        <div key={k} style={{
          flex: 1,
          display: 'flex', flexDirection: 'column', gap: 2,
          borderLeft: i === 0 ? 'none' : '1px solid var(--line-1)',
          paddingLeft: i === 0 ? 0 : 14,
        }}>
          <span style={{ color: 'var(--fg-4)', fontSize: 9.5, letterSpacing: '0.14em' }}>{k}</span>
          <span style={{ color: c, fontWeight: 500 }}>{v}</span>
        </div>
      ))}
    </div>
  </div>
);

/* Scrolling ticker of companies using it */
const HeroTicker = () => {
  const logos = [
    { name: 'VERSA', letter: 'V' },
    { name: 'LINEWORKS', letter: 'L' },
    { name: 'HYPER.IO', letter: 'H' },
    { name: 'NORTHSTAR', letter: 'N' },
    { name: 'PARALLAX', letter: 'P' },
    { name: 'MONOREPO', letter: 'M' },
    { name: 'KERNEL', letter: 'K' },
    { name: 'OCTAGON', letter: 'O' },
    { name: 'SYNTAX', letter: 'S' },
    { name: 'ATRIUM', letter: 'A' },
  ];

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 18,
      alignItems: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 10.5,
        color: 'var(--fg-3)',
        letterSpacing: '0.28em',
        textTransform: 'uppercase',
      }} className="ticker-label">
        ↓ DEPLOYED BY ENGINEERING TEAMS AT ↓
      </div>
      <div style={{
        width: '100%',
        overflow: 'hidden',
        position: 'relative',
        maskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)',
      }}>
        <div style={{
          display: 'flex',
          gap: 48,
          animation: 'ticker 34s linear infinite',
          width: 'max-content',
        }}>
          {[...logos, ...logos].map((l, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              color: 'var(--fg-3)',
              fontFamily: 'var(--font-mono)',
              fontSize: 14,
              fontWeight: 500,
              letterSpacing: '0.14em',
              whiteSpace: 'nowrap',
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 5,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                background: 'var(--bg-2)',
                border: '1px solid var(--line-2)',
                color: 'var(--fg-1)',
                fontSize: 11, fontWeight: 700,
              }}>{l.letter}</span>
              {l.name}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.Hero = Hero;