// Nav + Hero + Footer + CTA
const { useEffect: useEffectN, useState: useStateN } = React;

function Nav() {
  const [scrolled, setScrolled] = useStateN(false);
  useEffectN(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav${scrolled ? ' nav--scrolled' : ''}`}>
      <div className="container nav__inner">
        <a href="#top" className="nav__brand">
          <img className="nav__brand-mark" src="assets/ciphryn-mark-dark.png" alt="" />
          <span>Ciphryn</span>
        </a>
        <div className="nav__links">
          <a className="nav__link" href="#modes">Services</a>
          <a className="nav__link" href="#lifecycle">How It Works</a>
          <a className="nav__link" href="#ai">Platform</a>
          <a className="nav__link" href="#reports">Reports</a>
          <a className="nav__link" href="#pricing">Pricing</a>
        </div>
        <div className="nav__cta">
          <a className="btn btn--sm" href="#contact">
            Request a demo <span className="btn__arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

function HeroPipeline() {
  // Animated pipeline: Agents → Dedupe → Noise → Human → Report
  return (
    <div className="hero-pipe" aria-hidden="true">
      {[
        { k: 'AI agents',       t: 'continuous scan',  c: 'var(--accent)'    },
        { k: 'Dedupe engine',   t: 'cluster + match',  c: 'var(--accent-hi)' },
        { k: 'Noise filter',    t: 'confidence score', c: 'var(--accent-hi)' },
        { k: 'Human validation',t: 'expert pentester', c: 'var(--accent-2)'  },
        { k: 'Report',          t: 'manual quality',   c: 'var(--accent-2)'  },
      ].map((s, i, a) => (
        <React.Fragment key={i}>
          <div className="hero-pipe__node">
            <div className="hero-pipe__dot" style={{ background: s.c, boxShadow: `0 0 12px ${s.c}` }}>
              <span style={{ animationDelay: `${i * 0.3}s` }} className="hero-pipe__ping"></span>
            </div>
            <div className="hero-pipe__k">{s.k}</div>
            <div className="hero-pipe__t">{s.t}</div>
          </div>
          {i < a.length - 1 && (
            <div className="hero-pipe__arrow">
              <span></span><span></span><span></span>
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <AIBackground />
      <div className="hero__bg"></div>
      <div className="hero__lines"></div>
      <div className="container">
        <div className="hero__grid">
          <div className="hero__copy">
            <span className="eyebrow">AI Agents · Dedupe · Human-Validated</span>
            <h1 className="hero__h1">
              AI-Powered Pentesting,<br/>
              <span className="hero__h1-line2">Validated by Human Experts.</span>
            </h1>
            <p className="hero__sub">
              Dedicated AI agents continuously assess your attack surface. A dedupe engine collapses repeats. A noise filter removes false positives. Then expert pentesters validate exploitability and deliver manual-pentest-quality reports.
            </p>
            <div className="hero__row">
              <a className="btn" href="#contact">
                Request a demo <span className="btn__arrow">→</span>
              </a>
              <a className="btn btn--ghost" href="#lifecycle">
                See how it works
              </a>
            </div>
            <div className="hero__pills">
              <span className="chip chip--dot chip--accent">Agents online · live</span>
              <span className="chip">Continuous</span>
              <span className="chip">Hybrid</span>
              <span className="chip">Manual</span>
            </div>
          </div>
          <div>
            <HeroTerminal />
          </div>
        </div>

        <HeroPipeline />
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="section">
      <div className="container">
        <div className="cta">
          <div className="grid-bg" style={{ opacity: 0.6 }}></div>
          <img className="cta__mark" src="assets/ciphryn-mark-dark.png" alt="" />
          <span className="eyebrow">Talk to us</span>
          <h2 className="cta__title" style={{ marginTop: 18 }}>Not another noisy scanner.<br/>Not just another manual pentest.</h2>
          <p className="cta__sub">A continuous AI + human validation platform built for real security outcomes. 30-minute walkthrough with an engineer. We'll scope one of your assets live.</p>
          <div className="cta__row">
            <a className="btn" href="#contact">Request a demo <span className="btn__arrow">→</span></a>
            <a className="btn btn--ghost" href="#contact">Request a sample report</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="contact">
      <div className="container">
        <div className="footer__top">
          <div>
            <div className="footer__brand">
              <img className="footer__brand-mark" src="assets/ciphryn-mark-dark.png" alt="" />
              <span>Ciphryn</span>
            </div>
            <div className="footer__tag">AI agents continuously assess your attack surface. Human experts validate what matters. Reports your engineering team can act on.</div>
            <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
              <span className="chip chip--dot chip--accent">Status · all systems operational</span>
            </div>
          </div>
          <div className="footer__col">
            <h4>Service Modes</h4>
            <a href="#modes">Continuous AI Assessment</a>
            <a href="#modes">Hybrid AI + Human</a>
            <a href="#modes">Manual Pentest</a>
            <a href="#modes">Enterprise</a>
          </div>
          <div className="footer__col">
            <h4>Platform</h4>
            <a href="#engine">Dedupe Engine</a>
            <a href="#engine">Noise Filtering</a>
            <a href="#ai">Inside the AI</a>
            <a href="#reports">Reports &amp; Evidence</a>
            <a href="#lifecycle">Lifecycle</a>
          </div>
          <div className="footer__col">
            <h4>Company</h4>
            <a href="#about">About</a>
            <a href="#">Research</a>
            <a href="#">Responsible Testing</a>
            <a href="#">Careers</a>
            <a href="#contact">Contact</a>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© 2026 Ciphryn Security, Inc. · All rights reserved.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Trust Center</a>
            <a href="#">security.txt</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

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