// Content sections: Mission, PerimeterQ spotlight, Under the Hood, About, Waitlist, Footer.

function Container({ children, style }) {
  const { isMobile } = useBreakpoints();
  return <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px', ...style }}>{children}</div>;
}

// ── Mission ─────────────────────────────────────────────────────
function Mission({ accent }) {
  const { isMobile } = useBreakpoints();
  return (
    <section id="mission" style={{ background: KL.paper, borderTop: `1px solid ${KL.rule}`, padding: isMobile ? '60px 0' : '88px 0' }}>
      <Container style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '160px 1fr', gap: isMobile ? 18 : 40 }}>
        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>§ Our mission</div>
        <div>
          <p style={{ fontSize: 'clamp(22px, 2.6vw, 33px)', fontWeight: 400, lineHeight: 1.35, letterSpacing: '-0.02em', margin: 0, color: KL.ink, maxWidth: 820, textWrap: 'balance' }}>
            Staying safe shouldn't mean scanning a dozen feeds. We build the connective infrastructure that pulls scattered, noisy signals into one clear picture — so people can act on what's happening around them, the moment it happens.
          </p>
        </div>
      </Container>
    </section>
  );
}

// ── PerimeterQ spotlight ────────────────────────────────────────
const FEATURES = [
  { icon: 'radar', title: 'Hyperlocal Intelligence', body: 'AI deduplication and PostGIS mapping collapse noisy, overlapping sources into precisely located events — zero clutter, exact placement.' },
  { icon: 'users', title: 'Private Safety Circles', body: 'Families and trusted contacts share live location and coordinate during an event, with privacy controls held by each member.' },
  { icon: 'geofence', title: 'Smart Geofences', body: 'Define monitoring zones — Home, School, Hotel — and receive a push the instant a relevant safety event lands nearby.' },
];

