/* Page sections: Nav, Hero shell, HowItWorks, Trust, FinalCTA, Footer.
   Hero/headline wording is passed in (tweakable). Singular focus → the form. */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 20);
    f();window.addEventListener('scroll', f);return () => window.removeEventListener('scroll', f);
  }, []);
  const toForm = () => document.getElementById('audit')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  return (
    <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background .3s, border-color .3s, backdrop-filter .3s',
      background: scrolled ? 'color-mix(in oklab, var(--ink) 80%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--line)' : 'transparent') }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68, padding: "10px 24px 1px" }}>
        <Wordmark size={18} />
        <button className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14 }} onClick={toForm}>Get your free analysis</button>
      </div>
    </nav>);

}

function Hero({ headline, sub, reveal, form }) {
  return (
    <header className="section" style={{ paddingTop: 128, position: 'relative', overflow: 'hidden' }}>
      {/* soft accent glow behind */}
      <div style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 900, height: 520,
        background: 'radial-gradient(closest-side, var(--accent-glow), transparent)', opacity: 0.5, pointerEvents: 'none', filter: 'blur(20px)', maxWidth: '150vw' }}></div>
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
          <h1 className="display reveal in" style={{ margin: 0, transitionDelay: '.05s', fontSize: 'clamp(34px, 8.5vw, 76px)' }}
          dangerouslySetInnerHTML={{ __html: headline }}></h1>
          <p className="lede reveal in" style={{ maxWidth: 600, width: '100%', margin: '20px auto 0', transitionDelay: '.12s', fontSize: 'clamp(16px, 4.2vw, 20px)' }} dangerouslySetInnerHTML={{ __html: sub }}></p>
        </div>

        <div className="reveal in hero-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.45fr) minmax(330px, 1fr)', gap: 'clamp(20px,2.4vw,34px)', alignItems: 'stretch', marginTop: 'clamp(36px,5vw,64px)', transitionDelay: '.2s' }}>
          <div style={{ display: 'flex' }}>{reveal}</div>
          <div style={{ display: 'flex' }}>{form}</div>
        </div>
      </div>
    </header>);

}

