import React, { useState, useEffect, useRef } from 'react';
import TenantSignupModal from './TenantSignupModal';
import UbaidiChat from './UbaidiChat';

interface MainLandingProps {
  onTenantLogin: (tenant: any, token: string) => void;
  onGoToAdmin?: () => void;
}

// ── Animated Counter ─────────────────────────────
function useCountUp(target: number, duration = 2000, start = false) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!start) return;
    let frame = 0;
    const total = 60;
    const timer = setInterval(() => {
      frame++;
      const ease = 1 - Math.pow(1 - frame / total, 3);
      setVal(Math.floor(target * ease));
      if (frame >= total) clearInterval(timer);
    }, duration / total);
    return () => clearInterval(timer);
  }, [start, target, duration]);
  return val;
}

// ── IntersectionObserver ──────────────────────────
function useInView(threshold = 0.25) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) setInView(true); },
      { threshold }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [threshold]);
  return { ref, inView };
}

// ── Chat Script ───────────────────────────────────
const CHAT_SCRIPT = [
  { from: 'customer', msg: 'এই পণ্যটির দাম কত?' },
  { from: 'bot', msg: '৳১,২৯৯ মাত্র! 🎉 অর্ডার করতে নাম ও ঠিকানা দিন।' },
  { from: 'customer', msg: 'নাম: রহিম উদ্দিন। ঠিকানা: মিরপুর, ঢাকা।' },
  { from: 'bot', msg: 'ঢাকায় ডেলিভারি ২-৩ কার্যদিবসে পৌঁছাবে! 🚚' },
  { from: 'customer', msg: 'ঠিক আছে, ১টি অর্ডার করতে চাই।' },
  { from: 'bot', msg: '✅ অর্ডার নিশ্চিত হয়েছে! ধন্যবাদ রহিম ভাই! 🎊' },
];

