/* ============================================================
   DatingScout.ai — Landing main: hero variants + Tweaks
   ============================================================ */
const { Quiz, Hub } = window.LandingParts;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "cardVariant": "glow",
  "ctaColor": "#FF6B6B",
  "accentColor": "#7B5FFF",
  "bgTone": "navy"
}/*EDITMODE-END*/;

const BG_TONES = {
  navy:   { '--bg':'#0B0C1E', '--bg-2':'#0F1026', '--surface':'#15162F', '--surface-2':'#1B1C39' },
  indigo: { '--bg':'#0C0A24', '--bg-2':'#120E30', '--surface':'#191336', '--surface-2':'#211A44' },
  black:  { '--bg':'#0A0A12', '--bg-2':'#0E0E1A', '--surface':'#12121E', '--surface-2':'#181826' },
};

function Hero({ variant }) {
  const eyebrow = <div className="eyebrow">// {window.LandingParts.P.length} AI COMPANIONS · INDEPENDENTLY SCORED · NOT DATINGSCOUT.COM</div>;

  const heading = (
    <h1 style={{ maxWidth: variant === 'split' ? '16ch' : '20ch' }}>
      Forget dating apps.<br/>Meet the partner<br/><span className="neon-text">you design.</span>
    </h1>
  );

  const blurb = (
    <p style={{ fontSize:19, maxWidth:'48ch', marginTop:22, color:'var(--ink-soft)', lineHeight:1.6 }}>
      Not affiliated with DatingScout.com. We don't review apps where you pay real money
      to chat with bots pretending to be real people. We review AI companions — where{' '}
      <em>you</em> choose who they are, what they look like, and how they think.
      Always available. Never in a bad mood. Never going to leave.
    </p>
  );

  const trust = (
    <div className="hero-trust">
      <span className="tag-verified">✓ Hands-on tested</span>
      <span className="mono dim" style={{ fontSize:13 }}>·</span>
      <span className="mono" style={{ fontSize:13, color:'var(--ink-mut)' }}>No paid rankings</span>
      <span className="mono dim" style={{ fontSize:13 }}>·</span>
      <span className="mono" style={{ fontSize:13, color:'var(--ink-mut)' }}>Not DatingScout.com</span>
      <span className="mono dim" style={{ fontSize:13 }}>·</span>
      <span className="mono" style={{ fontSize:13, color:'var(--ink-mut)' }}>18+</span>
    </div>
  );

  if (variant === 'centered') {
    return (
      <header className="hero hero--centered">
        <div className="wrap" style={{ textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center' }}>
          {eyebrow}{heading}
          <p style={{ fontSize:19, maxWidth:'52ch', marginTop:22, color:'var(--ink-soft)', lineHeight:1.6 }}>
            Tired of paying to get ghosted? AI companions are always there — on your terms.
            We tested {window.LandingParts.P.length} platforms so you know which one is worth it.
          </p>
          <div style={{ marginTop:20 }}>{trust}</div>
          <div style={{ width:'min(640px,100%)', marginTop:40, textAlign:'left' }}><Quiz /></div>
        </div>
      </header>
    );
  }

  if (variant === 'immersive') {
    return (
      <header className="hero hero--immersive">
        <div className="wrap">
          <div style={{ textAlign:'center' }}>{eyebrow}
            <h1 style={{ fontSize:'clamp(48px,8vw,104px)', marginTop:18, lineHeight:0.98 }}>
              The partner<br/><span className="neon-text">you design.</span>
            </h1>
            <p style={{ fontSize:19, maxWidth:'46ch', margin:'22px auto 0', color:'var(--ink-soft)', lineHeight:1.6 }}>
              Not DatingScout.com. We test AI companions — where you choose everything.
              No ghosting. No bad days. No games.
            </p>
          </div>
          <div className="immersive-quiz"><Quiz /></div>
        </div>
      </header>
    );
  }

  // split (default)
  return (
    <header className="hero hero--split">
      <div className="wrap-wide hero-grid">
        <div className="hero-copy">
          {eyebrow}{heading}{blurb}{trust}
          <div className="hero-stats">
            <div><b>{window.LandingParts.P.length}</b><span>platforms tested</span></div>
            <div><b>120+</b><span>hours hands-on</span></div>
            <div><b>0</b><span>paid rankings</span></div>
          </div>
        </div>
        <div className="hero-quiz"><Quiz /></div>
      </div>
    </header>
  );
}

function CompareTeaser() {
  const cols = window.LandingParts.P.slice(0, 5);
  const rows = [
    ['NSFW', p => p.f.nsfw],
    ['Voice', p => p.f.voice],
    ['Long-term memory', p => p.f.memory === 'Excellent'],
    ['Image generation', p => p.f.image],
    ['Lovense sync', p => p.f.lovense],
  ];
  return (
    <section className="section" style={{ paddingTop:0 }}>
      <div className="wrap-wide">
        <div className="compare-teaser">
          <div className="compare-teaser-head">
            <div>
              <div className="eyebrow" style={{ color:'var(--violet)' }}>// SIDE BY SIDE</div>
              <h2 style={{ marginTop:14 }}>Compare them all at once</h2>
              <p className="muted" style={{ marginTop:10, maxWidth:'42ch' }}>The full matrix — NSFW, voice, memory, price and toy sync across every platform.</p>
              <a className="btn btn-neon" style={{ marginTop:22 }} href="/comparisons/">Open full comparison →</a>
            </div>
            <div className="ctable-wrap" style={{ flex:1, minWidth:0 }}>
              <table className="ctable">
                <thead>
                  <tr><th></th>{cols.map(p => <th key={p.id}><span className="logo-chip" style={{ width:34, height:34, fontSize:14, margin:'0 auto 6px', background:`linear-gradient(140deg,${p.accent[0]},${p.accent[1]})` }}>{p.name.charAt(0)}</span><div style={{ fontFamily:'var(--f-head)', fontSize:13 }}>{p.name}</div></th>)}</tr>
                </thead>
                <tbody>
                  {rows.map(([label, fn]) => (
                    <tr key={label}><td className="param">{label}</td>{cols.map(p => <td key={p.id} dangerouslySetInnerHTML={{ __html: window.NN.yesNo(fn(p)) }} />)}</tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NotAffiliatedBanner() {
  return (
    <section style={{ borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', padding:'28px 0', background:'rgba(123,95,255,0.04)' }}>
      <div className="wrap-wide" style={{ display:'flex', alignItems:'center', gap:20, flexWrap:'wrap' }}>
        <div style={{ fontSize:28 }}>⚠️</div>
        <div style={{ flex:1, minWidth:240 }}>
          <b style={{ fontFamily:'var(--f-head)', fontSize:16, color:'var(--ink)' }}>Not DatingScout.com</b>
          <p style={{ fontSize:14, color:'var(--ink-mut)', marginTop:4, lineHeight:1.6 }}>
            DatingScout.ai has no affiliation with DatingScout.com or any traditional dating app review site.
            We exclusively cover AI companion platforms — where your partner is whoever you want them to be.
            No subscriptions to people who ghost you. No fake profiles. No wasted evenings.
          </p>
        </div>
      </div>
    </section>
  );
}

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

  useEffect(() => {
    document.documentElement.style.setProperty('--amber', t.ctaColor);
    document.documentElement.style.setProperty('--cyan', t.accentColor);
    const tone = BG_TONES[t.bgTone] || BG_TONES.navy;
    Object.entries(tone).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [t.ctaColor, t.accentColor, t.bgTone]);

  return (
    <>
      <Hero variant={t.heroVariant} />
      <NotAffiliatedBanner />
      <Hub cardVariant={t.cardVariant} />
      <CompareTeaser />

      <TweaksPanel>
        <TweakSection label="Hero layout" />
        <TweakRadio label="Hero variant" value={t.heroVariant}
          options={['split', 'centered', 'immersive']}
          onChange={v => setTweak('heroVariant', v)} />
        <TweakSection label="Platform cards" />
        <TweakRadio label="Card style" value={t.cardVariant}
          options={['glow', 'glass', 'minimal']}
          onChange={v => setTweak('cardVariant', v)} />
        <TweakSection label="Palette" />
        <TweakRadio label="Background" value={t.bgTone}
          options={['navy', 'indigo', 'black']}
          onChange={v => setTweak('bgTone', v)} />
        <TweakColor label="Primary neon" value={t.accentColor}
          options={['#00D4FF', '#7B5FFF', '#34E0C0']}
          onChange={v => setTweak('accentColor', v)} />
        <TweakColor label="CTA warmth" value={t.ctaColor}
          options={['#FFB347', '#FF6B6B', '#FF8A5B']}
          onChange={v => setTweak('ctaColor', v)} />
      </TweaksPanel>
    </>
  );
}

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