function HowItWorks() {
  const steps = [
  { n: '01', t: 'Enter your website', d: 'Give <span style="color: var(--accent); font-weight: 700;">Lojo</span> your website name, plus a few details about your company.' },
  { n: '02', t: 'Learn how you appear to AI', d: 'Our tool tracks your search results through the most popular AI models.' },
  { n: '03', t: 'Get recommended fixes', d: 'Understand what’s wrong, why it matters, and exactly what to do in minutes.' }];

  return (
    <section className="section">
      <div className="wrap">
        <div style={{ maxWidth: 680, margin: '0 auto', textAlign: 'center', marginBottom: 'clamp(36px,5vw,56px)' }}>
          <div className="overline" style={{ marginBottom: 14 }}>How it works</div>
          <h2 className="display howitworks-head" style={{ fontSize: 'clamp(30px,4vw,52px)', margin: 0 }}>See it yourself in <span className="hl-accent">a couple of minutes</span>.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(16px,2vw,28px)' }}>
          {steps.map((s, i) =>
          <div key={s.n} style={{ borderTop: '1px solid var(--line-strong)', paddingTop: 22, position: 'relative' }}>
              <div className="mono" style={{ fontSize: 13, color: 'var(--accent-deep)', marginBottom: 16, letterSpacing: '0.1em' }}>{s.n}</div>
              <h3 style={{ fontWeight: 600, margin: '0 0 12px', letterSpacing: '-0.01em', lineHeight: 1.15, minHeight: '2.3em', fontSize: "28px", fontFamily: "Spectral" }}>{s.t}</h3>
              <p style={{ margin: 0, color: 'var(--fg-muted)', lineHeight: 1.6, fontSize: "18px" }} dangerouslySetInnerHTML={{ __html: s.d }}></p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function SectionHead({ over, title, sub, center }) {
  return (
    <div style={{ maxWidth: 680, margin: center ? '0 auto' : 0, textAlign: center ? 'center' : 'left', marginBottom: 'clamp(34px,4.5vw,52px)' }}>
      <div className="overline" style={{ marginBottom: 14 }}>{over}</div>
      <h2 className="display" style={{ fontSize: 'clamp(30px,4vw,52px)', margin: 0 }} dangerouslySetInnerHTML={{ __html: title }}></h2>
      {sub && <p className="lede" style={{ marginTop: 16, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0, maxWidth: 560, fontSize: "20px", color: "rgb(154, 166, 196)" }} dangerouslySetInnerHTML={{ __html: sub }}></p>}
    </div>);

}

function Trust() {
  const ops = [
  { i: 'JF', n: 'Built a $10M D2C brand', r: 'Knows the operator’s side' },
  { i: 'AR', n: 'Ran growth & SEO for years', r: 'Watched search change first-hand' },
  { i: 'CB', n: 'Fixes broken systems for a living', r: 'Turns chaos into checklists' }];

  return (
    <section className="section">
      <div className="wrap">
        <div className="card" style={{ padding: 'clamp(28px,4vw,56px)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.4, pointerEvents: 'none' }} className="grid-tex"></div>
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <div className="overline" style={{ marginBottom: 16 }}>Who's behind this</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px,3.6vw,46px)', margin: 0 }}>Three operators who built this for their own companies.</h2>
            <p className="lede" style={{ marginTop: 18, maxWidth: 600 }}>We’re operators who needed to know why our own sites were going invisible. So we built this tool

            </p>
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(14px,2vw,24px)', marginTop: 'clamp(28px,4vw,44px)' }}>
            {ops.map((o) =>
            <div key={o.i} style={{ display: 'flex', gap: 14, alignItems: 'center', padding: '16px 18px', background: 'var(--navy)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
                <span style={{ width: 46, height: 46, flex: '0 0 auto', borderRadius: '50%', background: 'var(--navy-4)', border: '1px solid var(--line-strong)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--fg-muted)' }}>{o.i}</span>
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--fg)', lineHeight: 1.25 }}>{o.n}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--fg-subtle)', marginTop: 2 }}>{o.r}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function FinalCTA() {
  const toForm = () => document.getElementById('audit')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  return (
    <section className="section" style={{ textAlign: 'center', position: 'relative', overflow: 'hidden', background: 'var(--navy)', borderTop: '1px solid var(--line)' }}>
      <div style={{ position: 'absolute', bottom: -160, left: '50%', transform: 'translateX(-50%)', width: 800, maxWidth: '150vw', height: 400,
        background: 'radial-gradient(closest-side, var(--accent-glow), transparent)', opacity: 0.45, pointerEvents: 'none' }}></div>
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ display: 'inline-flex', marginBottom: 24 }}><SparkMark size={40} style={{ filter: 'drop-shadow(0 0 16px var(--accent-glow))' }} /></div>
        <h2 className="display" style={{ fontSize: 'clamp(32px,5vw,68px)', margin: '0 auto', maxWidth: 920, color: "rgb(238, 242, 251)" }}>The first movers win <span style={{ color: '#a8dc2e' }}>the category.</span></h2>
        <p className="lede" style={{ maxWidth: 560, margin: '20px auto 32px', fontWeight: "300", color: "rgb(154, 166, 196)" }}><span style={{ color: '#a8dc2e', fontWeight: 600 }}>AI</span> is choosing who to recommend right now.<br />Claim your foothold before your competitors do.</p>
        <button className="btn btn-primary btn-lg" onClick={toForm}>Get your free analysis <Icon name="arrow-right" size={20} /></button>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '36px 0' }}>
      <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
        <Wordmark size={16} />
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, HowItWorks, SectionHead, Trust, FinalCTA, Footer });