/* =========================================================
   Brandsap Apps — components.jsx
   All UI components except the root <App/>.
   Exported to window so the main script can use them.
   ========================================================= */

const { useState, useEffect, useMemo, useRef, useCallback } = React;

const STATUS_LABEL = {
  'live': 'Live',
  'beta': 'Beta',
  'coming-soon': 'Coming soon'
};

/* ============== Device detection ============== */
function detectDevice() {
  if (typeof navigator === 'undefined') return { kind: 'unknown', label: 'unknown' };
  const ua = navigator.userAgent || '';
  const isIPad = /iPad/i.test(ua) || (/Macintosh/i.test(ua) && navigator.maxTouchPoints > 1);
  const isIOS = /iPhone|iPod/i.test(ua) || isIPad;
  const isAndroid = /Android/i.test(ua);
  const isMobile = /Mobi|Android/i.test(ua);
  if (isAndroid) return { kind: 'android', label: 'Android' };
  if (isIOS) return { kind: 'ios', label: isIPad ? 'iPad' : 'iPhone' };
  if (isMobile) return { kind: 'mobile', label: 'mobile' };
  return { kind: 'desktop', label: 'desktop' };
}

/* ============== Toast hook ============== */
function useToast() {
  const [toast, setToast] = useState(null);
  const timerRef = useRef(null);
  const show = useCallback((msg) => {
    if (timerRef.current) clearTimeout(timerRef.current);
    setToast(msg);
    timerRef.current = setTimeout(() => setToast(null), 2400);
  }, []);
  return [toast, show];
}

/* ============== QR placeholder (deterministic decorative pattern) ============== */
function QRCode({ size = 96, seed = 'brandsap', color = '#14140f' }) {
  // Simple deterministic pseudo-QR: 21x21 grid with finder patterns + noise from seed
  const N = 21;
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const rng = () => { h = (h * 1664525 + 1013904223) >>> 0; return (h & 0xffff) / 0xffff; };
  const cells = [];
  for (let y = 0; y < N; y++) {
    for (let x = 0; x < N; x++) {
      const inFinder = (x < 7 && y < 7) || (x >= N - 7 && y < 7) || (x < 7 && y >= N - 7);
      // Border of finder
      const finderOn = inFinder && (
        (x === 0 || x === 6 || y === 0 || y === 6 ||
         x === N - 1 || x === N - 7 || y === N - 7 ||
         (x >= 2 && x <= 4 && y >= 2 && y <= 4))
      );
      // Alignment top-right & bottom-left
      const onFinderRect = inFinder && (
        (x >= (x < 7 ? 0 : N - 7) && x <= (x < 7 ? 6 : N - 1)) &&
        (y >= (y < 7 ? 0 : N - 7) && y <= (y < 7 ? 6 : N - 1))
      );
      let on = false;
      if (inFinder) {
        // Simulate finder block
        const fx = x < 7 ? x : x - (N - 7);
        const fy = y < 7 ? y : y - (N - 7);
        const outerRing = (fx === 0 || fx === 6 || fy === 0 || fy === 6);
        const innerBlock = (fx >= 2 && fx <= 4 && fy >= 2 && fy <= 4);
        on = outerRing || innerBlock;
      } else {
        on = rng() > 0.55;
      }
      if (on) cells.push({ x, y });
    }
  }
  const s = 100 / N;
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <rect width="100" height="100" fill="white"/>
      {cells.map((c, i) => (
        <rect
          key={i}
          x={c.x * s} y={c.y * s}
          width={s} height={s}
          fill={color}
          rx={s * 0.18}
        />
      ))}
    </svg>
  );
}

/* ============== Icons ============== */
const Icon = {
  arrow: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7"/>
    </svg>
  ),
  android: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M17.523 15.342c-.595 0-1.077-.482-1.077-1.077s.482-1.078 1.077-1.078 1.078.483 1.078 1.078-.483 1.077-1.078 1.077m-11.046 0c-.595 0-1.077-.482-1.077-1.077s.482-1.078 1.077-1.078 1.078.483 1.078 1.078-.483 1.077-1.078 1.077m11.43-6.27 2.147-3.717a.446.446 0 0 0-.16-.61.448.448 0 0 0-.611.16l-2.173 3.764a13.3 13.3 0 0 0-5.11-1.013 13.3 13.3 0 0 0-5.11 1.013L4.717 4.905a.446.446 0 1 0-.772.447l2.147 3.717c-3.685 2.005-6.21 5.745-6.585 10.16h23.184c-.375-4.415-2.9-8.155-6.585-10.16"/>
    </svg>
  ),
  apple: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11"/>
    </svg>
  ),
  search: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
    </svg>
  ),
  check: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M20 6 9 17l-5-5"/>
    </svg>
  ),
  external: (p) => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M7 17 17 7M7 7h10v10"/>
    </svg>
  ),
  star: (p) => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14 2 9.27l6.91-1.01z"/>
    </svg>
  ),
  copy: (p) => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="9" y="9" width="13" height="13" rx="2"/>
      <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
    </svg>
  ),
  send: (p) => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/>
    </svg>
  ),
  qr: (p) => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <rect x="3" y="3" width="7" height="7" rx="1"/>
      <rect x="14" y="3" width="7" height="7" rx="1"/>
      <rect x="3" y="14" width="7" height="7" rx="1"/>
      <path d="M14 14h3v3M14 20h7M20 14v3M17 20v1"/>
    </svg>
  ),
  // App icons
  'doc-ai': (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
      <path d="M14 2v6h6"/>
      <path d="M9 13h6M9 17h4"/>
      <circle cx="15.5" cy="17" r="1.2" fill="currentColor"/>
    </svg>
  ),
  sparkle: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2c.5 3.5 2.5 5.5 6 6-3.5.5-5.5 2.5-6 6-.5-3.5-2.5-5.5-6-6 3.5-.5 5.5-2.5 6-6z"/>
      <path d="M19 14c.3 2 1.4 3.1 3.4 3.4-2 .3-3.1 1.4-3.4 3.4-.3-2-1.4-3.1-3.4-3.4 2-.3 3.1-1.4 3.4-3.4z"/>
    </svg>
  ),
  'star-orbit': (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(-30 12 12)"/>
      <circle cx="12" cy="12" r="3" fill="currentColor"/>
      <circle cx="20" cy="6" r="1.2" fill="currentColor"/>
    </svg>
  ),
  'heart-pulse': (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M19 14c1.5-1.5 3-3.5 3-5.5C22 5 19.5 3 17 3c-2 0-3.5 1.5-5 3-1.5-1.5-3-3-5-3C4.5 3 2 5 2 8.5 2 12 5 14 8 16.5"/>
      <path d="M3 14h3l2-3 3 6 2-3h4"/>
    </svg>
  ),
  wave: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M2 12c2 0 2-3 5-3s3 6 5 6 3-6 5-6 3 3 5 3"/>
      <path d="M2 18c2 0 2-3 5-3s3 4 5 4 3-4 5-4 3 3 5 3"/>
    </svg>
  ),
  download: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
    </svg>
  )
};

