/* Lojo — app composition + Tweaks wiring. */

const ACCENTS = {
  Lime:   { a: '#C8F751', deep: '#A8DC2E', glow: 'rgba(200,247,81,0.22)', on: '#0A0F1E' },
  Spark:  { a: '#FFC247', deep: '#F0A21E', glow: 'rgba(255,194,71,0.22)', on: '#1A1204' },
  Coral:  { a: '#FF7A5C', deep: '#F0532E', glow: 'rgba(255,122,92,0.24)', on: '#1F0A04' },
  Violet: { a: '#B69CFF', deep: '#9579F5', glow: 'rgba(182,156,255,0.26)', on: '#120A26' },
};
const FONTS = {
  'Newsreader': "'Newsreader', Georgia, serif",
  'Fraunces': "'Fraunces', Georgia, serif",
  'Spectral': "'Spectral', Georgia, serif",
  'Space Grotesk': "'Space Grotesk', system-ui, sans-serif",
  'Instrument Serif': "'Instrument Serif', Georgia, serif",
};
const HEADLINES = {
  'AI recommends you': 'Become the business<br><span class="hl-accent">AI recommends</span>.',
  'Top recommendation': 'Be the <span class="hl-accent">top recommendation</span><br>when AI looks at your site.',
  'Be the answer': 'When buyers ask AI,<br>be the <span class="hl-accent">answer</span>.',
  'Appear in more': 'Appear in more AI searches.<br>Win <span class="hl-accent">more buyers</span>.',
  'First name AI says': 'Be the first name<br>AI <span class="hl-accent">says</span>.',
};
const SUBS = {
  'AI recommends you': 'When buyers search with AI, you want to be the answer.<br><span style="color: var(--accent); font-weight: 700;">Lojo</span> shows you how to get there, fast.',
  'Top recommendation': 'AI reads your site, then decides who to name. See exactly what it’s missing and how to fix it. Free, in a couple of minutes.',
  'Be the answer': 'Buyers ask AI before they buy. We show you why you’re not the answer yet, and exactly what to fix. Free, in a couple of minutes.',
  'Appear in more': 'Every buyer who asks AI is a buyer you can win. See why you’re invisible today and how to fix it. Free, in a couple of minutes.',
  'First name AI says': 'When AI gives a shortlist, you want to be on it. Find out why you’re left off and what to change. Free, in a couple of minutes.',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Lime",
  "headline": "AI recommends you",
  "heroMode": "toggle",
  "theme": "dark",
  "headlineFont": "Newsreader"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const ac = ACCENTS[t.accent] || ACCENTS.Lime;
    root.style.setProperty('--accent', ac.a);
    root.style.setProperty('--accent-deep', ac.deep);
    root.style.setProperty('--accent-glow', ac.glow);
    root.style.setProperty('--on-accent', ac.on);
    root.style.setProperty('--font-display', FONTS[t.headlineFont] || FONTS.Newsreader);
    root.setAttribute('data-theme', t.theme === 'light' ? 'light' : 'dark');
  }, [t.accent, t.headlineFont, t.theme]);

  return (
    <React.Fragment>
      <Nav />
      <Hero
        headline={HEADLINES[t.headline] || HEADLINES['AI recommends you']}
        sub={SUBS[t.headline] || SUBS['AI recommends you']}
        reveal={<ContrastReveal mode={t.heroMode} key={t.heroMode} />}
        form={<IntakeForm />}
      />

      <ProofBand />

      <HowItWorks />

      {/* The deliverable — navy section */}
      <section className="section" style={{ background: 'var(--navy)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <SectionHead over="The deliverable" center
            title='Every finding comes<br>with its fix.'
            sub='<span style="color: var(--accent); font-weight: 700;">Lojo</span> gives you a simple dashboard to quickly identify what’s wrong, why it matters, and what to do about it.' />
          <div style={{ maxWidth: 880, margin: '0 auto' }}><ReportPreview /></div>
        </div>
      </section>

      {/* Tiers — ink section */}
      <Tiers />

      {/* You vs them — navy section */}
      <section className="section" style={{ background: 'var(--navy)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <SectionHead over="You vs. them" center
            title='When buyers ask AI,<br>who gets named?'
            sub="A sample of how you stack up when an AI assistant answers a buying question." />
          <ComparisonTeaser />
        </div>
      </section>

      {/* FAQ — ink section */}
      <FAQ />

      <FinalCTA />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={ACCENTS[t.accent].a}
          options={Object.values(ACCENTS).map((x) => x.a)}
          onChange={(hex) => setTweak('accent', Object.keys(ACCENTS).find((k) => ACCENTS[k].a === hex) || 'Lime')} />
        <TweakSelect label="Headline font" value={t.headlineFont} options={Object.keys(FONTS)}
          onChange={(v) => setTweak('headlineFont', v)} />
        <TweakToggle label="Light background" value={t.theme === 'light'}
          onChange={(v) => setTweak('theme', v ? 'light' : 'dark')} />

        <TweakSection label="Hero" />
        <TweakSelect label="Headline" value={t.headline} options={Object.keys(HEADLINES)}
          onChange={(v) => setTweak('headline', v)} />
        <TweakRadio label="Contrast reveal" value={t.heroMode} options={['slider', 'toggle']}
          onChange={(v) => setTweak('heroMode', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);