// Hero section with three variants: banner, terminal, diagram

const { useState: uH, useEffect: eH, useRef: rH, useMemo: mH } = React;

function HeroNav({ theme }) {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('top');

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      const ids = ['pipeline', 'integrations', 'cta'];
      let current = 'top';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 120) current = id;
      }
      setActive(current);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const sections = [
    ['pipeline',     '#pipeline'],
    ['integrations', '#integrations'],
    ['install',      '#cta'],
  ];

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      backdropFilter: 'blur(16px)',
      WebkitBackdropFilter: 'blur(16px)',
      background: scrolled
        ? (theme.scheme === 'dark' ? 'rgba(18,16,14,0.9)' : 'rgba(244,239,230,0.9)')
        : 'transparent',
      borderBottom: `1px solid ${scrolled ? theme.border : 'transparent'}`,
      transition: 'all 0.25s ease',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '18px 32px',
        display: 'flex', alignItems: 'center', gap: 32,
      }}>
        {/* Brand */}
        <a href="#top" style={{
          display: 'flex', alignItems: 'center', gap: 12,
          textDecoration: 'none',
        }}>
          <MiniLogo theme={theme} />
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 13,
            color: theme.text, letterSpacing: '0.24em', fontWeight: 500,
          }}>EVALYN</span>
        </a>

        {/* Center section nav */}
        <div style={{
          flex: 1,
          display: 'flex', justifyContent: 'center',
          gap: 2,
        }}>
          {sections.map(([label, href]) => {
            const isActive = active === href.replace('#', '');
            return (
              <a key={label} href={href}
                style={{
                  position: 'relative',
                  padding: '8px 16px',
                  fontFamily: 'var(--body)', fontSize: 15,
                  letterSpacing: '0',
                  color: isActive ? theme.text : theme.textDim,
                  textDecoration: 'none',
                  transition: 'color 0.18s',
                }}
                onMouseEnter={e => e.currentTarget.style.color = theme.text}
                onMouseLeave={e => e.currentTarget.style.color = isActive ? theme.text : theme.textDim}
              >
                {label}
                {isActive && (
                  <span style={{
                    position: 'absolute', left: 16, right: 16, bottom: 2, height: 1,
                    background: theme.accent,
                  }} />
                )}
              </a>
            );
          })}
        </div>

        {/* Right: docs + github + CTA */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <a href="https://github.com/shihongDev/evalyn#readme" target="_blank" rel="noopener" style={{
            fontFamily: 'var(--body)', fontSize: 15,
            color: theme.textDim, textDecoration: 'none',
            transition: 'color 0.18s',
          }}
            onMouseEnter={e => e.currentTarget.style.color = theme.text}
            onMouseLeave={e => e.currentTarget.style.color = theme.textDim}
          >docs</a>
          <a href="https://github.com/shihongDev/evalyn" target="_blank" rel="noopener" style={{
            display: 'flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--body)', fontSize: 15,
            color: theme.textDim, textDecoration: 'none',
            transition: 'color 0.18s',
          }}
            onMouseEnter={e => e.currentTarget.style.color = theme.text}
            onMouseLeave={e => e.currentTarget.style.color = theme.textDim}
          >
            <Icon.github /> github
          </a>
          <Button theme={theme} kind="primary" href="https://github.com/shihongDev/evalyn#install" target="_blank" rel="noopener" style={{ fontSize: 12, padding: '9px 16px' }} icon={<Icon.arrow />}>
            install
          </Button>
        </div>
      </div>
    </nav>
  );
}

function MiniLogo({ theme }) {
  // Tiny 5x5 E in pixels
  const rows = [
    "#####",
    "#....",
    "####.",
    "#....",
    "#####",
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'flex', gap: 1 }}>
          {r.split("").map((c, j) => (
            <div key={j} style={{
              width: 3, height: 3,
              background: c === "#" ? theme.accent : 'transparent',
              boxShadow: c === "#" ? `0 0 2px ${theme.accent}` : 'none',
            }} />
          ))}
        </div>
      ))}
    </div>
  );
}