/* =========================================================
   Phone screen mockups — one per app
   ========================================================= */
function ScreenPDFLite() {
  return (
    <div className="phone-screen scr-pdflite">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="pdf-head">
        <div>
          <div className="pdf-greet">Good morning, Alex</div>
          <div className="pdf-title">Your library</div>
        </div>
        <div className="pdf-avatar"></div>
      </div>
      <div className="pdf-card">
        <div className="label">CURRENTLY READING</div>
        <div className="ttl">Quarterly report, 2026 Q1</div>
        <div className="row">
          <span>62 of 84 pages</span>
          <span className="badge-ai">⌘ ASK AI</span>
        </div>
      </div>
      <div className="pdf-list-title">RECENT</div>
      <div className="pdf-item">
        <div className="ic"></div>
        <div className="meta"><div className="n">Vendor agreement.pdf</div><div className="s">SIGNED · 2 DAYS</div></div>
        <div className="pct">100%</div>
      </div>
      <div className="pdf-item">
        <div className="ic b"></div>
        <div className="meta"><div className="n">Attention is all you need</div><div className="s">RESEARCH · 5 DAYS</div></div>
        <div className="pct">48%</div>
      </div>
      <div className="pdf-item">
        <div className="ic c"></div>
        <div className="meta"><div className="n">Lease: apt 4B</div><div className="s">PERSONAL · 1 WK</div></div>
        <div className="pct">12%</div>
      </div>
    </div>
  );
}

function ScreenGlow() {
  return (
    <div className="phone-screen scr-glow">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="glow-card">
        <div className="glow-sub">Today's skin score</div>
        <div className="glow-ring"><span className="v">78<small>OUT OF 100</small></span></div>
        <div className="glow-title">GlowTrack</div>
        <div className="glow-sub">+6 from last week</div>
        <div className="glow-stats">
          <div className="glow-stat"><div className="n">12</div><div className="l">DAY STREAK</div></div>
          <div className="glow-stat"><div className="n">3</div><div className="l">ROUTINES</div></div>
          <div className="glow-stat"><div className="n">A-</div><div className="l">GRADE</div></div>
        </div>
      </div>
    </div>
  );
}

function ScreenKundali() {
  // Decorative Vedic-style chart: a square with inner diamond + lines, planet glyph labels
  return (
    <div className="phone-screen scr-kundali">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="kun-head">YOUR BIRTH CHART</div>
      <div className="kun-title">Vrishabha · Taurus rising</div>
      <div className="kun-chart">
        <svg viewBox="0 0 100 100">
          <rect x="6" y="6" width="88" height="88" fill="none" stroke="rgba(247,240,255,0.6)" strokeWidth="0.8"/>
          <line x1="6" y1="6" x2="94" y2="94" stroke="rgba(247,240,255,0.45)" strokeWidth="0.6"/>
          <line x1="94" y1="6" x2="6" y2="94" stroke="rgba(247,240,255,0.45)" strokeWidth="0.6"/>
          <polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="rgba(247,240,255,0.7)" strokeWidth="0.8"/>
          <text x="50" y="20" fill="#f08a3e" fontSize="6" textAnchor="middle" fontFamily="Geist Mono,monospace">Su</text>
          <text x="80" y="50" fill="#c4b8ff" fontSize="6" textAnchor="middle" fontFamily="Geist Mono,monospace">Mo</text>
          <text x="50" y="84" fill="#f08a3e" fontSize="6" textAnchor="middle" fontFamily="Geist Mono,monospace">Ma</text>
          <text x="20" y="50" fill="#c4b8ff" fontSize="6" textAnchor="middle" fontFamily="Geist Mono,monospace">Ve</text>
          <text x="30" y="32" fill="rgba(247,240,255,0.7)" fontSize="5" textAnchor="middle" fontFamily="Geist Mono,monospace">Ju</text>
          <text x="70" y="32" fill="rgba(247,240,255,0.7)" fontSize="5" textAnchor="middle" fontFamily="Geist Mono,monospace">Sa</text>
          <text x="70" y="72" fill="rgba(247,240,255,0.7)" fontSize="5" textAnchor="middle" fontFamily="Geist Mono,monospace">Ra</text>
          <text x="30" y="72" fill="rgba(247,240,255,0.7)" fontSize="5" textAnchor="middle" fontFamily="Geist Mono,monospace">Ke</text>
          <circle cx="50" cy="50" r="3" fill="#f08a3e"/>
        </svg>
      </div>
      <div className="kun-reading">
        <div className="l">DASHA · MERCURY</div>
        <div className="t">A learning phase. Trust signals from your body and slow down for clarity.</div>
        <div className="kun-tags">
          <span className="kun-tag">★ Career</span>
          <span className="kun-tag">★ Health</span>
          <span className="kun-tag">★ Family</span>
        </div>
      </div>
    </div>
  );
}

