// ============================================================
// Home page (Soft Showroom Lite)
// ============================================================

const { useState, useEffect } = React;

// Decorative wavy SVG
function WaveAccent({ style, colors = ['#FFC8B0', '#C9A5DC'] }) {
  return (
    <svg className="wave-accent" style={style} viewBox="0 0 700 500" preserveAspectRatio="none">
      <path d="M0 250 Q 175 100, 350 250 T 700 250" stroke={colors[0]} strokeWidth="3" fill="none" opacity="0.5"/>
      <path d="M0 290 Q 175 140, 350 290 T 700 290" stroke={colors[0]} strokeWidth="3" fill="none" opacity="0.4"/>
      <path d="M0 330 Q 175 180, 350 330 T 700 330" stroke={colors[1]} strokeWidth="3" fill="none" opacity="0.6"/>
    </svg>
  );
}

function HomeHero({ navigate }) {
  const [mode, setMode] = useState('12bit');
  return (
    <section style={{ paddingTop: 64, paddingBottom: 48, position: 'relative', overflow: 'hidden' }}>
      <WaveAccent style={{ top: 100, right: -100, width: 700, height: 500 }}/>
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
          <div className="fade-up">
            <span className="eyebrow">A brighter way to talk to your customers</span>
            <h1 style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(56px, 8vw, 112px)',
              fontWeight: 600,
              lineHeight: 0.95,
              letterSpacing: '-0.04em',
              margin: '20px 0 0',
              textWrap: 'balance',
            }}>
              Signage that <span className="grad-text">moves</span> people.
            </h1>
            <p style={{ fontSize: 19, color: 'var(--fg-1)', maxWidth: 520, lineHeight: 1.55, marginTop: 28, textWrap: 'pretty' }}>
              LED matrix displays for storefronts, lobbies and facades. Three series, six sizes, one app. Push text, GIFs and 12-bit color from your phone — no PC, no software install.
            </p>
            <div className="flex gap-3 mt-8" style={{ flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => navigate('shop')}>
                Shop the lineup <Icon.arrow/>
              </button>
              <button className="btn btn-secondary btn-lg" onClick={() => navigate('series-chroma')}>
                Explore Chroma
              </button>
            </div>
            <div style={{
              marginTop: 48, display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center',
              padding: '18px 24px', background: 'rgba(255,255,255,0.55)', border: '1px solid var(--line)',
              borderRadius: 20, backdropFilter: 'blur(10px)',
            }}>
              {[
                { c: 'var(--brand-magenta)', t: '12-bit full color' },
                { c: 'var(--brand-violet)', t: '6,000-nit outdoor' },
                { c: 'var(--brand-pink)', t: 'IP65 weather-sealed' },
                { c: 'var(--brand-purple)', t: '220+ languages' },
              ].map((s, i) => (
                <div key={i} className="flex items-center gap-2" style={{ fontSize: 13, color: 'var(--fg-1)' }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: s.c }}/>{s.t}
                </div>
              ))}
            </div>
          </div>

          {/* Hero display */}
          <div style={{
            position: 'relative',
            background: 'linear-gradient(160deg, white 0%, var(--lav-100) 100%)',
            border: '1px solid var(--line)',
            borderRadius: 28,
            padding: '36px 28px',
            boxShadow: '0 40px 80px -30px rgba(109,15,197,0.25)',
          }}>
            <LEDDisplay src="assets/vividpix.gif" alt="VividPix LED display" mode={mode}/>
            <div className="flex justify-between items-center mt-6" style={{ flexWrap: 'wrap', gap: 16 }}>
              <div>
                <div className="eyebrow">Chroma 30 · 12-bit · 192 × 64 px</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, marginTop: 6 }}>₹24,990</div>
              </div>
              <div className="mode-pill">
                {[['mono', 'Mono'], ['3bit', '3-bit'], ['12bit', '12-bit']].map(([v, l]) => (
                  <button key={v} onClick={() => setMode(v)} className={mode === v ? 'active' : ''}>{l}</button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Marquee strip
function HomeMarquee() {
  const items = ['STOREFRONTS', '★', 'CAFÉS', '★', 'PETROL STATIONS', '★', 'TEMPLES', '★', 'STADIUMS', '★', 'METRO STATIONS', '★', 'EVENT VENUES', '★', 'PHARMACIES', '★', 'BANKS'];
  return (
    <div style={{ padding: '32px 0', borderBlock: '1px solid var(--line)', background: 'var(--bg-3)' }}>
      <div className="marquee">
        <div className="marquee-track">
          {items.concat(items).map((t, i) => (
            <span key={i} className="font-mono" style={{ fontSize: 13, letterSpacing: '0.2em', color: 'var(--fg-2)' }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

// Series — full-width alternating cards (Soft Showroom Lite style)
function HomeSeries({ navigate }) {
  return (
    <section>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">§ 01 — Three series</span>
          <h2>Pick a size <span className="grad-text">that fits your wall.</span></h2>
          <p>Every VividPix display runs the same operating system and pairs with the same app — so once you learn one, you've learned them all.</p>
        </div>
        <div className="col gap-6">
          {SERIES.map((s, i) => <SeriesCard key={s.id} series={s} index={i} navigate={navigate}/>)}
        </div>
      </div>
    </section>
  );
}

function SeriesCard({ series, index, navigate }) {
  const alt = index === 1; // Chroma reversed
  const isDark = series.id === 'beacon';
  const imageSrc = series.id === 'lumen' ? 'assets/3x1-front.png'
                 : series.id === 'chroma' ? 'assets/3x1-angle.png'
                 : 'assets/3x1-front.png';
  const bgClass = series.id === 'lumen' ? 'photo-bg-cool'
                : series.id === 'chroma' ? 'photo-bg-warm'
                : 'photo-bg-dark';
  const cols = alt ? '1.3fr 1fr' : '1fr 1.3fr';
  const imgCol = (
    <div className={bgClass} style={{ padding: 48, display: 'grid', placeItems: 'center', position: 'relative', overflow: 'hidden', minHeight: 340 }}>
      <WaveAccent style={{ top: 0, left: 0, width: '100%', height: '100%', opacity: isDark ? 0.3 : 0.4 }}
        colors={series.id === 'lumen' ? ['#C9A5DC', '#C9A5DC'] : ['#E13F92', '#6D0FC5']}/>
      <img src={imageSrc} alt={series.name} style={{ maxHeight: 260, width: 'auto', maxWidth: '100%', position: 'relative', zIndex: 1, filter: 'drop-shadow(0 20px 30px rgba(0,0,0,0.25))' }}/>
    </div>
  );
  const textCol = (
    <div style={{ padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <span className="eyebrow">Series 0{index + 1} · {series.short}</span>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1, margin: '12px 0 16px' }}>{series.name}</h3>
      <p style={{ fontSize: 18, color: 'var(--fg-1)', lineHeight: 1.5, margin: '0 0 16px' }}>{series.tagline}</p>
      <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, margin: '0 0 28px' }}>{series.description}</p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, padding: '20px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
        <SpecMini k="Size range" v={series.sizeRange}/>
        <SpecMini k="Color" v={series.color.join(' · ')}/>
        <SpecMini k="Pitch" v={series.pitch}/>
        <SpecMini k="Starts at" v={'₹' + Math.min(...productsInSeries(series.id).map(p => p.price)).toLocaleString('en-IN')}/>
      </div>
      <a style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600, color: 'var(--brand-magenta)' }}>
        Explore {series.name} <Icon.arrow/>
      </a>
    </div>
  );
  return (
    <div
      className="card"
      style={{ display: 'grid', gridTemplateColumns: cols, padding: 0, cursor: 'pointer', transition: 'transform .25s, box-shadow .25s' }}
      onClick={() => navigate(`series-${series.id}`)}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 30px 60px -20px rgba(109,15,197,0.25)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-card)'; }}
    >
      {alt ? <>{textCol}{imgCol}</> : <>{imgCol}{textCol}</>}
    </div>
  );
}

function SpecMini({ k, v }) {
  return (
    <div>
      <div className="eyebrow" style={{ fontSize: 10 }}>{k}</div>
      <div style={{ fontSize: 15, fontWeight: 500, marginTop: 4 }}>{v}</div>
    </div>
  );
}

// Features
function HomeFeatures() {
  const items = [
    { icon: <Icon.palette/>, title: '12-bit full color', body: '4,096 shades per channel for photo-quality output, smooth gradients, and faithful brand reproduction.' },
    { icon: <Icon.globe/>, title: 'Multilingual + emoji', body: 'Type in Hindi, Tamil, Arabic, Mandarin — anything Unicode. Mix in emoji and brand icons inline.' },
    { icon: <Icon.android/>, title: 'Phone-first control', body: 'Push content from Android or the web app over Wi-Fi. No PC, no driver install, no firmware ritual.' },
    { icon: <Icon.shield/>, title: 'IP65 outdoor option', body: 'The Beacon series is sealed against rain, dust and sun. Surge-protected PSU on every unit.' },
    { icon: <Icon.bolt/>, title: 'GIF playback', body: 'Drop a .gif and we render it on-device at native refresh — no transcoding, no perceptible lag.' },
    { icon: <Icon.truck/>, title: 'Mount and go', body: 'Wall, ceiling, or pole — every panel ships with a universal bracket and pre-wired AC input.' },
  ];
  return (
    <section style={{ paddingTop: 48 }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">§ 02 — What it does</span>
          <h2>One panel, every kind of message.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {items.map((it, i) => (
            <div key={i} className="card" style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 14, transition: 'transform .25s, border-color .25s' }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--lav-200)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--line)'; }}
            >
              <div style={{ width: 48, height: 48, borderRadius: 14, background: 'var(--lav-100)', display: 'grid', placeItems: 'center', color: 'var(--brand-violet)' }}>
                {it.icon}
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' }}>{it.title}</h3>
              <p style={{ color: 'var(--fg-1)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Showroom — uses the full lineup photo
function HomeShowroom() {
  return (
    <section>
      <div className="wrap">
        <div style={{
          background: 'linear-gradient(160deg, var(--lav-50) 0%, var(--peach-200) 100%)',
          borderRadius: 32, padding: 64, border: '1px solid var(--line)', position: 'relative', overflow: 'hidden',
        }}>
          <svg style={{ position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none' }} viewBox="0 0 1200 500" preserveAspectRatio="none">
            <path d="M0 250 Q 300 100, 600 250 T 1200 250" stroke="#FFC8B0" strokeWidth="3" fill="none"/>
            <path d="M0 290 Q 300 140, 600 290 T 1200 290" stroke="#C9A5DC" strokeWidth="3" fill="none"/>
            <path d="M0 330 Q 300 180, 600 330 T 1200 330" stroke="#FFC8B0" strokeWidth="3" fill="none" opacity="0.6"/>
          </svg>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'center', position: 'relative' }}>
            <div>
              <span className="eyebrow">§ 03 — In the wild</span>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4.5vw, 56px)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '12px 0 16px', textWrap: 'balance' }}>
                Six sizes. One <span className="grad-text">shared OS.</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg-1)', margin: '0 0 28px' }}>
                From the 2-foot Lumen reader-board behind your café counter to the 5-foot Beacon hanging off a petrol station — every VividPix display speaks the same language and runs the same playlists.
              </p>
              <div className="col gap-3 mb-4">
                {['Same app for the entire range', 'Schedule months of content ahead', 'Group displays into zones, push to all at once'].map((t, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgba(46,159,102,0.15)', color: 'var(--ok)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon.check/></span>
                    <span style={{ fontSize: 14 }}>{t}</span>
                  </div>
                ))}
              </div>
              <button className="btn btn-primary mt-4">See the full lineup <Icon.arrow/></button>
            </div>
            <div><img src="assets/all-displays.png" alt="The full VividPix lineup"/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Bestsellers
function HomeBestsellers({ navigate, onAdd }) {
  const featured = ['lumen-20', 'chroma-30', 'beacon-40'].map(getProduct);
  return (
    <section style={{ paddingTop: 64 }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">§ 04 — Bestsellers</span>
          <h2>Most loved this quarter.</h2>
          <p>The displays our customers reorder for second locations. Free shipping, 2-year warranty, installed in 24 hours across major Indian metros.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {featured.map(p => <ProductCard key={p.id} product={p} onClick={() => navigate(`product-${p.id}`)} onAdd={onAdd}/>)}
        </div>
      </div>
    </section>
  );
}

// Closing CTA
function HomeCTA({ navigate }) {
  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="wrap">
        <div style={{
          position: 'relative', borderRadius: 36, padding: '80px 64px',
          background: 'radial-gradient(circle at 90% 20%, rgba(225,63,146,0.4), transparent 50%), radial-gradient(circle at 10% 80%, rgba(109,15,197,0.5), transparent 55%), linear-gradient(135deg, #1A0B26 0%, #2a0a3d 60%, #6D0FC5 100%)',
          color: 'white', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.18) 1px, transparent 1px)',
            backgroundSize: '16px 16px',
            mask: 'linear-gradient(135deg, transparent 40%, black 80%)',
            WebkitMask: 'linear-gradient(135deg, transparent 40%, black 80%)',
            pointerEvents: 'none',
          }}/>
          <div style={{ position: 'relative' }}>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>§ 05 — Ready when you are</span>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 6vw, 80px)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1, margin: '16px 0', maxWidth: 700, textWrap: 'balance' }}>
              Your shop deserves to be <span className="grad-text">seen.</span>
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 18, lineHeight: 1.55, maxWidth: 500, margin: '0 0 32px' }}>
              Order today, unbox tomorrow. Free installation in Bengaluru, Mumbai, Delhi, Hyderabad and Pune.
            </p>
            <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => navigate('shop')}>Shop now <Icon.arrow/></button>
              <button className="btn btn-lg" style={{ background: 'rgba(255,255,255,0.1)', color: 'white', border: '1px solid rgba(255,255,255,0.2)' }} onClick={() => navigate('about')}>Talk to sales</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ navigate, onAdd }) {
  return (
    <>
      <HomeHero navigate={navigate}/>
      <HomeMarquee/>
      <HomeSeries navigate={navigate}/>
      <HomeFeatures/>
      <HomeShowroom/>
      <HomeBestsellers navigate={navigate} onAdd={onAdd}/>
      <HomeCTA navigate={navigate}/>
    </>
  );
}

Object.assign(window, { HomePage, WaveAccent });