const MainLanding: React.FC<MainLandingProps> = ({ onTenantLogin }) => {
  const [showModal, setShowModal] = useState(false);
  const [modalTab, setModalTab] = useState<'register' | 'login'>('register');
  const [scrolled, setScrolled] = useState(false);

  // API data from landing-data.php
  type PlanItem = { id: number; name: string; price: number; regular_price?: number; duration_days: number; features: string[]; display_features?: string[]; is_popular: boolean; };
  const [plans, setPlans] = useState<PlanItem[]>([]);
  const [trialDays, setTrialDays] = useState(14);
  const [landingLoaded, setLandingLoaded] = useState(false);
  // Logo/branding: empty until API returns — no default flash
  const [logoUrl, setLogoUrl] = useState('');
  const [faviconUrl, setFaviconUrl] = useState('');
  const [siteName, setSiteName] = useState('');

  // Fallback static plans (shown while loading or if API fails)
  const fallbackPlans: PlanItem[] = [
    { id: 1, name: 'মাসিক', price: 999, duration_days: 30, is_popular: false, features: ['৫টি পণ্য', 'অর্ডার ম্যানেজমেন্ট', 'মৌলিক বিশ্লেষণ', '১টি থিম', 'বিনামূল্যে সাবডোমেইন'] },
    { id: 2, name: '৩ মাস', price: 2799, regular_price: 3500, duration_days: 90, is_popular: true, features: ['সীমাহীন পণ্য', 'উন্নত অর্ডার', 'পূর্ণ বিশ্লেষণ', '৫টি থিম', 'এআই মেসেঞ্জার', 'কুপন সিস্টেম'] },
    { id: 3, name: '৬ মাস', price: 5299, regular_price: 7000, duration_days: 180, is_popular: false, features: ['৩ মাসের সব সুবিধা', 'প্রায়রিটি সাপোর্ট', 'কাস্টম ডোমেইন', 'ল্যান্ডিং পেজ'] },
    { id: 4, name: 'বার্ষিক', price: 9999, regular_price: 15000, duration_days: 365, is_popular: false, features: ['৬ মাসের সব সুবিধা', 'হোয়াইট লেবেল', 'API অ্যাক্সেস', 'ডেডিকেটেড সাপোর্ট'] },
  ];

  const displayPlans = landingLoaded && plans.length > 0 ? plans : fallbackPlans;

  // Chat state
  const [chatIdx, setChatIdx] = useState(0);
  const [typing, setTyping] = useState(false);
  const [orderDone, setOrderDone] = useState(false);
  const [chatStarted, setChatStarted] = useState(false);
  const chatWindowRef = useRef<HTMLDivElement>(null);
  const { ref: chatRef, inView: chatVisible } = useInView(0.3);

  // Analytics counters
  const { ref: analyticsRef, inView: analyticsVisible } = useInView();
  const pageViews = useCountUp(24890, 2200, analyticsVisible);
  const addToCart = useCountUp(3241, 2000, analyticsVisible);
  const checkout = useCountUp(1892, 1800, analyticsVisible);
  const revenue = useCountUp(89200, 2500, analyticsVisible);

  // Analytics card — live chart bars + recent orders feed
  const CHART_BASE = [42, 58, 35, 70, 52, 80, 65, 90, 73, 85, 62, 95];
  const [chartBars, setChartBars] = useState(CHART_BASE);
  const RECENT_ORDERS = [
    { name: 'রহিম উদ্দিন', item: 'বাটিক শাড়ি', amt: '৳১,২৯৯', status: 'সম্পন্ন', color: '#10B981' },
    { name: 'সুমাইয়া আক্তার', item: 'পাঞ্জাবি', amt: '৳৮৯৯', status: 'প্রক্রিয়াধীন', color: '#F59E0B' },
    { name: 'তারেক হোসেন', item: 'থ্রি-পিস', amt: '৳১,৫৯৯', status: 'সম্পন্ন', color: '#10B981' },
    { name: 'নাজমা বেগম', item: 'শাড়ি প্যাক', amt: '৳২,৪৯৯', status: 'নতুন', color: '#4F46E5' },
    { name: 'আরিফ হোসেন', item: 'কুর্তা', amt: '৳৬৯৯', status: 'নতুন', color: '#4F46E5' },
    { name: 'ফাহিম রহমান', item: 'শার্ট', amt: '৳৪৯৯', status: 'সম্পন্ন', color: '#10B981' },
  ];
  const [visibleOrders, setVisibleOrders] = useState(RECENT_ORDERS.slice(0, 3));
  const [orderRotIdx, setOrderRotIdx] = useState(3);
  const recentOrdersRef = React.useRef(RECENT_ORDERS);
  useEffect(() => {
    const t = setInterval(() => {
      setChartBars(prev => [...prev.slice(1), Math.floor(Math.random() * 40 + 55)]);
      setOrderRotIdx(i => {
        const next = i + 1;
        const newOrder = recentOrdersRef.current[next % recentOrdersRef.current.length];
        setVisibleOrders(prev => [newOrder, ...prev.slice(0, 2)]);
        return next;
      });
    }, 2200);
    return () => clearInterval(t);
  }, []);

  // Dashboard hero counters
  const { ref: heroRef, inView: heroVisible } = useInView(0.1);
  const heroRev = useCountUp(124500, 2000, heroVisible);
  const heroOrd = useCountUp(1560, 1800, heroVisible);
  const heroCon = useCountUp(89, 1600, heroVisible);

  // Stats counters
  const { ref: statsRef, inView: statsVisible } = useInView();
  const storeCount = useCountUp(13493, 2000, statsVisible);
  const ordersCount = useCountUp(86, 1800, statsVisible);
  const revenueCount = useCountUp(2350, 2200, statsVisible);
  const happyCount = useCountUp(9800, 1500, statsVisible);

  // ── Showcase card animations ──────────────────────────────
  const THEMES = [
    { color: '#4F46E5', name: 'ক্লাসিক', bg: 'linear-gradient(90deg,#4F46E5,#2563EB)' },
    { color: '#10B981', name: 'ফ্রেশ', bg: 'linear-gradient(90deg,#10B981,#059669)' },
    { color: '#F59E0B', name: 'সোনালী', bg: 'linear-gradient(90deg,#F59E0B,#F97316)' },
    { color: '#EC4899', name: 'রোজ', bg: 'linear-gradient(90deg,#EC4899,#DB2777)' },
    { color: '#1E293B', name: 'ডার্ক', bg: 'linear-gradient(90deg,#1E293B,#334155)' },
  ];
  const [themeIdx, setThemeIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setThemeIdx(i => (i + 1) % THEMES.length), 2200);
    return () => clearInterval(t);
  }, []);

  // Post card — live counters
  const [postLikes, setPostLikes] = useState(1243);
  const [postComments, setPostComments] = useState(84);
  const [postNewComment, setPostNewComment] = useState('');
  const POST_COMMENTS = ['দাম কত?😍', 'ইনবক্সে দিন 🙏', 'কি সুন্দর! ❤️', 'অর্ডার করব', 'কালার আছে?'];
  const [postCIdx, setPostCIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => {
      setPostLikes(v => v + Math.floor(Math.random() * 4 + 1));
      if (Math.random() > 0.4) {
        setPostComments(v => v + 1);
        setPostNewComment(POST_COMMENTS[postCIdx % POST_COMMENTS.length]);
        setPostCIdx(i => i + 1);
        setTimeout(() => setPostNewComment(''), 1800);
      }
    }, 2400);
    return () => clearInterval(t);
  }, [postCIdx]);

  // Landing page card — orders notification
  const LP_NAMES = ['রহিম ভাই', 'সুমাইয়া', 'তারেক', 'নাজমা আপু', 'আরিফ', 'ফাহিম'];
  const [lpNotifs, setLpNotifs] = useState<string[]>([]);
  const [lpNIdx, setLpNIdx] = useState(0);
  const [lpStock, setLpStock] = useState(12);
  useEffect(() => {
    const t = setInterval(() => {
      setLpNotifs(prev => [...prev.slice(-1), LP_NAMES[lpNIdx % LP_NAMES.length]]);
      setLpNIdx(i => i + 1);
      setLpStock(s => s > 3 ? s - 1 : 12);
    }, 2000);
    return () => clearInterval(t);
  }, [lpNIdx]);

  // QR card — scan animation
  const [qrScanning, setQrScanning] = useState(false);
  const [qrDone, setQrDone] = useState(false);
  const [qrScanCount, setQrScanCount] = useState(47);
  useEffect(() => {
    const loop = () => {
      setQrScanning(true); setQrDone(false);
      setTimeout(() => { setQrDone(true); setQrScanning(false); setQrScanCount(c => c + 1); }, 1400);
    };
    loop();
    const t = setInterval(loop, 3200);
    return () => clearInterval(t);
  }, []);

  // Scroll
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);

  // Fetch landing data from API — no localStorage, clean every load
  useEffect(() => {
    fetch('/api/landing-data')
      .then(r => r.json())
      .then(d => {
        if (d.success) {
          if (Array.isArray(d.plans) && d.plans.length > 0) setPlans(d.plans);
          if (d.trial_days) setTrialDays(Number(d.trial_days));
          if (d.logo_url) setLogoUrl(d.logo_url);
          if (d.favicon_url) setFaviconUrl(d.favicon_url);
          if (d.site_name) setSiteName(d.site_name);
        }
        setLandingLoaded(true);
      })
      .catch(() => setLandingLoaded(true));
  }, []);

  // Dynamically update favicon & page title when API returns values
  useEffect(() => {
    if (faviconUrl) {
      let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
      if (!link) {
        link = document.createElement('link');
        link.rel = 'icon';
        document.head.appendChild(link);
      }
      link.href = faviconUrl;
    }
    if (siteName) document.title = siteName + ' — বাংলাদেশের সেরা ই-কমার্স প্ল্যাটফর্ম';
  }, [faviconUrl, siteName]);

  // Chat animation
  useEffect(() => {
    if (chatVisible && !chatStarted) setChatStarted(true);
  }, [chatVisible, chatStarted]);

  useEffect(() => {
    if (!chatStarted || chatIdx >= CHAT_SCRIPT.length) {
      if (chatStarted && chatIdx >= CHAT_SCRIPT.length) {
        const t = setTimeout(() => setOrderDone(true), 800);
        return () => clearTimeout(t);
      }
      return;
    }
    let t1: ReturnType<typeof setTimeout>;
    let t2: ReturnType<typeof setTimeout> | undefined;
    // Pause after previous message so user can "read" it, then show typing
    const readPause = chatIdx === 0 ? 400 : 800;
    const typingMs = CHAT_SCRIPT[chatIdx].from === 'bot' ? 1500 : 1000;
    t1 = setTimeout(() => {
      setTyping(true);
      t2 = setTimeout(() => {
        setTyping(false);
        setChatIdx(i => i + 1);
      }, typingMs);
    }, readPause);
    return () => { clearTimeout(t1); if (t2 !== undefined) clearTimeout(t2); };
  }, [chatStarted, chatIdx]);

  // Internal scroll — does NOT move the page
  useEffect(() => {
    if (!chatStarted) return;
    if (chatWindowRef.current) {
      chatWindowRef.current.scrollTop = chatWindowRef.current.scrollHeight;
    }
  }, [chatStarted, chatIdx, typing, orderDone]);

  const openRegister = () => { setModalTab('register'); setShowModal(true); };
  const openLogin = () => { setModalTab('login'); setShowModal(true); };

  return (
    <div style={{ fontFamily: "'Inter','Hind Siliguri',sans-serif", minHeight: '100vh', overflowX: 'hidden', background: 'linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 30%, #E0E7FF 70%, #D8E2FF 100%)', position: 'relative' }}>

      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Hind+Siliguri:wght@400;500;600;700&display=swap');
        .ml-blob{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px);}
        .glass{background:rgba(255,255,255,.62);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 32px rgba(99,102,241,.08),inset 0 1px 0 rgba(255,255,255,1);transition:box-shadow .3s ease;will-change:transform;}
        .glass:hover{box-shadow:0 20px 60px rgba(99,102,241,.14),inset 0 1px 0 rgba(255,255,255,1);}
        .gs{background:rgba(255,255,255,.62);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 32px rgba(99,102,241,.08),inset 0 1px 0 rgba(255,255,255,1);}
        .shine::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent);border-radius:9999px;}
        .bp{background:linear-gradient(135deg,#4F46E5,#2563EB);box-shadow:0 8px 24px rgba(79,70,229,.35),inset 0 1px 0 rgba(255,255,255,.18);color:#fff;font-weight:700;border:none;cursor:pointer;transition:transform .22s,box-shadow .22s;font-family:inherit;will-change:transform;}
        .bp:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(79,70,229,.45);}
        .bs{background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,1);box-shadow:0 4px 14px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,1);font-weight:700;cursor:pointer;color:#374151;transition:transform .22s,box-shadow .22s;font-family:inherit;will-change:transform;}
        .bs:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.1);}
        .t3d{transition:box-shadow .3s ease;will-change:transform;}
        .t3d:hover{box-shadow:0 16px 40px rgba(99,102,241,.12);}
        .tdt{display:inline-block;width:7px;height:7px;border-radius:50%;background:#94a3b8;margin:0 2px;animation:boun 1.2s infinite;}
        .tdt:nth-child(2){animation-delay:.2s;}.tdt:nth-child(3){animation-delay:.4s;}
        @keyframes boun{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
        @keyframes popIn{0%{opacity:0;transform:scale(.6) translateY(20px)}70%{transform:scale(1.08) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
        .opop{animation:popIn .55s cubic-bezier(.23,1,.32,1) forwards;}
        @keyframes cfFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(80px) rotate(360deg)}}
        .cfd{position:absolute;width:8px;height:8px;border-radius:2px;animation:cfFall .9s ease-out forwards;}
        @keyframes barG{from{height:0}to{height:var(--h)}}
        .cbar{animation:barG .7s ease-out forwards;}
        @keyframes puls{0%,100%{opacity:1}50%{opacity:.5}}
        .plive{animation:puls 2s infinite;}
        @keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
        .msg-in{animation:msgIn .35s cubic-bezier(.23,1,.32,1) both;}
        .plan-pop{background:linear-gradient(160deg,#4F46E5,#2563EB,#0EA5E9);box-shadow:0 20px 60px rgba(79,70,229,.4),inset 0 1px 0 rgba(255,255,255,.15);}
        @media(max-width:768px){
          .hide-mobile{display:none!important;}
          .stack-mobile{flex-direction:column!important;grid-template-columns:1fr!important;}
          .p-mobile{padding:16px!important;}
          .text-sm-mobile{font-size:14px!important;}
          .nav-logo-img{height:36px!important;max-width:120px!important;}
          .nav-logo-box{width:36px!important;height:36px!important;font-size:16px!important;}
          .nav-logo-text{font-size:18px!important;}
          section{padding-left:16px!important;padding-right:16px!important;}
        }
        @media(min-width:1440px){
          .hero-title{font-size:72px!important;}
          .hero-subtitle{font-size:22px!important;}
          .section-title{font-size:48px!important;}
          .feature-card{padding:40px!important;}
        }
        @media(min-width:1920px){
          .hero-title{font-size:84px!important;}
        }
        @keyframes marqueeLTR{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
        @keyframes marqueeRTL{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
        .mq-wrap{overflow:hidden;width:100%;}
        .mq-track{display:flex;width:max-content;will-change:transform;}
        .mq-ltr{animation:marqueeLTR 30s linear infinite;}
        .mq-rtl{animation:marqueeRTL 30s linear infinite;}
        .mq-ltr:hover,.mq-rtl:hover{animation-play-state:paused;}
        .mq-logo-item{display:flex;align-items:center;padding:0 20px;white-space:nowrap;}
        .mq-logo-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:12px;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,1);box-shadow:0 2px 10px rgba(0,0,0,.06);font-weight:700;font-size:14px;white-space:nowrap;}
        .mq-logo-badge img{height:26px;max-width:80px;object-fit:contain;filter:grayscale(.3);}
        .mq-txt-item{display:inline-flex;align-items:center;padding:0 20px;font-size:14px;font-weight:700;color:rgba(99,102,241,.5);white-space:nowrap;letter-spacing:.5px;}
        /* Premium fade-edge masks — both sides */
        .mq-fade-ltr{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);}
        .mq-fade-rtl{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);}
        @keyframes movingFlowDash {
          to { stroke-dashoffset: -24; }
        }
        .flow-line {
          stroke-dasharray: 12 12;
          animation: movingFlowDash 1s linear infinite;
        }
        @keyframes qrScan {
          0%{top:0;opacity:.9} 100%{top:100%;opacity:.3}
        }
        .qr-scan-line {
          position:absolute;left:0;right:0;height:3px;
          background:linear-gradient(90deg,transparent,#4F46E5,#7C3AED,transparent);
          border-radius:2px;box-shadow:0 0 10px rgba(79,70,229,.8);
          animation:qrScan 1.4s ease-in-out;
        }
        @keyframes notifPop {
          0%{transform:translateY(10px) scale(.92);opacity:0}
          20%{transform:translateY(0) scale(1);opacity:1}
          80%{transform:translateY(0) scale(1);opacity:1}
          100%{transform:translateY(-6px) scale(.96);opacity:0}
        }
        .notif-pop { animation: notifPop 1.8s ease forwards; }
        @keyframes themeFade {
          0%{opacity:0;transform:scale(.96)} 100%{opacity:1;transform:scale(1)}
        }
        .theme-fade { animation: themeFade .4s ease forwards; }
      `}</style>

      {/* Hero Section Dynamic Background (Mimicking Screenshot) */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '130vh', overflow: 'hidden', zIndex: 0, pointerEvents: 'none' }}>
        {/* Soft glowing color blobs */}
        <div style={{ position: 'absolute', bottom: '0%', right: '-5%', width: '70vw', height: '70vw', minWidth: 600, background: 'radial-gradient(circle, rgba(139,161,250,0.6) 0%, transparent 65%)', filter: 'blur(90px)' }} />
        <div style={{ position: 'absolute', top: '-10%', right: '10%', width: '60vw', height: '60vw', minWidth: 500, background: 'radial-gradient(circle, rgba(165,180,252,0.45) 0%, transparent 60%)', filter: 'blur(90px)' }} />
        <div style={{ position: 'absolute', top: '20%', left: '30%', width: '50vw', height: '50vw', minWidth: 400, background: 'radial-gradient(circle, rgba(199,210,254,0.3) 0%, transparent 70%)', filter: 'blur(80px)' }} />

        {/* Glowing elegant intersecting white waves/curves on the left */}
        <div style={{ position: 'absolute', top: '-20%', left: '-15vw', width: '65vw', height: '140vh', minWidth: 600, border: '2px solid rgba(255,255,255,0.7)', borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%', boxShadow: 'inset 80px 0 150px rgba(255,255,255,0.9), 0 0 30px rgba(255,255,255,0.4)', background: 'linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%)', opacity: 0.95, transform: 'rotate(12deg)' }} />
        <div style={{ position: 'absolute', top: '-15%', left: '-10vw', width: '60vw', height: '130vh', minWidth: 550, border: '1.5px solid rgba(255,255,255,0.5)', borderRadius: '50% 50% 50% 50% / 55% 55% 45% 45%', opacity: 0.8, transform: 'rotate(16deg)' }} />

        {/* Diagonal intersecting subtle white line */}
        <svg style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0.6 }} preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100">
          <path d="M-20,120 Q60,60 120,-30" fill="none" stroke="#ffffff" strokeWidth="0.25" />
          <path d="M-10,130 Q70,70 130,-20" fill="none" stroke="#ffffff" strokeWidth="0.1" opacity="0.6" />
        </svg>
      </div>

      {/* Global Ambient Fixed Blobs for lower scroll */}
      <div className="ml-blob" style={{ top: '45%', right: '-10%', width: 700, height: 700, background: 'radial-gradient(circle,rgba(110,231,183,.08) 0%,transparent 70%)' }} />
      <div className="ml-blob" style={{ bottom: '10%', left: '5%', width: 600, height: 600, background: 'radial-gradient(circle,rgba(139,161,250,.1) 0%,transparent 70%)' }} />

      {/* ═══ NAV ═══════════════════════════════════════════════ */}
      <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, transition: 'all .3s', background: scrolled ? 'rgba(255,255,255,.82)' : 'transparent', backdropFilter: scrolled ? 'blur(24px)' : 'none', borderBottom: scrolled ? '1px solid rgba(255,255,255,.85)' : 'none', boxShadow: scrolled ? '0 4px 20px rgba(99,102,241,.07)' : 'none' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 32px', height: 68, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button
            onClick={() => window.location.reload()}
            style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'none', border: 'none', cursor: 'pointer', padding: 0, textDecoration: 'none' }}
            title="মূল পাতায় ফিরুন"
          >
            {/* Logo: invisible until API returns, then show correct branding */}
            {!landingLoaded ? (
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'transparent' }} />
            ) : logoUrl ? (
              <img src={logoUrl} alt={siteName || 'ShophyFast'} className="nav-logo-img" style={{ height: 72, maxWidth: 220, objectFit: 'contain', borderRadius: 10 }} />
            ) : (
              <>
                <div className="nav-logo-box" 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 className="nav-logo-text" style={{ fontSize: 28, fontWeight: 900, color: '#111827' }}>ShophyFast</span>
              </>
            )}
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28 }} className="hide-mobile">
            {[['বৈশিষ্ট্য', '#features'], ['মূল্য', '#pricing'], ['জিজ্ঞাসা', '/faq'], ['যোগাযোগ', '#contact']].map(([l, h]) => (
              <a key={l} href={h} style={{ fontSize: 14, fontWeight: 500, color: '#6B7280', textDecoration: 'none', transition: 'color .2s' }}
                onMouseEnter={e => (e.currentTarget.style.color = '#4F46E5')} onMouseLeave={e => (e.currentTarget.style.color = '#6B7280')}>{l}</a>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button id="nav-login" onClick={openLogin} style={{ fontSize: 14, fontWeight: 600, color: '#6B7280', background: 'none', border: 'none', cursor: 'pointer', padding: '8px 16px', fontFamily: 'inherit' }}>প্রবেশ করুন</button>
            <button id="nav-register" onClick={openRegister} className="bp" style={{ fontSize: 14, padding: '10px 22px', borderRadius: 12 }}>শুরু করুন →</button>
          </div>
        </div>
      </nav>

      {/* ═══ HERO ═══════════════════════════════════════════════ */}
      <section style={{ padding: '140px 32px 80px', position: 'relative', zIndex: 1, minHeight: '100vh', display: 'flex', alignItems: 'center' }} ref={heroRef}>
        <div style={{ maxWidth: 1440, margin: '0 auto', width: '100%' }}>

          {/* Two-column layout */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="stack-mobile">

            {/* LEFT — copy */}
            <div>
              {/* Live badge */}
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 24, padding: '8px 18px', borderRadius: 999, background: 'rgba(238,242,255,.95)', border: '1px solid rgba(165,180,252,.5)', boxShadow: '0 4px 16px rgba(99,102,241,.12)', backdropFilter: 'blur(12px)', fontSize: 13, fontWeight: 600, color: '#4338CA' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#22C55E', boxShadow: '0 0 8px rgba(74,222,128,.8)', display: 'inline-block' }} className="plive" />
                🇧🇩 বাংলাদেশের নং ১ ই-কমার্স প্ল্যাটফর্ম
              </div>

              {/* Headline */}
              <h1 className="hero-title" style={{ fontSize: 'clamp(36px,4.5vw,68px)', fontWeight: 900, lineHeight: 1.1, color: '#0F172A', marginBottom: 10, letterSpacing: '-2px' }}>
                আপনার ব্যবসাকে<br />
                <span style={{ background: 'linear-gradient(135deg,#4F46E5 0%,#7C3AED 35%,#2563EB 65%,#0EA5E9 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text', display: 'inline-block' }}>
                  অনলাইনে নিয়ে যান
                </span>
              </h1>
              <h2 style={{ fontSize: 'clamp(18px,2vw,26px)', fontWeight: 700, color: '#6366F1', marginBottom: 20, letterSpacing: '-0.5px' }}>
                মাত্র ১ মিনিটে • বিনামূল্যে • কোনো কোডিং ছাড়াই
              </h2>

              {/* Sub-text */}
              <p className="hero-subtitle" style={{ fontSize: 17, color: '#475569', maxWidth: 520, lineHeight: 1.75, marginBottom: 32 }}>
                পণ্য যোগ করুন, অর্ডার পরিচালনা করুন, AI মেসেঞ্জার বট চালু করুন — সব এক জায়গায়। হাজারো বাংলাদেশি উদ্যোক্তার বিশ্বস্ত পছন্দ।
              </p>

              {/* Feature bullets */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
                {[
                  { icon: '🤖', text: 'AI মেসেঞ্জার বট — ২৪/৭ স্বয়ংক্রিয় অর্ডার গ্রহণ' },
                  { icon: '🎨', text: '৫টি প্রিমিয়াম থিম — ১ ক্লিকে পরিবর্তন করুন' },
                  { icon: '📊', text: 'রিয়েল-টাইম বিক্রয় বিশ্লেষণ ড্যাশবোর্ড' },
                  { icon: '🔲', text: 'প্রতিটি পণ্যে QR কোড ও ল্যান্ডিং পেজ' },
                ].map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(79,70,229,.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, flexShrink: 0 }}>{f.icon}</div>
                    <span style={{ fontSize: 14, color: '#334155', fontWeight: 500 }}>{f.text}</span>
                  </div>
                ))}
              </div>

              {/* CTAs */}
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 24, alignItems: 'center' }}>
                <button id="hero-start" onClick={openRegister} className="bp shine" style={{ padding: '16px 36px', borderRadius: 16, fontSize: 16, fontWeight: 800, boxShadow: '0 8px 30px rgba(79,70,229,.4)', position: 'relative', overflow: 'hidden' }}>
                  🚀 বিনামূল্যে শুরু করুন
                </button>
                <button id="hero-demo" onClick={() => window.open('https://demo.shophyfast.com', '_blank')} className="bs" style={{ padding: '16px 32px', borderRadius: 16, fontSize: 16 }}>
                  ▶ লাইভ ডেমো দেখুন
                </button>
              </div>

              {/* Social proof */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ display: 'flex' }}>
                  {['#4F46E5', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'].map((c, i) => (
                    <div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: `linear-gradient(135deg,${c},${c}cc)`, border: '2px solid #fff', marginLeft: i === 0 ? 0 : -8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: '#fff', fontWeight: 700 }}>
                      {['র', 'স', 'ত', 'ন', 'আ'][i]}
                    </div>
                  ))}
                </div>
                <div>
                  <div style={{ display: 'flex', gap: 1 }}>{[1, 2, 3, 4, 5].map(s => <span key={s} style={{ color: '#FBBF24', fontSize: 12 }}>★</span>)}</div>
                  <div style={{ fontSize: 12, color: '#64748B', fontWeight: 500 }}>১৩,০০০+ উদ্যোক্তা ব্যবহার করছেন</div>
                </div>
                <div style={{ width: 1, height: 32, background: '#E2E8F0' }} />
                <div style={{ fontSize: 12, color: '#64748B' }}>✅ ক্রেডিট কার্ড লাগবে না</div>
              </div>
            </div>

            {/* RIGHT — animated dashboard preview */}
            <div style={{ position: 'relative', perspective: 1400 }} className="hide-mobile">
              {/* Floating glow orbs behind the card */}
              <div style={{ position: 'absolute', top: -60, right: -60, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle,rgba(79,70,229,.2),transparent)', pointerEvents: 'none', filter: 'blur(40px)' }} />
              <div style={{ position: 'absolute', bottom: -40, left: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle,rgba(14,165,233,.18),transparent)', pointerEvents: 'none', filter: 'blur(30px)' }} />

              {/* Floating badges */}
              <div className="msg-in" style={{ position: 'absolute', top: -16, left: -20, zIndex: 10, background: 'rgba(16,185,129,.95)', borderRadius: 14, padding: '8px 14px', boxShadow: '0 8px 24px rgba(16,185,129,.35)', display: 'flex', alignItems: 'center', gap: 7, backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,.3)' }}>
                <span style={{ fontSize: 16 }}>🎉</span>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 800, color: '#fff' }}>নতুন অর্ডার!</div>
                  <div style={{ fontSize: 9, color: 'rgba(255,255,255,.8)' }}>রহিম ভাই · ৳১,২৯৯</div>
                </div>
              </div>
              <div style={{ position: 'absolute', bottom: 20, right: -24, zIndex: 10, background: 'rgba(79,70,229,.95)', borderRadius: 14, padding: '8px 14px', boxShadow: '0 8px 24px rgba(79,70,229,.35)', display: 'flex', alignItems: 'center', gap: 7, backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,.2)' }}>
                <span style={{ fontSize: 16 }}>📈</span>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 800, color: '#fff' }}>বিক্রি বেড়েছে</div>
                  <div style={{ fontSize: 9, color: 'rgba(255,255,255,.8)' }}>↑ +৩৪% এই মাসে</div>
                </div>
              </div>

              {/* Main dashboard card */}
              <div className="t3d gs shine" style={{ borderRadius: 28, padding: 24, position: 'relative', overflow: 'hidden', transformStyle: 'preserve-3d', boxShadow: '0 40px 100px rgba(79,70,229,.2), 0 0 0 1px rgba(255,255,255,.9)' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg,rgba(79,70,229,.05),rgba(14,165,233,.03))', borderRadius: 28, pointerEvents: 'none' }} />

                {/* browser bar */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                  {['#F87171', '#FBBF24', '#34D399'].map((c, i) => <div key={i} style={{ width: 10, height: 10, borderRadius: '50%', background: c, boxShadow: `0 0 6px ${c}88` }} />)}
                  <div style={{ flex: 1, marginLeft: 10, padding: '4px 14px', borderRadius: 8, background: 'rgba(243,244,246,.95)', border: '1px solid rgba(229,231,235,.9)', fontSize: 11, color: '#9CA3AF', textAlign: 'center' }}>dashboard.shophyfast.com</div>
                </div>

                {/* KPI tiles */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginBottom: 14 }}>
                  {[
                    { label: 'মোট আয়', value: `৳${heroRev.toLocaleString()}`, pct: 75, color: '#10B981', bg: 'rgba(16,185,129,.08)', icon: '💰' },
                    { label: 'অর্ডার', value: heroOrd.toLocaleString(), pct: 55, color: '#4F46E5', bg: 'rgba(79,70,229,.08)', icon: '📦' },
                    { label: 'রূপান্তর', value: `${heroCon}%`, pct: heroCon, color: '#0EA5E9', bg: 'rgba(14,165,233,.08)', icon: '🎯' },
                  ].map((s, i) => (
                    <div key={i} style={{ background: s.bg, borderRadius: 14, padding: '12px 14px', border: '1px solid rgba(255,255,255,.9)', position: 'relative', overflow: 'hidden' }}>
                      <div style={{ fontSize: 14, marginBottom: 4 }}>{s.icon}</div>
                      <div style={{ fontSize: 10, color: '#9CA3AF', marginBottom: 3 }}>{s.label}</div>
                      <div style={{ fontSize: 18, fontWeight: 900, color: s.color, fontVariantNumeric: 'tabular-nums' }}>{s.value}</div>
                      <div style={{ marginTop: 8, height: 4, borderRadius: 99, background: 'rgba(0,0,0,.06)' }}>
                        <div style={{ height: '100%', width: `${s.pct}%`, borderRadius: 99, background: `linear-gradient(90deg,${s.color},${s.color}99)`, boxShadow: `0 0 6px ${s.color}55`, transition: 'width 2s ease' }} />
                      </div>
                    </div>
                  ))}
                </div>

                {/* bar chart */}
                <div style={{ background: 'rgba(248,250,252,.95)', borderRadius: 16, padding: '14px 16px', border: '1px solid rgba(255,255,255,.95)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                    <span style={{ fontSize: 11, fontWeight: 700, color: '#374151' }}>মাসিক আয় বিশ্লেষণ</span>
                    <span style={{ fontSize: 10, color: '#10B981', fontWeight: 700 }}>↑ +৩৪%</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 72 }}>
                    {[35, 50, 42, 68, 55, 80, 62, 75, 58, 90, 72, 100].map((h, i) => (
                      <div key={i} className="cbar" style={{ flex: 1, borderRadius: '4px 4px 0 0', background: i === 11 ? 'linear-gradient(180deg,#818CF8,#4F46E5)' : `rgba(99,102,241,${.1 + i * .055})`, height: `${h}%`, boxShadow: i === 11 ? '0 0 12px rgba(79,70,229,.5)' : 'none', transition: 'height .4s ease' } as React.CSSProperties} />
                    ))}
                  </div>
                  <div style={{ display: 'flex', marginTop: 6 }}>
                    {['জা', 'ফে', 'মা', 'এ', 'মে', 'জু', 'জু', 'আ', 'সে', 'অ', 'ন', 'ডি'].map((m, i) => (
                      <span key={i} style={{ flex: 1, textAlign: 'center', fontSize: 9, color: '#9CA3AF' }}>{m}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* ═══ FEATURES ═══════════════════════════════════════════ */}
      <section id="features" style={{ padding: '120px 32px', position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1440, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 60 }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#4F46E5', textTransform: 'uppercase', letterSpacing: 4, background: 'rgba(238,242,255,.95)', padding: '6px 16px', borderRadius: 99, border: '1px solid rgba(165,180,252,.4)' }}>প্ল্যাটফর্ম</span>
            <h2 style={{ fontSize: 'clamp(26px,4vw,42px)', fontWeight: 900, color: '#0F172A', marginTop: 16, marginBottom: 8 }}>অনলাইনে বিক্রির জন্য যা দরকার</h2>
            <p style={{ color: '#6B7280', fontSize: 16 }}>আপনার ই-কমার্স তৈরি, পরিচালনা ও বৃদ্ধির সব সরঞ্জাম এক জায়গায়</p>
          </div>

          {/* Big 2-col grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 24, marginBottom: 22 }}>

            {/* Analytics Card — Full Admin Dashboard Mockup */}
            <div ref={analyticsRef} className="t3d glass shine" style={{ borderRadius: 28, padding: 28, position: 'relative', overflow: 'hidden', border: '1px solid rgba(255,255,255,.9)', boxShadow: '0 24px 80px rgba(79,70,229,.14)' }}>
              {/* Header */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 14, background: 'linear-gradient(135deg,#4F46E5,#0EA5E9)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, boxShadow: '0 6px 20px rgba(79,70,229,.35)', flexShrink: 0 }}>📊</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 900, fontSize: 15, color: '#0F172A' }}>রিয়েল-টাইম ড্যাশবোর্ড</div>
                  <div style={{ fontSize: 11, color: '#4F46E5', fontWeight: 600 }}>লাইভ ডেটা আপডেট হচ্ছে</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: 'rgba(16,185,129,.1)', border: '1px solid rgba(16,185,129,.25)', borderRadius: 8, padding: '3px 8px' }}>
                  <span className="plive" style={{ width: 6, height: 6, borderRadius: '50%', background: '#10B981', boxShadow: '0 0 6px #10B981', display: 'inline-block' }} />
                  <span style={{ fontSize: 9, fontWeight: 700, color: '#059669' }}>লাইভ</span>
                </div>
              </div>

              {/* Mini Admin Dashboard */}
              <div style={{ background: '#0F172A', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,.05)', boxShadow: '0 8px 32px rgba(0,0,0,.25)' }}>

                {/* Dashboard top nav */}
                <div style={{ background: '#1E293B', padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid rgba(255,255,255,.06)' }}>
                  <div style={{ display: 'flex', gap: 4 }}>{['#ff5f57', '#febc2e', '#28c840'].map(c => <div key={c} style={{ width: 6, height: 6, borderRadius: '50%', background: c }} />)}</div>
                  <div style={{ flex: 1, display: 'flex', gap: 6, justifyContent: 'center' }}>
                    {['ড্যাশবোর্ড', 'পণ্য', 'অর্ডার', 'বিশ্লেষণ'].map((t, i) => (
                      <div key={t} style={{ fontSize: 8, fontWeight: i === 0 ? 700 : 500, color: i === 0 ? '#818CF8' : 'rgba(255,255,255,.4)', padding: '2px 6px', borderRadius: 4, background: i === 0 ? 'rgba(79,70,229,.2)' : 'transparent', cursor: 'pointer' }}>{t}</div>
                    ))}
                  </div>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'linear-gradient(135deg,#4F46E5,#2563EB)' }} />
                </div>

                <div style={{ padding: '10px 12px' }}>
                  {/* 4 KPI tiles */}
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 6, marginBottom: 10 }}>
                    {[
                      { label: 'আয়', val: '৳' + revenue.toLocaleString(), change: '+১২%', color: '#818CF8', bg: 'rgba(79,70,229,.15)', icon: '💰' },
                      { label: 'অর্ডার', val: addToCart.toLocaleString(), change: '+৮%', color: '#34D399', bg: 'rgba(16,185,129,.12)', icon: '📦' },
                      { label: 'ভিজিটর', val: pageViews.toLocaleString(), change: '+২৩%', color: '#38BDF8', bg: 'rgba(14,165,233,.12)', icon: '👁' },
                      { label: 'কনভার্ট', val: '৩.২%', change: '+০.৪%', color: '#FBBF24', bg: 'rgba(245,158,11,.12)', icon: '🎯' },
                    ].map((kpi, ki) => (
                      <div key={ki} style={{ background: kpi.bg, borderRadius: 8, padding: '6px 7px', border: `1px solid ${kpi.color}22` }}>
                        <div style={{ fontSize: 10, marginBottom: 1 }}>{kpi.icon}</div>
                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,.5)', marginBottom: 1 }}>{kpi.label}</div>
                        <div style={{ fontSize: 10, fontWeight: 900, color: '#F8FAFC', fontVariantNumeric: 'tabular-nums' }}>{kpi.val}</div>
                        <div style={{ fontSize: 7, fontWeight: 700, color: kpi.color, marginTop: 1 }}>↑ {kpi.change}</div>
                      </div>
                    ))}
                  </div>

                  {/* Live bar chart */}
                  <div style={{ background: 'rgba(255,255,255,.03)', borderRadius: 10, padding: '8px 10px', marginBottom: 10, border: '1px solid rgba(255,255,255,.06)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 8, color: 'rgba(255,255,255,.5)', fontWeight: 600 }}>বিক্রয় চার্ট (লাইভ)</span>
                      <span style={{ fontSize: 8, color: '#818CF8', fontWeight: 700 }}>এই মাস</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 44 }}>
                      {chartBars.map((h, bi) => (
                        <div key={bi} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
                          <div style={{
                            width: '100%', height: `${h}%`,
                            background: bi === chartBars.length - 1
                              ? 'linear-gradient(180deg,#A78BFA,#6366F1)'
                              : `rgba(99,102,241,${0.3 + (h / 100) * 0.5})`,
                            borderRadius: '3px 3px 0 0',
                            transition: 'height .5s cubic-bezier(.4,0,.2,1)',
                            boxShadow: bi === chartBars.length - 1 ? '0 0 8px rgba(167,139,250,.6)' : 'none',
                          }} />
                        </div>
                      ))}
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 3 }}>
                      {['জান', 'ফেব', 'মার', 'এপ্র', 'মে', 'জুন', 'জুল', 'আগ', 'সেপ', 'অক্ট', 'নভ', 'ডিস'].map(m => (
                        <div key={m} style={{ fontSize: 6, color: 'rgba(255,255,255,.25)', flex: 1, textAlign: 'center' }}>{m}</div>
                      ))}
                    </div>
                  </div>

                  {/* Live recent orders */}
                  <div style={{ background: 'rgba(255,255,255,.03)', borderRadius: 10, padding: '7px 10px', border: '1px solid rgba(255,255,255,.06)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 8, color: 'rgba(255,255,255,.5)', fontWeight: 600 }}>সাম্প্রতিক অর্ডার</span>
                      <span className="plive" style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 7, color: '#34D399', fontWeight: 700 }}>
                        <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#34D399', display: 'inline-block' }} />লাইভ
                      </span>
                    </div>
                    {visibleOrders.map((o, oi) => (
                      <div key={`${o.name}-${oi}`} className="msg-in" style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 0', borderBottom: oi < 2 ? '1px solid rgba(255,255,255,.04)' : 'none' }}>
                        <div style={{ width: 20, height: 20, borderRadius: 6, background: `${o.color}22`, border: `1px solid ${o.color}44`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, flexShrink: 0 }}>🛒</div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 8, fontWeight: 700, color: '#F1F5F9', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{o.name}</div>
                          <div style={{ fontSize: 7, color: 'rgba(255,255,255,.4)' }}>{o.item}</div>
                        </div>
                        <div style={{ textAlign: 'right', flexShrink: 0 }}>
                          <div style={{ fontSize: 8, fontWeight: 800, color: '#F8FAFC' }}>{o.amt}</div>
                          <div style={{ fontSize: 7, color: o.color, fontWeight: 600, background: `${o.color}18`, padding: '1px 4px', borderRadius: 3, marginTop: 1 }}>{o.status}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* AI Chat Card */}
            <div ref={chatRef} className="t3d glass shine" style={{ borderRadius: 28, padding: 32, position: 'relative', overflow: 'hidden' }}>
              <div style={{ width: 48, height: 48, borderRadius: 16, background: 'linear-gradient(135deg,rgba(167,243,208,.28),rgba(52,211,153,.14))', border: '1px solid rgba(167,243,208,.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, marginBottom: 16 }}>🤖</div>
              <h3 style={{ fontSize: 19, fontWeight: 900, color: '#0F172A', marginBottom: 6 }}>এআই মেসেঞ্জার বট</h3>
              <p style={{ fontSize: 13, color: '#6B7280', marginBottom: 18, lineHeight: 1.6 }}>স্বয়ংক্রিয় ফেসবুক মেসেঞ্জার বাংলা রিপ্লাই — ঘুমিয়ে থাকলেও অর্ডার নেয়।</p>

              {/* Chat window — fixed height prevents card from growing and shaking */}
              <div
                ref={chatWindowRef}
                style={{
                  background: 'rgba(248,250,252,.85)',
                  borderRadius: 18,
                  padding: '12px 12px 8px',
                  border: '1px solid rgba(229,231,235,.7)',
                  height: 268,
                  overflowY: 'auto',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 7,
                  scrollBehavior: 'smooth',
                }}
              >
                {/* Messenger-style top header */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 10, borderBottom: '1px solid rgba(229,231,235,.6)', marginBottom: 4, flexShrink: 0 }}>
                  <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'linear-gradient(135deg,#4F46E5,#2563EB)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, boxShadow: '0 2px 8px rgba(79,70,229,.3)' }}>🤖</div>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 700, color: '#1E293B' }}>ShophyFast AI Bot</div>
                    <div style={{ fontSize: 10, color: '#22C55E', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}>
                      <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#22C55E', display: 'inline-block' }} />
                      অনলাইন
                    </div>
                  </div>
                </div>

                {/* Messages */}
                {CHAT_SCRIPT.slice(0, chatIdx).map((msg, i) => (
                  <div key={i} className="msg-in" style={{ display: 'flex', justifyContent: msg.from === 'bot' ? 'flex-start' : 'flex-end', alignItems: 'flex-end', gap: 6 }}>
                    {msg.from === 'bot' && (
                      <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'linear-gradient(135deg,#4F46E5,#2563EB)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, flexShrink: 0, boxShadow: '0 2px 6px rgba(79,70,229,.3)' }}>🤖</div>
                    )}
                    <div style={{ maxWidth: '76%', padding: '8px 12px', borderRadius: msg.from === 'bot' ? '16px 16px 16px 3px' : '16px 16px 3px 16px', fontSize: 12.5, lineHeight: 1.55, fontWeight: 500, background: msg.from === 'bot' ? 'linear-gradient(135deg,#4F46E5,#2563EB)' : 'rgba(255,255,255,.98)', color: msg.from === 'bot' ? '#fff' : '#374151', boxShadow: msg.from === 'bot' ? '0 3px 12px rgba(79,70,229,.28)' : '0 2px 6px rgba(0,0,0,.07)', border: msg.from === 'bot' ? 'none' : '1px solid rgba(229,231,235,.8)' }}>
                      {msg.msg}
                    </div>
                    {msg.from === 'customer' && (
                      <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'linear-gradient(135deg,#F59E0B,#F97316)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, flexShrink: 0 }}>👤</div>
                    )}
                  </div>
                ))}

                {/* Typing indicator */}
                {typing && chatIdx < CHAT_SCRIPT.length && (
                  <div className="msg-in" style={{ display: 'flex', justifyContent: CHAT_SCRIPT[chatIdx]?.from === 'bot' ? 'flex-start' : 'flex-end', alignItems: 'flex-end', gap: 6 }}>
                    {CHAT_SCRIPT[chatIdx]?.from === 'bot' && (
                      <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'linear-gradient(135deg,#4F46E5,#2563EB)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, flexShrink: 0 }}>🤖</div>
                    )}
                    <div style={{ padding: '9px 14px', borderRadius: 16, background: 'rgba(241,245,249,.95)', border: '1px solid rgba(229,231,235,.7)', display: 'flex', gap: 3, alignItems: 'center' }}>
                      <span className="tdt" /><span className="tdt" /><span className="tdt" />
                    </div>
                    {CHAT_SCRIPT[chatIdx]?.from === 'customer' && (
                      <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'linear-gradient(135deg,#F59E0B,#F97316)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, flexShrink: 0 }}>👤</div>
                    )}
                  </div>
                )}

                {/* Order confirmed celebration */}
                {orderDone && (
                  <div className="opop" style={{ position: 'relative', textAlign: 'center', padding: '12px 10px', borderRadius: 14, background: 'linear-gradient(135deg,rgba(16,185,129,.14),rgba(52,211,153,.08))', border: '2px solid rgba(167,243,208,.7)' }}>
                    {['#4F46E5', '#10B981', '#F59E0B', '#EF4444', '#0EA5E9'].map((c, i) => (
                      <div key={i} className="cfd" style={{ background: c, top: 0, left: `${15 + i * 18}%`, animationDelay: `${i * .1}s` }} />
                    ))}
                    <div style={{ fontSize: 26, marginBottom: 3 }}>🎊</div>
                    <div style={{ fontWeight: 900, color: '#059669', fontSize: 14 }}>অর্ডার নিশ্চিত হয়েছে!</div>
                    <div style={{ fontSize: 11, color: '#34D399', marginTop: 2 }}>গ্রাহক: রহিম উদ্দিন · ৳১,২৯৯</div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* ── 4 Animated Live Showcase Cards ──────────────────────── */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 24, marginTop: 28 }}>

            {/* ── 1. QR Code — live scan animation ──────────────── */}
            <div className="t3d glass shine" style={{ borderRadius: 28, padding: 28, position: 'relative', overflow: 'hidden', border: '1px solid rgba(255,255,255,.9)', boxShadow: '0 20px 60px rgba(79,70,229,.12)' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'radial-gradient(circle,rgba(79,70,229,.12),transparent)', pointerEvents: 'none' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 14, background: 'linear-gradient(135deg,#4F46E5,#7C3AED)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, boxShadow: '0 6px 20px rgba(79,70,229,.35)', flexShrink: 0 }}>🔲</div>
                <div>
                  <div style={{ fontWeight: 900, fontSize: 15, color: '#0F172A' }}>পণ্যের QR কোড</div>
                  <div style={{ fontSize: 11, color: '#4F46E5', fontWeight: 600 }}>স্ক্যান করুন — পণ্য পেজ খুলবে</div>
                </div>
                <div style={{ marginLeft: 'auto', background: 'rgba(79,70,229,.08)', border: '1px solid rgba(79,70,229,.2)', borderRadius: 8, padding: '3px 8px', fontSize: 10, fontWeight: 700, color: '#4F46E5' }}>{qrScanCount} স্ক্যান</div>
              </div>
              {/* QR mockup with scan line */}
              <div style={{ background: 'linear-gradient(135deg,rgba(238,242,255,.95),rgba(224,232,254,.8))', borderRadius: 18, padding: '14px 14px 10px', marginBottom: 12, border: '1px solid rgba(165,180,252,.25)' }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg,#4F46E5,#2563EB)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>👗</div>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 700, color: '#1E293B' }}>প্রিমিয়াম শাড়ি</div>
                    <div style={{ fontSize: 12, fontWeight: 900, color: '#4F46E5' }}>৳ ১,২৯৯</div>
                  </div>
                </div>
                {/* QR grid + scan line */}
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                  <div style={{ position: 'relative', background: '#fff', padding: 8, borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,.08)', display: 'inline-block', overflow: 'hidden' }}>
                    {[[1, 1, 1, 0, 1, 0, 1, 1, 1], [1, 0, 1, 0, 0, 0, 1, 0, 1], [1, 0, 1, 0, 1, 0, 1, 0, 1], [1, 1, 1, 0, 0, 1, 1, 1, 1], [0, 0, 0, 1, 1, 0, 0, 0, 0], [1, 1, 0, 1, 0, 1, 0, 1, 1], [1, 1, 1, 0, 1, 0, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 0, 1, 0, 1, 1, 1]].map((row, ri) => (
                      <div key={ri} style={{ display: 'flex' }}>
                        {row.map((cell, ci) => <div key={ci} style={{ width: 7, height: 7, background: cell ? (qrDone ? '#059669' : '#1E293B') : '#fff', margin: '0.5px', transition: 'background .5s' }} />)}
                      </div>
                    ))}
                    {qrScanning && <div className="qr-scan-line" />}
                    {qrDone && (
                      <div className="msg-in" style={{ position: 'absolute', inset: 0, background: 'rgba(16,185,129,.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', borderRadius: 8 }}>
                        <div style={{ fontSize: 20 }}>✅</div>
                        <div style={{ fontSize: 9, color: '#fff', fontWeight: 800, marginTop: 2 }}>স্ক্যান সফল!</div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <div style={{ flex: 1, background: 'linear-gradient(135deg,#4F46E5,#2563EB)', color: '#fff', borderRadius: 12, padding: '9px 0', textAlign: 'center', fontSize: 12, fontWeight: 700, cursor: 'pointer', boxShadow: '0 4px 14px rgba(79,70,229,.3)' }}>⬇ ডাউনলোড</div>
                <div style={{ flex: 1, background: 'rgba(79,70,229,.08)', color: '#4F46E5', border: '1px solid rgba(79,70,229,.2)', borderRadius: 12, padding: '9px 0', textAlign: 'center', fontSize: 12, fontWeight: 700, cursor: 'pointer' }}>🔗 শেয়ার করুন</div>
              </div>
            </div>

            {/* ── 2. Theme — auto-cycling live preview ────────── */}
            <div className="t3d glass shine" style={{ borderRadius: 28, padding: 28, position: 'relative', overflow: 'hidden', border: '1px solid rgba(255,255,255,.9)', boxShadow: '0 20px 60px rgba(16,185,129,.1)' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'radial-gradient(circle,rgba(16,185,129,.1),transparent)', pointerEvents: 'none' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 14, background: 'linear-gradient(135deg,#10B981,#059669)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, boxShadow: '0 6px 20px rgba(16,185,129,.35)' }}>🎨</div>
                <div>
                  <div style={{ fontWeight: 900, fontSize: 15, color: '#0F172A' }}>থিম পরিবর্তন</div>
                  <div style={{ fontSize: 11, color: '#059669', fontWeight: 600 }}>৫টি প্রিমিয়াম থিম — লাইভ প্রিভিউ</div>
                </div>
              </div>
              {/* Live cycling store mockup */}
              <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(229,231,235,.5)', boxShadow: '0 4px 20px rgba(0,0,0,.07)', marginBottom: 14 }}>
                {/* Browser bar — color changes live */}
                <div key={themeIdx} className="theme-fade" style={{ background: THEMES[themeIdx].bg, padding: '8px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ display: 'flex', gap: 4 }}>{['#ff5f57', '#febc2e', '#28c840'].map(c => <div key={c} style={{ width: 7, height: 7, borderRadius: '50%', background: c }} />)}</div>
                  <div style={{ fontSize: 9, color: 'rgba(255,255,255,.85)', fontWeight: 600 }}>mystore.shophyfast.com</div>
                  <div style={{ fontSize: 9, color: 'rgba(255,255,255,.7)', fontWeight: 700, background: 'rgba(255,255,255,.2)', padding: '2px 6px', borderRadius: 4 }}>{THEMES[themeIdx].name}</div>
                </div>
                {/* Mini store content */}
                <div style={{ background: '#fff', padding: '10px 12px' }}>
                  <div key={`banner-${themeIdx}`} className="theme-fade" style={{ height: 36, borderRadius: 8, background: THEMES[themeIdx].bg, marginBottom: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ fontSize: 9, color: '#fff', fontWeight: 700 }}>🛍 নতুন কালেকশন এসেছে!</span>
                  </div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {[{ name: 'শাড়ি', price: '৳১,২৯৯' }, { name: 'পাঞ্জাবি', price: '৳৮৯৯' }, { name: 'থ্রি-পিস', price: '৳১,৫৯৯' }].map((p, pi) => (
                      <div key={pi} style={{ flex: 1, borderRadius: 8, overflow: 'hidden', border: '1px solid rgba(229,231,235,.5)' }}>
                        <div key={`pc-${themeIdx}`} className="theme-fade" style={{ height: 30, background: `${THEMES[themeIdx].color}22` }} />
                        <div style={{ padding: '4px 5px' }}>
                          <div style={{ fontSize: 7, fontWeight: 700, color: '#1E293B' }}>{p.name}</div>
                          <div key={`pp-${themeIdx}`} className="theme-fade" style={{ fontSize: 8, fontWeight: 900, color: THEMES[themeIdx].color }}>{p.price}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
              {/* Theme dots */}
              <div style={{ display: 'flex', justifyContent: 'center', gap: 10 }}>
                {THEMES.map((t, i) => (
                  <div key={i} onClick={() => setThemeIdx(i)} style={{ width: i === themeIdx ? 28 : 14, height: 14, borderRadius: 7, background: t.color, cursor: 'pointer', transition: 'all .35s cubic-bezier(.4,0,.2,1)', boxShadow: i === themeIdx ? `0 0 0 2px #fff, 0 0 0 4px ${t.color}` : 'none' }} />
                ))}
              </div>
            </div>

            {/* ── 3. Landing Page — live order notifications ───── */}
            <div className="t3d glass shine" style={{ borderRadius: 28, padding: 28, position: 'relative', overflow: 'hidden', border: '1px solid rgba(255,255,255,.9)', boxShadow: '0 20px 60px rgba(245,158,11,.1)' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'radial-gradient(circle,rgba(245,158,11,.1),transparent)', pointerEvents: 'none' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 14, background: 'linear-gradient(135deg,#F59E0B,#F97316)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, boxShadow: '0 6px 20px rgba(245,158,11,.35)' }}>🎯</div>
                <div>
                  <div style={{ fontWeight: 900, fontSize: 15, color: '#0F172A' }}>প্রোডাক্ট ল্যান্ডিং পেজ</div>
                  <div style={{ fontSize: 11, color: '#D97706', fontWeight: 600 }}>অর্ডার আসছে লাইভ</div>
                </div>
              </div>
              {/* Mini landing page + live notifications */}
              <div style={{ position: 'relative', background: '#fff', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(229,231,235,.5)', boxShadow: '0 4px 20px rgba(0,0,0,.06)', marginBottom: 12 }}>
                {/* Live order notif overlay */}
                <div style={{ position: 'absolute', top: 6, left: 6, right: 6, zIndex: 10, display: 'flex', flexDirection: 'column', gap: 4, pointerEvents: 'none' }}>
                  {lpNotifs.map((name, ni) => (
                    <div key={`${name}-${ni}`} className="notif-pop" style={{ background: 'rgba(16,185,129,.95)', backdropFilter: 'blur(8px)', borderRadius: 8, padding: '5px 9px', display: 'flex', alignItems: 'center', gap: 6, boxShadow: '0 4px 12px rgba(16,185,129,.35)' }}>
                      <span style={{ fontSize: 12 }}>🛒</span>
                      <span style={{ fontSize: 10, fontWeight: 700, color: '#fff' }}>{name} অর্ডার করেছেন!</span>
                      <span style={{ fontSize: 9, color: 'rgba(255,255,255,.8)', marginLeft: 'auto' }}>এইমাত্র</span>
                    </div>
                  ))}
                </div>
                <div style={{ height: 60, background: 'linear-gradient(135deg,#FEF9C3,#FEF08A)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>👗</div>
                <div style={{ padding: '10px 12px' }}>
                  <div style={{ fontSize: 11, fontWeight: 900, color: '#1E293B', marginBottom: 2 }}>প্রিমিয়াম বাটিক শাড়ি</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                    <span style={{ fontSize: 14, fontWeight: 900, color: '#D97706' }}>৳ ১,২৯৯</span>
                    <span style={{ fontSize: 10, color: '#94A3B8', textDecoration: 'line-through' }}>৳ ১,৮০০</span>
                    <span style={{ fontSize: 9, background: '#FEF3C7', color: '#D97706', padding: '1px 5px', borderRadius: 4, fontWeight: 700 }}>-২৮%</span>
                  </div>
                  {/* Live stock bar */}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                    <div style={{ flex: 1, height: 5, background: '#F1F5F9', borderRadius: 99, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${(lpStock / 12) * 100}%`, background: lpStock <= 4 ? '#EF4444' : '#F59E0B', borderRadius: 99, transition: 'width .5s ease' }} />
                    </div>
                    <span style={{ fontSize: 9, color: lpStock <= 4 ? '#EF4444' : '#D97706', fontWeight: 700, whiteSpace: 'nowrap' }}>মাত্র {lpStock}টি বাকি!</span>
                  </div>
                  <div style={{ background: 'linear-gradient(90deg,#F97316,#EF4444)', borderRadius: 8, padding: '7px 0', textAlign: 'center', color: '#fff', fontSize: 11, fontWeight: 900, boxShadow: '0 3px 10px rgba(239,68,68,.3)' }}>🛒 এখনই কিনুন</div>
                </div>
              </div>
              <div style={{ fontSize: 11, color: '#6B7280', textAlign: 'center' }}>প্রতিটি পণ্যের আলাদা পেজ — কনভার্সন ৩× বেড়ে যায়</div>
            </div>

            {/* ── 4. Post System — live like & comment counter ── */}
            <div className="t3d glass shine" style={{ borderRadius: 28, padding: 28, position: 'relative', overflow: 'hidden', border: '1px solid rgba(255,255,255,.9)', boxShadow: '0 20px 60px rgba(59,130,246,.1)' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'radial-gradient(circle,rgba(59,130,246,.08),transparent)', pointerEvents: 'none' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 14, background: 'linear-gradient(135deg,#3B82F6,#1D4ED8)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, boxShadow: '0 6px 20px rgba(59,130,246,.35)' }}>📢</div>
                <div>
                  <div style={{ fontWeight: 900, fontSize: 15, color: '#0F172A' }}>পোস্ট সিস্টেম</div>
                  <div style={{ fontSize: 11, color: '#2563EB', fontWeight: 600 }}>ফেসবুকে সরাসরি — লাইভ এনগেজমেন্ট</div>
                </div>
              </div>
              {/* Facebook post mockup */}
              <div style={{ background: '#fff', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(229,231,235,.6)', boxShadow: '0 4px 20px rgba(0,0,0,.06)', marginBottom: 12 }}>
                <div style={{ padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 7, borderBottom: '1px solid rgba(229,231,235,.4)' }}>
                  <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'linear-gradient(135deg,#4F46E5,#2563EB)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11 }}>🏪</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 10, fontWeight: 700, color: '#1E293B' }}>আমার ফ্যাশন শপ</div>
                    <div style={{ fontSize: 9, color: '#94A3B8' }}>এইমাত্র · 🌐</div>
                  </div>
                  <div style={{ background: '#1877F2', color: '#fff', fontSize: 8, fontWeight: 700, padding: '3px 6px', borderRadius: 4 }}>f Facebook</div>
                </div>
                <div style={{ height: 52, background: 'linear-gradient(135deg,#EEF2FF,#E0E7FF)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                  <span style={{ fontSize: 18 }}>👗</span>
                  <div>
                    <div style={{ fontSize: 10, fontWeight: 800, color: '#1E293B' }}>নতুন কালেকশন!</div>
                    <div style={{ fontSize: 9, fontWeight: 900, color: '#4F46E5' }}>৳ ১,২৯৯ — মাত্র ৫টি বাকি!</div>
                  </div>
                </div>
                {/* Live comment bubble */}
                {postNewComment && (
                  <div className="msg-in" style={{ margin: '6px 8px 0', background: 'rgba(238,242,255,.9)', borderRadius: 8, padding: '5px 9px', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid rgba(165,180,252,.3)' }}>
                    <div style={{ width: 16, height: 16, borderRadius: '50%', background: 'linear-gradient(135deg,#F59E0B,#EF4444)', flexShrink: 0 }} />
                    <span style={{ fontSize: 10, color: '#1E293B', fontWeight: 600 }}>{postNewComment}</span>
                  </div>
                )}
                <div style={{ padding: '6px 10px 8px', display: 'flex', gap: 4 }}>
                  {[
                    { e: '👍', l: postLikes >= 1000 ? `${(postLikes / 1000).toFixed(1)}K` : postLikes, label: 'লাইক' },
                    { e: '💬', l: postComments, label: 'কমেন্ট' },
                    { e: '↗', l: '৩২', label: 'শেয়ার' },
                  ].map((b, i) => (
                    <div key={i} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, fontSize: 9, color: i === 0 ? '#4F46E5' : '#64748B', fontWeight: 700, padding: '4px 0', borderRadius: 6, background: i === 0 ? 'rgba(79,70,229,.06)' : 'rgba(0,0,0,.02)', cursor: 'pointer', transition: 'all .2s' }}>
                      <span style={{ fontSize: i === 0 ? 12 : 10 }}>{b.e}</span>
                      <span style={{ fontVariantNumeric: 'tabular-nums' }}>{b.l}</span>
                      <span style={{ fontSize: 8, color: '#94A3B8' }}>{b.label}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ background: 'linear-gradient(90deg,#3B82F6,#6366F1)', borderRadius: 12, padding: '9px 0', textAlign: 'center', color: '#fff', fontSize: 12, fontWeight: 700, cursor: 'pointer', boxShadow: '0 4px 14px rgba(59,130,246,.3)' }}>
                📤 পণ্য পোস্ট করুন
              </div>
            </div>

          </div>

        </div>
      </section>

      {/* ═══ DEMO CTA ═══════════════════════════════════════════ */}
      <section style={{ padding: '0 24px 80px', position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1300, margin: '0 auto' }}>
          <div className="shine" style={{ position: 'relative', borderRadius: 28, padding: '52px 48px', overflow: 'hidden', background: 'linear-gradient(135deg,#10B981 0%,#059669 50%,#047857 100%)', boxShadow: '0 20px 60px rgba(16,185,129,.3)' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 25% 50%,rgba(255,255,255,.12) 0%,transparent 55%)', pointerEvents: 'none' }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
              <div>
                <h2 style={{ fontSize: 'clamp(20px,3vw,32px)', fontWeight: 900, color: '#fff', marginBottom: 12 }}>ডেমো দেখুন এবং নিজের চোখে অভিজ্ঞতা নিন</h2>
                <p style={{ color: 'rgba(255,255,255,.85)', marginBottom: 24, lineHeight: 1.6, fontSize: 15 }}>ShophyFast কীভাবে আপনার ব্যবসা পরিবর্তন করে তা লাইভ ওয়াকথ্রুতে দেখুন।</p>
                <button id="demo-cta" onClick={() => window.open('https://demo.shophyfast.com', '_blank')} style={{ padding: '12px 26px', borderRadius: 14, fontWeight: 700, background: '#fff', color: '#059669', border: 'none', cursor: 'pointer', boxShadow: '0 4px 16px rgba(0,0,0,.12)', transition: 'all .22s', fontFamily: 'inherit', fontSize: 15 }}>
                  বিনামূল্যে ডেমো শুরু করুন →
                </button>
              </div>
              <div onClick={() => window.open('https://demo.shophyfast.com', '_blank')} style={{ width: 130, height: 130, borderRadius: 22, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: 'rgba(255,255,255,.22)', backdropFilter: 'blur(16px)', border: '1px solid rgba(255,255,255,.4)', flexShrink: 0, cursor: 'pointer' }}>
                <span style={{ fontSize: 38 }}>▶️</span>
                <span style={{ color: '#fff', fontWeight: 700, fontSize: 12, marginTop: 6 }}>ডেমো দেখুন</span>
                <span style={{ color: 'rgba(255,255,255,.7)', fontSize: 11 }}>২:৩০ মিনিট</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══ HOW IT WORKS — Redesigned Flow ══════════════════════ */}
      <section style={{ padding: '120px 32px', background: '#ffffff', position: 'relative', zIndex: 1, overflow: 'hidden' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>

          {/* Header Row */}
          <div className="stack-mobile" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 80, gap: 32 }}>
            <div style={{ flex: 1, maxWidth: 640 }}>
              <h2 style={{ fontSize: 'clamp(28px, 4vw, 42px)', fontWeight: 800, color: '#0F172A', marginBottom: 16, lineHeight: 1.2, letterSpacing: '-0.02em' }}>আপনার ওয়েবসাইট লাইভ করার ৩টি সহজ ধাপ</h2>
              <p style={{ color: '#475569', fontSize: 16, lineHeight: 1.6, margin: 0 }}>কোনো ডিজাইন বা ডেভেলপমেন্ট শেখার প্রয়োজন নেই। আমরা সবকিছু সহজ করে দিয়েছি যাতে আপনি আত্মবিশ্বাসের সাথে, দ্রুত এবং কোনো কারিগরি জ্ঞান ছাড়াই আপনার স্টোর তৈরি করতে পারেন।</p>
            </div>
            <div style={{ display: 'flex', gap: 14, flexShrink: 0, flexWrap: 'wrap' }}>
              <button style={{ padding: '12px 24px', borderRadius: 99, border: '1px solid #3B82F6', color: '#3B82F6', background: 'transparent', fontWeight: 600, fontSize: 15, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }} className="t3d">
                অ্যাপ পান <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" style={{ marginTop: 2 }}><path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
              </button>
              <button onClick={openRegister} style={{ padding: '12px 28px', borderRadius: 99, background: '#2563EB', color: '#fff', fontWeight: 600, border: 'none', fontSize: 15, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }} className="t3d shine">
                বিনামূল্যে শুরু করুন <span style={{ fontSize: 18 }}>→</span>
              </button>
            </div>
          </div>

          {/* Cards Grid */}
          <div style={{ position: 'relative' }}>

            {/* Animated SVG Arrows (Desktop Only) */}
            <div className="hide-mobile" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none', zIndex: 0 }}>
              {/* Arrow 1: Card 1 to Card 2 */}
              <svg width="200" height="80" style={{ position: 'absolute', top: '-15%', left: '26%', overflow: 'visible' }} viewBox="0 0 200 80" fill="none">
                <path className="flow-line" d="M 0 60 C 50 -30, 120 -30, 180 25" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round" fill="none" />
                <path d="M 165 15 L 180 25 L 165 35" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
              </svg>
              {/* Arrow 2: Card 2 to Card 3 */}
              <svg width="200" height="80" style={{ position: 'absolute', bottom: '-40px', left: '59%', overflow: 'visible' }} viewBox="0 0 200 80" fill="none">
                <path className="flow-line" d="M 0 0 C 60 80, 140 80, 190 20" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round" fill="none" />
                <path d="M 175 30 L 190 20 L 195 38" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
              </svg>
            </div>

            <div className="stack-mobile" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '40px 32px', position: 'relative', zIndex: 1 }}>
              {[
                { step: 'ধাপ ০১', icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="#3B82F6"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /><circle cx="19" cy="7" r="4" fill="#eef2ff" /><path d="M22 6h-2V4h-2v2h-2v2h2v2h2V8h2z" fill="#3B82F6" /></svg>, title: 'অ্যাকাউন্ট তৈরি করুন', desc: 'শপিফাস্টে স্বাগতম! আপনার অনলাইন স্টোর লঞ্চ করতে এবং আপনার ব্যবসা বাড়ানোর জন্য শক্তিশালী সরঞ্জামগুলি অ্যাক্সেস করতে সাইন আপ করুন।' },
                { step: 'ধাপ ০২', icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="#3B82F6"><path d="M4 6h16v2H4zm2-4h12v2H6zm14 8H4c-1.1 0-2 .9-2 2v3h2v5h14v-5h2v-3c0-1.1-.9-2-2-2z" /></svg>, title: 'আপনার স্টোর সেটআপ করুন', desc: 'মিনিটের মধ্যে লঞ্চ করতে আপনার স্টোরের নাম যোগ করুন, আপনার দেশ এবং ক্যাটাগরি নির্বাচন করুন।' },
                { step: 'ধাপ ০৩', icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="#3B82F6"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" /><circle cx="12" cy="12" r="10" fill="none" stroke="#3B82F6" strokeWidth="2.5" /></svg>, title: 'বিক্রি শুরু করুন', desc: 'আপনার পণ্য যোগ করে বিক্রি শুরু করুন। আপনি কী অফার করছেন তা প্রদর্শন করতে নাম, দাম এবং ছবির মতো পণ্যের বিবরণ লিখুন।' },
              ].map((s, i) => (
                <div key={i} style={{ position: 'relative', marginTop: 18 }}>
                  {/* Step Badge */}
                  <div style={{ position: 'absolute', top: -14, left: 24, background: '#3B82F6', color: '#fff', fontSize: 13, fontWeight: 700, padding: '6px 16px', borderRadius: 99, zIndex: 2, boxShadow: '0 4px 12px rgba(59,130,246,.25)' }}>
                    {s.step}
                  </div>
                  {/* Card Body */}
                  <div style={{ background: '#F8FAFC', borderRadius: 20, padding: '44px 24px 40px', height: '100%', boxSizing: 'border-box', border: '1px solid rgba(0,0,0,.03)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                      <h3 style={{ fontSize: 20, fontWeight: 800, color: '#0F172A', margin: 0, lineHeight: 1.3 }}>{s.title}</h3>
                      <div style={{ flexShrink: 0, marginLeft: 16 }}>{s.icon}</div>
                    </div>
                    <p style={{ color: '#64748B', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>
      </section>

      {/* ═══ SOLUTIONS INFOGRAPHIC ════════════════════════════════ */}
      <section style={{ padding: '100px 32px 100px', background: '#F8FAFF', position: 'relative', zIndex: 1 }}>
        {/* Background decorative dots */}
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(124,58,237,.1) 1.5px, transparent 1.5px)', backgroundSize: '30px 30px', opacity: 0.8, pointerEvents: 'none' }} />

        <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
          <h2 style={{ fontSize: 'clamp(26px, 4vw, 36px)', fontWeight: 900, color: '#1E293B', textAlign: 'center', marginBottom: 70, letterSpacing: '-0.02em' }}>
            সঠিক সলিউশনে ব্যবসা বাড়বে কয়েকগুণ!
          </h2>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 32 }}>

            {/* Card 1: Orders (Bar + Line) */}
            <div className="t3d" style={{ background: '#fff', borderRadius: 20, padding: '36px 28px', position: 'relative', boxShadow: '0 12px 40px rgba(0,0,0,0.03)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)', width: 44, height: 44, borderRadius: '50%', background: '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 18, boxShadow: '0 8px 20px rgba(99,102,241,0.4)', zIndex: 2 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 20V10M12 20V4M6 20v-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div style={{ fontWeight: 800, fontSize: 16, color: '#1E293B' }}>অর্ডার</div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span style={{ fontSize: 11, fontWeight: 700, color: '#64748B', background: '#F1F5F9', padding: '5px 14px', borderRadius: 99 }}>আজ</span>
                  <span style={{ fontSize: 11, fontWeight: 700, color: '#fff', background: '#6366F1', padding: '5px 14px', borderRadius: 99, boxShadow: '0 4px 10px rgba(99,102,241,0.3)' }}>এই সপ্তাহ</span>
                </div>
              </div>

              <div style={{ fontSize: 36, fontWeight: 900, color: '#0F172A', lineHeight: 1 }}>1,200</div>
              <div style={{ fontSize: 12, color: '#64748B', marginBottom: 36, marginTop: 6, fontWeight: 600 }}>সাপ্তাহিক অর্ডার</div>

              {/* Bar Chart */}
              <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', height: 160, marginBottom: 8, borderBottom: '1px solid #E2E8F0', paddingBottom: 8, position: 'relative' }}>
                <div style={{ position: 'absolute', right: -4, top: 0, bottom: 8, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', fontSize: 10, color: '#94A3B8', fontWeight: 600, textAlign: 'right' }}>
                  <span>10K</span><span>5K</span><span>2K</span><span>1K</span><span>0</span>
                </div>
                {[{ h: 15, o: 1 }, { h: 18, o: 1 }, { h: 25, o: 1 }, { h: 28, o: 1 }, { h: 55, o: 1 }, { h: 90, o: 1 }, { h: 0, o: 0 }].map((c, i) => (
                  <div key={i} style={{ flex: 1, background: '#7C3AED', height: `${c.h}%`, opacity: c.o, borderRadius: '4px 4px 0 0', transition: 'height 0.5s' }} />
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#64748B', fontWeight: 600, padding: '0 4px', marginBottom: 30 }}>
                <span style={{ flex: 1, textAlign: 'center' }}>Sat</span><span style={{ flex: 1, textAlign: 'center' }}>Sun</span><span style={{ flex: 1, textAlign: 'center' }}>Mon</span><span style={{ flex: 1, textAlign: 'center' }}>Tue</span><span style={{ flex: 1, textAlign: 'center' }}>Wed</span><span style={{ flex: 1, textAlign: 'center' }}>Thu</span><span style={{ flex: 1, textAlign: 'center' }}>Fri</span>
              </div>

              {/* Line Chart */}
              <div style={{ height: 48, width: '100%', position: 'relative', marginTop: 'auto' }}>
                <svg viewBox="0 0 100 30" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
                  <defs>
                    <linearGradient id="lineGrad1" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#818CF8" stopOpacity="0.3" />
                      <stop offset="100%" stopColor="#818CF8" stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  <path d="M0 25 L20 22 L40 24 L60 17 L80 12 L100 13 L100 30 L0 30 Z" fill="url(#lineGrad1)" />
                  <path d="M0 25 L20 22 L40 24 L60 17 L80 12 L100 13" fill="none" stroke="#818CF8" strokeWidth="1.5" />
                </svg>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#64748B', fontWeight: 600, marginTop: 4, padding: '0 4px' }}>
                  <span style={{ flex: 1, textAlign: 'center' }}>Sat</span><span style={{ flex: 1, textAlign: 'center' }}>Sun</span><span style={{ flex: 1, textAlign: 'center' }}>Mon</span><span style={{ flex: 1, textAlign: 'center' }}>Tue</span><span style={{ flex: 1, textAlign: 'center' }}>Wed</span><span style={{ flex: 1, textAlign: 'center' }}>Thu</span><span style={{ flex: 1, textAlign: 'center' }}>Fri</span>
                </div>
              </div>
            </div>

            {/* Card 2: Today's Sales (Donut + Line) */}
            <div className="t3d" style={{ background: '#fff', borderRadius: 20, padding: '36px 28px', position: 'relative', boxShadow: '0 12px 40px rgba(0,0,0,0.03)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)', width: 44, height: 44, borderRadius: '50%', background: '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 20, boxShadow: '0 8px 20px rgba(99,102,241,0.4)', zIndex: 2, fontWeight: 900 }}>
                ৳
              </div>

              <div style={{ fontWeight: 800, fontSize: 16, color: '#1E293B', marginBottom: 40, textAlign: 'left' }}>আজকের বিক্রয়</div>

              {/* Donut Chart */}
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 44 }}>
                <div style={{ width: 160, height: 160, borderRadius: '50%', background: 'conic-gradient(#6366F1 0% 66%, #E0E7FF 66% 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', boxShadow: '0 4px 16px rgba(0,0,0,0.05)' }}>
                  <div style={{ width: 124, height: 124, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'inset 0 2px 10px rgba(0,0,0,0.04)' }}>
                    <span style={{ fontSize: 22, fontWeight: 900, color: '#4F46E5', letterSpacing: '-0.5px' }}>৳240.0K</span>
                  </div>
                </div>
              </div>

              {/* Legend */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 32 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 700 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#64748B' }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: '#6366F1' }} /> অনলাইন পেমেন্ট</div>
                  <div style={{ color: '#0F172A' }}>৳82.0K</div>
                </div>
                <div style={{ borderTop: '1px dotted #CBD5E1' }} />
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 700 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#64748B' }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: '#E0E7FF' }} /> ক্যাশ অন ডেলিভারি</div>
                  <div style={{ color: '#0F172A' }}>৳158.0K</div>
                </div>
              </div>

              <div style={{ borderTop: '1px solid #E2E8F0', marginBottom: 20 }} />

              <div style={{ fontSize: 13, fontWeight: 800, color: '#475569', marginBottom: 12 }}>বিক্রয় বৃদ্ধি</div>

              {/* Line Chart 2 */}
              <div style={{ height: 48, width: '100%', position: 'relative', marginTop: 'auto' }}>
                <svg viewBox="0 0 100 30" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
                  <defs>
                    <linearGradient id="lineGrad2" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#818CF8" stopOpacity="0.3" />
                      <stop offset="100%" stopColor="#818CF8" stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  <path d="M0 25 L30 21 L60 23 L80 16 L95 12 L100 12 L100 30 L0 30 Z" fill="url(#lineGrad2)" />
                  <path d="M0 25 L30 21 L60 23 L80 16 L95 12" fill="none" stroke="#818CF8" strokeWidth="2" />
                  <polygon points="95,8 100,12 93,15" fill="#818CF8" />
                </svg>
              </div>
            </div>

            {/* Card 3: Total Orders & Customers (List + Donut) */}
            <div className="t3d" style={{ background: '#fff', borderRadius: 20, padding: '40px 28px', position: 'relative', boxShadow: '0 12px 40px rgba(0,0,0,0.03)', display: 'flex', flexDirection: 'column', border: '1px solid #F8FAFC' }}>
              <div style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)', width: 44, height: 44, borderRadius: '50%', background: '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 18, boxShadow: '0 8px 20px rgba(99,102,241,0.4)', zIndex: 2 }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M17 20h5V4H2v16h5m10 0v-6H7v6m10 0H7" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>

              {/* Legend Top */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 44, marginTop: 4 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 700 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#64748B' }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: '#6366F1' }} /> অনলাইন পেমেন্ট</div>
                  <div style={{ color: '#0F172A', fontSize: 11 }}>৳11.2M - 32%</div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 700 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#64748B' }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: '#A5B4FC' }} /> ক্যাশ অন ডেলিভারি</div>
                  <div style={{ color: '#0F172A', fontSize: 11 }}>৳23.8M - 68%</div>
                </div>
              </div>

              {/* Donut Chart 2 */}
              <div style={{ display: 'flex', justifyContent: 'center', margin: 'auto 0 36px' }}>
                <div style={{ width: 170, height: 170, borderRadius: '50%', background: 'conic-gradient(#6366F1 0% 32%, #6366F1 32% 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', boxShadow: '0 6px 20px rgba(99,102,241,0.3)' }}>
                  <div style={{ width: 126, height: 126, borderRadius: '50%', background: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', boxShadow: 'inset 0 4px 12px rgba(0,0,0,0.03)' }}>
                    <span style={{ fontSize: 24, fontWeight: 900, color: '#4F46E5', lineHeight: 1 }}>৳35.0M</span>
                    <span style={{ fontSize: 11, fontWeight: 600, color: '#64748B', marginTop: 6, textAlign: 'center', lineHeight: 1.4 }}>মোট অর্ডার<br />পরিমাণ</span>
                  </div>
                </div>
              </div>

              {/* Active Customers */}
              <div style={{ border: '1px solid #F1F5F9', borderRadius: 16, padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 'auto', background: '#FAFAFA' }}>
                <div style={{ display: 'flex', marginBottom: 10 }}>
                  <div style={{ width: 34, height: 34, borderRadius: '50%', background: '#A78BFA', border: '3px solid #FAFAFA', marginRight: -10, zIndex: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>👩</div>
                  <div style={{ width: 34, height: 34, borderRadius: '50%', background: '#F472B6', border: '3px solid #FAFAFA', marginRight: -10, zIndex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>🧑</div>
                  <div style={{ width: 34, height: 34, borderRadius: '50%', background: '#38BDF8', border: '3px solid #FAFAFA', zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>👨</div>
                </div>
                <div style={{ fontSize: 12, color: '#64748B', fontWeight: 600, marginBottom: 4 }}>সক্রিয় গ্রাহক</div>
                <div style={{ fontSize: 28, fontWeight: 900, color: '#0F172A', letterSpacing: '-0.5px' }}>2,500+</div>
              </div>

            </div>

          </div>
        </div>
      </section>

      {/* ═══ PRICING — Premium Glassmorphism ═══════════════════════ */}
      <section id="pricing" style={{ padding: '120px 32px', position: 'relative', zIndex: 1, overflow: 'hidden' }}>

        {/* Background decorative blobs */}
        <div style={{ position: 'absolute', top: -120, left: '5%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle,rgba(139,92,246,.13),transparent 70%)', pointerEvents: 'none', filter: 'blur(60px)' }} />
        <div style={{ position: 'absolute', bottom: -80, right: '5%', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle,rgba(59,130,246,.1),transparent 70%)', pointerEvents: 'none', filter: 'blur(50px)' }} />
        <div style={{ position: 'absolute', top: '40%', left: '50%', width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle,rgba(251,191,36,.08),transparent 70%)', pointerEvents: 'none', filter: 'blur(40px)', transform: 'translateX(-50%)' }} />

        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>

          {/* Header */}
          <div style={{ textAlign: 'center', marginBottom: 72 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(139,92,246,.1)', border: '1px solid rgba(139,92,246,.25)', borderRadius: 99, padding: '7px 20px', fontSize: 12, fontWeight: 700, color: '#7C3AED', textTransform: 'uppercase', letterSpacing: 3, marginBottom: 20 }}>
              💎 মূল্য পরিকল্পনা
            </div>
            <h2 style={{ fontSize: 'clamp(28px,4vw,48px)', fontWeight: 900, color: '#0F172A', marginBottom: 14, letterSpacing: '-1px', lineHeight: 1.15 }}>
              আপনার পরিকল্পনা{' '}
              <span style={{ background: 'linear-gradient(135deg,#7C3AED,#4F46E5,#2563EB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                বেছে নিন
              </span>
            </h2>
            <p style={{ color: '#6B7280', fontSize: 16, maxWidth: 520, margin: '0 auto', lineHeight: 1.7 }}>
              {trialDays} দিনের বিনামূল্যে ট্রায়াল দিয়ে শুরু করুন — কোনো ক্রেডিট কার্ড লাগবে না।
            </p>
          </div>

          {/* Plans Grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 24, alignItems: 'stretch' }}>
            {displayPlans.map((plan, i) => {
              const popular = plan.is_popular;
              const priceFormatted = '৳' + plan.price.toLocaleString();
              const periodLabel = plan.duration_days >= 365 ? '/বছর'
                : plan.duration_days >= 180 ? '/৬মাস'
                  : plan.duration_days >= 90 ? '/৩মাস'
                    : '/মাস';
              return (
                <div key={plan.id} style={{
                  position: 'relative',
                  borderRadius: 28,
                  padding: popular ? '44px 28px 32px' : '36px 28px 32px',
                  background: popular
                    ? 'linear-gradient(145deg,#4F46E5 0%,#7C3AED 50%,#6D28D9 100%)'
                    : 'rgba(255,255,255,0.65)',
                  backdropFilter: 'blur(24px)',
                  WebkitBackdropFilter: 'blur(24px)',
                  border: popular
                    ? '1.5px solid rgba(167,139,250,.5)'
                    : '1px solid rgba(255,255,255,0.9)',
                  boxShadow: popular
                    ? '0 0 0 4px rgba(139,92,246,.15), 0 30px 80px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.2)'
                    : '0 8px 40px rgba(99,102,241,.08), inset 0 1px 0 rgba(255,255,255,1)',
                  transform: popular ? 'translateY(-8px)' : 'none',
                  transition: 'transform .3s ease, box-shadow .3s ease',
                  overflow: 'hidden',
                }}>

                  {/* Top shine overlay for popular */}
                  {popular && (
                    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.18) 0%,transparent 60%)', pointerEvents: 'none', borderRadius: 28 }} />
                  )}

                  {/* Popular badge — floating pill */}
                  {popular && (
                    <div style={{
                      position: 'absolute',
                      top: -18,
                      left: '50%',
                      transform: 'translateX(-50%)',
                      background: 'linear-gradient(135deg,#FBBF24,#F59E0B)',
                      color: '#78350F',
                      fontSize: 11,
                      fontWeight: 900,
                      padding: '7px 20px',
                      borderRadius: 99,
                      boxShadow: '0 6px 20px rgba(251,191,36,.5), 0 0 0 3px rgba(251,191,36,.2)',
                      whiteSpace: 'nowrap',
                      letterSpacing: 0.3,
                      display: 'flex',
                      alignItems: 'center',
                      gap: 5,
                    }}>
                      ⭐ সবচেয়ে জনপ্রিয়
                    </div>
                  )}

                  {/* Plan name & duration */}
                  <div style={{ marginBottom: 8 }}>
                    <h3 style={{ fontSize: 20, fontWeight: 900, color: popular ? '#fff' : '#0F172A', marginBottom: 4 }}>{plan.name}</h3>
                    <span style={{ fontSize: 12, color: popular ? 'rgba(255,255,255,.65)' : '#9CA3AF', fontWeight: 600, background: popular ? 'rgba(255,255,255,.12)' : 'rgba(99,102,241,.08)', padding: '3px 10px', borderRadius: 99 }}>
                      {plan.duration_days} দিন
                    </span>
                  </div>

                  {/* Price */}
                  <div style={{ margin: '20px 0 24px', display: 'flex', flexDirection: 'column' }}>
                    {plan.regular_price && plan.regular_price > plan.price && (
                      <span style={{ fontSize: 13, fontWeight: 700, color: popular ? 'rgba(255,255,255,.6)' : '#9CA3AF', textDecoration: 'line-through', marginBottom: 2 }}>
                        ৳{plan.regular_price.toLocaleString()}
                      </span>
                    )}
                    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4 }}>
                      <span style={{ fontSize: 42, fontWeight: 900, letterSpacing: '-2px', color: popular ? '#fff' : '#0F172A', lineHeight: 1 }}>{priceFormatted}</span>
                      <span style={{ fontSize: 14, color: popular ? 'rgba(255,255,255,.6)' : '#9CA3AF', fontWeight: 600, marginBottom: 6 }}>{periodLabel}</span>
                    </div>
                  </div>

                  {/* Divider */}
                  <div style={{ height: 1, background: popular ? 'rgba(255,255,255,.15)' : 'rgba(99,102,241,.1)', marginBottom: 20 }} />

                  {/* Features */}
                  <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 11 }}>
                    {(() => {
                      const df = Array.isArray(plan.display_features) ? plan.display_features : [];
                      const ff = Array.isArray(plan.features)
                        ? plan.features
                        : (plan.features && typeof plan.features === 'object'
                          ? Object.entries(plan.features).filter(([, v]) => v).map(([k]) => k)
                          : []);
                      return (df.length > 0 ? df : ff);
                    })().map((f: string, j: number) => (
                      <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: popular ? 'rgba(255,255,255,.92)' : '#374151', fontWeight: 500 }}>
                        <span style={{
                          width: 22, height: 22, borderRadius: '50%',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          fontSize: 11, fontWeight: 900,
                          background: popular ? 'rgba(255,255,255,.22)' : 'rgba(79,70,229,.1)',
                          color: popular ? '#fff' : '#4F46E5',
                          flexShrink: 0,
                          boxShadow: popular ? 'inset 0 1px 0 rgba(255,255,255,.3)' : 'none',
                        }}>✓</span>
                        {f}
                      </li>
                    ))}
                  </ul>

                  {/* CTA Button */}
                  <button id={`plan-${i}`} onClick={openRegister} style={{
                    width: '100%',
                    padding: '14px',
                    borderRadius: 16,
                    fontWeight: 800,
                    fontSize: 14,
                    cursor: 'pointer',
                    fontFamily: 'inherit',
                    transition: 'all .22s',
                    border: popular ? 'none' : '1.5px solid rgba(79,70,229,.25)',
                    background: popular ? '#fff' : 'linear-gradient(135deg,rgba(79,70,229,.08),rgba(79,70,229,.04))',
                    color: popular ? '#5B21B6' : '#4F46E5',
                    boxShadow: popular ? '0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8)' : 'none',
                  }}
                    onMouseEnter={e => {
                      if (popular) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,.15)'; }
                      else { e.currentTarget.style.background = 'linear-gradient(135deg,#4F46E5,#7C3AED)'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.border = '1.5px solid transparent'; }
                    }}
                    onMouseLeave={e => {
                      if (popular) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,.12)'; }
                      else { e.currentTarget.style.background = 'linear-gradient(135deg,rgba(79,70,229,.08),rgba(79,70,229,.04))'; e.currentTarget.style.color = '#4F46E5'; e.currentTarget.style.border = '1.5px solid rgba(79,70,229,.25)'; }
                    }}
                  >
                    {popular ? '🚀 এখনই শুরু করুন' : 'শুরু করুন →'}
                  </button>

                  {/* Bottom glow for popular */}
                  {popular && (
                    <div style={{ position: 'absolute', bottom: -40, left: '20%', right: '20%', height: 80, background: 'rgba(167,139,250,.3)', filter: 'blur(30px)', pointerEvents: 'none' }} />
                  )}
                </div>
              );
            })}
          </div>

          {/* Trial badge */}
          <div style={{ textAlign: 'center', marginTop: 52 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, background: 'rgba(255,255,255,.7)', backdropFilter: 'blur(16px)', border: '1px solid rgba(167,243,208,.7)', borderRadius: 99, padding: '12px 28px', boxShadow: '0 4px 24px rgba(16,185,129,.08)' }}>
              <span style={{ fontSize: 20 }}>🎁</span>
              <span style={{ fontWeight: 700, fontSize: 14, color: '#059669' }}>{trialDays} দিনের বিনামূল্যে ট্রায়াল</span>
              <span style={{ width: 1, height: 18, background: 'rgba(0,0,0,.1)' }} />
              <span style={{ fontSize: 13, color: '#6B7280' }}>কোনো ক্রেডিট কার্ড লাগবে না</span>
              <span style={{ fontSize: 13 }}>💳</span>
            </div>
          </div>

        </div>
      </section>

      {/* ═══ APP DOWNLOAD ════════════════════════════════════════ */}
      <section style={{ padding: '80px 32px', background: 'linear-gradient(160deg,#312E81 0%,#1D4ED8 55%,#0E7490 100%)', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 0%,transparent 50%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)' }} />
        <div style={{ maxWidth: 1300, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr auto', gap: 48, alignItems: 'center', position: 'relative', zIndex: 1 }}>
          <div>
            <h2 style={{ fontSize: 'clamp(22px,3.5vw,36px)', fontWeight: 900, color: '#fff', marginBottom: 14 }}>আপনার ফোনে অ্যাপ ডাউনলোড করুন</h2>
            <p style={{ color: 'rgba(199,210,254,.9)', marginBottom: 28, lineHeight: 1.7, fontSize: 15 }}>ফোন থেকেই স্টোর পরিচালনা করুন — পণ্য যোগ করুন, অর্ডার প্রসেস করুন, যেকোনো স্থান থেকে।</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              {[{ icon: '🍎', top: 'ডাউনলোড করুন', btm: 'App Store' }, { icon: '▶', top: 'পান', btm: 'Google Play' }].map((b, i) => (
                <button key={i} id={`app-${i}`} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px', borderRadius: 16, background: 'rgba(0,0,0,.38)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,.2)', boxShadow: '0 4px 16px rgba(0,0,0,.22)', cursor: 'pointer', transition: 'transform .22s', fontFamily: 'inherit' }}
                  onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.05)')} onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}>
                  <span style={{ fontSize: 22 }}>{b.icon}</span>
                  <div style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: 10, color: 'rgba(199,210,254,.8)', fontWeight: 500 }}>{b.top}</div>
                    <div style={{ fontSize: 14, color: '#fff', fontWeight: 700 }}>{b.btm}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>
          {/* Phone mockups */}
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexShrink: 0 }} className="hide-mobile">
            {[
              { rot: '6deg', mt: '48px', bg: 'linear-gradient(160deg,#312e81,#4f46e5)', icon: '📊' },
              { rot: '-5deg', mt: '0', bg: 'linear-gradient(160deg,#0f172a,#1e3a8a)', icon: '🛒' },
            ].map((ph, i) => (
              <div key={i} style={{ width: 128, height: 255, borderRadius: 28, padding: 5, background: '#1a1a2e', boxShadow: '0 25px 60px rgba(0,0,0,.5)', transform: `rotate(${ph.rot})`, marginTop: ph.mt }}>
                <div style={{ width: '100%', height: '100%', borderRadius: 22, overflow: 'hidden', background: ph.bg, display: 'flex', flexDirection: 'column', padding: 12, gap: 8 }}>
                  <div style={{ height: 4, width: 36, borderRadius: 99, background: 'rgba(255,255,255,.25)' }} />
                  <div style={{ flex: 1, background: 'rgba(255,255,255,.08)', borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 30 }}>{ph.icon}</div>
                  <div style={{ height: 5, borderRadius: 99, background: 'rgba(255,255,255,.12)' }} />
                  <div style={{ height: 5, borderRadius: 99, background: 'rgba(255,255,255,.08)' }} />
                  <div style={{ height: 24, borderRadius: 10, background: 'rgba(79,70,229,.6)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ color: '#fff', fontSize: 10, fontWeight: 700 }}>বিস্তারিত দেখুন</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ TESTIMONIALS ════════════════════════════════════════ */}
      <section style={{ padding: '80px 0 60px', background: 'rgba(255,255,255,.42)', backdropFilter: 'blur(14px)', borderTop: '1px solid rgba(255,255,255,.75)', borderBottom: '1px solid rgba(255,255,255,.75)', position: 'relative', zIndex: 1, overflow: 'hidden' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', padding: '0 24px 44px' }}>
          <span style={{ fontSize: 11, fontWeight: 700, color: '#4F46E5', textTransform: 'uppercase', letterSpacing: 4, background: 'rgba(238,242,255,.95)', padding: '5px 14px', borderRadius: 99, border: '1px solid rgba(165,180,252,.4)' }}>রিভিউ</span>
          <h2 style={{ fontSize: 'clamp(24px,4vw,38px)', fontWeight: 900, color: '#0F172A', marginBottom: 8, marginTop: 14 }}>গ্রাহকরা কী বলছেন</h2>
          <p style={{ color: '#6B7280', fontSize: 15, margin: '0 auto 16px', maxWidth: 480 }}>হাজারো সন্তুষ্ট ব্যবসায়ীর সত্যিকারের অভিজ্ঞতা থেকে জানুন</p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(251,191,36,.1)', border: '1px solid rgba(251,191,36,.3)', borderRadius: 99, padding: '6px 16px' }}>
            {[1, 2, 3, 4, 5].map(s => <span key={s} style={{ color: '#FBBF24', fontSize: 16 }}>★</span>)}
            <span style={{ fontWeight: 800, color: '#92400E', fontSize: 14, marginLeft: 4 }}>৪.৯/৫</span>
            <span style={{ color: '#B45309', fontSize: 13 }}>· ১,২০০+ রিভিউ</span>
          </div>
        </div>

        {/* Static Grid — 4 columns desktop, 2 tablet, 1 mobile */}
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20 }}>
          {[
            { name: 'মোঃ রফিক', business: 'স্টাইলহাউস বিডি', icon: '👗', bg: '#F5F3FF', color: '#7C3AED', text: 'ShophyFast ব্যবহার করে আমার বিক্রি ৩ গুণ বেড়েছে। AI বট রাত ১২টায়ও অর্ডার নেয়!' },
            { name: 'সুমাইয়া আক্তার', business: 'ফ্যাশন কর্নার', icon: '👠', bg: '#FFF0F3', color: '#E11D48', text: 'মাত্র ১ দিনে পুরো স্টোর সেটআপ করলাম। গ্রাহকরা প্রশংসা করছে সুন্দর ডিজাইনের জন্য।' },
            { name: 'আরিফুল ইসলাম', business: 'গ্যাজেট পয়েন্ট', icon: '📱', bg: '#EFF6FF', color: '#2563EB', text: 'ফেসবুক মেসেঞ্জারে অটোমেটিক বাংলায় রিপ্লাই দেয়। একটাও কাস্টমার মিস হয় না!' },
            { name: 'নাজমা বেগম', business: 'হোম ডেকোর শপ', icon: '🏠', bg: '#FFFBEB', color: '#D97706', text: 'প্রতিটি পণ্যের জন্য আলাদা ল্যান্ডিং পেজ বানালাম। কনভার্সন অনেক বেড়ে গেছে।' },
            { name: 'ফাহিম হোসেন', business: 'ফিটনেস জোন', icon: '💪', bg: '#ECFDF5', color: '#059669', text: 'Analytics dashboard থেকে কোন পণ্য বেশি বিক্রি হচ্ছে সব দেখতে পাই। ব্যবসা পরিচালনা সহজ।' },
            { name: 'তারেক রহমান', business: 'খাবার দাবার', icon: '🍱', bg: '#FFF4F0', color: '#EA580C', text: 'ঢাকা থেকে Dhakaপর্যন্ত ডেলিভারি ম্যানেজ করা এখন সহজ। কুরিয়ার ইন্টিগ্রেশন চমৎকার।' },
            { name: 'রেজাউল করিম', business: 'বুক হাউস', icon: '📚', bg: '#F0FDF4', color: '#16A34A', text: 'Customer support টিম সবসময় সাহায্য করে। প্ল্যাটফর্ম ব্যবহার করা অনেক সহজ এবং মসৃণ।' },
            { name: 'সাদিয়া ইসলাম', business: 'বিউটি কালেকশন', icon: '💄', bg: '#FDF4FF', color: '#A21CAF', text: 'মোবাইল থেকে সহজেই স্টোর পরিচালনা করা যায়। অর্ডার নোটিফিকেশন সাথে সাথে পাই। দারুণ!' },
          ].map((t, i) => (
            <div key={i} className="t3d glass" style={{ borderRadius: 20, padding: '22px', boxSizing: 'border-box' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
                <div style={{ width: 46, height: 46, borderRadius: '50%', background: t.bg, border: `2px solid ${t.color}33`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, flexShrink: 0 }}>{t.icon}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 800, color: '#1E293B', fontSize: 14 }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: t.color, fontWeight: 600, marginTop: 2 }}>{t.business}</div>
                </div>
                <div style={{ display: 'flex', gap: 1 }}>{[1, 2, 3, 4, 5].map(s => <span key={s} style={{ color: '#FBBF24', fontSize: 12 }}>★</span>)}</div>
              </div>
              <p style={{ fontSize: 13.5, color: '#475569', lineHeight: 1.8, margin: 0 }}>"{t.text}"</p>
            </div>
          ))}
        </div>
      </section>

      {/* ═══ STATS ══════════════════════════════════════════════ */}
      <section style={{ padding: '80px 32px', position: 'relative', zIndex: 1 }} ref={statsRef}>
        {/* Background glow */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent,rgba(238,242,255,.6),transparent)', pointerEvents: 'none' }} />
        <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>

          {/* Section label */}
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(238,242,255,.95)', border: '1px solid rgba(165,180,252,.4)', borderRadius: 99, padding: '6px 16px', fontSize: 11, fontWeight: 700, color: '#4F46E5', textTransform: 'uppercase' as const, letterSpacing: 3 }}>
              <span className="plive" style={{ width: 6, height: 6, borderRadius: '50%', background: '#10B981', boxShadow: '0 0 6px #10B981', display: 'inline-block' }} />
              বাস্তব পরিসংখ্যান
            </div>
          </div>

          {/* Stats grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 20 }}>
            {[
              { val: `${storeCount.toLocaleString()}+`, label: 'সক্রিয় স্টোর', icon: '🏪', color: '#4F46E5', bg: 'linear-gradient(135deg,rgba(79,70,229,.12),rgba(99,102,241,.06))', border: 'rgba(165,180,252,.35)', trend: '+১৮% এই মাসে', tcolor: '#4F46E5' },
              { val: `${ordersCount}K+`, label: 'অর্ডার প্রসেস', icon: '📦', color: '#10B981', bg: 'linear-gradient(135deg,rgba(16,185,129,.1),rgba(52,211,153,.05))', border: 'rgba(110,231,183,.35)', trend: '+২৪% এই মাসে', tcolor: '#10B981' },
              { val: `৳${revenueCount}M+`, label: 'আয় উৎপন্ন', icon: '💰', color: '#F59E0B', bg: 'linear-gradient(135deg,rgba(245,158,11,.1),rgba(251,191,36,.05))', border: 'rgba(253,230,138,.45)', trend: '+৩৪% এই মাসে', tcolor: '#D97706' },
              { val: `${happyCount.toLocaleString()}+`, label: 'সন্তুষ্ট গ্রাহক', icon: '😊', color: '#EC4899', bg: 'linear-gradient(135deg,rgba(236,72,153,.1),rgba(244,114,182,.05))', border: 'rgba(249,168,212,.35)', trend: '★৪.৯/৫ রেটিং', tcolor: '#EC4899' },
            ].map((s, i) => (
              <div key={i} className="t3d glass shine" style={{ borderRadius: 24, padding: '28px 24px', background: s.bg, border: `1px solid ${s.border}`, position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
                {/* bg glow */}
                <div style={{ position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: `radial-gradient(circle,${s.color}18,transparent)`, pointerEvents: 'none' }} />
                {/* icon */}
                <div style={{ width: 52, height: 52, borderRadius: 16, background: `${s.color}18`, border: `1px solid ${s.color}2a`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, margin: '0 auto 14px', boxShadow: `0 4px 16px ${s.color}20` }}>
                  {s.icon}
                </div>
                {/* value */}
                <div style={{ fontSize: 'clamp(32px,4vw,44px)', fontWeight: 900, color: s.color, fontVariantNumeric: 'tabular-nums', lineHeight: 1, marginBottom: 6, letterSpacing: '-1px' }}>
                  {s.val}
                </div>
                {/* label */}
                <div style={{ fontSize: 14, color: '#64748B', fontWeight: 600, marginBottom: 10 }}>{s.label}</div>
                {/* trend badge */}
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: `${s.tcolor}12`, border: `1px solid ${s.tcolor}25`, borderRadius: 99, padding: '3px 10px', fontSize: 11, fontWeight: 700, color: s.tcolor }}>
                  ↑ {s.trend}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ BOTTOM CTA ════════════════════════════════════════════ */}
      <section style={{ padding: '80px 32px 100px', position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ borderRadius: 32, overflow: 'hidden', position: 'relative', background: 'linear-gradient(135deg,#0F172A 0%,#1E1B4B 40%,#1E3A5F 100%)', boxShadow: '0 40px 100px rgba(79,70,229,.3), 0 0 0 1px rgba(255,255,255,.06)' }}>

            {/* Floating orbs */}
            <div style={{ position: 'absolute', top: -80, left: -80, width: 320, height: 320, borderRadius: '50%', background: 'radial-gradient(circle,rgba(79,70,229,.35),transparent)', pointerEvents: 'none', filter: 'blur(60px)' }} />
            <div style={{ position: 'absolute', bottom: -60, right: -60, width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle,rgba(14,165,233,.3),transparent)', pointerEvents: 'none', filter: 'blur(50px)' }} />
            <div style={{ position: 'absolute', top: '30%', left: '45%', width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle,rgba(236,72,153,.15),transparent)', pointerEvents: 'none', filter: 'blur(40px)' }} />

            {/* Grid pattern overlay */}
            <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px)', backgroundSize: '28px 28px', pointerEvents: 'none' }} />

            <div style={{ position: 'relative', padding: '64px 48px', textAlign: 'center' }}>
              {/* Badge */}
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 24, padding: '8px 20px', borderRadius: 999, background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.15)', backdropFilter: 'blur(12px)', fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,.85)' }}>
                <span className="plive" style={{ width: 7, height: 7, borderRadius: '50%', background: '#22C55E', boxShadow: '0 0 8px #22C55E', display: 'inline-block' }} />
                ১৩,০০০+ উদ্যোক্তা ইতিমধ্যে শুরু করেছেন
              </div>

              {/* Headline */}
              <h2 style={{ fontSize: 'clamp(28px,4.5vw,52px)', fontWeight: 900, color: '#fff', marginBottom: 16, lineHeight: 1.12, letterSpacing: '-1.5px' }}>
                আজই ShophyFast দিয়ে
                <br />
                <span style={{ background: 'linear-gradient(135deg,#818CF8,#38BDF8,#34D399)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                  আপনার স্বপ্নের স্টোর খুলুন
                </span>
              </h2>
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,.65)', marginBottom: 40, lineHeight: 1.7, maxWidth: 580, margin: '0 auto 40px' }}>
                ১ মিনিটে স্টোর তৈরি করুন — থিম বেছে নিন, পণ্য যোগ করুন, AI বট চালু করুন।<br />কোনো কোডিং জ্ঞান লাগবে না।
              </p>

              {/* CTAs */}
              <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
                <button id="cta-register" onClick={openRegister} className="shine" style={{ padding: '16px 40px', borderRadius: 16, fontSize: 16, fontWeight: 800, background: 'linear-gradient(135deg,#4F46E5,#7C3AED)', color: '#fff', border: 'none', cursor: 'pointer', boxShadow: '0 8px 28px rgba(79,70,229,.5), inset 0 1px 0 rgba(255,255,255,.15)', fontFamily: 'inherit', transition: 'all .22s' }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 36px rgba(79,70,229,.6)'; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 28px rgba(79,70,229,.5)'; }}>
                  বিনামূল্যে স্টোর তৈরি করুন 🚀
                </button>
                <button id="cta-login" onClick={openLogin} style={{ padding: '16px 36px', borderRadius: 16, fontSize: 16, fontWeight: 700, background: 'rgba(255,255,255,.1)', color: '#fff', border: '1px solid rgba(255,255,255,.2)', cursor: 'pointer', backdropFilter: 'blur(12px)', fontFamily: 'inherit', transition: 'all .22s' }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,.18)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,.1)'; }}>
                  প্রবেশ করুন →
                </button>
              </div>

              {/* Trust icons row */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
                {[
                  { icon: '🔒', text: 'নিরাপদ SSL' },
                  { icon: '⚡', text: '১ মিনিটে সেটআপ' },
                  { icon: '🤖', text: 'AI বট ফ্রি' },
                  { icon: '📞', text: '২৪/৭ সাপোর্ট' },
                  { icon: '💳', text: 'কার্ড লাগবে না' },
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 14 }}>{t.icon}</span>
                    <span style={{ fontSize: 12, color: 'rgba(255,255,255,.55)', fontWeight: 500 }}>{t.text}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══ FOOTER — White glassmorphism ═══════════════════════ */}
      <footer id="contact" style={{ position: 'relative', zIndex: 1 }}>
        {/* Glossy glass footer */}
        <div style={{ background: 'rgba(255,255,255,.75)', backdropFilter: 'blur(30px)', WebkitBackdropFilter: 'blur(30px)', borderTop: '1px solid rgba(255,255,255,.95)', boxShadow: '0 -8px 40px rgba(99,102,241,.06), inset 0 1px 0 rgba(255,255,255,1)', borderRadius: '32px 32px 0 0', padding: '64px 24px 32px', margin: '0 8px' }}>
          {/* Top shine */}
          <div style={{ position: 'absolute', top: 0, left: '10%', right: '10%', height: 1, background: 'linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent)', borderRadius: 99 }} />

          <div style={{ maxWidth: 1440, margin: '0 auto' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 40, marginBottom: 48 }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                  {!landingLoaded ? (
                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(0,0,0,.04)' }} />
                  ) : logoUrl ? (
                    <img src={logoUrl} alt={siteName || 'ShophyFast'} style={{ height: 38, maxWidth: 160, objectFit: 'contain', borderRadius: 10 }} />
                  ) : (
                    <>
                      <div style={{ width: 38, height: 38, borderRadius: 12, background: 'linear-gradient(135deg,#4F46E5,#2563EB)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 900, fontSize: 16, boxShadow: '0 4px 16px rgba(79,70,229,.35)' }}>S</div>
                      <span style={{ fontSize: 20, fontWeight: 900, color: '#0F172A' }}>ShophyFast</span>
                    </>
                  )}
                </div>
                <p style={{ fontSize: 13, color: '#64748B', lineHeight: 1.75 }}>বাংলাদেশে আপনার ই-কমার্স ব্যবসা তৈরি ও বাড়ানোর জন্য বিশ্বস্ত প্ল্যাটফর্ম।</p>
                {/* Social icons */}
                <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                  {['📘', '📷', '🐦', '💼'].map((icon, ii) => (
                    <a key={ii} href="#" style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(99,102,241,.08)', border: '1px solid rgba(165,180,252,.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, textDecoration: 'none', transition: 'all .2s' }}
                      onMouseEnter={e => (e.currentTarget.style.background = 'rgba(79,70,229,.15)')} onMouseLeave={e => (e.currentTarget.style.background = 'rgba(99,102,241,.08)')}>{icon}</a>
                  ))}
                </div>
              </div>
              {[
                {
                  title: 'প্ল্যাটফর্ম', links: [
                    { label: 'বৈশিষ্ট্য', href: '/features' },
                    { label: 'মূল্য', href: '/#pricing' },
                    { label: 'থিম', href: '/themes' },
                    { label: 'এআই মেসেঞ্জার', href: '/ai-messenger' },
                  ]
                },
                {
                  title: 'কোম্পানি', links: [
                    { label: 'আমাদের সম্পর্কে', href: '/about' },
                    { label: 'ব্লগ', href: '/blog' },
                    { label: 'ক্যারিয়ার', href: '/career' },
                    { label: 'প্রেস', href: '/press' },
                    { label: 'অংশীদার', href: '/partners' },
                  ]
                },
                {
                  title: 'সহায়তা', links: [
                    { label: 'সহায়তা কেন্দ্র', href: '/help' },
                    { label: 'যোগাযোগ', href: '/contact' },
                    { label: 'গোপনীয়তা নীতি', href: '/privacy' },
                    { label: 'সেবার শর্তাবলী', href: '/terms' },
                    { label: 'সাধারণ জিজ্ঞাসা', href: '/faq' },
                  ]
                },
              ].map(col => (
                <div key={col.title}>
                  <h4 style={{ color: '#0F172A', fontWeight: 800, fontSize: 14, marginBottom: 18 }}>{col.title}</h4>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                    {col.links.map(l => (
                      <li key={l.label}>
                        <a href={l.href} style={{ color: '#64748B', fontSize: 13, textDecoration: 'none', transition: 'color .2s' }}
                          onMouseEnter={e => (e.currentTarget.style.color = '#4F46E5')} onMouseLeave={e => (e.currentTarget.style.color = '#64748B')}>{l.label}</a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>

            {/* Bottom bar */}
            <div style={{ borderTop: '1px solid rgba(99,102,241,.1)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
              <span style={{ fontSize: 13, color: '#94A3B8' }}>© ২০২৪ ShophyFast. সর্বস্বত্ব সংরক্ষিত।</span>
              <div style={{ display: 'flex', gap: 16 }}>
                {['গোপনীয়তা', 'শর্তাবলী', 'কুকি'].map(l => (
                  <a key={l} href="#" style={{ fontSize: 12, color: '#94A3B8', textDecoration: 'none', transition: 'color .2s' }}
                    onMouseEnter={e => (e.currentTarget.style.color = '#4F46E5')} onMouseLeave={e => (e.currentTarget.style.color = '#94A3B8')}>{l}</a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </footer>

      {showModal && (
        <TenantSignupModal
          defaultTab={modalTab}
          onClose={() => setShowModal(false)}
          onSuccess={(tenant, token) => { setShowModal(false); onTenantLogin(tenant, token); }}
        />
      )}

      {/* Ubaidi AI Chat — ShophyFast platform context */}
      <UbaidiChat 
        context="platform" 
        extra={{
          plansList: displayPlans.map(p => ({
            name: p.name,
            price: p.price,
            duration: p.duration_days
          })),
          trialDays: trialDays
        }}
      />
    </div>
  );
};

export default MainLanding;