// DNEYE site — Nav + Hero
const { Button: HButton, Badge: HBadge, ClassificationBadge: HClass,
        CriterionChip: HChip, ConfidenceBar: HConf } = window.DNEYEDesignSystem_7ffdef;

const NAV_LINKS = [
  { label: 'The problem', href: '#problem' },
  { label: 'How it works', href: '#loops' },
  { label: 'Built for here', href: '#built' },
  { label: 'Trust', href: '#trust' },
];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: scrolled ? 'rgba(7,9,13,0.78)' : 'rgba(7,9,13,0.4)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${scrolled ? 'var(--ink-700)' : 'transparent'}`,
      transition: 'background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 30, padding: '16px 40px' }}>
        <a href="#top" style={{ display: 'inline-flex' }}><Brand markW={84} size={23} /></a>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 30 }} className="dn-navwrap">
          {NAV_LINKS.map((l) => (
            <a key={l.label} href={l.href} className="dn-navlink" style={{ fontSize: 13.5, color: 'var(--ink-200)', fontWeight: 500, textDecoration: 'none', whiteSpace: 'nowrap' }}>{l.label}</a>
          ))}
        </div>
        <a href="#beta" style={{ textDecoration: 'none' }}>
          <HButton variant="accent" size="sm">Beta countdown</HButton>
        </a>
      </div>
    </nav>
  );
}

/* The floating live-draft preview card with a scan line crossing it */
function DraftCard() {
  return (
    <div style={{ position: 'relative', maxWidth: 540, margin: '0 auto' }}>
      <div style={{
        position: 'relative', overflow: 'hidden',
        background: 'linear-gradient(180deg, var(--ink-800), #0b1018)',
        border: '1px solid var(--ink-600)', borderRadius: 'var(--radius-xl)',
        boxShadow: '0 48px 90px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04)',
        padding: 22, textAlign: 'left',
      }}>
        <div className="dn-scanline" style={{ top: 0 }} />
        {/* header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 16 }}>
          <span style={{ display: 'inline-flex', width: 7, height: 7, borderRadius: '50%', background: 'var(--iris-300)', boxShadow: '0 0 8px var(--iris-500)' }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--iris-300)' }}>DNEYE draft</span>
          <span style={{ flex: 1 }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-300)' }}>case 4471 · 1 of 12</span>
        </div>
        {/* variant line */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 16, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 600, color: 'var(--helix-300)' }}>BRCA2</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13.5, color: 'var(--ink-100)' }}>c.1521_1523delCTT</span>
          <span style={{ flex: 1 }} />
          <HClass tier="P" draft size="md" />
        </div>
        <div style={{ marginBottom: 16 }}><HConf value={0.94} label="Draft confidence" tone="helix" /></div>
        {/* criteria */}
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-300)', marginBottom: 9 }}>Applied criteria</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 18 }}>
          <HChip code="PVS1" applied size="sm" /><HChip code="PM2" applied size="sm" /><HChip code="PP1" applied size="sm" /><HChip code="PP3" suggested size="sm" />
        </div>
        {/* footer — human in the loop */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 14, borderTop: '1px solid var(--ink-700)' }}>
          <span style={{ fontSize: 12.5, color: 'var(--ink-300)' }}>Awaiting curator sign-off</span>
          <span style={{ flex: 1 }} />
          <HButton size="sm" variant="secondary" style={{ background: 'transparent', color: 'var(--ink-100)', borderColor: 'var(--ink-500)' }}>Edit</HButton>
          <HButton size="sm" variant="accent" iconLeft={<Icon name="check" size={14} />}>Sign off</HButton>
        </div>
      </div>
      {/* caption */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginTop: 16, color: 'var(--ink-300)', fontSize: 12.5 }}>
        <Icon name="eye" size={14} style={{ color: 'var(--helix-400)' }} />
        DNEYE proposes. Your curator decides.
      </div>
    </div>
  );
}

function Hero() {
  return (
    <header id="top" style={{ position: 'relative', overflow: 'hidden', padding: '118px 0 104px' }}>
      <Glow at="50% 4%" size="68% 58%" strength={0.17} />
      {/* faint iris rings */}
      <div aria-hidden style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 760, height: 760, borderRadius: '50%', border: '1px solid rgba(43,194,184,0.07)', pointerEvents: 'none' }} />
      <div aria-hidden style={{ position: 'absolute', top: -40, left: '50%', transform: 'translateX(-50%)', width: 520, height: 520, borderRadius: '50%', border: '1px solid rgba(43,194,184,0.06)', pointerEvents: 'none' }} />

      <Container style={{ position: 'relative', textAlign: 'center' }}>
        <Reveal style={{ display: 'flex', justifyContent: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '6px 13px', borderRadius: 999, border: '1px solid var(--ink-600)', background: 'rgba(10,14,20,0.6)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--ink-100)' }}>
            <Icon name="eye" size={14} style={{ color: 'var(--helix-400)' }} />
            Variant interpretation · human-in-the-loop
          </span>
        </Reveal>

        <Reveal delay={80}>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(38px, 5.8vw, 72px)', lineHeight: 1.04, letterSpacing: '-.025em',
            color: '#fff', margin: '26px auto 0', maxWidth: 1000,
          }}>
            An expert eye on every variant.<br />
            <span style={{ color: 'var(--ink-200)' }}>A watchful one on every </span><span style={{ color: 'var(--helix-400)' }}>archive</span>.
          </h1>
        </Reveal>

        <Reveal delay={140}>
          <p style={{ fontSize: 18.5, lineHeight: 1.62, color: 'var(--ink-100)', maxWidth: 660, margin: '26px auto 0' }}>
            DNEYE is an AI-assisted variant interpretation layer that drafts ACMG assessments, re-scans your back catalogue for newly reclassifiable findings, and remembers every call your curators make — built human-in-the-loop, for the way clinical labs actually work.
          </p>
        </Reveal>

        <Reveal delay={200} style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
          <a href="#loops" style={{ textDecoration: 'none' }}><HButton variant="secondary" size="lg" style={{ background: 'transparent', color: '#fff', borderColor: 'var(--ink-500)' }}>See how it works</HButton></a>
        </Reveal>

        <Reveal delay={280} style={{ marginTop: 64 }}>
          <DraftCard />
        </Reveal>
      </Container>
    </header>
  );
}

Object.assign(window, { Nav, Hero });