function ScreenHealUp() {
  return (
    <div className="phone-screen scr-healup">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="heal-greet">TUESDAY, MAY 20</div>
      <div className="heal-mood">
        <div className="label">HOW ARE YOU FEELING?</div>
        <div className="ttl">A little calmer today</div>
        <div className="face">🌱</div>
        <div className="row">
          <span className="pip">😞</span>
          <span className="pip">😐</span>
          <span className="pip act">🙂</span>
          <span className="pip">😊</span>
          <span className="pip">🤩</span>
        </div>
      </div>
      <div className="heal-habits-title">TODAY'S RITUALS</div>
      <div className="heal-habit done">
        <span className="chk"></span>
        <div style={{flex:1}}><div className="n">5 min breathwork</div><div className="s">MORNING</div></div>
      </div>
      <div className="heal-habit done">
        <span className="chk"></span>
        <div style={{flex:1}}><div className="n">Sunlight walk</div><div className="s">10:30 AM</div></div>
      </div>
      <div className="heal-habit">
        <span className="chk"></span>
        <div style={{flex:1}}><div className="n">Evening reflection</div><div className="s">9:00 PM</div></div>
      </div>
    </div>
  );
}

function ScreenVibeFit() {
  return (
    <div className="phone-screen scr-vibefit">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="vibe-card">
        <div className="l">TODAY'S SESSION</div>
        <div className="t">Full body strength · 32m</div>
        <div className="r">
          <span>You feel: energized</span>
          <span className="pill">⏵ START</span>
        </div>
      </div>
      <div className="vibe-progress-title">THIS WEEK</div>
      <div className="vibe-bar">
        <div className="r"><span>Strength</span><span>4 / 5</span></div>
        <div className="s">UP 1 SESSION FROM LAST WEEK</div>
        <div className="track"><div className="fill" style={{width: '80%'}}></div></div>
      </div>
      <div className="vibe-bar">
        <div className="r"><span>Mobility</span><span>3 / 4</span></div>
        <div className="s">SOLID</div>
        <div className="track"><div className="fill" style={{width: '75%'}}></div></div>
      </div>
      <div className="vibe-bar">
        <div className="r"><span>Cardio</span><span>2 / 3</span></div>
        <div className="s">ONE LEFT THIS WEEK</div>
        <div className="track"><div className="fill" style={{width: '66%'}}></div></div>
      </div>
    </div>
  );
}

function ScreenDocScanner() {
  return (
    <div className="phone-screen scr-docscanner">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="dsc-head">DOC SCANNER</div>
      <div className="dsc-preview">
        <svg viewBox="0 0 120 90" style={{width:'100%',borderRadius:8,background:'#f5f4f0'}}>
          <rect x="10" y="8" width="100" height="74" rx="3" fill="#fff" stroke="#d0cfc8" strokeWidth="1"/>
          <rect x="18" y="16" width="60" height="5" rx="2" fill="#c0bfb8"/>
          <rect x="18" y="25" width="84" height="3" rx="2" fill="#e0dfd8"/>
          <rect x="18" y="32" width="74" height="3" rx="2" fill="#e0dfd8"/>
          <rect x="18" y="39" width="80" height="3" rx="2" fill="#e0dfd8"/>
          <rect x="18" y="50" width="40" height="18" rx="2" fill="#e8e7e0"/>
          <rect x="64" y="50" width="38" height="18" rx="2" fill="#e8e7e0"/>
          <polyline points="10,8 10,8 4,4 116,4 116,86 10,86" fill="none" stroke="#4f46e5" strokeWidth="1.5" strokeDasharray="4,2"/>
        </svg>
      </div>
      <div className="dsc-status">
        <span className="dsc-badge">✓ OCR COMPLETE</span>
        <span className="dsc-size">1.2 MB · PDF</span>
      </div>
      <div className="dsc-actions">
        <div className="dsc-btn">Share</div>
        <div className="dsc-btn primary">Save to Drive</div>
      </div>
    </div>
  );
}

function ScreenPDFScanner() {
  return (
    <div className="phone-screen scr-pdfscanner">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="pdfs-bar">
        <div className="pdfs-title">Chat with PDF</div>
      </div>
      <div className="pdfs-doc">
        <div className="pdfs-page">
          <div className="pdfs-line" style={{width:'90%'}}></div>
          <div className="pdfs-line" style={{width:'75%'}}></div>
          <div className="pdfs-line" style={{width:'85%'}}></div>
          <div className="pdfs-line hi" style={{width:'60%'}}></div>
          <div className="pdfs-line" style={{width:'80%'}}></div>
        </div>
      </div>
      <div className="pdfs-chat">
        <div className="pdfs-bubble user">What is the key finding?</div>
        <div className="pdfs-bubble ai">The highlighted section shows a 34% efficiency gain when using async processing.</div>
      </div>
      <div className="pdfs-input">Ask anything…</div>
    </div>
  );
}

