// ============================================================
// Series, Shop, Product, App, About pages
// ============================================================

const { useState } = React;

// ---- Product Card ----
function ProductCard({ product, onClick, onAdd }) {
  const series = getSeries(product.series);
  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer', transition: 'transform .25s, border-color .25s' }}
      onClick={onClick}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--line-strong)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--line)'; }}
    >
      <div className="photo-bg-cool" style={{ padding: 28, position: 'relative', minHeight: 240, display: 'grid', placeItems: 'center', borderBottom: '1px solid var(--line)', overflow: 'hidden' }}>
        {product.badge && (
          <span className="chip" style={{ position: 'absolute', top: 16, left: 16, fontSize: 10, background: 'var(--fg-0)', color: 'var(--bg-1)', borderColor: 'transparent' }}>{product.badge}</span>
        )}
        <span className="chip" style={{ position: 'absolute', top: 16, right: 16, fontSize: 10, textTransform: 'uppercase', background: 'rgba(255,255,255,0.7)' }}>{series.name}</span>
        <img src={product.image} alt={product.name} style={{ width: '100%', maxHeight: 180, objectFit: 'contain', filter: 'drop-shadow(0 16px 24px rgba(0,0,0,0.2))' }}/>
      </div>
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        <div className="font-mono" style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.06em' }}>{product.sku}</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' }}>{product.name}</h3>
        <p style={{ color: 'var(--fg-2)', fontSize: 13, lineHeight: 1.5, margin: 0, flex: 1 }}>{product.short}</p>
        <div className="flex gap-2 mt-2" style={{ flexWrap: 'wrap' }}>
          <span className="chip" style={{ fontSize: 10 }}>{product.size}</span>
          <span className="chip" style={{ fontSize: 10 }}>{product.color}</span>
        </div>
        <div className="flex justify-between items-center" style={{ marginTop: 12, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
          <div className="col">
            <span className="eyebrow">From</span>
            <span className="font-mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>{formatPrice(product.price)}</span>
          </div>
          <button
            onClick={(e) => { e.stopPropagation(); onAdd(product); }}
            className="btn btn-primary"
            style={{ padding: '10px 14px', fontSize: 13 }}
            disabled={!product.inStock}
          >
            {product.inStock ? <>Add <Icon.plus/></> : 'Notify me'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ---- Series Page ----
function SeriesPage({ seriesId, navigate, onAdd }) {
  const s = getSeries(seriesId);
  const items = productsInSeries(seriesId);
  const [mode, setMode] = useState(seriesId === 'lumen' ? 'mono' : '12bit');
  if (!s) return null;
  return (
    <>
      {/* Hero */}
      <section style={{ paddingTop: 64, paddingBottom: 64, position: 'relative', overflow: 'hidden' }}>
        <WaveAccent style={{ top: 80, right: -120, width: 700, height: 500 }} colors={[s.accent, '#C9A5DC']}/>
        <div className="wrap" style={{ position: 'relative' }}>
          <div className="flex gap-2 items-center" style={{ marginBottom: 24 }}>
            <a className="font-mono" style={{ color: 'var(--fg-3)', fontSize: 12, letterSpacing: '0.08em', cursor: 'pointer' }} onClick={() => navigate('home')}>HOME</a>
            <span style={{ color: 'var(--fg-3)' }}>/</span>
            <span className="font-mono" style={{ color: 'var(--fg-1)', fontSize: 12, letterSpacing: '0.08em' }}>SERIES · {s.name.toUpperCase()}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <span className="chip chip-glow" style={{ marginBottom: 20 }}>{s.badge}</span>
              <h1 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(56px, 8vw, 120px)',
                fontWeight: 600, lineHeight: 0.9, letterSpacing: '-0.04em', margin: 0,
              }}>
                <span className="grad-text">{s.name}</span>
              </h1>
              <p style={{ fontSize: 22, color: 'var(--fg-0)', lineHeight: 1.4, marginTop: 16, marginBottom: 16, textWrap: 'balance' }}>
                {s.tagline}
              </p>
              <p style={{ fontSize: 16, color: 'var(--fg-1)', lineHeight: 1.6, marginBottom: 32, textWrap: 'pretty' }}>
                {s.description}
              </p>
              <div className="flex gap-6" style={{ flexWrap: 'wrap', paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <div className="col"><span className="eyebrow">Size range</span><span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, marginTop: 4 }}>{s.sizeRange}</span></div>
                <div className="col"><span className="eyebrow">Pitch</span><span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, marginTop: 4 }}>{s.pitch}</span></div>
                <div className="col"><span className="eyebrow">Color</span><span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, marginTop: 4 }}>{s.color.join(' / ')}</span></div>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', inset: '-30px', background: `radial-gradient(circle, ${s.accent}55, transparent 65%)`, filter: 'blur(40px)', opacity: 0.4 }}/>
              <div style={{ position: 'relative' }}>
                <LEDDisplay src="assets/vividpix.gif" alt={s.name + ' LED display'} mode={mode}/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Use cases */}
      <section style={{ paddingTop: 48, paddingBottom: 48, background: 'var(--bg-0)' }}>
        <div className="wrap">
          <div className="flex justify-between items-center" style={{ marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
            <h2 className="font-display" style={{ fontSize: 28, fontWeight: 600, margin: 0, letterSpacing: '-0.02em' }}>Where {s.name} shines</h2>
            <span className="eyebrow">Recommended scenarios</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {s.use.map((u, i) => (
              <div key={i} style={{ padding: 24, background: 'var(--bg-2)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)' }}>
                <div className="font-mono" style={{ color: s.accent, fontSize: 11, letterSpacing: '0.1em' }}>0{i+1}</div>
                <div style={{ fontSize: 17, fontWeight: 500, marginTop: 8 }}>{u}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Models */}
      <section>
        <div className="wrap">
          <div className="section-head">
            <span className="eyebrow">In this series</span>
            <h2>{items.length} {items.length === 1 ? 'model' : 'models'} available</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(items.length, 3)}, 1fr)`, gap: 20 }}>
            {items.map(p => <ProductCard key={p.id} product={p} onClick={() => navigate(`product-${p.id}`)} onAdd={onAdd}/>)}
          </div>
        </div>
      </section>

      <SeriesNav current={s.id} navigate={navigate}/>
    </>
  );
}

function SeriesNav({ current, navigate }) {
  const idx = SERIES.findIndex(s => s.id === current);
  const prev = SERIES[(idx - 1 + SERIES.length) % SERIES.length];
  const next = SERIES[(idx + 1) % SERIES.length];
  return (
    <section style={{ paddingTop: 24, paddingBottom: 96 }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[prev, next].map((s, i) => (
            <div key={s.id} className="card" style={{ padding: 28, cursor: 'pointer' }} onClick={() => navigate(`series-${s.id}`)}>
              <span className="eyebrow">{i === 0 ? '← Previous' : 'Next →'}</span>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
                <h3 className="font-display" style={{ fontSize: 28, fontWeight: 600, margin: 0, letterSpacing: '-0.02em' }}>{s.name}</h3>
                <span className="chip" style={{ fontSize: 10 }}>{s.short}</span>
              </div>
              <p style={{ color: 'var(--fg-2)', fontSize: 14, marginTop: 8, marginBottom: 0 }}>{s.tagline}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Shop Page ----
function ShopPage({ navigate, onAdd }) {
  const [seriesFilter, setSeriesFilter] = useState('all');
  const [sort, setSort] = useState('default');
  let items = seriesFilter === 'all' ? PRODUCTS : PRODUCTS.filter(p => p.series === seriesFilter);
  if (sort === 'low') items = [...items].sort((a,b) => a.price - b.price);
  if (sort === 'high') items = [...items].sort((a,b) => b.price - a.price);

  return (
    <>
      <section style={{ paddingTop: 56, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <span className="eyebrow">Shop</span>
          <h1 className="font-display" style={{ fontSize: 'clamp(40px, 6vw, 72px)', fontWeight: 600, margin: '12px 0 12px', letterSpacing: '-0.03em', lineHeight: 1 }}>
            The full <span className="grad-text">lineup</span>.
          </h1>
          <p style={{ fontSize: 17, color: 'var(--fg-1)', maxWidth: 600, lineHeight: 1.5 }}>
            Six displays across three series. Free shipping over ₹25,000. 2-year warranty on everything.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 32, paddingBottom: 96 }}>
        <div className="wrap">
          {/* Filter bar */}
          <div className="flex justify-between items-center" style={{ marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
            <div className="flex gap-2" style={{ background: 'var(--bg-2)', padding: 4, borderRadius: 999, border: '1px solid var(--line)' }}>
              {[
                { id: 'all', label: 'All' },
                { id: 'lumen', label: 'Lumen' },
                { id: 'chroma', label: 'Chroma' },
                { id: 'beacon', label: 'Beacon' },
              ].map(f => (
                <button key={f.id}
                  onClick={() => setSeriesFilter(f.id)}
                  style={{
                    padding: '8px 16px', borderRadius: 999, border: 0,
                    background: seriesFilter === f.id ? 'var(--brand-grad)' : 'transparent',
                    color: seriesFilter === f.id ? 'white' : 'var(--fg-1)',
                    fontSize: 13, fontWeight: 500, cursor: 'pointer',
                  }}>{f.label}</button>
              ))}
            </div>
            <div className="flex items-center gap-3">
              <span className="eyebrow">Sort</span>
              <select value={sort} onChange={(e) => setSort(e.target.value)}
                style={{ padding: '8px 14px', background: 'var(--bg-2)', border: '1px solid var(--line)', color: 'var(--fg-0)', borderRadius: 999, fontFamily: 'inherit', fontSize: 13 }}>
                <option value="default">Featured</option>
                <option value="low">Price: low to high</option>
                <option value="high">Price: high to low</option>
              </select>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {items.map(p => <ProductCard key={p.id} product={p} onClick={() => navigate(`product-${p.id}`)} onAdd={onAdd}/>)}
          </div>
        </div>
      </section>
    </>
  );
}

// ---- Product Detail ----
function ProductPage({ productId, navigate, onAdd }) {
  const p = getProduct(productId);
  const [imgIdx, setImgIdx] = useState(0);
  const [qty, setQty] = useState(1);
  const [previewMode, setPreviewMode] = useState(p?.color.includes('Monochrome') ? 'mono' : '12bit');
  if (!p) return <div className="wrap" style={{ padding: 96 }}>Product not found.</div>;
  const series = getSeries(p.series);
  const related = PRODUCTS.filter(x => x.series === p.series && x.id !== p.id).concat(PRODUCTS.filter(x => x.series !== p.series)).slice(0, 3);

  return (
    <>
      <section style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div className="wrap">
          <div className="flex gap-2 items-center" style={{ marginBottom: 24 }}>
            <a className="font-mono" style={{ color: 'var(--fg-3)', fontSize: 12, letterSpacing: '0.08em', cursor: 'pointer' }} onClick={() => navigate('shop')}>SHOP</a>
            <span style={{ color: 'var(--fg-3)' }}>/</span>
            <a className="font-mono" style={{ color: 'var(--fg-3)', fontSize: 12, letterSpacing: '0.08em', cursor: 'pointer' }} onClick={() => navigate(`series-${p.series}`)}>{series.name.toUpperCase()}</a>
            <span style={{ color: 'var(--fg-3)' }}>/</span>
            <span className="font-mono" style={{ color: 'var(--fg-1)', fontSize: 12, letterSpacing: '0.08em' }}>{p.name.toUpperCase()}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56 }}>
            {/* Gallery */}
            <div>
              <div className="photo-bg" style={{ borderRadius: 'var(--r-lg)', padding: 48, border: '1px solid var(--line)', minHeight: 460, display: 'grid', placeItems: 'center', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: 20, right: 20, display: 'flex', gap: 8 }}>
                  {p.badge && <span className="chip chip-glow" style={{ fontSize: 10 }}>{p.badge}</span>}
                  <span className="chip" style={{ fontSize: 10 }}>{series.name}</span>
                </div>
                <img src={p.images[imgIdx]} alt={p.name} style={{ maxWidth: '100%', maxHeight: 360, objectFit: 'contain' }}/>
              </div>
              <div className="flex gap-3 mt-4">
                {p.images.map((img, i) => (
                  <button key={i} onClick={() => setImgIdx(i)} className="photo-bg-cool" style={{
                    width: 90, height: 70, padding: 6, borderRadius: 8, cursor: 'pointer',
                    border: imgIdx === i ? '2px solid var(--brand-magenta)' : '1px solid var(--line)',
                  }}>
                    <img src={img} style={{ width: '100%', height: '100%', objectFit: 'contain' }}/>
                  </button>
                ))}
              </div>

              {/* Live preview */}
              <div style={{ marginTop: 32, padding: 24, background: 'var(--bg-2)', borderRadius: 'var(--r-lg)', border: '1px solid var(--line)' }}>
                <div className="flex justify-between items-center" style={{ marginBottom: 16 }}>
                  <div>
                    <span className="eyebrow">Live preview</span>
                    <h4 className="font-display" style={{ fontSize: 18, fontWeight: 600, margin: '4px 0 0' }}>See what it looks like</h4>
                  </div>
                  <div className="mode-pill">
                    {p.color.includes('Monochrome') && <PreviewModeBtn current={previewMode} val="mono" onClick={() => setPreviewMode('mono')}>Mono</PreviewModeBtn>}
                    {(p.color.includes('3-bit color') || p.color === '3-bit color') && <PreviewModeBtn current={previewMode} val="3bit" onClick={() => setPreviewMode('3bit')}>3-bit</PreviewModeBtn>}
                    {p.color.includes('full color') && <PreviewModeBtn current={previewMode} val="12bit" onClick={() => setPreviewMode('12bit')}>12-bit</PreviewModeBtn>}
                  </div>
                </div>
                <div style={{ display: 'grid', placeItems: 'center', padding: 16, background: '#000', borderRadius: 8 }}>
                  <LEDMatrix rows={14} cols={56} pitch={6} mode={previewMode} content={{ kind: 'text', text: 'HELLO ' + p.name.toUpperCase(), color: '#E13F92', scroll: true, speed: 0.5 }}/>
                </div>
              </div>
            </div>

            {/* Buy column */}
            <div>
              <div className="font-mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em' }}>{p.sku}</div>
              <h1 className="font-display" style={{ fontSize: 'clamp(40px, 5vw, 60px)', fontWeight: 600, margin: '8px 0 12px', letterSpacing: '-0.03em', lineHeight: 1 }}>{p.name}</h1>
              <p style={{ fontSize: 18, color: 'var(--fg-1)', lineHeight: 1.5, margin: 0 }}>{p.short}</p>

              <div className="flex items-baseline gap-3" style={{ marginTop: 28, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
                <span className="font-display" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.02em' }}>{formatPrice(p.price)}</span>
                <span style={{ color: 'var(--fg-2)', fontSize: 14 }}>incl. GST · free shipping</span>
              </div>

              {/* Key specs at a glance */}
              <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {[
                  { k: 'Size', v: p.size },
                  { k: 'Resolution', v: p.resolution },
                  { k: 'Color depth', v: p.color },
                  { k: 'Pixel pitch', v: p.pitch },
                ].map((s, i) => (
                  <div key={i} style={{ padding: 14, background: 'var(--bg-2)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)' }}>
                    <div className="eyebrow">{s.k}</div>
                    <div className="font-mono" style={{ fontSize: 14, marginTop: 4 }}>{s.v}</div>
                  </div>
                ))}
              </div>

              {/* Quantity + add */}
              <div style={{ marginTop: 28 }}>
                <div className="flex gap-3 items-center">
                  <div style={{ display: 'inline-flex', alignItems: 'center', background: 'var(--bg-3)', borderRadius: 999, padding: 4, border: '1px solid var(--line)' }}>
                    <button onClick={() => setQty(Math.max(1, qty - 1))} style={{ width: 36, height: 36, borderRadius: '50%', border: 0, background: 'transparent', color: 'var(--fg-0)', display: 'grid', placeItems: 'center' }}><Icon.minus/></button>
                    <span style={{ minWidth: 36, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 15 }}>{qty}</span>
                    <button onClick={() => setQty(qty + 1)} style={{ width: 36, height: 36, borderRadius: '50%', border: 0, background: 'transparent', color: 'var(--fg-0)', display: 'grid', placeItems: 'center' }}><Icon.plus/></button>
                  </div>
                  <button className="btn btn-primary btn-lg" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onAdd(p, qty)} disabled={!p.inStock}>
                    {p.inStock ? <>Add to cart · {formatPrice(p.price * qty)}</> : 'Notify me when available'}
                  </button>
                </div>
                <button className="btn btn-secondary btn-lg" style={{ width: '100%', justifyContent: 'center', marginTop: 12 }} onClick={() => window.open(waProductEnquiry(p), '_blank')}>
                  <span style={{ color: '#25D366', display: 'inline-flex' }}><Icon.whatsapp/></span> Enquire on WhatsApp
                </button>
              </div>

              {/* Trust bar */}
              <div style={{ marginTop: 28, padding: 16, background: 'var(--bg-2)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)' }}>
                <div className="col gap-3" style={{ fontSize: 13 }}>
                  {[
                    { i: <Icon.truck/>, t: 'Free shipping pan-India over ₹25,000' },
                    { i: <Icon.shield/>, t: '2-year manufacturer warranty + 7-day return' },
                    { i: <Icon.android/>, t: 'Android & web app included free for life' },
                  ].map((x, i) => (
                    <div key={i} className="flex items-center gap-3"><span style={{ color: 'var(--brand-pink)' }}>{x.i}</span><span>{x.t}</span></div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Full specs */}
      <section style={{ paddingTop: 32, paddingBottom: 64, background: 'var(--bg-0)' }}>
        <div className="wrap">
          <div className="section-head"><span className="eyebrow">Specifications</span><h2>The full data sheet</h2></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
            <SpecGroup title="Display" rows={[
              ['Model', p.sku],
              ['Series', series.name],
              ['Physical size', p.size],
              ['Resolution', p.resolution + ' pixels'],
              ['Pixel pitch', p.pitch + ' mm'],
              ['Color depth', p.color],
              ['Refresh rate', '60 Hz'],
              ['Brightness', p.series === 'beacon' ? '6,000 cd/m² (outdoor)' : '1,500 cd/m² (indoor)'],
            ]}/>
            <SpecGroup title="Power & I/O" rows={[
              ['Input voltage', '100–240V AC, 50/60Hz'],
              ['Power consumption', p.series === 'beacon' ? '180W typical' : '60W typical'],
              ['Connectivity', 'Wi-Fi 2.4GHz · Ethernet (optional)'],
              ['Control', 'Android app · Web app · REST API'],
              ['Languages', 'Unicode (220+ scripts)'],
              ['Mount', 'Universal wall bracket included'],
              ['Enclosure', p.series === 'beacon' ? 'Powder-coated aluminium · IP65' : 'Powder-coated aluminium · IP20'],
              ['Warranty', '2 years'],
            ]}/>
          </div>
        </div>
      </section>

      {/* Related */}
      <section style={{ paddingTop: 48, paddingBottom: 96 }}>
        <div className="wrap">
          <div className="section-head"><span className="eyebrow">Also worth a look</span><h2>You may also like</h2></div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {related.map(r => <ProductCard key={r.id} product={r} onClick={() => { navigate(`product-${r.id}`); window.scrollTo(0,0); }} onAdd={onAdd}/>)}
          </div>
        </div>
      </section>
    </>
  );
}

function PreviewModeBtn({ current, val, onClick, children }) {
  return (
    <button onClick={onClick} className={current === val ? 'active' : ''}>{children}</button>
  );
}

function SpecGroup({ title, rows }) {
  return (
    <div>
      <h3 className="font-display" style={{ fontSize: 22, fontWeight: 600, margin: '0 0 16px', letterSpacing: '-0.02em' }}>{title}</h3>
      <table className="spec-table">
        <tbody>{rows.map(([k, v], i) => <tr key={i}><th>{k}</th><td>{v}</td></tr>)}</tbody>
      </table>
    </div>
  );
}

// ---- App showcase ----
function AppPage({ navigate }) {
  const [pickedColor, setPickedColor] = useState('#E13F92');
  const [text, setText] = useState('HELLO');
  const [mode, setMode] = useState('12bit');
  return (
    <>
      <section style={{ paddingTop: 56, paddingBottom: 64 }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <span className="eyebrow">VividPix Control</span>
              <h1 className="font-display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', fontWeight: 600, margin: '12px 0 16px', letterSpacing: '-0.03em', lineHeight: 0.95 }}>
                One app.<br/><span className="grad-text">Every display.</span>
              </h1>
              <p style={{ fontSize: 18, color: 'var(--fg-1)', lineHeight: 1.55, marginBottom: 32 }}>
                Type a message. Drop a GIF. Schedule it for next Tuesday at 6pm. The app pairs with every panel in your account and pushes content over Wi-Fi in under a second.
              </p>
              <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg"><Icon.android/> Get the Android app</button>
                <button className="btn btn-secondary btn-lg"><Icon.globe/> Open web app</button>
              </div>
              <div className="col gap-3 mt-8">
                {['Text in 220+ languages with inline emoji', 'GIFs and images render natively, no transcoding', 'Schedule, loop, or trigger on a timer', 'Group displays into zones and 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(122,224,176,0.15)', color: 'var(--ok)', display: 'grid', placeItems: 'center' }}><Icon.check/></span>
                    <span style={{ fontSize: 15 }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Mock phone */}
            <div style={{ position: 'relative', display: 'grid', placeItems: 'center' }}>
              <div style={{ position: 'absolute', inset: '-40px', background: 'radial-gradient(circle, rgba(200,19,172,0.3), transparent 60%)', filter: 'blur(40px)' }}/>
              <div style={{ position: 'relative', width: 320, padding: 8, background: '#000', borderRadius: 42, border: '6px solid #1a1a1a', boxShadow: '0 30px 60px -20px rgba(0,0,0,0.8)' }}>
                <div style={{ background: 'var(--bg-1)', borderRadius: 34, padding: '36px 20px 24px', minHeight: 540 }}>
                  <div style={{ width: 60, height: 5, borderRadius: 3, background: '#1a1a1a', margin: '0 auto 20px' }}/>
                  <div className="flex justify-between items-center" style={{ marginBottom: 20 }}>
                    <div>
                      <div className="eyebrow">Display</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600 }}>Counter · Chroma 30</div>
                    </div>
                    <span className="chip" style={{ background: 'rgba(122,224,176,0.15)', color: 'var(--ok)', border: '1px solid rgba(122,224,176,0.3)' }}>● Live</span>
                  </div>
                  <div style={{ padding: 12, background: '#000', borderRadius: 12, marginBottom: 20 }}>
                    <LEDMatrix rows={10} cols={36} pitch={6} mode={mode} content={{ kind: 'text', text, color: pickedColor, scroll: true, speed: 0.4 }}/>
                  </div>
                  <div className="col gap-3">
                    <div>
                      <div className="eyebrow" style={{ marginBottom: 6 }}>Message</div>
                      <input className="input" value={text} onChange={(e) => setText(e.target.value.toUpperCase())} maxLength={20}/>
                    </div>
                    <div>
                      <div className="eyebrow" style={{ marginBottom: 6 }}>Color</div>
                      <div className="flex gap-2">
                        {['#E13F92', '#7AE0B0', '#F2B85A', '#6FB8F2', '#FFFFFF'].map(c => (
                          <button key={c} onClick={() => setPickedColor(c)} style={{
                            width: 38, height: 38, borderRadius: 12, border: pickedColor === c ? '2px solid white' : '2px solid var(--line)',
                            background: c, cursor: 'pointer',
                          }}/>
                        ))}
                      </div>
                    </div>
                    <div>
                      <div className="eyebrow" style={{ marginBottom: 6 }}>Mode</div>
                      <div className="mode-pill" style={{ width: '100%' }}>
                        {[['mono', 'Mono'], ['3bit', '3-bit'], ['12bit', '12-bit']].map(([v, l]) => (
                          <button key={v} onClick={() => setMode(v)} className={mode === v ? 'active' : ''} style={{ flex: 1 }}>{l}</button>
                        ))}
                      </div>
                    </div>
                    <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}>Push to display →</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ---- About ----
function AboutPage() {
  return (
    <>
      <section style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="wrap">
          <span className="eyebrow">About VividPix</span>
          <h1 className="font-display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', fontWeight: 600, margin: '16px 0', letterSpacing: '-0.03em', lineHeight: 0.95, maxWidth: 1000 }}>
            We build the displays<br/>that <span className="grad-text">small shops</span> deserve.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--fg-1)', lineHeight: 1.55, maxWidth: 760, marginTop: 24 }}>
            VividPix is a Bengaluru-based hardware studio. Since 2019 we've shipped over 12,000 LED matrix displays to shopkeepers, restaurateurs, places of worship and event planners — most of whom had never owned a programmable sign before.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { k: '12,000+', v: 'Displays shipped' },
              { k: '8 yrs', v: 'Average uptime' },
              { k: '220+', v: 'Languages supported' },
              { k: '120', v: 'Service partners across India' },
            ].map((s, i) => (
              <div key={i} style={{ padding: 28, background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
                <div className="font-display" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em' }}>{s.k}</div>
                <div className="eyebrow" style={{ marginTop: 8 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 32, paddingBottom: 96, background: 'var(--bg-0)' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
            <div>
              <h2 className="font-display" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', margin: 0 }}>Get in touch</h2>
              <p style={{ color: 'var(--fg-1)', fontSize: 16, lineHeight: 1.6, marginTop: 12 }}>Sales, installation, bulk orders or just a question — we're a small team and we read everything.</p>
              <div className="col gap-4 mt-8">
                <div>
                  <span className="eyebrow">WhatsApp · fastest</span>
                  <div className="mt-2"><a className="btn" href={waGeneralEnquiry()} target="_blank" rel="noopener noreferrer" style={{ background: '#25D366', color: 'white', padding: '12px 20px' }}>
                    <Icon.whatsapp/> {SITE.whatsappDisplay}
                  </a></div>
                  <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>{SITE.whatsappHours}</div>
                </div>
                <div><span className="eyebrow">Sales</span><div style={{ fontSize: 17, fontFamily: 'var(--font-mono)', marginTop: 6 }}><a href={`mailto:${SITE.email}`}>{SITE.email}</a> · {SITE.phone}</div></div>
                <div><span className="eyebrow">Support</span><div style={{ fontSize: 17, fontFamily: 'var(--font-mono)', marginTop: 6 }}><a href={`mailto:${SITE.supportEmail}`}>{SITE.supportEmail}</a></div></div>
                <div><span className="eyebrow">Office</span><div style={{ fontSize: 17, marginTop: 6, lineHeight: 1.5 }}>VividPix Technologies Pvt. Ltd.<br/>{SITE.address}<br/>GSTIN: {SITE.gstin}</div></div>
              </div>
            </div>
            <div className="card" style={{ padding: 28 }}>
              <h3 className="font-display" style={{ fontSize: 22, fontWeight: 600, margin: '0 0 16px', letterSpacing: '-0.01em' }}>Send us a message</h3>
              <div className="col gap-3">
                <input className="input" placeholder="Your name"/>
                <input className="input" placeholder="Email or phone"/>
                <select className="input">
                  <option>Sales enquiry</option>
                  <option>Bulk order quote</option>
                  <option>Installation in my city</option>
                  <option>Technical support</option>
                </select>
                <textarea className="input" placeholder="Tell us a bit about your space and what you'd like to display" rows={4} style={{ resize: 'vertical' }}/>
                <button className="btn btn-primary" style={{ justifyContent: 'center', marginTop: 4 }} onClick={(e) => { e.preventDefault(); window.open(waGeneralEnquiry(), '_blank'); }}>
                  Send via WhatsApp <Icon.arrow/>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { SeriesPage, ShopPage, ProductPage, AppPage, AboutPage, ProductCard });