import React, { useState, useEffect } from 'react';

/* ── Shared branding hook — fetches logo + favicon from Super Admin ── */
function useBranding() {
  const [logoUrl, setLogoUrl] = useState('');
  const [siteName, setSiteName] = useState('');
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    fetch('/api/landing-data')
      .then(r => r.json())
      .then(d => {
        if (d.success) {
          if (d.logo_url)  setLogoUrl(d.logo_url);
          if (d.site_name) setSiteName(d.site_name);
          // ✅ Apply super admin favicon to <head>
          if (d.favicon_url) {
            let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
            if (!link) {
              link = document.createElement('link');
              link.rel = 'icon';
              document.head.appendChild(link);
            }
            link.href = d.favicon_url;
          }
          // ✅ Apply site title
          if (d.site_name) {
            document.title = d.site_name + ' — বাংলাদেশের সেরা ই-কমার্স প্ল্যাটফর্ম';
          }
        }
        setLoaded(true);
      })
      .catch(() => setLoaded(true));
  }, []);
  return { logoUrl, siteName, loaded };
}

/* ──────────────────────────────────────────────────────────
   Shared Layout
────────────────────────────────────────────────────────── */
const PageLayout: React.FC<{ children: React.ReactNode; onBack?: () => void }> = ({ children, onBack }) => {
  const { logoUrl, siteName, loaded } = useBranding();
  return (
  <div style={{ minHeight: '100vh', background: 'linear-gradient(135deg,#f0f4ff 0%,#fafafa 50%,#f0fdf4 100%)', fontFamily: "'Inter','Noto Sans Bengali',sans-serif" }}>
    {/* Nav */}
    <nav style={{ position: 'sticky', top: 0, zIndex: 100, background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(20px)', borderBottom: '1px solid rgba(99,102,241,.08)', padding: '0 24px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', height: 80, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button onClick={onBack || (() => window.history.back())} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          {/* Logo: wait for API, then show correct branding */}
          {!loaded ? (
            <div style={{ width: 72, height: 72, borderRadius: 16, background: 'transparent' }} />
          ) : logoUrl ? (
            <img src={logoUrl} alt={siteName || 'ShophyFast'} style={{ height: 72, maxWidth: 220, objectFit: 'contain', borderRadius: 10 }} />
          ) : (
            <>
              <div style={{ width: 72, height: 72, borderRadius: 16, background: 'linear-gradient(135deg,#4F46E5,#2563EB)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 900, fontSize: 28, boxShadow: '0 4px 14px rgba(79,70,229,.35)' }}>S</div>
              <span style={{ fontSize: 28, fontWeight: 900, color: '#0F172A' }}>ShophyFast</span>
            </>
          )}
        </button>
        <button onClick={onBack || (() => window.history.back())} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(99,102,241,.06)', border: '1px solid rgba(165,180,252,.3)', borderRadius: 99, padding: '8px 18px', cursor: 'pointer', color: '#4F46E5', fontWeight: 600, fontSize: 14 }}>
          ← হোমে ফিরুন
        </button>
      </div>
    </nav>
    {children}
    {/* Footer */}
    <div style={{ borderTop: '1px solid rgba(99,102,241,.08)', padding: '32px 24px', textAlign: 'center', color: '#94A3B8', fontSize: 13 }}>
      © ২০২৪ ShophyFast · সর্বস্বত্ব সংরক্ষিত
    </div>
  </div>
  );
};

const Hero: React.FC<{ badge: string; title: string; sub: string; gradient?: string }> = ({ badge, title, sub, gradient = 'linear-gradient(135deg,#4F46E5,#2563EB)' }) => (
  <div style={{ textAlign: 'center', padding: '80px 24px 60px', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle,rgba(165,180,252,.18) 0%,transparent 70%)', pointerEvents: 'none' }} />
    <span style={{ display: 'inline-block', background: 'rgba(238,242,255,.95)', color: '#4F46E5', fontSize: 11, fontWeight: 700, letterSpacing: 4, textTransform: 'uppercase', padding: '5px 16px', borderRadius: 99, border: '1px solid rgba(165,180,252,.4)', marginBottom: 20 }}>{badge}</span>
    <h1 style={{ fontSize: 'clamp(28px,5vw,52px)', fontWeight: 900, color: '#0F172A', marginBottom: 16, lineHeight: 1.15, letterSpacing: '-0.02em' }}>{title}</h1>
    <p style={{ color: '#64748B', fontSize: 18, maxWidth: 620, margin: '0 auto', lineHeight: 1.7 }}>{sub}</p>
  </div>
);

/* ──────────────────────────────────────────────────────────
   1. Features (বৈশিষ্ট্য)
────────────────────────────────────────────────────────── */
export const FeaturesPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const features = [
    { icon: '🛒', title: 'স্মার্ট ই-কমার্স', desc: 'শত শত পণ্য, ভ্যারিয়েন্ট, ইনভেন্টরি ট্র্যাকিং এবং অর্ডার ম্যানেজমেন্ট সব এক জায়গায়।', color: '#4F46E5', bg: '#EEF2FF' },
    { icon: '🎨', title: 'প্রিমিয়াম থিম', desc: '১০+ প্রিমিয়াম থিম থেকে বেছে নিন এবং মিনিটের মধ্যে আপনার ব্র্যান্ড তৈরি করুন।', color: '#059669', bg: '#ECFDF5' },
    { icon: '💳', title: 'বিকাশ ও নগদ পেমেন্ট', desc: 'বিকাশ, নগদ, রকেট, SSLCommerz এবং Stripe দিয়ে নিরাপদ পেমেন্ট গ্রহণ করুন।', color: '#E11D48', bg: '#FFF1F2' },
    { icon: '🚀', title: 'দ্রুত ডেলিভারি ইন্টিগ্রেশন', desc: 'পাঠাও, স্টেডফাস্ট সহ ডেলিভারি পার্টনারদের সাথে সরাসরি সংযোগ।', color: '#D97706', bg: '#FFFBEB' },
    { icon: '🤖', title: 'এআই মেসেঞ্জার এজেন্ট', desc: 'অটোমেটিক অর্ডার কনফার্মেশন, গ্রাহক সেবা এবং লিড ট্র্যাকিং।', color: '#7C3AED', bg: '#F5F3FF' },
    { icon: '📊', title: 'রিয়েল-টাইম বিশ্লেষণ', desc: 'বিক্রয়, ভিজিটর, রূপান্তর হার এবং আয়ের সম্পূর্ণ ড্যাশবোর্ড।', color: '#0EA5E9', bg: '#F0F9FF' },
    { icon: '📱', title: 'মোবাইল-ফার্স্ট ডিজাইন', desc: 'আপনার স্টোর যেকোনো ডিভাইসে নিখুঁতভাবে কাজ করে — মোবাইল, ট্যাব এবং ডেস্কটপ।', color: '#F59E0B', bg: '#FFFBEB' },
    { icon: '🔒', title: 'এন্টারপ্রাইজ নিরাপত্তা', desc: 'SSL এনক্রিপশন, দুই-ফ্যাক্টর যাচাইকরণ এবং নিয়মিত ব্যাকআপ সহ নিরাপদ প্ল্যাটফর্ম।', color: '#64748B', bg: '#F8FAFC' },
    { icon: '🌐', title: 'কাস্টম ডোমেইন', desc: 'আপনার নিজস্ব ডোমেইন সংযুক্ত করুন এবং একটি পেশাদার অনলাইন উপস্থিতি তৈরি করুন।', color: '#10B981', bg: '#ECFDF5' },
  ];
  return (
    <PageLayout onBack={onBack}>
      <Hero badge="বৈশিষ্ট্য" title="সব কিছু এক প্ল্যাটফর্মে" sub="ShophyFast দিয়ে আপনার অনলাইন ব্যবসাকে সফল করতে দরকারি সব টুল পাবেন।" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 24 }}>
        {features.map((f, i) => (
          <div key={i} style={{ background: '#fff', borderRadius: 20, padding: 32, border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 24px rgba(0,0,0,.04)', transition: 'all .3s', cursor: 'default' }}
            onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-4px)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 12px 40px rgba(0,0,0,.1)'; }}
            onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 24px rgba(0,0,0,.04)'; }}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: f.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, marginBottom: 20 }}>{f.icon}</div>
            <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 18, marginBottom: 10 }}>{f.title}</h3>
            <p style={{ color: '#64748B', fontSize: 14, lineHeight: 1.7, margin: 0 }}>{f.desc}</p>
          </div>
        ))}
      </div>
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   2. Themes (থিম) — Full visual previews of all HomePage themes
────────────────────────────────────────────────────────── */

/* ── Reusable MiniThemePreview: renders a scaled-down browser mockup ── */
const MiniThemePreview: React.FC<{ themeId: number }> = ({ themeId }) => {
  // Each theme has its own palette + layout preview data
  const THEME_DATA = [
    {
      // Theme 01 — Grocery / Purple
      navBg: '#fff', navColor: '#634C9F', heroBg: 'linear-gradient(135deg,#f0e7ff 0%,#e1d4f8 100%)',
      heroImg: 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=400&h=120&fit=crop',
      primary: '#634C9F', accent: '#E91E63', sidebarBg: '#faf8ff',
      cats: ['Fruits & Veg', 'Dairy', 'Bakery', 'Beverages', 'Snacks'],
      products: [
        { img: 'https://images.unsplash.com/photo-1592924357228-91a4daadcfea?w=60&h=60&fit=crop', name: 'Tomatoes', price: '৳120' },
        { img: 'https://images.unsplash.com/photo-1571501474588-5a8fa8167fe6?w=60&h=60&fit=crop', name: 'Bananas', price: '৳80' },
        { img: 'https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?w=60&h=60&fit=crop', name: 'Avocado', price: '৳200' },
        { img: 'https://images.unsplash.com/photo-1459411621453-7b03977f4bfc?w=60&h=60&fit=crop', name: 'Broccoli', price: '৳150' },
      ],
      badge: 'New Arrivals', label: 'থিম ০১ — গ্রোসারি স্টোর',
    },
    {
      // Theme 02 — Fashion / Dark elegant
      navBg: '#0f0f0f', navColor: '#fff', heroBg: 'linear-gradient(135deg,#1a1a2e 0%,#16213e 100%)',
      heroImg: 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=400&h=120&fit=crop',
      primary: '#d4af37', accent: '#c9a227', sidebarBg: '#1a1a2e',
      cats: ['Women', 'Men', 'Kids', 'Bags', 'Shoes'],
      products: [
        { img: 'https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=60&h=60&fit=crop', name: 'Dress', price: '৳1,800' },
        { img: 'https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=60&h=60&fit=crop', name: 'Jacket', price: '৳3,200' },
        { img: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=60&h=60&fit=crop', name: 'Shoes', price: '৳2,500' },
        { img: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=60&h=60&fit=crop', name: 'Bag', price: '৳4,000' },
      ],
      badge: 'New Season', label: 'থিম ০২ — ফ্যাশন স্টোর',
    },
    {
      // Theme 03 — Electronics / Blue Tech
      navBg: '#0f172a', navColor: '#38bdf8', heroBg: 'linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%)',
      heroImg: 'https://images.unsplash.com/photo-1468495244123-6c6c332eeece?w=400&h=120&fit=crop',
      primary: '#2563EB', accent: '#0EA5E9', sidebarBg: '#f0f9ff',
      cats: ['Phones', 'Laptops', 'TV', 'Audio', 'Cameras'],
      products: [
        { img: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=60&h=60&fit=crop', name: 'iPhone', price: '৳85,000' },
        { img: 'https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?w=60&h=60&fit=crop', name: 'Laptop', price: '৳65,000' },
        { img: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop', name: 'Headphones', price: '৳8,500' },
        { img: 'https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?w=60&h=60&fit=crop', name: 'Tablet', price: '৳45,000' },
      ],
      badge: 'Hot Deals', label: 'থিম ০৩ — ইলেকট্রনিক্স',
    },
    {
      // Theme 04 — Organic / Green
      navBg: '#14532d', navColor: '#fff', heroBg: 'linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%)',
      heroImg: 'https://images.unsplash.com/photo-1500595046743-cd271d694d30?w=400&h=120&fit=crop',
      primary: '#16a34a', accent: '#15803d', sidebarBg: '#f0fdf4',
      cats: ['Organic', 'Herbs', 'Seeds', 'Oils', 'Honey'],
      products: [
        { img: 'https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?w=60&h=60&fit=crop', name: 'Honey', price: '৳450' },
        { img: 'https://images.unsplash.com/photo-1584949091598-c31daaaa4aa9?w=60&h=60&fit=crop', name: 'Herbs', price: '৳180' },
        { img: 'https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?w=60&h=60&fit=crop', name: 'Olive Oil', price: '৳900' },
        { img: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=60&h=60&fit=crop', name: 'Salad', price: '৳120' },
      ],
      badge: 'Organic', label: 'থিম ০৪ — অর্গানিক শপ',
    },
    {
      // Theme 05 — General / Vibrant Red
      navBg: '#dc2626', navColor: '#fff', heroBg: 'linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%)',
      heroImg: 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=400&h=120&fit=crop',
      primary: '#dc2626', accent: '#b91c1c', sidebarBg: '#fff5f5',
      cats: ['Hot Deals', 'Trending', 'New', 'Sale', 'Brands'],
      products: [
        { img: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=60&h=60&fit=crop', name: 'Watch', price: '৳12,000' },
        { img: 'https://images.unsplash.com/photo-1491553895911-0055eca6402d?w=60&h=60&fit=crop', name: 'Sneakers', price: '৳5,500' },
        { img: 'https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=60&h=60&fit=crop', name: 'Perfume', price: '৳3,200' },
        { img: 'https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=60&h=60&fit=crop', name: 'Sunglasses', price: '৳2,800' },
      ],
      badge: 'Flash Sale', label: 'থিম ০৫ — জেনারেল শপ',
    },
  ];

  const t = THEME_DATA[themeId] || THEME_DATA[0];

  return (
    <div style={{ width: '100%', height: '100%', background: '#f8fafc', borderRadius: 10, overflow: 'hidden', fontFamily: 'Inter,sans-serif', display: 'flex', flexDirection: 'column' }}>
      {/* Mini Browser Bar */}
      <div style={{ background: '#e2e8f0', padding: '5px 8px', display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
        {['#f87171','#fbbf24','#34d399'].map((c,i) => <div key={i} style={{ width: 7, height: 7, borderRadius: '50%', background: c }} />)}
        <div style={{ flex: 1, marginLeft: 6, height: 12, background: '#cbd5e1', borderRadius: 4 }} />
      </div>
      {/* Mini Navbar */}
      <div style={{ background: t.navBg, padding: '5px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
        <div style={{ width: 32, height: 7, background: t.navColor === '#fff' ? 'rgba(255,255,255,.5)' : t.primary, borderRadius: 3, opacity: 0.9 }} />
        <div style={{ display: 'flex', gap: 4 }}>
          {[1,2,3].map(i => <div key={i} style={{ width: 18, height: 5, background: t.navColor === '#fff' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.15)', borderRadius: 2 }} />)}
        </div>
        <div style={{ width: 22, height: 7, background: t.primary, borderRadius: 10, opacity: 0.85 }} />
      </div>
      {/* Mini Hero */}
      <div style={{ height: 52, background: t.heroBg, position: 'relative', overflow: 'hidden', flexShrink: 0 }}>
        <img src={t.heroImg} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.65 }} onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: '0 10px' }}>
          <div>
            <div style={{ width: 40, height: 5, background: 'rgba(255,255,255,.9)', borderRadius: 2, marginBottom: 3 }} />
            <div style={{ width: 60, height: 8, background: 'rgba(255,255,255,.95)', borderRadius: 3, marginBottom: 4 }} />
            <div style={{ width: 28, height: 10, background: t.primary, borderRadius: 4, opacity: 0.9 }} />
          </div>
        </div>
      </div>
      {/* Body: Sidebar + Grid */}
      <div style={{ flex: 1, display: 'flex', gap: 0, overflow: 'hidden' }}>
        {/* Sidebar */}
        <div style={{ width: 52, background: t.sidebarBg, borderRight: '1px solid rgba(0,0,0,.06)', padding: '5px 4px', flexShrink: 0, overflowY: 'hidden' }}>
          <div style={{ fontSize: 5, fontWeight: 700, color: '#64748b', marginBottom: 4, paddingLeft: 2, letterSpacing: 0.3 }}>CATEGORIES</div>
          {t.cats.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 3, padding: '2px 3px', borderRadius: 3, marginBottom: 1.5, background: i === 0 ? t.primary + '18' : 'transparent' }}>
              <div style={{ width: 5, height: 5, borderRadius: '50%', background: i === 0 ? t.primary : '#cbd5e1', flexShrink: 0 }} />
              <div style={{ width: '100%', height: 4, background: i === 0 ? t.primary : '#e2e8f0', borderRadius: 2, opacity: i === 0 ? 0.9 : 0.7 }} />
            </div>
          ))}
        </div>
        {/* Product Grid */}
        <div style={{ flex: 1, padding: '5px 5px', overflowY: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
              <div style={{ width: 3, height: 10, background: t.primary, borderRadius: 2 }} />
              <div style={{ width: 36, height: 5, background: '#0f172a', borderRadius: 2, opacity: 0.75 }} />
            </div>
            <div style={{ width: 18, height: 4, background: t.primary, borderRadius: 99, opacity: 0.6 }} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
            {t.products.map((p, i) => (
              <div key={i} style={{ background: '#fff', borderRadius: 5, overflow: 'hidden', border: '1px solid rgba(0,0,0,.06)', boxShadow: '0 1px 3px rgba(0,0,0,.06)' }}>
                <div style={{ height: 30, background: '#f1f5f9', overflow: 'hidden', position: 'relative' }}>
                  <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }} />
                  <div style={{ position: 'absolute', top: 2, left: 2, background: t.accent, color: '#fff', fontSize: 4, fontWeight: 700, padding: '1px 3px', borderRadius: 2 }}>-15%</div>
                </div>
                <div style={{ padding: '3px 4px' }}>
                  <div style={{ width: '80%', height: 4, background: '#334155', borderRadius: 2, marginBottom: 2, opacity: 0.7 }} />
                  <div style={{ width: 28, height: 5, background: t.primary, borderRadius: 2, opacity: 0.85 }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── Full-screen modal preview ── */
const ThemePreviewModal: React.FC<{ themeId: number; name: string; label: string; onClose: () => void }> = ({ themeId, name, label, onClose }) => {
  const THEME_IMGS = [
    'https://images.unsplash.com/photo-1542838132-92c53300491e?w=1200&h=700&fit=crop',
    'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1200&h=700&fit=crop',
    'https://images.unsplash.com/photo-1468495244123-6c6c332eeece?w=1200&h=700&fit=crop',
    'https://images.unsplash.com/photo-1500595046743-cd271d694d30?w=1200&h=700&fit=crop',
    'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=1200&h=700&fit=crop',
  ];
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.7)', backdropFilter: 'blur(8px)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}
      onClick={onClose}>
      <div style={{ background: '#fff', borderRadius: 24, overflow: 'hidden', maxWidth: 920, width: '100%', boxShadow: '0 40px 100px rgba(0,0,0,.4)', display: 'flex', flexDirection: 'column' }}
        onClick={e => e.stopPropagation()}>
        {/* Modal Header */}
        <div style={{ padding: '18px 24px', borderBottom: '1px solid rgba(0,0,0,.07)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 11, color: '#94a3b8', fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 3 }}>{label}</div>
            <h3 style={{ fontWeight: 900, fontSize: 20, color: '#0f172a', margin: 0 }}>{name}</h3>
          </div>
          <button onClick={onClose} style={{ width: 36, height: 36, borderRadius: '50%', background: '#f1f5f9', border: 'none', cursor: 'pointer', fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#475569' }}>✕</button>
        </div>
        {/* Browser Frame */}
        <div style={{ background: '#e2e8f0', padding: '10px 16px 0', display: 'flex', alignItems: 'center', gap: 6 }}>
          {['#f87171','#fbbf24','#34d399'].map((c,i) => <div key={i} style={{ width: 10, height: 10, borderRadius: '50%', background: c }} />)}
          <div style={{ flex: 1, marginLeft: 8, height: 18, background: '#cbd5e1', borderRadius: 6, display: 'flex', alignItems: 'center', paddingLeft: 10 }}>
            <div style={{ fontSize: 9, color: '#94a3b8' }}>yourstore.shophyfast.com</div>
          </div>
        </div>
        {/* Full Preview: Scaled ThemePreview */}
        <div style={{ height: 480, background: '#e2e8f0', overflow: 'hidden', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, transform: 'scale(3.2)', transformOrigin: 'top left', pointerEvents: 'none' }}>
            <div style={{ width: '31.25%' /* 100/3.2 */, height: '31.25%' }}>
              <MiniThemePreview themeId={themeId} />
            </div>
          </div>
          <div style={{ position: 'absolute', inset: 0 }}>
            <img src={THEME_IMGS[themeId] || THEME_IMGS[0]} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.12 }} />
          </div>
          {/* Centered large preview overlay */}
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: '90%', height: '88%', background: 'rgba(255,255,255,.96)', borderRadius: 16, overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,.18)', border: '1px solid rgba(0,0,0,.06)' }}>
              <MiniThemePreview themeId={themeId} />
            </div>
          </div>
        </div>
        {/* Footer Actions */}
        <div style={{ padding: '20px 24px', borderTop: '1px solid rgba(0,0,0,.07)', display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
          <button onClick={onClose} style={{ padding: '10px 24px', borderRadius: 12, border: '1.5px solid #e2e8f0', background: '#fff', color: '#64748b', fontWeight: 700, cursor: 'pointer', fontSize: 14 }}>বন্ধ করুন</button>
          <button style={{ padding: '10px 28px', borderRadius: 12, background: 'linear-gradient(135deg,#4F46E5,#2563EB)', color: '#fff', border: 'none', fontWeight: 700, cursor: 'pointer', fontSize: 14, boxShadow: '0 4px 16px rgba(79,70,229,.3)' }}>
            🚀 এই থিম বেছে নিন
          </button>
        </div>
      </div>
    </div>
  );
};

export const ThemesPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const [previewTheme, setPreviewTheme] = useState<number | null>(null);

  // ──────────────────────────────────────────────────────────────
  // THEMES LIST — add new themes here and they auto-appear on page
  // ──────────────────────────────────────────────────────────────
  const THEMES = [
    {
      id: 0,
      name: 'গ্রোসারি প্রো',
      label: 'থিম ০১',
      cat: 'গ্রোসারি / খাদ্য',
      popular: true,
      new: false,
      tags: ['ক্লিন', 'মিনিমাল', 'গ্রোসারি'],
      desc: 'সাইডবার ক্যাটাগরি, হিরো স্লাইডার এবং প্রোডাক্ট গ্রিড সহ পরিষ্কার সাদা ডিজাইন। গ্রোসারি ও খাদ্য দোকানের জন্য আদর্শ।',
      primary: '#634C9F', accent: '#E91E63',
    },
    {
      id: 1,
      name: 'ফ্যাশন ডার্ক',
      label: 'থিম ০২',
      cat: 'ফ্যাশন / লাক্সারি',
      popular: false,
      new: true,
      tags: ['ডার্ক', 'লাক্সারি', 'ফ্যাশন'],
      desc: 'গাঢ় ব্যাকগ্রাউন্ড, গোল্ড অ্যাকসেন্ট এবং প্রিমিয়াম ফ্যাশন লেআউট। পোশাক ও লাক্সারি ব্র্যান্ডের জন্য বিশেষভাবে তৈরি।',
      primary: '#d4af37', accent: '#c9a227',
    },
    {
      id: 2,
      name: 'টেক স্টোর',
      label: 'থিম ০৩',
      cat: 'ইলেকট্রনিক্স / গ্যাজেট',
      popular: true,
      new: false,
      tags: ['টেক', 'ব্লু', 'মডার্ন'],
      desc: 'নীল গ্র্যাডিয়েন্ট হিরো, ডেটা-ভিজ্যুয়াল কার্ড এবং টেকনোলজি-ফোকাসড লেআউট। ইলেকট্রনিক্স ও গ্যাজেট শপের জন্য পারফেক্ট।',
      primary: '#2563EB', accent: '#0EA5E9',
    },
    {
      id: 3,
      name: 'অর্গানিক গ্রিন',
      label: 'থিম ০৪',
      cat: 'অর্গানিক / হেলথ',
      popular: false,
      new: false,
      tags: ['সবুজ', 'অর্গানিক', 'ন্যাচারাল'],
      desc: 'তাজা সবুজ রঙ, ন্যাচারাল টেক্সচার এবং স্বাস্থ্যকর পণ্যের জন্য অনুপ্রেরণামূলক ডিজাইন। অর্গানিক ও হেলথ শপের জন্য।',
      primary: '#16a34a', accent: '#15803d',
    },
    {
      id: 4,
      name: 'ফ্ল্যাশ সেল',
      label: 'থিম ০৫',
      cat: 'জেনারেল / মাল্টি-ক্যাটাগরি',
      popular: true,
      new: false,
      tags: ['রেড', 'ভাইব্র্যান্ট', 'সেল'],
      desc: 'লাল-সাদা প্যালেট, ফ্ল্যাশ সেল ব্যানার এবং হাই-কনভার্সন লেআউট। সকল ধরনের পণ্যের জন্য উপযুক্ত মাল্টি-ক্যাটাগরি থিম।',
      primary: '#dc2626', accent: '#b91c1c',
    },
    // ── ভবিষ্যতে নতুন থিম এখানে যোগ করুন ──
    // { id: 5, name: 'নতুন থিম', label: 'থিম ০৬', cat: 'ক্যাটাগরি', ... },
  ];

  return (
    <PageLayout onBack={onBack}>
      <style>{`
        @keyframes themeCardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .theme-card { animation: themeCardIn .5s ease both; }
        .theme-card:nth-child(1) { animation-delay: .05s; }
        .theme-card:nth-child(2) { animation-delay: .1s; }
        .theme-card:nth-child(3) { animation-delay: .15s; }
        .theme-card:nth-child(4) { animation-delay: .2s; }
        .theme-card:nth-child(5) { animation-delay: .25s; }
        .theme-card:nth-child(6) { animation-delay: .3s; }
        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        .preview-shine { position: relative; overflow: hidden; }
        .preview-shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); background-size: 200% auto; animation: shimmer 3.5s linear infinite; pointer-events: none; }
      `}</style>

      {/* Hero Section */}
      <div style={{ textAlign: 'center', padding: '72px 24px 52px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -100, left: '50%', transform: 'translateX(-50%)', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle,rgba(165,180,252,.18) 0%,transparent 70%)', pointerEvents: 'none' }} />
        <span style={{ display: 'inline-block', background: 'rgba(238,242,255,.95)', color: '#4F46E5', fontSize: 11, fontWeight: 700, letterSpacing: 4, textTransform: 'uppercase', padding: '5px 16px', borderRadius: 99, border: '1px solid rgba(165,180,252,.4)', marginBottom: 20 }}>🎨 থিম গ্যালারি</span>
        <h1 style={{ fontSize: 'clamp(28px,5vw,52px)', fontWeight: 900, color: '#0F172A', marginBottom: 16, lineHeight: 1.15, letterSpacing: '-0.02em' }}>আপনার ব্র্যান্ডের জন্য<br /><span style={{ background: 'linear-gradient(135deg,#4F46E5,#2563EB,#0EA5E9)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>নিখুঁত হোম থিম</span></h1>
        <p style={{ color: '#64748B', fontSize: 17, maxWidth: 600, margin: '0 auto 32px', lineHeight: 1.7 }}>প্রতিটি থিমের লাইভ প্রিভিউ দেখুন। আপনার ব্যবসার ধরন অনুযায়ী থিম বেছে নিন — এক ক্লিকেই আপনার স্টোর সাজিয়ে তুলুন।</p>
        {/* Stats */}
        <div style={{ display: 'flex', gap: 32, justifyContent: 'center', flexWrap: 'wrap' }}>
          {[
            { val: `${THEMES.length}টি`, label: 'প্রিমিয়াম থিম' },
            { val: '১ ক্লিক', label: 'ইনস্টল করুন' },
            { val: '১০০%', label: 'রেসপন্সিভ' },
          ].map((s, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{ fontWeight: 900, fontSize: 24, color: '#4F46E5' }}>{s.val}</div>
              <div style={{ fontSize: 12, color: '#94a3b8', fontWeight: 600 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Theme Cards Grid */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px 100px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(340px,1fr))', gap: 32 }}>
          {THEMES.map((theme) => (
            <div key={theme.id} className="theme-card" style={{ background: '#fff', borderRadius: 24, overflow: 'hidden', border: '1px solid rgba(0,0,0,.05)', boxShadow: '0 4px 24px rgba(0,0,0,.06)', transition: 'all .35s cubic-bezier(.23,1,.32,1)', cursor: 'default' }}
              onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-8px)'; (e.currentTarget as HTMLDivElement).style.boxShadow = `0 24px 60px rgba(0,0,0,.13), 0 0 0 2px ${theme.primary}33`; }}
              onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 24px rgba(0,0,0,.06)'; }}>

              {/* Theme Preview Window */}
              <div className="preview-shine" style={{ height: 220, position: 'relative', background: '#f1f5f9', overflow: 'hidden' }}>
                <MiniThemePreview themeId={theme.id} />
                {/* Badges */}
                <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6, zIndex: 10 }}>
                  {theme.popular && (
                    <span style={{ background: '#4F46E5', color: '#fff', fontSize: 10, fontWeight: 800, padding: '4px 10px', borderRadius: 99, boxShadow: '0 2px 8px rgba(79,70,229,.4)' }}>⭐ জনপ্রিয়</span>
                  )}
                  {theme.new && (
                    <span style={{ background: 'linear-gradient(135deg,#10b981,#059669)', color: '#fff', fontSize: 10, fontWeight: 800, padding: '4px 10px', borderRadius: 99, boxShadow: '0 2px 8px rgba(16,185,129,.4)' }}>✨ নতুন</span>
                  )}
                </div>
                {/* Preview Button (hover overlay) */}
                <button onClick={() => setPreviewTheme(theme.id)} style={{ position: 'absolute', bottom: 12, right: 12, background: 'rgba(255,255,255,.95)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,.9)', borderRadius: 10, padding: '6px 14px', fontSize: 11, fontWeight: 700, color: '#1e293b', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5, boxShadow: '0 4px 14px rgba(0,0,0,.12)', zIndex: 10, fontFamily: 'inherit' }}>
                  <span style={{ fontSize: 12 }}>🔍</span> পূর্ণ প্রিভিউ
                </button>
              </div>

              {/* Theme Info */}
              <div style={{ padding: '20px 22px' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                      <span style={{ fontSize: 10, color: theme.primary, fontWeight: 800, letterSpacing: 2, textTransform: 'uppercase', background: theme.primary + '15', padding: '2px 8px', borderRadius: 999 }}>{theme.label}</span>
                      <span style={{ fontSize: 10, color: '#94a3b8', fontWeight: 600 }}>{theme.cat}</span>
                    </div>
                    <h3 style={{ fontWeight: 900, color: '#0F172A', fontSize: 20, margin: 0, lineHeight: 1.2 }}>{theme.name}</h3>
                  </div>
                  {/* Color swatch */}
                  <div style={{ display: 'flex', gap: 4, flexShrink: 0, marginTop: 2 }}>
                    <div style={{ width: 14, height: 14, borderRadius: '50%', background: theme.primary, boxShadow: `0 0 0 2px white, 0 0 0 3px ${theme.primary}55` }} />
                    <div style={{ width: 14, height: 14, borderRadius: '50%', background: theme.accent, boxShadow: `0 0 0 2px white, 0 0 0 3px ${theme.accent}55` }} />
                  </div>
                </div>

                {/* Description */}
                <p style={{ fontSize: 13, color: '#64748b', lineHeight: 1.65, margin: '0 0 14px' }}>{theme.desc}</p>

                {/* Tags */}
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 18 }}>
                  {theme.tags.map((tag, ti) => (
                    <span key={ti} style={{ fontSize: 11, color: '#64748b', background: '#f1f5f9', padding: '3px 10px', borderRadius: 99, fontWeight: 600, border: '1px solid #e2e8f0' }}>#{tag}</span>
                  ))}
                </div>

                {/* Action Buttons */}
                <div style={{ display: 'flex', gap: 10 }}>
                  <button onClick={() => setPreviewTheme(theme.id)} style={{ flex: 1, padding: '10px 0', borderRadius: 12, background: 'rgba(79,70,229,.06)', color: '#4F46E5', border: '1.5px solid rgba(99,102,241,.25)', fontWeight: 700, cursor: 'pointer', fontSize: 13, fontFamily: 'inherit', transition: 'all .2s' }}
                    onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = 'rgba(79,70,229,.12)'; }}
                    onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = 'rgba(79,70,229,.06)'; }}>
                    👁 প্রিভিউ
                  </button>
                  <button style={{ flex: 2, padding: '10px 16px', borderRadius: 12, background: `linear-gradient(135deg,${theme.primary},${theme.accent})`, color: '#fff', border: 'none', fontWeight: 800, cursor: 'pointer', fontSize: 13, fontFamily: 'inherit', boxShadow: `0 4px 14px ${theme.primary}40`, transition: 'all .2s' }}
                    onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.transform = 'translateY(-1px)'; (e.currentTarget as HTMLButtonElement).style.boxShadow = `0 8px 22px ${theme.primary}55`; }}
                    onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLButtonElement).style.boxShadow = `0 4px 14px ${theme.primary}40`; }}>
                    🚀 এই থিম বেছে নিন
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom CTA */}
        <div style={{ marginTop: 72, background: 'linear-gradient(135deg,#4F46E5,#2563EB,#0EA5E9)', borderRadius: 28, padding: '52px 40px', textAlign: 'center', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 50%, rgba(255,255,255,.1) 0%, transparent 55%)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 42, marginBottom: 12 }}>🎨</div>
            <h2 style={{ fontWeight: 900, fontSize: 'clamp(20px,3vw,30px)', marginBottom: 12 }}>আপনার পছন্দের থিম দিয়ে শুরু করুন</h2>
            <p style={{ opacity: .85, fontSize: 16, marginBottom: 28, lineHeight: 1.7 }}>রেজিস্ট্রেশন করুন এবং যেকোনো থিম বিনামূল্যে ব্যবহার করুন।<br />ভবিষ্যতে আরও নতুন থিম যুক্ত হবে — সম্পূর্ণ বিনামূল্যে!</p>
            <button onClick={onBack} style={{ padding: '14px 36px', borderRadius: 14, background: '#fff', color: '#4F46E5', border: 'none', fontWeight: 800, cursor: 'pointer', fontSize: 16, boxShadow: '0 4px 16px rgba(0,0,0,.2)', fontFamily: 'inherit' }}>
              বিনামূল্যে শুরু করুন →
            </button>
          </div>
        </div>
      </div>

      {/* Full Preview Modal */}
      {previewTheme !== null && (
        <ThemePreviewModal
          themeId={previewTheme}
          name={THEMES[previewTheme]?.name ?? ''}
          label={THEMES[previewTheme]?.label ?? ''}
          onClose={() => setPreviewTheme(null)}
        />
      )}
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   3. Analytics — Real Live Dashboard (বিশ্লেষণ)
────────────────────────────────────────────────────────── */
export const AnalyticsPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  type Period = 'today' | 'week' | 'month' | 'year' | 'all';
  const [period, setPeriod] = useState<Period>('month');
  const [loading, setLoading] = useState(true);
  const [summary, setSummary] = useState<any>(null);
  const [daily, setDaily] = useState<any[]>([]);
  const [topProducts, setTopProducts] = useState<any[]>([]);
  const [revenue, setRevenue] = useState(0);
  const [orderCount, setOrderCount] = useState(0);
  const [error, setError] = useState('');

  // Resolve tenant slug from hostname or localStorage
  const getSlug = () => {
    const parts = window.location.hostname.split('.');
    if (parts.length >= 2 && parts[0] !== 'localhost' && parts[0] !== 'www') return parts[0];
    return localStorage.getItem('preview_store_slug') || '';
  };
  const getToken = () => localStorage.getItem('tenant_token') || '';

  const fetchData = async (p: Period) => {
    setLoading(true);
    setError('');
    try {
      const slug = getSlug();
      const token = getToken();
      const headers: any = { 'Content-Type': 'application/json' };
      if (token) headers['X-Tenant-Token'] = token;
      const slugQ = slug ? `&slug=${encodeURIComponent(slug)}` : '';

      const [aRes, oRes] = await Promise.all([
        fetch(`/api/analytics?action=summary&period=${p}${slugQ}`, { headers }),
        fetch(`/api/orders${slug ? `?slug=${encodeURIComponent(slug)}` : ''}`, { headers }),
      ]);
      const aData = await aRes.json();
      const oData = await oRes.json();

      if (aData.success) {
        setSummary(aData.summary);
        setDaily(aData.daily || []);
        setTopProducts(aData.top_products || []);
      }
      if (oData.success !== false) {
        const orders = Array.isArray(oData) ? oData : (oData.data || []);
        setRevenue(oData.total_revenue ?? orders.reduce((s: number, o: any) => s + parseFloat(o.total || '0'), 0));
        setOrderCount(oData.total ?? orders.length);
      }
    } catch (e) {
      setError('ডেটা লোড করতে সমস্যা হয়েছে। পরে আবার চেষ্টা করুন।');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchData(period); }, [period]);

  const pv   = summary?.page_views      ?? 0;
  const prdv = summary?.product_views   ?? 0;
  const ck   = summary?.checkout_starts ?? 0;
  const oc   = summary?.order_completes ?? 0;
  const conv = pv > 0 ? ((oc / pv) * 100).toFixed(1) : '0.0';

  // Build bar chart from daily data (page_view events)
  const chartDays = (() => {
    const map: Record<string, number> = {};
    daily.forEach(d => { if (d.event_type === 'page_view') map[d.day] = (map[d.day] || 0) + parseInt(d.cnt); });
    return Object.entries(map).slice(-14);
  })();
  const maxBar = Math.max(...chartDays.map(([, v]) => v), 1);

  const periodLabels: Record<Period, string> = { today: 'আজ', week: '৭ দিন', month: '৩০ দিন', year: '১ বছর', all: 'সব' };

  const statCards = [
    { icon: '👁️', label: 'পেজ ভিউ',       value: pv.toLocaleString(),   color: '#4F46E5', bg: '#EEF2FF' },
    { icon: '🛍️', label: 'পণ্য দর্শন',    value: prdv.toLocaleString(),  color: '#059669', bg: '#ECFDF5' },
    { icon: '🛒', label: 'চেকআউট শুরু',   value: ck.toLocaleString(),    color: '#D97706', bg: '#FFFBEB' },
    { icon: '📦', label: 'অর্ডার সম্পন্ন', value: orderCount.toLocaleString(), color: '#7C3AED', bg: '#F5F3FF' },
    { icon: '💰', label: 'মোট আয়',        value: `৳${revenue.toLocaleString('bn-BD', {maximumFractionDigits:0})}`, color: '#E11D48', bg: '#FFF1F2' },
    { icon: '🔄', label: 'কনভার্সন রেট',  value: `${conv}%`,             color: '#0EA5E9', bg: '#F0F9FF' },
  ];

  return (
    <PageLayout onBack={onBack}>
      <div style={{ textAlign: 'center', padding: '60px 24px 40px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle,rgba(165,180,252,.18) 0%,transparent 70%)', pointerEvents: 'none' }} />
        <span style={{ display: 'inline-block', background: 'rgba(238,242,255,.95)', color: '#4F46E5', fontSize: 11, fontWeight: 700, letterSpacing: 4, textTransform: 'uppercase', padding: '5px 16px', borderRadius: 99, border: '1px solid rgba(165,180,252,.4)', marginBottom: 20 }}>📊 লাইভ বিশ্লেষণ</span>
        <h1 style={{ fontSize: 'clamp(26px,5vw,48px)', fontWeight: 900, color: '#0F172A', marginBottom: 12, lineHeight: 1.15 }}>আপনার স্টোরের সম্পূর্ণ হিসাব</h1>
        <p style={{ color: '#64748B', fontSize: 16, maxWidth: 560, margin: '0 auto 28px' }}>পেজ ভিউ, অর্ডার, আয়, কনভার্সন — সব রিয়েল-টাইমে</p>

        {/* Period Selector */}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
          {(Object.keys(periodLabels) as Period[]).map(p => (
            <button key={p} onClick={() => setPeriod(p)} style={{ padding: '8px 20px', borderRadius: 99, border: 'none', cursor: 'pointer', fontWeight: 700, fontSize: 14, fontFamily: 'inherit', background: period === p ? 'linear-gradient(135deg,#4F46E5,#2563EB)' : 'rgba(241,245,249,1)', color: period === p ? '#fff' : '#64748B', transition: 'all .2s' }}>{periodLabels[p]}</button>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px' }}>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '80px 0', color: '#94A3B8', fontSize: 16 }}>
            <div style={{ fontSize: 40, marginBottom: 12 }}>⏳</div>ডেটা লোড হচ্ছে...
          </div>
        ) : error ? (
          <div style={{ textAlign: 'center', padding: '60px 0' }}>
            <div style={{ fontSize: 40, marginBottom: 12 }}>⚠️</div>
            <p style={{ color: '#E11D48', fontWeight: 600 }}>{error}</p>
            <button onClick={() => fetchData(period)} style={{ marginTop: 16, padding: '10px 24px', borderRadius: 12, background: '#4F46E5', color: '#fff', border: 'none', fontWeight: 700, cursor: 'pointer' }}>আবার চেষ্টা করুন</button>
          </div>
        ) : (
          <>
            {/* Stat Cards */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(170px,1fr))', gap: 16, marginBottom: 40 }}>
              {statCards.map((s, i) => (
                <div key={i} style={{ background: '#fff', borderRadius: 20, padding: '24px 20px', border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 20px rgba(0,0,0,.04)', textAlign: 'center', transition: 'all .3s' }}
                  onMouseEnter={e => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-3px)'}
                  onMouseLeave={e => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'}>
                  <div style={{ width: 52, height: 52, borderRadius: 14, background: s.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, margin: '0 auto 12px' }}>{s.icon}</div>
                  <div style={{ fontSize: 26, fontWeight: 900, color: s.color, marginBottom: 4 }}>{s.value}</div>
                  <div style={{ fontSize: 12, color: '#94A3B8', fontWeight: 600 }}>{s.label}</div>
                </div>
              ))}
            </div>

            {/* Bar Chart — Daily Page Views */}
            {chartDays.length > 0 && (
              <div style={{ background: '#fff', borderRadius: 24, padding: '28px 24px', marginBottom: 32, border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 20px rgba(0,0,0,.04)' }}>
                <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 16, marginBottom: 20 }}>📈 দৈনিক পেজ ভিউ (শেষ {chartDays.length} দিন)</h3>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 120 }}>
                  {chartDays.map(([day, val]) => (
                    <div key={day} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }} title={`${day}: ${val}`}>
                      <div style={{ height: `${Math.round((val / maxBar) * 100)}px`, minHeight: 4, width: '100%', background: 'linear-gradient(180deg,#4F46E5,#818CF8)', borderRadius: '4px 4px 0 0', transition: 'height .5s' }} />
                      <span style={{ fontSize: 9, color: '#94A3B8' }}>{day.slice(5)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Top Products */}
            {topProducts.length > 0 && (
              <div style={{ background: '#fff', borderRadius: 24, padding: '28px 24px', border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 20px rgba(0,0,0,.04)' }}>
                <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 16, marginBottom: 20 }}>🔥 সবচেয়ে বেশি দেখা পণ্য</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {topProducts.slice(0, 8).map((p, i) => {
                    const pct = Math.round((parseInt(p.views) / (parseInt(topProducts[0]?.views) || 1)) * 100);
                    return (
                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <span style={{ fontSize: 12, color: '#94A3B8', minWidth: 20, textAlign: 'right' }}>#{i + 1}</span>
                        <div style={{ flex: 1, height: 8, background: '#F1F5F9', borderRadius: 99, overflow: 'hidden' }}>
                          <div style={{ height: '100%', width: `${pct}%`, background: 'linear-gradient(90deg,#4F46E5,#818CF8)', borderRadius: 99, transition: 'width .6s' }} />
                        </div>
                        <span style={{ fontSize: 13, color: '#0F172A', minWidth: 40, fontWeight: 600 }}>{p.views}x</span>
                        <span style={{ fontSize: 12, color: '#64748B', maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.ref_id}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Empty state */}
            {!summary && !loading && (
              <div style={{ textAlign: 'center', padding: '60px 24px', color: '#94A3B8' }}>
                <div style={{ fontSize: 48, marginBottom: 12 }}>📊</div>
                <p style={{ fontSize: 16, fontWeight: 600 }}>এখনো কোনো ডেটা নেই।<br />স্টোরে ভিজিটর আসলে এখানে দেখাবে।</p>
              </div>
            )}
          </>
        )}
      </div>
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   4. AI Messenger (এআই মেসেঞ্জার)
────────────────────────────────────────────────────────── */
export const AIMessengerPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => (
  <PageLayout onBack={onBack}>
    <Hero badge="এআই মেসেঞ্জার" title="স্বয়ংক্রিয় গ্রাহক সেবা, ২৪/৭" sub="আমাদের AI মেসেঞ্জার আপনার হয়ে গ্রাহকদের সাথে কথা বলে, অর্ডার নেয় এবং সমস্যা সমাধান করে।" />
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px' }}>
      {/* Chat demo */}
      <div style={{ maxWidth: 480, margin: '0 auto 64px', background: '#fff', borderRadius: 24, overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,.1)', border: '1px solid rgba(0,0,0,.05)' }}>
        <div style={{ background: 'linear-gradient(135deg,#4F46E5,#2563EB)', padding: '18px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🤖</div>
          <div><div style={{ color: '#fff', fontWeight: 700 }}>ShophyBot</div><div style={{ color: 'rgba(255,255,255,.7)', fontSize: 12 }}>অনলাইন · এখনই সাড়া দিচ্ছে</div></div>
        </div>
        <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            { bot: true, msg: 'স্বাগতম! আমি ShophyBot। আপনাকে কীভাবে সাহায্য করতে পারি?' },
            { bot: false, msg: 'নীল রঙের শার্টের দাম কত?' },
            { bot: true, msg: '✅ নীল রঙের শার্ট পাওয়া যাচ্ছে — ৳৮৫০\n📦 স্টক আছে: ১৫টি\n🚀 আজই অর্ডার করলে কাল পাবেন!' },
          ].map((m, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: m.bot ? 'flex-start' : 'flex-end' }}>
              <div style={{ maxWidth: '80%', background: m.bot ? '#F1F5F9' : 'linear-gradient(135deg,#4F46E5,#2563EB)', color: m.bot ? '#0F172A' : '#fff', padding: '12px 16px', borderRadius: m.bot ? '4px 18px 18px 18px' : '18px 4px 18px 18px', fontSize: 14, lineHeight: 1.6, whiteSpace: 'pre-line' }}>{m.msg}</div>
            </div>
          ))}
        </div>
      </div>
      {/* Features */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 20 }}>
        {[
          { icon: '⚡', title: 'তাৎক্ষণিক সাড়া', desc: '২ সেকেন্ডের মধ্যে গ্রাহকের প্রশ্নের উত্তর।', color: '#F59E0B' },
          { icon: '🧠', title: 'স্মার্ট AI', desc: 'পণ্য, দাম, স্টক — সব তথ্য স্বয়ংক্রিয়ভাবে জানে।', color: '#4F46E5' },
          { icon: '📲', title: 'Facebook ইন্টিগ্রেশন', desc: 'Facebook Messenger-এ সরাসরি সংযুক্ত।', color: '#1877F2' },
          { icon: '📋', title: 'লিড ক্যাপচার', desc: 'প্রতিটি কথোপকথন থেকে স্বয়ংক্রিয় লিড সংগ্রহ।', color: '#059669' },
        ].map((f, i) => (
          <div key={i} style={{ background: '#fff', borderRadius: 20, padding: 28, border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 20px rgba(0,0,0,.04)', display: 'flex', gap: 18, alignItems: 'flex-start' }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background: f.color + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, flexShrink: 0 }}>{f.icon}</div>
            <div>
              <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 16, marginBottom: 6 }}>{f.title}</h3>
              <p style={{ color: '#64748B', fontSize: 14, margin: 0, lineHeight: 1.6 }}>{f.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </PageLayout>
);

/* ──────────────────────────────────────────────────────────
   5. Career (ক্যারিয়ার)
────────────────────────────────────────────────────────── */
export const CareerPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const jobs = [
    { title: 'সিনিয়র ফ্রন্টএন্ড ডেভেলপার', dept: 'ইঞ্জিনিয়ারিং', type: 'পূর্ণকালীন', loc: 'ঢাকা / রিমোট' },
    { title: 'প্রোডাক্ট ম্যানেজার', dept: 'প্রোডাক্ট', type: 'পূর্ণকালীন', loc: 'ঢাকা' },
    { title: 'UI/UX ডিজাইনার', dept: 'ডিজাইন', type: 'পূর্ণকালীন', loc: 'রিমোট' },
    { title: 'ডিজিটাল মার্কেটিং এক্সপার্ট', dept: 'মার্কেটিং', type: 'পূর্ণকালীন', loc: 'ঢাকা' },
    { title: 'কাস্টমার সাপোর্ট স্পেশালিস্ট', dept: 'সহায়তা', type: 'পূর্ণকালীন', loc: 'ঢাকা / রিমোট' },
    { title: 'ফিনান্স অ্যানালিস্ট', dept: 'ফিনান্স', type: 'পূর্ণকালীন', loc: 'ঢাকা' },
  ];
  const perks = ['🏠 রিমোট ওয়ার্ক অপশন', '📚 লার্নিং বাজেট', '🏋️ স্বাস্থ্য সুবিধা', '🎉 বার্ষিক বোনাস', '☕ ফ্রি লাঞ্চ', '🚀 দ্রুত ক্যারিয়ার বৃদ্ধি'];
  return (
    <PageLayout onBack={onBack}>
      <Hero badge="ক্যারিয়ার" title="আমাদের টিমে যোগ দিন" sub="বাংলাদেশের সেরা ই-কমার্স প্ল্যাটফর্ম গড়ে তুলতে আমরা প্রতিভাবান মানুষ খুঁজছি।" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px' }}>
        {/* Perks */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginBottom: 56 }}>
          {perks.map((p, i) => <span key={i} style={{ background: '#fff', border: '1px solid rgba(99,102,241,.15)', borderRadius: 99, padding: '8px 20px', fontSize: 14, fontWeight: 600, color: '#4F46E5' }}>{p}</span>)}
        </div>
        {/* Job listings */}
        <h2 style={{ fontWeight: 900, fontSize: 22, color: '#0F172A', marginBottom: 24 }}>খোলা পদসমূহ</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {jobs.map((j, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 20, padding: '24px 28px', border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 2px 12px rgba(0,0,0,.04)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, transition: 'all .2s' }}
              onMouseEnter={e => (e.currentTarget as HTMLDivElement).style.boxShadow = '0 8px 32px rgba(79,70,229,.12)'}
              onMouseLeave={e => (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 12px rgba(0,0,0,.04)'}>
              <div>
                <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 17, marginBottom: 8 }}>{j.title}</h3>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {[j.dept, j.type, j.loc].map((tag, ti) => <span key={ti} style={{ fontSize: 12, color: '#64748B', background: '#F1F5F9', padding: '3px 10px', borderRadius: 99 }}>{tag}</span>)}
                </div>
              </div>
              <button style={{ background: 'linear-gradient(135deg,#4F46E5,#2563EB)', color: '#fff', border: 'none', borderRadius: 12, padding: '10px 24px', fontWeight: 700, cursor: 'pointer', fontSize: 14, whiteSpace: 'nowrap' }}>আবেদন করুন</button>
            </div>
          ))}
        </div>
      </div>
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   6. Press (প্রেস)
────────────────────────────────────────────────────────── */
export const PressPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const news = [
    { date: 'এপ্রিল ২০২৪', outlet: 'Prothom Alo', title: 'ShophyFast: বাংলাদেশের ই-কমার্সে নতুন যুগ', type: 'নিবন্ধ' },
    { date: 'মার্চ ২০২৪', outlet: 'Daily Star', title: 'Local SaaS startup empowers 500+ businesses', type: 'সংবাদ' },
    { date: 'ফেব্রুয়ারি ২০২৪', outlet: 'TechTalk BD', title: 'AI-powered e-commerce: ShophyFast leads the way', type: 'ফিচার' },
    { date: 'জানুয়ারি ২০২৪', outlet: 'Bonik Barta', title: 'SME খাতে ShophyFast-এর অবদান', type: 'বিশ্লেষণ' },
  ];
  return (
    <PageLayout onBack={onBack}>
      <Hero badge="প্রেস" title="মিডিয়া ও সংবাদ" sub="ShophyFast সম্পর্কে দেশের প্রিমিয়াম মিডিয়া কী বলছে।" />
      <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 24px 100px' }}>
        {/* Press kit CTA */}
        <div style={{ background: 'linear-gradient(135deg,#4F46E5,#2563EB)', borderRadius: 24, padding: '40px 32px', textAlign: 'center', marginBottom: 56, color: '#fff' }}>
          <h2 style={{ fontWeight: 900, fontSize: 24, marginBottom: 8 }}>প্রেস কিট ডাউনলোড করুন</h2>
          <p style={{ opacity: .8, marginBottom: 24, fontSize: 15 }}>লোগো, স্ক্রিনশট, ফাউন্ডার ছবি এবং কোম্পানির তথ্য।</p>
          <button style={{ background: '#fff', color: '#4F46E5', border: 'none', borderRadius: 12, padding: '12px 32px', fontWeight: 800, cursor: 'pointer', fontSize: 15 }}>⬇ প্রেস কিট ডাউনলোড</button>
        </div>
        {/* News */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {news.map((n, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 20, padding: '28px 32px', border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 2px 12px rgba(0,0,0,.04)', display: 'flex', gap: 24, alignItems: 'flex-start' }}>
              <div style={{ textAlign: 'center', minWidth: 80 }}>
                <div style={{ fontSize: 11, color: '#94A3B8', fontWeight: 600 }}>{n.date}</div>
                <div style={{ fontSize: 13, color: '#4F46E5', fontWeight: 700, marginTop: 4 }}>{n.outlet}</div>
              </div>
              <div style={{ flex: 1 }}>
                <span style={{ fontSize: 11, background: '#EEF2FF', color: '#4F46E5', padding: '3px 10px', borderRadius: 99, fontWeight: 700 }}>{n.type}</span>
                <h3 style={{ fontWeight: 700, color: '#0F172A', fontSize: 16, margin: '8px 0 0' }}>{n.title}</h3>
              </div>
              <button style={{ background: 'none', border: '1px solid #E2E8F0', borderRadius: 10, padding: '8px 16px', cursor: 'pointer', color: '#64748B', fontSize: 13, whiteSpace: 'nowrap' }}>পড়ুন →</button>
            </div>
          ))}
        </div>
        {/* Contact */}
        <div style={{ marginTop: 48, background: '#F8FAFC', borderRadius: 20, padding: 32, textAlign: 'center' }}>
          <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 18, marginBottom: 8 }}>মিডিয়া যোগাযোগ</h3>
          <p style={{ color: '#64748B', fontSize: 14, marginBottom: 16 }}>সাক্ষাৎকার বা তথ্যের জন্য আমাদের সাথে যোগাযোগ করুন।</p>
          <a href="mailto:press@shophyfast.com" style={{ color: '#4F46E5', fontWeight: 700, textDecoration: 'none', fontSize: 16 }}>press@shophyfast.com</a>
        </div>
      </div>
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   7. Partners (অংশীদার)
────────────────────────────────────────────────────────── */
export const PartnersPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const partners = [
    { name: 'বিকাশ', cat: 'পেমেন্ট', icon: '💳', color: '#E4148B', desc: 'মোবাইল ফিনান্সিয়াল সার্ভিস লিডার' },
    { name: 'নগদ', cat: 'পেমেন্ট', icon: '💰', color: '#FF6B35', desc: 'ডিজিটাল পেমেন্ট প্ল্যাটফর্ম' },
    { name: 'পাঠাও', cat: 'ডেলিভারি', icon: '🚀', color: '#E50914', desc: 'দ্রুততম লজিস্টিক পার্টনার' },
    { name: 'স্টেডফাস্ট', cat: 'ডেলিভারি', icon: '📦', color: '#0EA5E9', desc: 'ই-কমার্স ডেলিভারি সলিউশন' },
    { name: 'SSLCommerz', cat: 'পেমেন্ট গেটওয়ে', icon: '🔒', color: '#004D99', desc: 'বাংলাদেশের শীর্ষ পেমেন্ট গেটওয়ে' },
    { name: 'Stripe', cat: 'আন্তর্জাতিক', icon: '🌐', color: '#6772E5', desc: 'গ্লোবাল পেমেন্ট প্রসেসিং' },
  ];
  return (
    <PageLayout onBack={onBack}>
      <Hero badge="অংশীদার" title="বিশ্বমানের অংশীদারদের সাথে" sub="ShophyFast-এর শক্তিশালী পার্টনার ইকোসিস্টেম আপনার ব্যবসাকে আরও এগিয়ে নিয়ে যাবে।" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 60px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 24 }}>
        {partners.map((p, i) => (
          <div key={i} style={{ background: '#fff', borderRadius: 20, padding: 28, border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 20px rgba(0,0,0,.05)', display: 'flex', gap: 20, alignItems: 'flex-start', transition: 'all .3s' }}
            onMouseEnter={e => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-3px)'}
            onMouseLeave={e => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: p.color + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, flexShrink: 0 }}>{p.icon}</div>
            <div>
              <span style={{ fontSize: 11, color: p.color, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>{p.cat}</span>
              <h3 style={{ fontWeight: 900, color: '#0F172A', fontSize: 20, margin: '4px 0 8px' }}>{p.name}</h3>
              <p style={{ color: '#64748B', fontSize: 13, margin: 0 }}>{p.desc}</p>
            </div>
          </div>
        ))}
      </div>
      {/* Become a partner */}
      <div style={{ maxWidth: 700, margin: '0 auto 100px', padding: '0 24px' }}>
        <div style={{ background: 'linear-gradient(135deg,#EEF2FF,#DBEAFE)', borderRadius: 24, padding: '52px 40px', textAlign: 'center', border: '1px solid rgba(165,180,252,.3)' }}>
          <h2 style={{ fontWeight: 900, fontSize: 26, color: '#0F172A', marginBottom: 12 }}>পার্টনার হতে চান?</h2>
          <p style={{ color: '#64748B', fontSize: 15, marginBottom: 28 }}>আমাদের সাথে যুক্ত হয়ে হাজারো ব্যবসায়ীদের কাছে পৌঁছান।</p>
          <button style={{ background: 'linear-gradient(135deg,#4F46E5,#2563EB)', color: '#fff', border: 'none', borderRadius: 14, padding: '14px 36px', fontWeight: 800, cursor: 'pointer', fontSize: 16 }}>পার্টনারশিপ আলোচনা করুন</button>
        </div>
      </div>
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   8. Help Center (সহায়তা কেন্দ্র)
────────────────────────────────────────────────────────── */
export const HelpCenterPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const [query, setQuery] = useState('');
  const categories = [
    { icon: '🚀', title: 'শুরু করুন', articles: 12 },
    { icon: '💳', title: 'পেমেন্ট', articles: 8 },
    { icon: '📦', title: 'অর্ডার ও ডেলিভারি', articles: 15 },
    { icon: '🎨', title: 'থিম ও ডিজাইন', articles: 10 },
    { icon: '🔧', title: 'অ্যাকাউন্ট সেটিংস', articles: 6 },
    { icon: '🤖', title: 'AI মেসেঞ্জার', articles: 9 },
  ];
  const faqs = [
    { q: 'কীভাবে আমার স্টোর তৈরি করব?', a: 'রেজিস্ট্রেশন করুন, স্টোরের নাম দিন, পণ্য যোগ করুন এবং ✓ মাত্র ৫ মিনিটে আপনার স্টোর অনলাইনে চলে যাবে।' },
    { q: 'কোন পেমেন্ট পদ্ধতি সমর্থিত?', a: 'বিকাশ, নগদ, রকেট, ক্রেডিট/ডেবিট কার্ড (SSLCommerz ও Stripe-এর মাধ্যমে) সমর্থিত।' },
    { q: 'ফ্রি ট্রায়াল কতদিনের?', a: '১৪ দিনের ফ্রি ট্রায়াল, কোনো ক্রেডিট কার্ড ছাড়াই।' },
    { q: 'কাস্টম ডোমেইন কীভাবে যোগ করব?', a: 'আপনার ডোমেইন রেজিস্ট্রারে DNS সেটিংস আপডেট করুন এবং Dashboard → Settings → Domain থেকে সংযুক্ত করুন।' },
  ];
  const [open, setOpen] = useState<number | null>(null);
  return (
    <PageLayout onBack={onBack}>
      <Hero badge="সহায়তা কেন্দ্র" title="আমরা সাহায্য করতে এখানে আছি" sub="আপনার যেকোনো প্রশ্নের উত্তর খুঁজে নিন।" />
      <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 24px 100px' }}>
        {/* Search */}
        <div style={{ position: 'relative', marginBottom: 48 }}>
          <span style={{ position: 'absolute', left: 20, top: '50%', transform: 'translateY(-50%)', fontSize: 20 }}>🔍</span>
          <input value={query} onChange={e => setQuery(e.target.value)} placeholder="আপনার প্রশ্ন লিখুন..." style={{ width: '100%', padding: '18px 20px 18px 56px', borderRadius: 16, border: '2px solid rgba(165,180,252,.4)', fontSize: 16, outline: 'none', boxSizing: 'border-box', fontFamily: 'inherit', background: '#fff', boxShadow: '0 4px 24px rgba(0,0,0,.06)' }} />
        </div>
        {/* Categories */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 16, marginBottom: 48 }}>
          {categories.map((c, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 16, padding: 24, border: '1px solid rgba(0,0,0,.04)', textAlign: 'center', cursor: 'pointer', transition: 'all .2s', boxShadow: '0 2px 10px rgba(0,0,0,.04)' }}
              onMouseEnter={e => (e.currentTarget as HTMLDivElement).style.borderColor = 'rgba(99,102,241,.3)'}
              onMouseLeave={e => (e.currentTarget as HTMLDivElement).style.borderColor = 'rgba(0,0,0,.04)'}>
              <div style={{ fontSize: 32, marginBottom: 10 }}>{c.icon}</div>
              <h3 style={{ fontWeight: 700, color: '#0F172A', fontSize: 15, marginBottom: 4 }}>{c.title}</h3>
              <span style={{ fontSize: 12, color: '#94A3B8' }}>{c.articles}টি আর্টিকেল</span>
            </div>
          ))}
        </div>
        {/* FAQ */}
        <h2 style={{ fontWeight: 900, fontSize: 22, color: '#0F172A', marginBottom: 20 }}>সাধারণ প্রশ্নাবলী</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 16, border: '1px solid', borderColor: open === i ? 'rgba(99,102,241,.3)' : 'rgba(0,0,0,.05)', overflow: 'hidden' }}>
              <button onClick={() => setOpen(open === i ? null : i)} style={{ width: '100%', padding: '18px 24px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'inherit' }}>
                <span style={{ fontWeight: 700, color: '#0F172A', fontSize: 15 }}>{f.q}</span>
                <span style={{ color: '#4F46E5', fontSize: 22, fontWeight: 900, transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform .3s' }}>+</span>
              </button>
              {open === i && <div style={{ padding: '0 24px 18px', color: '#64748B', fontSize: 14, lineHeight: 1.7 }}>{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   9. Privacy Policy (গোপনীয়তা নীতি)
────────────────────────────────────────────────────────── */
export const PrivacyPolicyPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => (
  <PageLayout onBack={onBack}>
    <Hero badge="গোপনীয়তা নীতি" title="আপনার তথ্য আমাদের কাছে নিরাপদ" sub="ShophyFast কীভাবে আপনার তথ্য সংগ্রহ, ব্যবহার এবং সুরক্ষিত রাখে।" />
    <div style={{ maxWidth: 800, margin: '0 auto', padding: '0 24px 100px' }}>
      {[
        { title: '১. তথ্য সংগ্রহ', content: 'আমরা আপনার অ্যাকাউন্ট তৈরি, স্টোর পরিচালনা এবং সেবা উন্নত করতে প্রয়োজনীয় তথ্য সংগ্রহ করি। এর মধ্যে রয়েছে নাম, ইমেইল, মোবাইল নম্বর, মোবাইল ফিনান্সিয়াল সার্ভিস নম্বর এবং পেমেন্ট তথ্য।' },
        { title: '২. তথ্যের ব্যবহার', content: 'আপনার তথ্য আমরা শুধুমাত্র সেবা প্রদান, অ্যাকাউন্ট ম্যানেজমেন্ট, সাপোর্ট প্রদান এবং প্ল্যাটফর্ম উন্নয়নের জন্য ব্যবহার করি। তৃতীয় পক্ষের কাছে বিক্রি করা হয় না।' },
        { title: '৩. তথ্যের সুরক্ষা', content: 'আমরা SSL এনক্রিপশন, নিরাপদ সার্ভার এবং নিয়মিত নিরাপত্তা অডিটের মাধ্যমে আপনার তথ্য সুরক্ষিত রাখি।' },
        { title: '৪. কুকিজ', content: 'আমরা আপনার অভিজ্ঞতা উন্নত করতে কুকিজ ব্যবহার করি। আপনি যেকোনো সময় ব্রাউজার সেটিংস থেকে কুকিজ নিয়ন্ত্রণ করতে পারবেন।' },
        { title: '৫. তৃতীয় পক্ষ', content: 'পেমেন্ট গেটওয়ে (বিকাশ, নগদ, SSLCommerz) এবং ডেলিভারি পার্টনারদের কাছে প্রয়োজনীয় তথ্য শেয়ার করা হতে পারে।' },
        { title: '৬. আপনার অধিকার', content: 'আপনার যেকোনো সময় তথ্য সংশোধন, মুছে ফেলা বা ডাউনলোড করার অধিকার আছে। যোগাযোগ করুন: privacy@shophyfast.com' },
      ].map((s, i) => (
        <div key={i} style={{ background: '#fff', borderRadius: 20, padding: 32, marginBottom: 16, border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 2px 12px rgba(0,0,0,.04)' }}>
          <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 18, marginBottom: 12 }}>{s.title}</h3>
          <p style={{ color: '#64748B', fontSize: 14, lineHeight: 1.8, margin: 0 }}>{s.content}</p>
        </div>
      ))}
      <div style={{ background: '#EEF2FF', borderRadius: 16, padding: 24, border: '1px solid rgba(165,180,252,.3)', fontSize: 13, color: '#4F46E5', fontWeight: 600 }}>
        সর্বশেষ আপডেট: ১ এপ্রিল ২০২৪ · প্রশ্নের জন্য: <a href="mailto:privacy@shophyfast.com" style={{ color: 'inherit' }}>privacy@shophyfast.com</a>
      </div>
    </div>
  </PageLayout>
);

/* ──────────────────────────────────────────────────────────
   10. Terms of Service (সেবার শর্তাবলী)
────────────────────────────────────────────────────────── */
export const TermsPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => (
  <PageLayout onBack={onBack}>
    <Hero badge="সেবার শর্তাবলী" title="ব্যবহারের নিয়ম ও শর্ত" sub="ShophyFast ব্যবহার করার আগে অনুগ্রহ করে এই শর্তগুলি মনোযোগ দিয়ে পড়ুন।" />
    <div style={{ maxWidth: 800, margin: '0 auto', padding: '0 24px 100px' }}>
      {[
        { title: '১. পরিষেবার শর্ত গ্রহণ', content: 'ShophyFast ব্যবহার করে আপনি এই শর্তাবলীতে সম্মত হচ্ছেন। আপনি যদি এই শর্তাবলীতে রাজি না হন, তাহলে আমাদের পরিষেবা ব্যবহার করবেন না।' },
        { title: '২. অ্যাকাউন্ট দায়িত্ব', content: 'আপনি আপনার অ্যাকাউন্টের নিরাপত্তা এবং সমস্ত কার্যক্রমের জন্য দায়বদ্ধ। পাসওয়ার্ড গোপন রাখুন এবং অননুমোদিত ব্যবহারের ক্ষেত্রে আমাদের অবহিত করুন।' },
        { title: '৩. ব্যবহারের নিষেধাজ্ঞা', content: 'বেআইনি পণ্য বিক্রয়, স্প্যাম, অন্যের তথ্য চুরি বা প্ল্যাটফর্মের ক্ষতি করা সম্পূর্ণ নিষিদ্ধ। লঙ্ঘনের ক্ষেত্রে অ্যাকাউন্ট বাতিল করা হবে।' },
        { title: '৪. মূল্য ও পেমেন্ট', content: 'সাবস্ক্রিপশন ফি প্রতি মাসে স্বয়ংক্রিয়ভাবে পুনর্নবীকরণ হবে। যেকোনো সময় বাতিল করা যাবে, তবে ব্যবহৃত মাসের রিফান্ড দেওয়া হবে না।' },
        { title: '৫. মেধাস্বত্ব', content: 'ShophyFast প্ল্যাটফর্মের সব সফটওয়্যার, ডিজাইন এবং বিষয়বস্তু আমাদের মেধাস্বত্বের অন্তর্ভুক্ত। আপনার স্টোরের বিষয়বস্তুর মেধাস্বত্ব আপনার নিজের।' },
        { title: '৬. দায়মুক্তি', content: 'ShophyFast পরিষেবা "যেমন আছে" ভিত্তিতে প্রদান করা হয়। আমরা পরোক্ষ ক্ষতির জন্য দায়বদ্ধ নই।' },
      ].map((s, i) => (
        <div key={i} style={{ background: '#fff', borderRadius: 20, padding: 32, marginBottom: 16, border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 2px 12px rgba(0,0,0,.04)' }}>
          <h3 style={{ fontWeight: 800, color: '#0F172A', fontSize: 18, marginBottom: 12 }}>{s.title}</h3>
          <p style={{ color: '#64748B', fontSize: 14, lineHeight: 1.8, margin: 0 }}>{s.content}</p>
        </div>
      ))}
      <div style={{ background: '#EEF2FF', borderRadius: 16, padding: 24, border: '1px solid rgba(165,180,252,.3)', fontSize: 13, color: '#4F46E5', fontWeight: 600 }}>
        সর্বশেষ আপডেট: ১ এপ্রিল ২০২৪ · প্রশ্নের জন্য: <a href="mailto:legal@shophyfast.com" style={{ color: 'inherit' }}>legal@shophyfast.com</a>
      </div>
    </div>
  </PageLayout>
);

/* ──────────────────────────────────────────────────────────
   11. ShophyFast About Us (আমাদের সম্পর্কে — main domain)
────────────────────────────────────────────────────────── */
export const ShophyAboutPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const team = [
    { name: 'রাহুল আহমেদ', role: 'প্রতিষ্ঠাতা ও সিইও', emoji: '👨‍💼', bio: 'ই-কমার্স ও ফিনটেকে ১০ বছরের অভিজ্ঞতা।' },
    { name: 'তানিয়া ইসলাম', role: 'সিটিও', emoji: '👩‍💻', bio: 'ফুল-স্ট্যাক ইঞ্জিনিয়ার, প্রাক্তন গুগল।' },
    { name: 'ফরহান হাসান', role: 'সিপিও', emoji: '👨‍🎨', bio: 'প্রোডাক্ট ডিজাইনে ৮ বছরের অভিজ্ঞতা।' },
    { name: 'সুমাইয়া খান', role: 'সিএমও', emoji: '👩‍📊', bio: 'ডিজিটাল মার্কেটিং বিশেষজ্ঞ।' },
  ];
  const milestones = [
    { year: '২০২১', event: 'ShophyFast প্রতিষ্ঠিত হয়', icon: '🚀' },
    { year: '২০২২', event: '১০০+ স্টোর অনলাইনে', icon: '🏪' },
    { year: '২০২৩', event: 'AI মেসেঞ্জার চালু, ১০০০+ গ্রাহক', icon: '🤖' },
    { year: '২০২৪', event: '৫০০০+ স্টোর, ৳১০ কোটি+ বার্ষিক GMV', icon: '📈' },
  ];
  return (
    <PageLayout onBack={onBack}>
      <Hero badge="আমাদের সম্পর্কে" title="বাংলাদেশের ই-কমার্স বিপ্লব" sub="আমরা বিশ্বাস করি প্রতিটি উদ্যোক্তা তাদের স্বপ্নের অনলাইন ব্যবসা গড়তে পারেন — যেকোনো বাজেটে, যেকোনো জায়গা থেকে।" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px' }}>
        {/* Mission */}
        <div style={{ background: 'linear-gradient(135deg,#4F46E5,#2563EB)', borderRadius: 28, padding: '52px 40px', marginBottom: 56, color: '#fff', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255,255,255,.05)' }} />
          <div style={{ position: 'absolute', bottom: -40, left: -40, width: 150, height: 150, borderRadius: '50%', background: 'rgba(255,255,255,.05)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 48, marginBottom: 16 }}>🎯</div>
            <h2 style={{ fontWeight: 900, fontSize: 28, marginBottom: 12 }}>আমাদের মিশন</h2>
            <p style={{ opacity: .85, fontSize: 17, lineHeight: 1.8, maxWidth: 600, margin: '0 auto' }}>প্রতিটি বাংলাদেশি উদ্যোক্তাকে বিশ্বমানের ই-কমার্স টুল দিয়ে ক্ষমতায়িত করা — সহজে, সাশ্রয়ীভাবে এবং নির্ভরযোগ্যভাবে।</p>
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 20, marginBottom: 56 }}>
          {[
            { value: '৫০০০+', label: 'সক্রিয় স্টোর', icon: '🏪' },
            { value: '৳১০কোটি+', label: 'বার্ষিক GMV', icon: '💰' },
            { value: '৯৮%', label: 'গ্রাহক সন্তুষ্টি', icon: '⭐' },
            { value: '২৪/৭', label: 'সাপোর্ট টিম', icon: '🤝' },
          ].map((s, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 20, padding: '32px 20px', textAlign: 'center', border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 20px rgba(0,0,0,.04)' }}>
              <div style={{ fontSize: 36, marginBottom: 10 }}>{s.icon}</div>
              <div style={{ fontWeight: 900, fontSize: 32, color: '#4F46E5', marginBottom: 4 }}>{s.value}</div>
              <div style={{ color: '#64748B', fontSize: 14 }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* Timeline */}
        <h2 style={{ fontWeight: 900, fontSize: 24, color: '#0F172A', marginBottom: 28, textAlign: 'center' }}>আমাদের যাত্রা</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 56, maxWidth: 700, margin: '0 auto 56px' }}>
          {milestones.map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start', background: '#fff', borderRadius: 16, padding: '20px 24px', border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 2px 12px rgba(0,0,0,.04)' }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: '#EEF2FF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, flexShrink: 0 }}>{m.icon}</div>
              <div>
                <span style={{ fontSize: 12, color: '#4F46E5', fontWeight: 800, letterSpacing: 2 }}>{m.year}</span>
                <p style={{ fontWeight: 700, color: '#0F172A', fontSize: 16, margin: '4px 0 0' }}>{m.event}</p>
              </div>
            </div>
          ))}
        </div>

        {/* Team */}
        <h2 style={{ fontWeight: 900, fontSize: 24, color: '#0F172A', marginBottom: 28, textAlign: 'center' }}>আমাদের টিম</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 20 }}>
          {team.map((t, i) => (
            <div key={i} style={{ background: '#fff', borderRadius: 20, padding: 28, textAlign: 'center', border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 4px 20px rgba(0,0,0,.04)', transition: 'all .3s' }}
              onMouseEnter={e => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-4px)'}
              onMouseLeave={e => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'}>
              <div style={{ fontSize: 52, marginBottom: 16 }}>{t.emoji}</div>
              <h3 style={{ fontWeight: 800, color: '#0F172A', marginBottom: 4 }}>{t.name}</h3>
              <span style={{ fontSize: 12, color: '#4F46E5', fontWeight: 700, background: '#EEF2FF', padding: '3px 12px', borderRadius: 99 }}>{t.role}</span>
              <p style={{ color: '#64748B', fontSize: 13, marginTop: 12, lineHeight: 1.6 }}>{t.bio}</p>
            </div>
          ))}
        </div>
      </div>
    </PageLayout>
  );
};

/* ──────────────────────────────────────────────────────────
   12. ShophyFast Contact (যোগাযোগ — main domain)
────────────────────────────────────────────────────────── */
export const ShophyContactPage: React.FC<{ onBack?: () => void }> = ({ onBack }) => {
  const [form, setForm] = useState({ name: '', email: '', subject: '', msg: '' });
  const [sent, setSent] = useState(false);
  const up = (k: string, v: string) => setForm(f => ({ ...f, [k]: v }));
  const inputStyle: React.CSSProperties = { width: '100%', padding: '14px 18px', borderRadius: 12, border: '1.5px solid rgba(165,180,252,.4)', fontSize: 15, outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box', background: '#fff', transition: 'border-color .2s' };
  return (
    <PageLayout onBack={onBack}>
      <Hero badge="যোগাযোগ" title="আমাদের সাথে কথা বলুন" sub="যেকোনো প্রশ্ন, পরামর্শ বা অংশীদারিত্বের জন্য আমরা সর্বদা প্রস্তুত।" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 40 }}>
        {/* Info */}
        <div>
          <h2 style={{ fontWeight: 900, fontSize: 22, color: '#0F172A', marginBottom: 24 }}>যোগাযোগের তথ্য</h2>
          {[
            { icon: '📧', label: 'ইমেইল', val: 'hello@shophyfast.com' },
            { icon: '📞', label: 'ফোন', val: '+880 1700-000000' },
            { icon: '📍', label: 'ঠিকানা', val: 'গুলশান-২, ঢাকা-১২১২' },
            { icon: '⏰', label: 'কাজের সময়', val: 'শনি–বৃহস্পতি, সকাল ৯ – রাত ৯' },
          ].map((c, i) => (
            <div key={i} style={{ display: 'flex', gap: 16, marginBottom: 20, background: '#fff', borderRadius: 16, padding: 20, border: '1px solid rgba(0,0,0,.04)', boxShadow: '0 2px 10px rgba(0,0,0,.04)' }}>
              <span style={{ fontSize: 28 }}>{c.icon}</span>
              <div>
                <div style={{ fontSize: 12, color: '#94A3B8', fontWeight: 600, marginBottom: 2 }}>{c.label}</div>
                <div style={{ fontWeight: 700, color: '#0F172A' }}>{c.val}</div>
              </div>
            </div>
          ))}
        </div>
        {/* Form */}
        <div>
          <h2 style={{ fontWeight: 900, fontSize: 22, color: '#0F172A', marginBottom: 24 }}>বার্তা পাঠান</h2>
          {sent ? (
            <div style={{ background: '#ECFDF5', borderRadius: 20, padding: 40, textAlign: 'center', border: '1px solid rgba(5,150,105,.2)' }}>
              <div style={{ fontSize: 48, marginBottom: 12 }}>✅</div>
              <h3 style={{ fontWeight: 800, color: '#059669', fontSize: 20 }}>বার্তা পাঠানো হয়েছে!</h3>
              <p style={{ color: '#64748B', marginTop: 8 }}>আমরা শীঘ্রই আপনার সাথে যোগাযোগ করব।</p>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <input value={form.name} onChange={e => up('name', e.target.value)} placeholder="আপনার নাম" style={inputStyle} />
              <input value={form.email} onChange={e => up('email', e.target.value)} placeholder="ইমেইল ঠিকানা" type="email" style={inputStyle} />
              <input value={form.subject} onChange={e => up('subject', e.target.value)} placeholder="বিষয়" style={inputStyle} />
              <textarea value={form.msg} onChange={e => up('msg', e.target.value)} placeholder="আপনার বার্তা লিখুন..." rows={5} style={{ ...inputStyle, resize: 'vertical' }} />
              <button onClick={() => setSent(true)} style={{ background: 'linear-gradient(135deg,#4F46E5,#2563EB)', color: '#fff', border: 'none', borderRadius: 14, padding: '14px 0', fontWeight: 800, cursor: 'pointer', fontSize: 16, fontFamily: 'inherit' }}>বার্তা পাঠান →</button>
            </div>
          )}
        </div>
      </div>
    </PageLayout>
  );
};
