// Header + two hero directions for the KentyLabs site.
const KL = {
  ink: '#14181f', inkDeep: '#0c0f15', paper: '#f1efe9', paper2: '#e7e3d9',
  cobalt: '#cf4b2c', cobaltSoft: '#e8884a', slate: '#4a4d55', mist: '#b3b1ab',
  rule: 'rgba(20,24,31,0.10)',
};

const HEADLINE = 'Intelligent software for global situational awareness.';
const SUBHEAD = 'KentyLabs builds the infrastructure and applications that turn fragmented data into real-time, actionable safety intelligence — for communities and travelers worldwide.';

function NavBar({ accent }) {
  const [scrolled, setScrolled] = React.useState(false);
  const { isMobile } = useBreakpoints();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const link = { fontSize: 14.5, fontWeight: 500, color: KL.ink, textDecoration: 'none', opacity: 0.82, letterSpacing: '-0.01em' };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(245,243,238,0.82)' : 'rgba(245,243,238,0)',
      backdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      borderBottom: `1px solid ${scrolled ? KL.rule : 'transparent'}`,
      transition: 'background .3s, border-color .3s, backdrop-filter .3s',
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '14px 20px' : '16px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <a href="#top" style={{ textDecoration: 'none' }}><OrbitsLockup ink={KL.ink} accent={accent} size={0.4} /></a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {!isMobile && <a href="#mission" style={link}>Our Mission</a>}
          {!isMobile && <a href="#perimeterq" style={link}>PerimeterQ</a>}
          {!isMobile && <a href="#assistant" style={link}>Assistant</a>}
          {!isMobile && <a href="#contact" style={link}>Contact</a>}
          <a href="#waitlist" style={{
            fontFamily: '"JetBrains Mono", monospace', fontSize: 12, letterSpacing: '0.04em',
            textTransform: 'uppercase', color: KL.ink, textDecoration: 'none',
            padding: '9px 16px', border: `1.5px solid ${KL.ink}`, borderRadius: 7, transition: 'all .2s',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = KL.ink; e.currentTarget.style.color = KL.paper; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = KL.ink; }}
          >Early access →</a>
        </nav>
      </div>
    </header>
  );
}

function CTAButtons({ accent, dark }) {
  const onText = dark ? KL.paper : KL.ink;
  return (
    <div style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap' }}>
      <a href="#perimeterq" style={{
        display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none',
        background: accent, color: '#fff', fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em',
        padding: '13px 22px', borderRadius: 8, boxShadow: `0 10px 30px -12px ${accent}`,
      }}>Explore PerimeterQ <Icon name="arrow" size={17} stroke={2} /></a>
      <a href="#waitlist" style={{
        display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none',
        color: onText, fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em',
        padding: '13px 22px', borderRadius: 8, border: `1.5px solid ${dark ? 'rgba(255,255,255,0.22)' : KL.rule}`,
      }}>Join early access</a>
    </div>
  );
}

function Eyebrow({ accent, children, dark }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: '"JetBrains Mono", monospace', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>
      <span style={{ width: 22, height: 1, background: accent }} />
      {children}
    </div>
  );
}

// ── Direction A — editorial light ───────────────────────────────
function HeroLight({ accent }) {
  const { isMobile } = useBreakpoints();
  return (
    <section id="top" style={{ background: KL.paper, paddingTop: isMobile ? 24 : 40, paddingBottom: isMobile ? 64 : 96 }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.02fr 0.98fr',
        gap: isMobile ? 40 : 56, alignItems: 'center',
      }}>
        <div>
          <Eyebrow accent={accent}>KentyLabs · Bratislava</Eyebrow>
          <h1 style={{ fontSize: 'clamp(32px, 4.6vw, 60px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '22px 0 0', color: KL.ink, textWrap: 'balance' }}>{HEADLINE}</h1>
          <p style={{ fontSize: isMobile ? 16.5 : 18, lineHeight: 1.6, color: KL.slate, margin: '24px 0 0', maxWidth: 520, textWrap: 'pretty' }}>{SUBHEAD}</p>
          <CTAButtons accent={accent} />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: isMobile ? 16 : 26, marginTop: 40, fontFamily: '"JetBrains Mono", monospace', fontSize: 11.5, letterSpacing: '0.04em', color: KL.mist, textTransform: 'uppercase' }}>
            <span>◷ Real-time</span><span>⌖ Hyperlocal</span><span>◢ Privacy-first</span>
          </div>
        </div>
        <div><MapMock accent={accent} compact={isMobile} /></div>
      </div>
    </section>
  );
}

// ── Direction B — dark, map-forward ─────────────────────────────
function HeroDark({ accent }) {
  return (
    <section id="top" style={{ background: KL.inkDeep, paddingTop: 56, paddingBottom: 72, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -160, right: -120, width: 560, height: 560, borderRadius: '50%', background: `radial-gradient(circle, ${accent}33, transparent 65%)`, pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 40px', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 52, alignItems: 'center', position: 'relative' }}>
        <div>
          <Eyebrow accent={KL.cobaltSoft}>KentyLabs · Situational awareness</Eyebrow>
          <h1 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.04, margin: '22px 0 0', color: '#f3f4f7', textWrap: 'balance' }}>{HEADLINE}</h1>
          <p style={{ fontSize: 17.5, lineHeight: 1.6, color: '#9aa3b2', margin: '24px 0 0', maxWidth: 500, textWrap: 'pretty' }}>{SUBHEAD}</p>
          <CTAButtons accent={accent} dark />
        </div>
        <div style={{ position: 'relative' }}><MapMock accent={accent} dark /></div>
      </div>
    </section>
  );
}

window.NavBar = NavBar;
window.HeroLight = HeroLight;
window.HeroDark = HeroDark;
window.KL = KL;
window.Eyebrow = Eyebrow;