function Spotlight({ accent }) {
  const { isMobile, isNarrow } = useBreakpoints();
  const cols = isMobile ? 1 : isNarrow ? 2 : 3;
  return (
    <section id="perimeterq" style={{ background: KL.paper2, borderTop: `1px solid ${KL.rule}`, padding: isMobile ? '64px 0' : '92px 0' }}>
      <Container>
        <div style={{ maxWidth: 760 }}>
          <Eyebrow accent={accent}>Flagship platform</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginTop: 20 }}>
            <h2 style={{ fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, color: KL.ink }}>
              PerimeterQ
            </h2>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, background: `${accent}12`, border: `1px solid ${accent}33`, fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: accent }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, animation: 'pqBlink 1.6s steps(2) infinite' }} />
              Coming soon · Early access Q4 2026
            </span>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.62, color: KL.slate, margin: '20px 0 0', textWrap: 'pretty' }}>
            People rely on fragmented, noisy sources to stay informed about local safety. PerimeterQ is an AI-powered, single-screen platform that aggregates and geocodes local news, official alerts, crime data, and community reports into one live safety map.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 20, marginTop: isMobile ? 36 : 52 }}>
          {FEATURES.map((f, i) => (
            <div key={i} style={{
              background: '#fff', border: `1px solid ${KL.rule}`, borderRadius: 10, padding: '28px 26px',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: `${accent}12`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: accent }}>
                <Icon name={f.icon} size={22} stroke={1.7} />
              </div>
              <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em', color: KL.ink, marginTop: 4 }}>{f.title}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: KL.slate, margin: 0, textWrap: 'pretty' }}>{f.body}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── AI Assistant (upcoming) ─────────────────────────────────────
// Stylized chat mock for the conversational safety agent.
function AssistantMock({ accent }) {
  const ink = KL.ink, slate = KL.slate;
  const bubble = { fontSize: 13.5, lineHeight: 1.5, padding: '11px 14px', borderRadius: 14, maxWidth: '88%' };
  return (
    <div style={{
      background: '#fff', border: `1px solid ${KL.rule}`, borderRadius: 16,
      boxShadow: '0 30px 80px -44px rgba(13,17,23,0.45)', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', minHeight: 400,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', borderBottom: `1px solid ${KL.rule}` }}>
        <span style={{ flexShrink: 0, width: 34, height: 34, borderRadius: 9, background: `${accent}12`, color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="bot" size={19} stroke={1.7} />
        </span>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: ink, letterSpacing: '-0.01em' }}>PerimeterQ Assistant</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: slate }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, animation: 'pqBlink 1.6s steps(2) infinite' }} /> Online
          </div>
        </div>
      </div>
      <div style={{ flex: 1, padding: '18px 16px', display: 'flex', flexDirection: 'column', gap: 12, background: KL.paper }}>
        <div style={{ alignSelf: 'flex-end', background: accent, color: '#fff', borderBottomRightRadius: 4, ...bubble }}>
          I'm flying to Nice tomorrow — anything I should know?
        </div>
        <div style={{ alignSelf: 'flex-start', background: '#fff', color: ink, border: `1px solid ${KL.rule}`, borderBottomLeftRadius: 4, ...bubble }}>
          A few things: local news reports a transport strike Tue–Wed, so trains from the airport will be limited. An orange wind warning hits the coast tomorrow afternoon too — expect possible flight delays. Nothing else flagged in the city centre. Want me to watch your hotel area?
        </div>
        <div style={{ alignSelf: 'flex-start', display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 2 }}>
          {['Watch area', 'Set alerts', 'Sources'].map((c) => (
            <span key={c} style={{ fontSize: 12, color: accent, border: `1px solid ${accent}44`, background: `${accent}0d`, borderRadius: 999, padding: '6px 12px' }}>{c}</span>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderTop: `1px solid ${KL.rule}` }}>
        <div style={{ flex: 1, fontSize: 13, color: KL.mist, background: KL.paper, border: `1px solid ${KL.rule}`, borderRadius: 999, padding: '10px 14px' }}>Ask about your area…</div>
        <span style={{ flexShrink: 0, width: 36, height: 36, borderRadius: '50%', background: accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="arrow" size={16} stroke={2} />
        </span>
      </div>
    </div>
  );
}

function AiAssistant({ accent }) {
  const { isMobile } = useBreakpoints();
  const points = [
    'Natural-language questions about events near you',
    'Grounded in your live data — every answer cites its sources',
    'Proactive: set alerts and monitor zones right from chat',
  ];
  return (
    <section id="assistant" style={{ background: KL.paper, borderTop: `1px solid ${KL.rule}`, padding: isMobile ? '64px 0' : '92px 0' }}>
      <Container style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.96fr 1.04fr', gap: isMobile ? 40 : 56, alignItems: 'center' }}>
        <div>
          <Eyebrow accent={accent}>Coming soon · AI assistant</Eyebrow>
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.06, margin: '20px 0 0', color: KL.ink, textWrap: 'balance' }}>
            Ask your perimeter anything.
          </h2>
          <p style={{ fontSize: isMobile ? 16.5 : 18, lineHeight: 1.62, color: KL.slate, margin: '20px 0 0', maxWidth: 520, textWrap: 'pretty' }}>
            A conversational AI agent that sits on top of your live safety map. Ask about your neighbourhood, a city you're traveling to, or a specific event — it reasons over official alerts, local news, community reports, and your geofences to give one grounded answer, with sources.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {points.map((t) => (
              <li key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, lineHeight: 1.5, color: KL.ink }}>
                <span style={{ flexShrink: 0, marginTop: 2, color: accent }}><Icon name="check" size={17} stroke={2.2} /></span>
                {t}
              </li>
            ))}
          </ul>
        </div>
        <div><AssistantMock accent={accent} /></div>
      </Container>
    </section>
  );
}

// ── Under the Hood ──────────────────────────────────────────────
const STACK = [
  { icon: 'git', k: 'Architecture', v: 'Event-driven', d: 'Decoupled ingestion & processing pipeline built to scale.' },
  { icon: 'cpu', k: 'Classification', v: 'Gemma 4', d: 'On-stream models classify, dedupe & geolocate every signal.' },
  { icon: 'db', k: 'Spatial data', v: 'PostgreSQL · PostGIS', d: 'Scalable spatial database for precise geo queries.' },
  { icon: 'phone', k: 'Client', v: 'Flutter', d: 'One cross-platform codebase, native iOS & Android.' },
];