function ScreenNYCEats() {
  return (
    <div className="phone-screen scr-nyceats">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="nyc-search">
        <span>🔍</span>
        <span className="nyc-ph">Restaurants near you…</span>
      </div>
      <div className="nyc-section">FEATURED NEAR BROOKLYN</div>
      <div className="nyc-card">
        <div className="nyc-img" style={{background:'linear-gradient(135deg,#ff6b35,#f7c59f)'}}></div>
        <div className="nyc-info">
          <div className="nyc-name">Smorgasburg</div>
          <div className="nyc-meta">📍 Williamsburg · 0.4 mi · ★ 4.9</div>
          <div className="nyc-tags"><span>Open air</span><span>Weekend</span></div>
        </div>
      </div>
      <div className="nyc-card">
        <div className="nyc-img" style={{background:'linear-gradient(135deg,#06b6d4,#0891b2)'}}></div>
        <div className="nyc-info">
          <div className="nyc-name">Juliana's Pizza</div>
          <div className="nyc-meta">📍 DUMBO · 1.1 mi · ★ 4.7</div>
          <div className="nyc-tags"><span>Pizza</span><span>Cash only</span></div>
        </div>
      </div>
    </div>
  );
}

function ScreenPantry() {
  return (
    <div className="phone-screen scr-pantry">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="pan-head">MY PANTRY</div>
      <div className="pan-alert">⚠ 3 items expiring soon</div>
      <div className="pan-item">
        <span className="pan-icon">🥛</span>
        <div className="pan-meta"><div className="pan-name">Whole Milk</div><div className="pan-exp exp">Expires in 2 days</div></div>
        <div className="pan-qty">1L</div>
      </div>
      <div className="pan-item">
        <span className="pan-icon">🍞</span>
        <div className="pan-meta"><div className="pan-name">Sourdough</div><div className="pan-exp exp">Expires tomorrow</div></div>
        <div className="pan-qty">1</div>
      </div>
      <div className="pan-item">
        <span className="pan-icon">🥕</span>
        <div className="pan-meta"><div className="pan-name">Carrots</div><div className="pan-exp">5 days left</div></div>
        <div className="pan-qty">500g</div>
      </div>
      <div className="pan-add">+ Add item</div>
    </div>
  );
}

function ScreenNoylix() {
  return (
    <div className="phone-screen scr-noylix">
      <div className="scr-statbar">
        <span>9:41</span>
        <span className="right"><span>•••</span><span className="bat"></span></span>
      </div>
      <div className="noy-bar">
        <div className="noy-logo">Noylix</div>
        <div className="noy-badge">Dashboard</div>
      </div>
      <div className="noy-stats">
        <div className="noy-stat"><div className="v">48</div><div className="l">Patients today</div></div>
        <div className="noy-stat"><div className="v">12</div><div className="l">Pending calls</div></div>
        <div className="noy-stat"><div className="v">₹2.4L</div><div className="l">Revenue</div></div>
      </div>
      <div className="noy-section">UPCOMING APPOINTMENTS</div>
      <div className="noy-appt"><span className="noy-time">10:00</span><div><div className="noy-patient">Priya Mehta</div><div className="noy-dept">General OPD</div></div></div>
      <div className="noy-appt"><span className="noy-time">10:30</span><div><div className="noy-patient">Ramesh Iyer</div><div className="noy-dept">Cardiology</div></div></div>
    </div>
  );
}

const SCREENS = {
  'pdflite-ai':      ScreenPDFLite,
  'glowtrack':       ScreenGlow,
  'kundali':         ScreenKundali,
  'healup':          ScreenHealUp,
  'vibefit':         ScreenVibeFit,
  'doc-scanner':     ScreenDocScanner,
  'pdflite-scanner': ScreenPDFScanner,
  'nyc-eats':        ScreenNYCEats,
  'pantry-app':      ScreenPantry,
  'noylix':          ScreenNoylix,
};

/* =========================================================
   Nav
   ========================================================= */
function Nav({ siteConfig }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#" className="logo">
          <img src="brandsap-favicon.png" className="logo-mark" alt="Brandsap" />
          <span>Brandsap<span className="slash">/apps</span></span>
        </a>
        <nav className="nav-links">
          <a className="nav-link" href="#apps">Apps</a>
          <a className="nav-link" href="#featured">Featured</a>
          <a className="nav-link" href="#how-it-works">How it works</a>
          <a className="nav-link" href="#contact">Contact</a>
          <a className="nav-home" href={siteConfig.mainUrl} target="_blank" rel="noopener noreferrer">
            🏠 Home
          </a>
          <a className="nav-cta" href="#apps">Browse apps <Icon.arrow className="arrow"/></a>
        </nav>
      </div>
    </header>
  );
}

/* =========================================================
   Hero
   ========================================================= */