function StatusStrip({ theme }) {
  const items = [
    ['LOCAL-FIRST',  'SQLite, no cloud'],
    ['136 METRICS',  '76 obj · 60 LLM'],
    ['9 OPTIMIZERS', 'GEPA · OPRO · MIPROv2 · +6'],
    ['14 FRAMEWORKS','auto-instrumented'],
    ['MIT',          'OSS'],
  ];
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${items.length}, 1fr)`,
      borderTop: `1px solid ${theme.border}`,
      borderBottom: `1px solid ${theme.border}`,
      fontFamily: 'var(--mono)',
      fontSize: 11,
    }}>
      {items.map(([k, v], i) => (
        <div key={k} style={{
          padding: '16px 20px',
          borderRight: i < items.length - 1 ? `1px solid ${theme.border}` : 'none',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <span style={{ color: theme.accent, letterSpacing: '0.1em' }}>{k}</span>
          <span style={{ color: theme.textDim }}>{v}</span>
        </div>
      ))}
    </div>
  );
}

function HeroBanner({ theme }) {
  // Big pixel "EVALYN" banner
  const [pxSize, setPxSize] = useState(14);
  useEffect(() => {
    const onResize = () => {
      const w = window.innerWidth;
      if (w < 900) setPxSize(8);
      else if (w < 1200) setPxSize(11);
      else setPxSize(14);
    };
    onResize();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return (
    <div style={{ padding: `${theme.density.hero}px 0 40px`, position: 'relative' }}>
      {/* Background grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${theme.grid} 1px, transparent 1px), linear-gradient(90deg, ${theme.grid} 1px, transparent 1px)`,
        backgroundSize: '40px 40px',
        maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.9), transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.9), transparent 75%)',
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', position: 'relative' }}>
        <Eyebrow theme={theme}>v0.3.0 · open source · MIT</Eyebrow>
        <div style={{ margin: '32px 0 28px', display: 'flex', justifyContent: 'flex-start' }}>
          <PixelText text="EVALYN" size={pxSize} gap={Math.max(1, pxSize/6)} color={theme.accent} glow animate />
        </div>
        <div style={{
          fontFamily: 'var(--mono)',
          fontSize: 14,
          color: theme.accent,
          letterSpacing: '0.1em',
          marginBottom: 8,
        }}>
          EVALUATION AS A SERVICE<span style={{ color: theme.textMute }}>.</span>
        </div>
        <h1 style={{
          fontFamily: 'var(--display)',
          fontSize: 'clamp(32px, 4.4vw, 56px)',
          lineHeight: 1.02,
          letterSpacing: '-0.025em',
          fontWeight: 500,
          color: theme.text,
          margin: '0 0 24px',
          maxWidth: 880,
          textWrap: 'balance',
        }}>
          Let your agents evolve <span style={{ color: theme.accent, fontStyle: 'italic', fontFamily: 'var(--display)' }}>— privately</span>.
          <br/>
          <span style={{ color: theme.textDim, fontSize: '0.66em', fontWeight: 400 }}>
            The local-first evaluation framework for LLM agents.
          </span>
        </h1>
        <p style={{
          fontFamily: 'var(--body)',
          fontSize: 18,
          lineHeight: 1.55,
          color: theme.textDim,
          maxWidth: 620,
          margin: '0 0 36px',
          textWrap: 'pretty',
        }}>
          Trace, score, calibrate. 136 built-in metrics. Nine calibration optimizers. Zero cloud. One decorator.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', marginBottom: 32 }}>
          <Button theme={theme} kind="primary" href="https://github.com/shihongDev/evalyn#install" target="_blank" rel="noopener" icon={<Icon.arrow />}>install the sdk</Button>
          <Button theme={theme} kind="ghost" href="#pipeline">see the pipeline</Button>
        </div>

      </div>
    </div>
  );
}