function UnderHood({ accent }) {
  const { isMobile, isNarrow } = useBreakpoints();
  const cols = isMobile ? 1 : isNarrow ? 2 : 4;
  return (
    <section style={{ background: KL.inkDeep, padding: isMobile ? '64px 0' : '88px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', bottom: -180, left: -120, width: 480, height: 480, borderRadius: '50%', background: `radial-gradient(circle, ${accent}26, transparent 66%)`, pointerEvents: 'none' }} />
      <Container style={{ position: 'relative' }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow accent={KL.cobaltSoft}>Under the hood</Eyebrow>
          <h2 style={{ fontSize: 'clamp(26px, 2.9vw, 36px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 0', color: '#f3f4f7' }}>
            Engineered as serious infrastructure, not a wrapper.
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.62, color: '#9aa3b2', margin: '18px 0 0', textWrap: 'pretty' }}>
            An event-driven architecture feeds a multi-model AI classification layer into a scalable spatial database, surfaced through a cross-platform mobile experience.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 16, marginTop: isMobile ? 32 : 48 }}>
          {STACK.map((s, i) => (
            <div key={i} style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.10)', borderRadius: 10, padding: '24px 22px' }}>
              <div style={{ color: KL.cobaltSoft, marginBottom: 18 }}><Icon name={s.icon} size={22} stroke={1.6} /></div>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#6b7585' }}>{s.k}</div>
              <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.02em', color: '#f3f4f7', marginTop: 6 }}>{s.v}</div>
              <p style={{ fontSize: 13, lineHeight: 1.55, color: '#828c9c', margin: '10px 0 0' }}>{s.d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── About / founder credibility ─────────────────────────────────
function About({ accent }) {
  const { isMobile } = useBreakpoints();
  return (
    <section style={{ background: KL.paper, borderTop: `1px solid ${KL.rule}`, padding: isMobile ? '60px 0' : '80px 0' }}>
      <Container style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 56, alignItems: 'center' }}>
        <div>
          <Eyebrow accent={accent}>Who we are</Eyebrow>
          <p style={{ fontSize: 21, lineHeight: 1.5, color: KL.ink, margin: '20px 0 0', letterSpacing: '-0.015em', fontWeight: 400, textWrap: 'pretty' }}>
            KentyLabs is a software lab founded by a technology architect, building deliberate, well-engineered tools that earn trust through use. Registered as <span style={{ whiteSpace: 'nowrap' }}>KentyLabs s.r.o.</span> in Bratislava, Slovakia.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {[
            { k: 'Founded', v: '2025 · Bratislava' },
            { k: 'Entity', v: 'KentyLabs s.r.o.' },
            { k: 'Focus', v: 'Safety intelligence' },
            { k: 'Status', v: 'PerimeterQ · early access Q4 2026' },
          ].map((m, i) => (
            <div key={i} style={{ border: `1px solid ${KL.rule}`, borderRadius: 10, padding: '18px 20px', background: '#fff' }}>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: KL.mist }}>{m.k}</div>
              <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em', color: KL.ink, marginTop: 6 }}>{m.v}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── Waitlist CTA ────────────────────────────────────────────────
function Waitlist({ accent }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | loading | saved | mailto | error
  const valid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
  const done = status === 'saved' || status === 'mailto';
  const { isMobile } = useBreakpoints();

  const openMailto = () => {
    const subject = encodeURIComponent('PerimeterQ — early access waitlist');
    const body = encodeURIComponent(
      `Hi KentyLabs team,\n\nI'd like early access to PerimeterQ when it goes live.\n\nMy email: ${email}\n\nThanks!`
    );
    window.location.href = `mailto:contact@kentylabs.com?subject=${subject}&body=${body}`;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || status === 'loading') return;
    // Try the Firestore backend (window.submitWaitlist is wired in index HTML).
    // If it isn't configured yet, or the write fails, fall back to a mailto.
    if (typeof window.submitWaitlist === 'function') {
      setStatus('loading');
      try {
        await window.submitWaitlist(email);
        setStatus('saved');
        return;
      } catch (err) {
        console.warn('Waitlist backend unavailable, falling back to email:', err);
      }
    }
    openMailto();
    setStatus('mailto');
  };
  return (
    <section id="waitlist" style={{ background: KL.inkDeep, padding: isMobile ? '64px 0' : '96px 0' }}>
      <Container style={{ maxWidth: 760, textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', justifyContent: 'center', marginBottom: 26 }}>
          <OrbitsMark ink="#f3f4f7" accent={accent} size={48} stroke={5} nucleus={11} />
        </div>
        <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 42px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.08, margin: 0, color: '#f3f4f7', textWrap: 'balance' }}>
          Get early access to PerimeterQ
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: '#9aa3b2', margin: '18px auto 0', maxWidth: 520 }}>
          PerimeterQ opens for early access in Q4 2026. Join the waitlist to be among the first communities and travelers on the platform — no spam, just an invite when your region goes live.
        </p>

        {done ? (
          <div style={{ marginTop: 36, display: 'inline-flex', alignItems: 'center', gap: 12, background: 'rgba(255,255,255,0.05)', border: `1px solid ${accent}55`, borderRadius: 10, padding: '16px 22px', maxWidth: 540 }}>
            <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: '50%', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><Icon name="check" size={18} stroke={2.4} /></span>
            {status === 'saved' ? (
              <span style={{ color: '#f3f4f7', fontSize: 15.5, textAlign: 'left' }}>You're on the list — we'll email <b style={{ fontWeight: 600 }}>{email}</b> the moment PerimeterQ opens in your region.</span>
            ) : (
              <span style={{ color: '#f3f4f7', fontSize: 15.5, textAlign: 'left' }}>Almost there — we've opened a pre-filled email for <b style={{ fontWeight: 600 }}>{email}</b>. Just hit send to lock in your spot.</span>
            )}
          </div>
        ) : (
          <form onSubmit={submit} style={{ marginTop: 36, display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 10, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ position: 'relative', flex: isMobile ? '0 0 auto' : '1 1 320px', width: isMobile ? '100%' : 'auto', maxWidth: isMobile ? '100%' : 380 }}>
              <span style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', color: '#6b7585' }}><Icon name="mail" size={18} /></span>
              <input
                type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@email.com" required
                style={{
                  width: '100%', boxSizing: 'border-box', padding: '15px 16px 15px 44px', fontSize: 15.5,
                  fontFamily: '"Space Grotesk", sans-serif', color: '#f3f4f7', background: 'rgba(255,255,255,0.05)',
                  border: '1.5px solid rgba(255,255,255,0.16)', borderRadius: 9, outline: 'none',
                }}
                onFocus={(e) => e.target.style.borderColor = accent}
                onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.16)'}
              />
            </div>
            <button type="submit" disabled={status === 'loading'} style={{
              padding: '15px 26px', fontSize: 15.5, fontWeight: 600, letterSpacing: '-0.01em', fontFamily: '"Space Grotesk", sans-serif',
              color: '#fff', background: accent, border: 'none', borderRadius: 9, cursor: status === 'loading' ? 'default' : 'pointer',
              boxShadow: `0 12px 32px -12px ${accent}`, whiteSpace: 'nowrap', opacity: status === 'loading' ? 0.7 : 1,
              width: isMobile ? '100%' : 'auto',
            }}>{status === 'loading' ? 'Joining…' : 'Join Early Access'}</button>
          </form>
        )}
        <p style={{ marginTop: 22, fontFamily: '"JetBrains Mono", monospace', fontSize: 12, color: '#6b7585', letterSpacing: '0.04em' }}>
          Prefer email? Write us at <a href="mailto:contact@kentylabs.com" style={{ color: KL.cobaltSoft, textDecoration: 'none' }}>contact@kentylabs.com</a>
        </p>
      </Container>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────
function Footer({ accent }) {
  const { isMobile } = useBreakpoints();
  return (
    <footer id="contact" style={{ background: KL.paper, borderTop: `1px solid ${KL.rule}`, padding: '56px 0 44px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1fr', gap: isMobile ? 32 : 40, alignItems: 'start' }}>
          <div>
            <OrbitsLockup ink={KL.ink} accent={accent} size={0.42} />
            <p style={{ fontSize: 14, lineHeight: 1.6, color: KL.slate, margin: '18px 0 0', maxWidth: 320, textWrap: 'pretty' }}>
              Intelligent software for global situational awareness. PerimeterQ — early access Q4 2026.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: KL.mist, marginBottom: 14 }}>Contact</div>
            <a href="mailto:contact@kentylabs.com" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 16, fontWeight: 600, color: KL.cobalt, textDecoration: 'none', letterSpacing: '-0.01em' }}>
              <Icon name="mail" size={17} stroke={1.8} /> contact@kentylabs.com
            </a>
            <div style={{ fontSize: 13.5, color: KL.slate, marginTop: 12, lineHeight: 1.7 }}>
              KentyLabs s.r.o.<br />Bratislava, Slovakia
            </div>
          </div>
          <div>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: KL.mist, marginBottom: 14 }}>Navigate</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[['Our Mission', '#mission'], ['PerimeterQ', '#perimeterq'], ['Early access', '#waitlist']].map(([t, h]) => (
                <a key={h} href={h} style={{ fontSize: 14, color: KL.ink, textDecoration: 'none', opacity: 0.8 }}>{t}</a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48, paddingTop: 22, borderTop: `1px solid ${KL.rule}`, flexWrap: 'wrap', gap: 10 }}>
          <div style={{ fontSize: 13, color: KL.slate }}>© 2026 KentyLabs. All rights reserved.</div>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.08em', color: KL.mist, textTransform: 'uppercase' }}>kentylabs.com</div>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Mission, Spotlight, AiAssistant, UnderHood, About, Waitlist, Footer });