/* global React, ReactDOM, DesignCanvas, DCSection, DCArtboard, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSlider, TweakToggle, TweakColor */
/* global Nav, Ticker, HeroFlagship, PhoneFinder, DropTest, Compare, Categories, Bestsellers, Reviews, Trust, CTA, InstagramGrid, VideoShop, Footer, Logo, Pill, Stat */

const { useEffect: useEffectA, useState: useStateA } = React;

// ========== HERO VARIANT B — Editorial Cover ==========
function HeroEditorial() {
  return (
    <section style={{ position: 'relative', padding: '60px 48px 80px', background: 'var(--cream)', overflow: 'hidden' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
          <span className="mono">ISSUE 07 · APR 2026</span>
          <span className="mono">★ ★ ★ ★ ★ · 12.4K</span>
        </div>
        <div style={{ borderTop: '2px solid var(--ink)', borderBottom: '2px solid var(--ink)', padding: '60px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 40, alignItems: 'center' }}>
            <div>
              <span className="mono" style={{ color: 'var(--coral)' }}>◆ FLAGSHIP</span>
              <h1 className="display" style={{ fontSize: 72, margin: '16px 0', lineHeight: 0.9 }}>
                The <span style={{ fontStyle: 'italic' }}>privacy</span> issue.
              </h1>
              <p style={{ color: 'var(--muted)', lineHeight: 1.5 }}>
                Our most technical glass yet. 160° blackout. Zero clarity loss head-on. Installed in a minute, worn for a year.
              </p>
            </div>
            <div style={{ position: 'relative', height: 520, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--lilac)', borderRadius: 24 }}>
              <img src="assets/hero-privacy.webp" style={{ maxWidth: '70%', maxHeight: '80%', objectFit: 'contain', filter: 'drop-shadow(0 20px 30px rgba(0,0,0,0.15))' }}/>
              <div className="mono" style={{ position: 'absolute', top: 20, left: 20 }}>FIG. 01</div>
              <div className="mono" style={{ position: 'absolute', bottom: 20, right: 20 }}>D+ PRIVACY / 9H</div>
            </div>
            <div>
              <div className="mono" style={{ color: 'var(--muted)' }}>INDEX</div>
              <ol style={{ listStyle: 'none', padding: 0, margin: '12px 0 0', counterReset: 'i' }}>
                {['Privacy angle 160°', 'Oleophobic coat', 'Easy applicator', 'AR camera lens', 'Woven C-C cable', 'Drop verified 3m'].map((t, i) => (
                  <li key={t} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid var(--line)', fontSize: 14 }}>
                    <span><span className="mono" style={{ marginRight: 12, color: 'var(--muted)' }}>{String(i+1).padStart(2,'0')}</span>{t}</span>
                    <span>→</span>
                  </li>
                ))}
              </ol>
              <button className="btn accent" style={{ width: '100%', justifyContent: 'center', marginTop: 20 }}>Shop — ₹2,098</button>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24 }}>
          <span className="mono">LITO / AHMEDABAD</span>
          <span className="mono">PROTECTLOUD.CO</span>
        </div>
      </div>
    </section>
  );
}

// ========== HERO VARIANT C — Big Type Billboard ==========
function HeroBillboard() {
  return (
    <section style={{
      position: 'relative',
      padding: '80px 48px',
      background: 'var(--lime)',
      overflow: 'hidden',
      minHeight: 900
    }}>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 40 }}>
          <span className="mono">LITO · 2026</span>
          <span className="mono">◆ PRIVACY SERIES</span>
        </div>
        <h1 className="display" style={{
          fontSize: 'clamp(140px, 20vw, 340px)',
          lineHeight: 0.82,
          margin: 0,
          textWrap: 'balance'
        }}>
          Shield<br/>
          <span style={{ fontStyle: 'italic' }}>your</span><br/>
          scroll.
        </h1>
        <div style={{
          position: 'absolute',
          right: 0, top: 120,
          width: 420, height: 420,
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'var(--ink)',
            borderRadius: '50%'
          }}/>
          <img src="assets/hero-privacy.webp" style={{ position: 'relative', width: '85%', height: '85%', objectFit: 'contain' }}/>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, marginTop: 80, alignItems: 'end' }}>
          <p style={{ fontSize: 22, lineHeight: 1.4, maxWidth: 520, textWrap: 'pretty' }}>
            9H tempered. 160° privacy filter. Your phone, nobody else's business. Drops from 3 meters, handles daily life.
          </p>
          <Stat n="9H" label="Hardness" />
          <Stat n="160°" label="Privacy" />
          <Stat n="4.8★" label="12.4k reviews" />
        </div>
        <div style={{ marginTop: 48, display: 'flex', gap: 12 }}>
          <button className="btn lg">Shop Privacy — ₹2,098</button>
          <button className="btn ghost lg">Compare finishes</button>
        </div>
      </div>
    </section>
  );
}

// ========== HOME PAGE ASSEMBLY ==========
// Final section order (April 2026 launch). Anything not in this list has been
// intentionally removed — do not re-add without product sign-off.
//   1. Hero image carousel (fluid-to-width slider; client supplies banners)
//   2. HeroFlagship — "Nobody is watching your screen"
//   3. Categories
//   4. Bestsellers — "Top of the drop"
//   5. PhoneFinder — "Type your phone"
//   6. DropTest — "Drop it. Seriously."
//   7. Compare — "Three finishes. One glass."
//   8. Reviews — "Real phones. Real saves."
function Home() {
  return (
    <div>
      <Ticker />
      <Nav />
      <ImageCarousel />
      <Bestsellers />
      <VideoShop />
      <Categories />
      <PhoneFinder />
      <DropTest />
      <Compare />
      <Reviews />
      <Footer />
    </div>
  );
}

// ========== TWEAKS ==========
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "steel",
  "heroVariant": "A",
  "density": "regular",
  "dark": false
}/*EDITMODE-END*/;

function AppShell() {
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => {
    document.body.classList.toggle('dark', tweaks.dark);
    const colors = {
      steel: 'var(--steel)',
      gold:  'var(--gold)',
      navy:  'var(--ink)',
    };
    const map = { steel: '#2B82C9', gold: '#4BAFD6', navy: '#1A3A6B', violet: '#1E5FA8' };
    document.documentElement.style.setProperty('--accent', map[tweaks.accent] || map.steel);
    document.documentElement.style.setProperty('--density', tweaks.density === 'compact' ? '0.72' : '1');
  }, [tweaks]);

  return (
    <>
      <Home />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Style">
          <TweakRadio label="Accent"
            value={tweaks.accent}
            onChange={v => setTweaks({ accent: v })}
            options={[
              { value: 'steel',  label: 'Steel Blue' },
              { value: 'violet', label: 'Deep Violet' },
              { value: 'gold',   label: 'Heraldic Gold' },
              { value: 'navy',   label: 'Deep Navy' },
            ]}/>
          <TweakRadio label="Density"
            value={tweaks.density}
            onChange={v => setTweaks({ density: v })}
            options={[
              { value: 'regular', label: 'Spacious' },
              { value: 'compact', label: 'Compact' },
            ]}/>
          <TweakToggle label="Dark mode"
            value={tweaks.dark}
            onChange={v => setTweaks({ dark: v })}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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