function HeroTerminal({ theme }) {
  return (
    <div style={{ padding: `${theme.density.hero}px 0 40px`, position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 70% 40%, ${theme.accentSoft}, transparent 55%)`,
        pointerEvents: 'none',
      }} />
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center',
        position: 'relative',
      }}>
        <div>
          <Eyebrow theme={theme}>local-first eval for agents</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(40px, 5.2vw, 76px)',
            lineHeight: 1.0,
            letterSpacing: '-0.03em',
            fontWeight: 500,
            color: theme.text,
            margin: '24px 0 20px',
            textWrap: 'balance',
          }}>
            Run evals{' '}
            <span style={{ color: theme.accent }}>one-click</span>.<br/>
            <span style={{ color: theme.textDim, fontStyle: 'italic' }}>Keep your data.</span>
          </h1>
          <p style={{
            fontFamily: 'var(--body)', fontSize: 18, lineHeight: 1.55,
            color: theme.textDim, maxWidth: 480, margin: '0 0 32px',
          }}>
            A complete evaluation pipeline for LLM agents — trace, dataset, metrics, calibration — that runs entirely on your machine.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 24 }}>
            <Button theme={theme} kind="primary" icon={<Icon.arrow />}
              href="https://github.com/shihongDev/evalyn#install" target="_blank" rel="noopener">install</Button>
          </div>
        </div>
        <LiveTerminal theme={theme} />
      </div>
    </div>
  );
}

function HeroDiagram({ theme }) {
  return (
    <div style={{ padding: `${theme.density.hero}px 0 40px`, position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 72, alignItems: 'center' }}>
          <div>
            <Eyebrow theme={theme}>the full loop</Eyebrow>
            <h1 style={{
              fontFamily: 'var(--display)',
              fontSize: 'clamp(36px, 4.6vw, 62px)',
              lineHeight: 1.02,
              letterSpacing: '-0.025em',
              fontWeight: 500,
              margin: '24px 0 20px',
              color: theme.text,
              textWrap: 'balance',
            }}>
              Five steps from <span style={{color: theme.accent}}>raw traces</span> to
              calibrated <span style={{fontStyle:'italic'}}>production-grade</span> agents.
            </h1>
            <p style={{ color: theme.textDim, fontSize: 17, lineHeight: 1.55, maxWidth: 480, marginBottom: 28 }}>
              Collect. Build. Evaluate. Calibrate. Expand. One decorator wires your agent; one command runs the whole loop.
            </p>
            <div style={{ display: 'flex', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
              <Button theme={theme} kind="primary" icon={<Icon.arrow />}>start the pipeline</Button>
              <Button theme={theme} kind="ghost">watch the demo</Button>
            </div>
          </div>
          <PipelineMini theme={theme} />
        </div>
      </div>
    </div>
  );
}

function PipelineMini({ theme }) {
  const steps = ["collect", "build", "evaluate", "calibrate", "expand"];
  return (
    <div style={{
      border: `1px solid ${theme.border}`,
      background: theme.panel,
      padding: 32,
      position: 'relative',
    }}>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em',
        color: theme.textMute, marginBottom: 20,
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>EVALYN.PIPELINE</span>
        <span>5 STAGES · 1 LOOP</span>
      </div>
      {steps.map((s, i) => (
        <div key={s} style={{
          display: 'flex', alignItems: 'center', gap: 14,
          padding: '14px 0',
          borderBottom: i < steps.length - 1 ? `1px dashed ${theme.border}` : 'none',
        }}>
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 11,
            width: 28, color: theme.accent,
          }}>0{i+1}</span>
          <span style={{
            fontFamily: 'var(--display)', fontSize: 26, color: theme.text,
            fontWeight: 400, letterSpacing: '-0.01em', flex: 1,
          }}>{s}</span>
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 10, color: theme.textMute,
          }}>stage/{i+1}</span>
        </div>
      ))}
    </div>
  );
}

function Hero({ theme }) {
  if (theme.heroVariant === 'terminal') return <HeroTerminal theme={theme} />;
  if (theme.heroVariant === 'diagram') return <HeroDiagram theme={theme} />;
  return <HeroBanner theme={theme} />;
}

Object.assign(window, { Hero, HeroNav, HeroBanner, HeroTerminal, HeroDiagram, StatusStrip, MiniLogo });