function Hero({ device, apps, onPrimary, onBrowse }) {
  const [active, setActive] = useState(0);
  const total = apps.length;

  useEffect(() => {
    const id = setInterval(() => setActive(i => (i + 1) % total), 3600);
    return () => clearInterval(id);
  }, [total]);

  const activeApp = apps[active];
  const ActiveScreen = SCREENS[activeApp.id];
  const prevApp = apps[(active - 1 + total) % total];
  const nextApp = apps[(active + 1) % total];
  const PrevScreen = SCREENS[prevApp.id];
  const NextScreen = SCREENS[nextApp.id];

  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow reveal in">
            <span className="pip"><Icon.star/></span>
            <span>apps.brandsap.com</span>
          </div>
          <h1 className="reveal in d1">
            Download<br/>
            Brandsap <span className="accent">apps.</span>
          </h1>
          <p className="lede reveal in d2">
            Access our latest Android and iOS apps in one place: productivity, wellness,
            astrology, and more. One studio, many small tools.
          </p>
          <div className="hero-ctas reveal in d3">
            <button className="btn btn-primary" onClick={onPrimary}>
              Find the right app <Icon.arrow className="arrow"/>
            </button>
            <button className="btn btn-secondary" onClick={onBrowse}>
              Browse all apps
            </button>
          </div>
          <div className="hero-cta-sub reveal in d3">
            <span className="heart">✦</span>
            Smart tools by Brandsap, designed for everyday use.
          </div>
          <div className="hero-meta reveal in d4">
            <div className="stat"><strong>10</strong>apps in catalog</div>
            <div className="divider"></div>
            <div className="stat"><strong>Android</strong>+ iOS</div>
            <div className="divider"></div>
            <div className="stat"><strong>Built by</strong>Brandsap</div>
          </div>
        </div>

        <div className="phone-stage" aria-hidden="true">
          <div className="phone-pile">
            <div className="phone phone-side-l" key={'l-' + active}>
              <div className="phone-screen">
                <div className="scr active"><PrevScreen/></div>
              </div>
            </div>
            <div className="phone phone-side-r" key={'r-' + active}>
              <div className="phone-screen">
                <div className="scr active"><NextScreen/></div>
              </div>
            </div>
            <div className="phone phone-main" key={'m-' + active}>
              <div className="phone-screen">
                <div className="scr active"><ActiveScreen/></div>
              </div>
            </div>
          </div>

          {/* Floating label for current app */}
          <div className="hero-label-chip pos-tr" key={'chip-' + active}>
            <span className="label-ic" style={{background: activeApp.iconBg}}>{Icon[activeApp.icon]({})}</span>
            <span>
              {activeApp.heroLabel}
              <span className="label-sub">{activeApp.name}</span>
            </span>
          </div>
          <div className="hero-label-chip pos-bl">
            <span className="label-ic" style={{background: 'linear-gradient(135deg,#1f8a5b,#6db38f)'}}><Icon.android/></span>
            <span>Android ready<span className="label-sub">INSTALL FROM PLAY</span></span>
          </div>
          <div className="hero-label-chip pos-br">
            <span className="label-ic" style={{background: 'linear-gradient(135deg,#14140f,#2a2a24)'}}><Icon.apple/></span>
            <span>iOS rolling out<span className="label-sub">TESTFLIGHT SOON</span></span>
          </div>

          <div className="hero-dots">
            {apps.map((a, i) => (
              <button
                key={a.id}
                className={"hero-dot " + (i === active ? 'active' : '')}
                onClick={() => setActive(i)}
                aria-label={"Show " + a.name}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Recommender — "Which app do you need today?"
   ========================================================= */
function Recommender({ apps, onPick }) {
  return (
    <section className="container section recommender" id="recommend">
      <div className="section-label">App finder</div>
      <div className="section-head">
        <h2>Which app do you need <em>today?</em></h2>
        <p className="sub">Pick what you want to do. We'll highlight the matching app below.</p>
      </div>
      <div className="recommender-grid">
        {apps.map(a => (
          <button
            key={a.id}
            className="recommender-card"
            onClick={() => onPick(a.id)}
            aria-label={"Find " + a.name}
          >
            <div className="ic" style={{background: a.iconBg}}>{Icon[a.icon]({})}</div>
            <div className="q">{a.recommenderPrompt}</div>
            <div className="a">{a.name} <Icon.arrow className="arrow" style={{width: 12, height: 12}}/></div>
          </button>
        ))}
      </div>
    </section>
  );
}

/* =========================================================
   Featured app
   ========================================================= */
function FeaturedApp({ app, device, onLearnMore }) {
  if (!app) return null;
  const Screen = SCREENS[app.id];
  return (
    <section className="section" id="featured">
      <div className="container">
        <div className="section-label">Featured this month</div>
        <div className="featured">
          <div className="featured-inner">
            <div>
              <div className="featured-tag">
                <span className="star"><Icon.star/></span>
                Featured app
              </div>
              <div className="featured-icon-row">
                <div className="featured-icon" style={{background: app.iconBg}}>{Icon[app.icon]({})}</div>
                <div>
                  <h2 className="featured-name">{app.name}</h2>
                  <div className="featured-cat">{app.category}</div>
                </div>
              </div>
              <h3>The AI reader that <em>actually</em> reads back.</h3>
              <p className="desc">{app.longDescription}</p>
              <ul className="featured-why">
                {app.whyUsers.map((w, i) => (
                  <li key={i}>
                    <span className="ck"><Icon.check/></span>
                    <span>{w}</span>
                  </li>
                ))}
              </ul>
              <div className="featured-meta">
                <div className="m">Version <strong>{app.version}</strong></div>
                <div className="m">Updated <strong>{app.updated}</strong></div>
                <div className="m">Installs <strong>{app.downloads}</strong></div>
              </div>
              <div className="featured-ctas">
                <PlatformButton kind="android" app={app} size="lg" theme="dark"/>
                <PlatformButton kind="ios" app={app} size="lg" theme="dark"/>
                <button className="btn btn-ghost" style={{color:'#fbfaf7'}} onClick={() => onLearnMore(app)}>
                  Learn more <Icon.arrow className="arrow"/>
                </button>
              </div>
            </div>

            <div className="featured-phone-wrap">
              <div className="featured-phone">
                <Screen/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Preview carousel
   ========================================================= */
function PreviewCarousel({ apps }) {
  const trackRef = useRef(null);

  const scroll = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector('.preview-card');
    const w = card ? card.offsetWidth + 22 : 300;
    el.scrollBy({ left: dir * w, behavior: 'smooth' });
  };

  return (
    <section className="section" id="preview">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-label">Preview the experience</div>
            <h2>Look inside <em>every app.</em></h2>
          </div>
          <p className="sub">A scrollable look at how each tool feels. Real screenshots drop in here.</p>
        </div>

        <div className="preview-carousel">
          <div className="preview-arrows">
            <button className="preview-arrow" onClick={() => scroll(-1)} aria-label="Previous">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18 9 12l6-6"/></svg>
            </button>
            <button className="preview-arrow" onClick={() => scroll(1)} aria-label="Next">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </div>
          <div className="preview-track" ref={trackRef}>
            {apps.map(a => {
              const Screen = SCREENS[a.id];
              return (
                <article key={a.id} className="preview-card">
                  <div className="preview-card-head">
                    <span className="pic" style={{background: a.iconBg}}>{Icon[a.icon]({})}</span>
                    <div>
                      <div className="pn">{a.name}</div>
                      <div className="pc">{a.category}</div>
                    </div>
                  </div>
                  <div className="preview-phone-wrap">
                    <Screen/>
                  </div>
                  <p className="pcap">{a.headline}</p>
                </article>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Platform button (reused everywhere)
   ========================================================= */
function PlatformButton({ kind, app, size = 'md', theme = 'light' }) {
  const plat = app.platforms[kind];
  const Logo = kind === 'android' ? Icon.android : Icon.apple;
  if (size === 'lg') {
    const cls = "btn-platform " + kind + (plat.available ? '' : ' disabled');
    return (
      <a
        href={plat.available ? plat.link : undefined}
        className={cls}
        onClick={(e) => { if (!plat.available) e.preventDefault(); }}
      >
        <span className="ic"><Logo/></span>
        <span>
          <span className="store-sub">{plat.available ? (kind === 'android' ? 'GET IT ON' : 'AVAILABLE ON') : 'STATUS'}</span>
          <span className="store-main">{plat.available ? (kind === 'android' ? 'Google Play' : 'TestFlight / App Store') : 'Coming soon'}</span>
        </span>
      </a>
    );
  }
  const cls = "card-btn " + kind + (plat.available ? '' : ' disabled');
  const label = !plat.available
    ? 'Coming soon'
    : (kind === 'android' ? 'Download for Android' : 'Download for iOS');
  return (
    <a
      href={plat.available ? plat.link : undefined}
      className={cls}
      onClick={(e) => { if (!plat.available) e.preventDefault(); }}
      aria-label={label}
    >
      <Logo/>
      {label}
    </a>
  );
}

/* =========================================================
   App card
   ========================================================= */
function AppCard({ app, device, isHighlighted, onLearnMore, onCopy, onSend, cardRef }) {
  const androidPlat = app.platforms.android;
  const iosPlat = app.platforms.ios;
  const primaryKind = device.kind === 'ios' ? 'ios' : 'android';
  const primaryPlat = app.platforms[primaryKind];
  const PrimaryLogo = primaryKind === 'android' ? Icon.android : Icon.apple;

  const primaryAvailable = primaryPlat && primaryPlat.available;
  const primaryLabel = primaryAvailable
    ? (primaryKind === 'android' ? 'Download for Android' : 'Download for iOS')
    : 'Coming soon';

  return (
    <article ref={cardRef} className={"app-card" + (isHighlighted ? ' highlighted' : '')} id={app.id}>
      <div className="app-card-head">
        <div className="app-icon" style={{background: app.iconBg}}>{Icon[app.icon]({})}</div>
        <div style={{flex: 1, minWidth: 0, paddingRight: 80}}>
          <h3 className="app-card-name">{app.name}</h3>
          <div className="app-card-cat">{app.category}</div>
        </div>
        <StatusBadge status={app.status}/>
      </div>

      <p className="app-card-headline">{app.headline}</p>

      <div className="app-card-chips">
        {app.featureChips.map((c, i) => (
          <span className="feature-chip" key={i}>{c}</span>
        ))}
      </div>

      <div className="app-card-stats">
        <span className="v">{app.version}</span>
        <span className="sep"></span>
        <span>Updated {app.updated}</span>
      </div>

      <div className="platform-row">
        <span className={"plat-badge " + (androidPlat.available ? '' : 'unavail')}>
          <Icon.android/> Available for Android
        </span>
        {!iosPlat.available && (
          <span className="plat-badge unavail">
            <Icon.apple/> iOS coming soon
          </span>
        )}
        {iosPlat.available && (
          <span className="plat-badge">
            <Icon.apple/> Available for iOS
          </span>
        )}
      </div>

      <div className="app-card-cta-row">
        <a
          href={primaryAvailable ? primaryPlat.link : undefined}
          className={"card-btn primary " + (primaryAvailable ? '' : 'disabled')}
          onClick={(e) => { if (!primaryAvailable) e.preventDefault(); }}
          aria-label={primaryLabel}
        >
          <PrimaryLogo/>
          {primaryLabel}
        </a>
        <button className="card-btn secondary" onClick={() => onLearnMore(app)}>
          View details
        </button>
      </div>

      <div className="app-card-tools">
        <button className="tool-btn" onClick={() => onCopy(app)} aria-label="Copy app link">
          <Icon.copy/> Copy link
        </button>
        <button className="tool-btn" onClick={() => onSend(app)} aria-label="Send to phone">
          <Icon.send/> Send to phone
        </button>
      </div>

      <div className="app-card-foot">
        <span>{app.updated}</span>
        <button className="learn" onClick={() => onLearnMore(app)}>
          Learn more <Icon.arrow style={{width: 12, height: 12}}/>
        </button>
      </div>
    </article>
  );
}

function StatusBadge({ status }) {
  const cls = status === 'live' ? 'status-live'
            : status === 'beta' ? 'status-beta'
            : 'status-soon';
  return (
    <span className={"status-badge " + cls}>
      {STATUS_LABEL[status]}
    </span>
  );
}

/* =========================================================
   Apps section (filters + grid)
   ========================================================= */
function AppsSection({ device, apps, highlightId, onLearnMore, onCopy, onSend, registerCardRef }) {
  const [query, setQuery] = useState('');
  const [platform, setPlatform] = useState('all');
  const [status, setStatus] = useState('all');

  const filtered = useMemo(() => {
    return apps.filter(a => {
      if (query && !a.name.toLowerCase().includes(query.toLowerCase()) && !a.category.toLowerCase().includes(query.toLowerCase()) && !a.headline.toLowerCase().includes(query.toLowerCase())) return false;
      if (platform !== 'all' && (!a.platforms[platform] || !a.platforms[platform].available)) return false;
      if (status !== 'all' && a.status !== status) return false;
      return true;
    });
  }, [query, platform, status, apps]);

  const counts = useMemo(() => ({
    all: apps.length,
    live: apps.filter(a => a.status === 'live').length,
    beta: apps.filter(a => a.status === 'beta').length,
    'coming-soon': apps.filter(a => a.status === 'coming-soon').length
  }), [apps]);

  return (
    <section className="section" id="apps">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-label">The full catalog</div>
            <h2>Every Brandsap app,<br/><em>in one place.</em></h2>
          </div>
          <p className="sub">Five tools we built and ship. Update, install, and stay on the latest version.</p>
        </div>

        <div className="filters">
          <div className="search-wrap">
            <Icon.search/>
            <input
              type="text"
              placeholder="Search apps by name, category, or capability…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              aria-label="Search apps"
            />
          </div>
          <div className="filter-divider"></div>
          <div className="filter-group" role="tablist" aria-label="Filter by platform">
            {[['all','All'],['android','Android'],['ios','iOS']].map(([k, label]) => (
              <button
                key={k}
                className={"filter-chip " + (platform === k ? 'active' : '')}
                onClick={() => setPlatform(k)}
                role="tab"
                aria-selected={platform === k}
              >
                {k === 'android' && <Icon.android/>}
                {k === 'ios' && <Icon.apple/>}
                {label}
              </button>
            ))}
          </div>
          <div className="filter-divider"></div>
          <div className="filter-group" role="tablist" aria-label="Filter by status">
            {[['all','All'],['live','Live'],['beta','Beta'],['coming-soon','Coming']].map(([k, label]) => (
              <button
                key={k}
                className={"filter-chip " + (status === k ? 'active' : '')}
                onClick={() => setStatus(k)}
                role="tab"
                aria-selected={status === k}
              >
                {label}
                <span className="count">{counts[k]}</span>
              </button>
            ))}
          </div>
        </div>

        {filtered.length === 0 ? (
          <div className="empty">
            <div className="ic"><Icon.search/></div>
            <div style={{fontWeight: 500, color: 'var(--ink-2)', marginBottom: 4}}>No apps match those filters</div>
            <div style={{fontSize: 13}}>Try clearing your search or switching to "All".</div>
          </div>
        ) : (
          <div className="app-grid">
            {filtered.map(a => (
              <AppCard
                key={a.id}
                app={a}
                device={device}
                isHighlighted={highlightId === a.id}
                onLearnMore={onLearnMore}
                onCopy={onCopy}
                onSend={onSend}
                cardRef={(el) => registerCardRef(a.id, el)}
              />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/* =========================================================
   How it works
   ========================================================= */
function HowItWorks() {
  return (
    <section className="section" id="how-it-works">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-label">How it works</div>
            <h2>Three steps to <em>your app.</em></h2>
          </div>
          <p className="sub">No accounts, no friction. Pick, choose, install.</p>
        </div>

        <div className="how-grid">
          <div className="how-step">
            <div className="num">01</div>
            <h4>Choose your app</h4>
            <p>Browse tools across productivity, wellness, astrology, and fitness. Use the finder to match by need.</p>
            <div className="demo">
              <div className="demo-inner">
                <div className="app-tile" style={{background:'linear-gradient(135deg,#4f46e5,#7c3aed)'}}></div>
                <div className="app-tile" style={{background:'linear-gradient(135deg,#ff7a59,#c84a8d)'}}></div>
                <div className="app-tile" style={{background:'linear-gradient(135deg,#f08a3e,#c4453e)'}}></div>
                <div className="app-tile" style={{background:'linear-gradient(135deg,#1f8a5b,#6db38f)'}}></div>
                <div className="app-tile" style={{background:'linear-gradient(135deg,#06b6d4,#4f46e5)'}}></div>
              </div>
            </div>
          </div>

          <div className="how-step">
            <div className="num">02</div>
            <h4>Select your platform</h4>
            <p>We auto-detect your device and show the right option first. iOS rollouts are flagged as TestFlight or Coming soon.</p>
            <div className="demo">
              <div className="demo-inner plat-row">
                <span className="plat-tile"><Icon.android/> Android</span>
                <span className="plat-tile" style={{background:'var(--ink)', color:'var(--bg)', borderColor:'var(--ink)'}}><Icon.apple/> iOS</span>
              </div>
            </div>
          </div>

          <div className="how-step">
            <div className="num">03</div>
            <h4>Download or scan QR</h4>
            <p>One tap on mobile. On desktop, scan the QR with your phone or send the install link to yourself in a click.</p>
            <div className="demo">
              <div className="demo-inner qr-tile">
                <div className="qr-mini">
                  <QRCode size={46} seed="how-it-works"/>
                </div>
                <div>
                  <div className="arrow-pulse">→ INSTALL</div>
                  <div style={{fontSize: 11, fontFamily: 'Geist Mono, monospace', color: 'var(--ink-2)', marginTop: 2, fontWeight: 500}}>~ 12 MB</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Trust block
   ========================================================= */
function Trust() {
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-grid">
          <div className="trust-stat">
            <div className="l">Catalog</div>
            <div className="v"><em>5</em> apps</div>
            <div className="s">A new tool every quarter.</div>
          </div>
          <div className="trust-stat">
            <div className="l">Platforms</div>
            <div className="v">Android <em>+</em> iOS</div>
            <div className="s">Native builds. iOS rolling out via TestFlight.</div>
          </div>
          <div className="trust-stat">
            <div className="l">Studio</div>
            <div className="v">Built by <em>Brandsap</em></div>
            <div className="s">One small studio. We design, build, and support each app.</div>
          </div>
          <div className="trust-stat">
            <div className="l">Build</div>
            <div className="v"><em>Lightweight</em> tools</div>
            <div className="s">Under 20 MB. No bloat, no trackers, no nonsense.</div>
          </div>
        </div>

        <div className="trust-testimonial">
          <div className="avatars">
            <div className="avatar" style={{background: 'linear-gradient(135deg,#4f46e5,#7c3aed)'}}></div>
            <div className="avatar" style={{background: 'linear-gradient(135deg,#ff7a59,#c84a8d)'}}></div>
            <div className="avatar" style={{background: 'linear-gradient(135deg,#1f8a5b,#6db38f)'}}></div>
            <div className="avatar" style={{background: 'linear-gradient(135deg,#06b6d4,#4f46e5)'}}></div>
          </div>
          <p>Built by a small studio that ships. Focused on practical tools you actually want to use.</p>
          <div className="meta">Brandsap Studio, 2026</div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Modal
   ========================================================= */
function AppModal({ app, onClose, onCopy, onSend }) {
  useEffect(() => {
    if (!app) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [app, onClose]);
  if (!app) return null;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="modal-head">
          <div className="tag">{app.name} <span className="status-badge" style={{marginLeft:6}}>{STATUS_LABEL[app.status]}</span></div>
          <button className="modal-close" onClick={onClose} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M18 6 6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>

        <div className="modal-body">
          <div className="modal-hero">
            <div className="modal-hero-left">
              <div className="modal-icon" style={{background: app.iconBg}}>{Icon[app.icon]({})}</div>
              <div className="modal-info">
                <h2>{app.name}</h2>
                <div className="cat">{app.category}</div>
                <p className="headline">{app.headline}</p>
                <div className="meta-row">
                  <span>VER {app.version}</span>
                  <span>UPDATED {app.updated.toUpperCase()}</span>
                </div>
                <div className="modal-cta-row">
                  <PlatformButton kind="android" app={app} size="lg"/>
                  <PlatformButton kind="ios" app={app} size="lg"/>
                </div>
                <div style={{display:'flex', gap: 8, marginTop: 14}}>
                  <button className="tool-btn" onClick={() => onCopy(app)}><Icon.copy/> Copy link</button>
                  <button className="tool-btn" onClick={() => onSend(app)}><Icon.send/> Send to phone</button>
                </div>
              </div>
            </div>

            <div className="modal-qr-card">
              <div className="l">Scan to install</div>
              <div className="qr">
                <div className="qr-box"><QRCode size={120} seed={app.id}/></div>
              </div>
              <div className="h">{app.name}</div>
              <div className="s">{app.version}</div>
            </div>
          </div>

          <p style={{fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, margin: 0, maxWidth: 760}}>
            {app.longDescription}
          </p>

          <div className="modal-section">
            <h4>What's inside</h4>
            <ul className="features-list">
              {app.features.map((f, i) => (
                <li key={i}>
                  <span className="ck"><Icon.check/></span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="modal-section">
            <h4>Screenshots</h4>
            <div className="screenshot-row">
              {['Home', 'Detail view', 'Settings', 'Onboarding'].map((s, i) => (
                <div className="screenshot" key={i}>
                  <span>SCREENSHOT<br/>{s.toUpperCase()}<br/>9:19 · {app.name.split(' ')[0]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   Footer
   ========================================================= */
function Footer({ apps, siteConfig }) {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="logo" href="#">
              <img src="brandsap-favicon.png" className="logo-mark" alt="Brandsap" />
              <span>Brandsap</span>
            </a>
            <p className="footer-tag">Small, considered tools built by a studio that ships.</p>
            <a className="footer-main-link" href={siteConfig.mainUrl} target="_blank" rel="noopener">brandsap.com ↗</a>
          </div>
          <div>
            <h5>Apps</h5>
            <ul>
              {apps.map(a => <li key={a.id}><a href={"#" + a.id}>{a.name}</a></li>)}
            </ul>
          </div>
          <div>
            <h5>Browse</h5>
            <ul>
              <li><a href="#featured">Featured</a></li>
              <li><a href="#apps">All apps</a></li>
              <li><a href="#how-it-works">How it works</a></li>
              <li><a href="#recommend">Find an app</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {year} Brandsap</div>
          <div>apps.brandsap.com</div>
        </div>
      </div>
    </footer>
  );
}

/* =========================================================
   Mobile sticky CTA
   ========================================================= */
function MobileCTA({ app, device }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 480);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={"mobile-cta " + (visible ? 'visible' : '')}>
      <div className="mobile-cta-text">
        <div className="n">Brandsap Apps</div>
        <div className="s">10 APPS IN CATALOG</div>
      </div>
      <a
        href="#apps"
        className="go"
        onClick={(e) => {
          e.preventDefault();
          document.getElementById('apps')?.scrollIntoView({behavior:'smooth'});
        }}
      >
        Browse all <Icon.arrow/>
      </a>
    </div>
  );
}

/* =========================================================
   Toast
   ========================================================= */
function Toast({ message }) {
  return (
    <div className={"toast " + (message ? 'visible' : '')} role="status" aria-live="polite">
      <span className="ck"><Icon.check style={{width: 12, height: 12, color: 'var(--accent-5)'}}/></span>
      <span>{message}</span>
    </div>
  );
}

/* =========================================================
   Export to window
   ========================================================= */
Object.assign(window, {
  Icon, SCREENS, STATUS_LABEL,
  detectDevice, useToast, QRCode,
  Nav, Hero, Recommender, FeaturedApp,
  PreviewCarousel, AppsSection, AppCard, HowItWorks, Trust,
  AppModal, Footer, MobileCTA, Toast,
  PlatformButton, StatusBadge
});