'use client';
import React, { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { useTranslation } from '@client/contexts/LanguageContext';

type TFn = (key: string, fallback?: string, vars?: Record<string, string | number>) => string;

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

/* ─── Parallax Hook ─── */
function useParallax(speed = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const center = rect.top + rect.height / 2 - window.innerHeight / 2;
      el.style.transform = `translateY(${center * speed}px)`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [speed]);
  return ref;
}

/* ─── Staggered Reveal Hook ─── */
function useStaggeredInView(count: number, threshold = 0.1) {
  const ref = useRef<HTMLDivElement>(null);
  const [visibleCount, setVisibleCount] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        obs.disconnect();
        for (let i = 0; i < count; i++) {
          setTimeout(() => setVisibleCount(v => v + 1), i * 110);
        }
      }
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, [count, threshold]);
  return { ref, visibleCount };
}

/* ─── Animated Counter ─── */
function Counter({ end, suffix = '', duration = 2000 }: { end: number; suffix?: string; duration?: number }) {
  const [count, setCount] = useState(0);
  const { ref, inView } = useInView(0.3);
  useEffect(() => {
    if (!inView) return;
    let start = 0;
    const step = end / (duration / 16);
    const timer = setInterval(() => {
      start += step;
      if (start >= end) { setCount(end); clearInterval(timer); } else setCount(Math.floor(start));
    }, 16);
    return () => clearInterval(timer);
  }, [inView, end, duration]);
  return <span ref={ref}>{count.toLocaleString()}{suffix}</span>;
}

/* ─── Marquee ─── */
const getIntegrationLogos = (t: TFn) => [
  { name: t('landing.home.intLogo1', 'Uber Eats'), color: '#06C167' }, { name: t('landing.home.intLogo2', 'DoorDash'), color: '#FF3008' },
  { name: t('landing.home.intLogo3', 'Grubhub'), color: '#F63440' }, { name: t('landing.home.intLogo4', 'Square POS'), color: '#3E4348' },
  { name: t('landing.home.intLogo5', 'Toast POS'), color: '#FF4C00' }, { name: t('landing.home.intLogo6', 'Stripe'), color: '#635BFF' },
  { name: t('landing.home.intLogo7', 'Twilio'), color: '#F22F46' }, { name: t('landing.home.intLogo8', 'OpenTable'), color: '#DA3743' },
  { name: t('landing.home.intLogo9', 'Resy'), color: '#1A1A1A' }, { name: t('landing.home.intLogo10', 'Clover'), color: '#00A651' },
  { name: t('landing.home.intLogo11', 'Lightspeed'), color: '#FF6B35' }, { name: t('landing.home.intLogo12', 'Yelp'), color: '#D32323' },
];

function Marquee() {
  const { t } = useTranslation();
  const integrationLogos = getIntegrationLogos(t);
  const items = [...integrationLogos, ...integrationLogos];
  return (
    <div className="overflow-hidden py-5 relative">
      <div className="absolute left-0 top-0 bottom-0 w-16 sm:w-24 z-10 bg-gradient-to-r from-slate-50 dark:from-[#0a0c10] to-transparent pointer-events-none" />
      <div className="absolute right-0 top-0 bottom-0 w-16 sm:w-24 z-10 bg-gradient-to-l from-slate-50 dark:from-[#0a0c10] to-transparent pointer-events-none" />
      <div className="flex gap-3 sm:gap-4 animate-marquee whitespace-nowrap">
        {items.map((logo, i) => (
          <div key={i} className="inline-flex items-center gap-2 sm:gap-2.5 px-3 sm:px-5 py-2 sm:py-2.5 rounded-full border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 shadow-sm flex-shrink-0 hover:border-orange-200 dark:hover:border-orange-800 transition-colors duration-200">
            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: logo.color }} />
            <span className="text-xs sm:text-sm font-medium text-slate-600 dark:text-slate-400">{logo.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─── Live Dashboard Mockup ─── */
function DashboardMockup() {
  const { t } = useTranslation();
  const [activeOrders, setActiveOrders] = useState(14);
  useEffect(() => {
    const t = setInterval(() => setActiveOrders(v => v + Math.floor(Math.random() * 2)), 3000);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="relative w-full max-w-sm sm:max-w-md lg:max-w-lg mx-auto">
      <div className="relative bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-100 dark:border-slate-800 overflow-hidden">
        <div className="bg-slate-900 dark:bg-slate-950 px-4 sm:px-5 py-3 sm:py-3.5 flex items-center justify-between">
          <div className="flex items-center gap-1.5 sm:gap-2">
            <div className="w-2 sm:w-2.5 h-2 sm:h-2.5 rounded-full bg-red-400" />
            <div className="w-2 sm:w-2.5 h-2 sm:h-2.5 rounded-full bg-yellow-400" />
            <div className="w-2 sm:w-2.5 h-2 sm:h-2.5 rounded-full bg-green-400" />
          </div>
          <div className="flex items-center gap-2 bg-slate-800 rounded-lg px-2.5 sm:px-3 py-1">
            <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
            <span className="text-[10px] sm:text-xs text-slate-400 font-medium">{t('landing.home.mockLiveDashboard', 'Live Dashboard')}</span>
          </div>
          <div className="text-[10px] sm:text-xs text-slate-500">RestroAgent</div>
        </div>
        <div className="grid grid-cols-3 gap-0 border-b border-slate-100 dark:border-slate-800">
          {[
            { label: t('landing.home.mockKpi1', 'Active Orders'), value: activeOrders, color: 'text-orange-600 dark:text-orange-400', bg: 'bg-orange-50 dark:bg-orange-900/20' },
            { label: t('landing.home.mockKpi2', 'AI Handled'), value: '98%', color: 'text-teal-600 dark:text-teal-400', bg: 'bg-teal-50 dark:bg-teal-900/20' },
            { label: t('landing.home.mockKpi3', 'Avg Response'), value: '1.2s', color: 'text-slate-700 dark:text-slate-300', bg: 'bg-slate-50 dark:bg-slate-800/50' },
          ].map((kpi, i) => (
            <div key={i} className={`${kpi.bg} px-3 sm:px-4 py-2.5 sm:py-3 ${i < 2 ? 'border-r border-slate-100 dark:border-slate-800' : ''}`}>
              <div className={`text-lg sm:text-xl font-bold ${kpi.color} tabular-nums`}>{kpi.value}</div>
              <div className="text-[10px] sm:text-xs text-slate-500 dark:text-slate-400 mt-0.5">{kpi.label}</div>
            </div>
          ))}
        </div>
        <div className="p-3 sm:p-4 space-y-2 sm:space-y-2.5">
          {[
            { name: t('landing.home.mockMsg1Name', 'Table 7 — Dine-in'), msg: t('landing.home.mockMsg1Text', 'Order confirmed: Pasta Carbonara × 2, Tiramisu × 1'), time: t('landing.home.mockTime1', '2s ago'), status: 'success', channelType: 'chat' },
            { name: t('landing.home.mockMsg2Name', 'Phone +1 (555) 0142'), msg: t('landing.home.mockMsg2Text', 'Booking for 4 on Friday 7pm — confirmed & SMS sent'), time: t('landing.home.mockTime2', '18s ago'), status: 'success', channelType: 'phone' },
            { name: t('landing.home.mockMsg3Name', 'WhatsApp +44 7700'), msg: t('landing.home.mockMsg3Text', 'Asking about gluten-free options — AI responding...'), time: t('landing.home.mockTime3', '34s ago'), status: 'pending', channelType: 'chat' },
          ].map((item, i) => (
            <div key={i} className="flex items-start gap-2.5 sm:gap-3 p-2 sm:p-2.5 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
              <div className="w-7 sm:w-8 h-7 sm:h-8 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center flex-shrink-0">
                {item.channelType === 'phone'
                  ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                }
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <span className="text-[11px] sm:text-xs font-semibold text-slate-800 dark:text-slate-200 truncate">{item.name}</span>
                  <span className="text-[9px] sm:text-[10px] text-slate-400 flex-shrink-0">{item.time}</span>
                </div>
                <p className="text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-400 truncate mt-0.5">{item.msg}</p>
              </div>
              <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1.5 ${item.status === 'success' ? 'bg-emerald-400' : 'bg-amber-400 animate-pulse'}`} />
            </div>
          ))}
        </div>
      </div>
      <div className="absolute -top-4 sm:-top-5 -right-3 sm:-right-5 bg-white dark:bg-slate-800 rounded-xl sm:rounded-2xl px-3 sm:px-4 py-2.5 sm:py-3 shadow-xl border border-slate-100 dark:border-slate-700 animate-float">
        <div className="text-[10px] sm:text-xs text-slate-500 dark:text-slate-400 mb-0.5 sm:mb-1">{t('landing.home.mockRevLabel', 'Revenue today')}</div>
        <div className="text-base sm:text-lg font-bold text-slate-900 dark:text-white">$4,821</div>
        <div className="text-[10px] sm:text-xs text-emerald-500 font-medium">{t('landing.home.mockRevStat', '↑ 23% vs yesterday')}</div>
      </div>
      <div className="absolute -bottom-4 sm:-bottom-5 -left-3 sm:-left-5 bg-white dark:bg-slate-800 rounded-xl sm:rounded-2xl px-3 sm:px-4 py-2.5 sm:py-3 shadow-xl border border-slate-100 dark:border-slate-700 animate-float-delayed">
        <div className="flex items-center gap-2">
          <div className="w-6 sm:w-7 h-6 sm:h-7 rounded-lg bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#0d9488" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          </div>
          <div>
            <div className="text-[11px] sm:text-xs font-semibold text-slate-800 dark:text-slate-200">{t('landing.home.mockCallsStat', 'Zero missed calls')}</div>
            <div className="text-[9px] sm:text-[10px] text-slate-400">{t('landing.home.mockTimeframe', 'Last 30 days')}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── Case Studies Data ─── */
const getCaseStudies = (t: TFn) => [
  {
    logo: 'BN',
    logoColor: 'from-orange-500 to-orange-700',
    restaurant: t('landing.home.cs1Restaurant', 'Bella Napoli'),
    location: t('landing.home.cs1Location', 'New York, NY · 1 location'),
    plan: t('landing.home.cs1Plan', 'Growth Plan'),
    planColor: 'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300',
    quote: t('landing.home.caseStudy1Quote', 'We went from missing 30% of phone orders during rush hour to zero missed calls. The ROI was clear within the first week.'),
    author: t('landing.home.cs1Author', 'Marco Rossi, Owner'),
    accent: 'orange',
    metrics: [
      { label: t('landing.home.metricMissedCalls', 'Missed Calls'), before: '30%', after: '0%', improvement: '↓ 100%', positive: true },
      { label: t('landing.home.metricAIResolutionRate', 'AI Resolution Rate'), before: '—', after: '96.2%', improvement: '+96.2%', positive: true },
      { label: t('landing.home.metricMonthlyRevenue', 'Monthly Revenue'), before: '$28K', after: '$41K', improvement: '+46%', positive: true },
    ],
    highlight: t('landing.home.caseStudy1Highlight', '$13K extra revenue per month'),
    highlightIcon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>,
  },
  {
    logo: 'SG',
    logoColor: 'from-teal-500 to-teal-700',
    restaurant: t('landing.home.cs2Restaurant', 'Spice Garden Group'),
    location: t('landing.home.cs2Location', 'Chicago, IL · 8 locations'),
    plan: t('landing.home.cs2Plan', 'Enterprise Plan'),
    planColor: 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300',
    quote: t('landing.home.caseStudy2Quote', 'Managing 8 branches from one dashboard changed everything. Staff now focus on guests, not phones. Revenue up 31% in 3 months.'),
    author: t('landing.home.cs2Author', 'Priya Sharma, General Manager'),
    accent: 'teal',
    metrics: [
      { label: t('landing.home.metricStaffPhoneTime', 'Staff Phone Time'), before: '4h/day', after: '22min/day', improvement: '↓ 91%', positive: true },
      { label: t('landing.home.metricAIResolutionRate', 'AI Resolution Rate'), before: '—', after: '98.4%', improvement: '+98.4%', positive: true },
      { label: t('landing.home.metricQuarterlyRevenue', 'Quarterly Revenue'), before: '$310K', after: '$406K', improvement: '+31%', positive: true },
    ],
    highlight: t('landing.home.caseStudy2Highlight', '$96K revenue lift in 90 days'),
    highlightIcon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>,
  },
  {
    logo: 'DP',
    logoColor: 'from-blue-500 to-blue-700',
    restaurant: t('landing.home.cs3Restaurant', 'Dragon Palace Group'),
    location: t('landing.home.cs3Location', 'San Francisco, CA · 3 locations'),
    plan: t('landing.home.cs3Plan', 'Enterprise Plan'),
    planColor: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
    quote: t('landing.home.caseStudy3Quote', 'The multilingual support is incredible. Our Mandarin and English customers both get flawless service. Setup took one afternoon.'),
    author: t('landing.home.cs3Author', 'James Chen, CEO'),
    accent: 'blue',
    metrics: [
      { label: t('landing.home.metricLanguagesSupported', 'Languages Supported'), before: '1', after: '12', improvement: '+1100%', positive: true },
      { label: t('landing.home.metricAIResolutionRate', 'AI Resolution Rate'), before: '—', after: '97.8%', improvement: '+97.8%', positive: true },
      { label: t('landing.home.metricOnlineOrders', 'Online Orders'), before: '180/mo', after: '312/mo', improvement: '+73%', positive: true },
    ],
    highlight: t('landing.home.caseStudy3Highlight', '73% more online orders captured'),
    highlightIcon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>,
  },
];

const caseAccentMap: Record<string, { border: string; bg: string; badgeBg: string; metricBefore: string; metricAfter: string; highlight: string; glow: string }> = {
  orange: {
    border: 'border-orange-100 dark:border-orange-900/40',
    bg: 'bg-orange-50/50 dark:bg-orange-950/20',
    badgeBg: 'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300',
    metricBefore: 'bg-red-50 dark:bg-red-950/30 text-red-600 dark:text-red-400',
    metricAfter: 'bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400',
    highlight: 'bg-orange-500/10 border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300',
    glow: 'hover:shadow-orange-100/60 dark:hover:shadow-orange-900/20',
  },
  teal: {
    border: 'border-teal-100 dark:border-teal-900/40',
    bg: 'bg-teal-50/50 dark:bg-teal-950/20',
    badgeBg: 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300',
    metricBefore: 'bg-red-50 dark:bg-red-950/30 text-red-600 dark:text-red-400',
    metricAfter: 'bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400',
    highlight: 'bg-teal-500/10 border-teal-200 dark:border-teal-800 text-teal-700 dark:text-teal-300',
    glow: 'hover:shadow-teal-100/60 dark:hover:shadow-teal-900/20',
  },
  blue: {
    border: 'border-blue-100 dark:border-blue-900/40',
    bg: 'bg-blue-50/50 dark:bg-blue-950/20',
    badgeBg: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
    metricBefore: 'bg-red-50 dark:bg-red-950/30 text-red-600 dark:text-red-400',
    metricAfter: 'bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400',
    highlight: 'bg-blue-500/10 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300',
    glow: 'hover:shadow-blue-100/60 dark:hover:shadow-blue-900/20',
  },
};

/* ─── Testimonials Data ─── */
const getTestimonials = (t: TFn) => [
  {
    name: t('landing.home.t1Name', 'Marco Rossi'),
    role: t('landing.home.t1Role', 'Owner, Bella Napoli'),
    plan: t('landing.home.t1Plan', 'Growth Plan'),
    planColor: 'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300',
    quote: t('landing.home.testimonial1Quote', "We went from missing 30% of phone orders during rush hour to zero missed calls. The AI handles it perfectly — even our regulars can't tell the difference."),
    rating: 5,
    avatar: 'MR',
    color: 'from-orange-400 to-orange-600',
    verified: true,
    span: 'lg:col-span-4',
  },
  {
    name: t('landing.home.t2Name', 'Priya Sharma'),
    role: t('landing.home.t2Role', 'GM, Spice Garden (8 locations)'),
    plan: t('landing.home.t2Plan', 'Enterprise Plan'),
    planColor: 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300',
    quote: t('landing.home.testimonial2Quote', 'Managing 8 branches from one dashboard changed everything. Staff focus on guests, not phones. Revenue up 31% in 3 months. The ROI was undeniable from week one.'),
    rating: 5,
    avatar: 'PS',
    color: 'from-teal-400 to-teal-600',
    verified: true,
    span: 'lg:col-span-8',
  },
  {
    name: t('landing.home.t3Name', 'James Chen'),
    role: t('landing.home.t3Role', 'CEO, Dragon Palace Group'),
    plan: t('landing.home.t3Plan', 'Enterprise Plan'),
    planColor: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
    quote: t('landing.home.testimonial3Quote', 'The multilingual support is incredible. Our Mandarin and English customers both get flawless service. Setup took one afternoon.'),
    rating: 5,
    avatar: 'JC',
    color: 'from-blue-400 to-blue-600',
    verified: true,
    span: 'lg:col-span-5',
  },
  {
    name: t('landing.home.t4Name', 'Sofia Andrade'),
    role: t('landing.home.t4Role', 'Owner, Casa Mia'),
    plan: t('landing.home.t4Plan', 'Starter Plan'),
    planColor: 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300',
    quote: t('landing.home.testimonial4Quote', 'Within a week, online orders were up 40% because the AI upsells naturally. It suggested desserts better than our best server.'),
    rating: 5,
    avatar: 'SA',
    color: 'from-emerald-400 to-emerald-600',
    verified: true,
    span: 'lg:col-span-7',
  },
];

/* ─── FAQ Data ─── */
const getFaqs = (t: TFn) => [
  { q: t('landing.home.faqQ1', 'How quickly can RestroAgent be set up?'), a: t('landing.home.faqA1', 'Most restaurants are live within 2 hours. You connect your menu, set your preferences, and point your phone number — we handle the rest. No developers needed.') },
  { q: t('landing.home.faqQ2', 'What languages does the AI support?'), a: t('landing.home.faqA2', 'RestroAgent supports 40+ languages including English, Spanish, Mandarin, French, Arabic, Portuguese, Japanese, and more. Language detection is fully automatic.') },
  { q: t('landing.home.faqQ3', 'Does it integrate with my existing POS?'), a: t('landing.home.faqA3', "Yes — we integrate natively with Toast, Square, Clover, Lightspeed, and 50+ other POS systems. If yours isn't listed, contact us and we'll build the connector at no extra cost.") },
  { q: t('landing.home.faqQ4', 'What happens if the AI can\'t answer a question?'), a: t('landing.home.faqA4', 'The AI escalates gracefully — it alerts your staff via SMS or hands the call to a human team member. No customer ever gets left with an unanswered question.') },
  { q: t('landing.home.faqQ5', 'Is there a contract or minimum commitment?'), a: t('landing.home.faqA5', 'No contracts, no lock-in. All plans are billed monthly and you can cancel any time. Annual plans are available at a 20% discount.') },
  { q: t('landing.home.faqQ6', 'Can I customise what the AI says and how it sounds?'), a: t('landing.home.faqA6', 'Absolutely. You control the tone, personality, greetings, upsell scripts, fallback messages, and brand language. The AI sounds exactly like your restaurant, not a generic bot.') },
  { q: t('landing.home.faqQ7', 'How does pricing work for multiple locations?'), a: t('landing.home.faqA7', 'Plans start at $99/month per location. Multi-branch packages offer significant discounts — the Enterprise plan covers unlimited branches with a single flat fee. See our pricing page for details.') },
  { q: t('landing.home.faqQ8', 'Is customer data secure and private?'), a: t('landing.home.faqA8', 'Yes — all data is encrypted at rest and in transit using AES-256. We are SOC 2 Type II compliant and GDPR-ready. We never sell or share customer data with third parties.') },
];

/* ─── Live Activity Events ─── */
const getLiveEvents = (t: TFn) => [
  { icon: '🍕', text: t('landing.home.liveEvent1', 'Table 7 — Order placed: Margherita ×2, Tiramisu ×1') },
  { icon: '📞', text: t('landing.home.liveEvent2', 'Phone booking confirmed: Friday 7pm, 4 guests') },
  { icon: '💬', text: t('landing.home.liveEvent3', 'WhatsApp: Gluten-free query answered in 1.1s') },
  { icon: '🛵', text: t('landing.home.liveEvent4', 'DoorDash order captured: $38.50') },
  { icon: '📅', text: t('landing.home.liveEvent5', 'Reservation reminder sent — 0 no-shows today') },
  { icon: '⭐', text: t('landing.home.liveEvent6', 'Upsell accepted: dessert added to Table 3 order') },
];

export default function HomePage() {
  const { t } = useTranslation();
  const integrationLogos = getIntegrationLogos(t);
  const caseStudies = getCaseStudies(t);
  const testimonials = getTestimonials(t);
  const faqs = getFaqs(t);
  const liveEvents = getLiveEvents(t);

  const featuresHeadingRef = useInView(0.2);
  const { ref: featuresGridRef, visibleCount: featuresVisible } = useStaggeredInView(8, 0.05);
  const statsRef = useInView(0.2);
  const howHeadingRef = useInView(0.2);
  const { ref: howStepsRef, visibleCount: stepsVisible } = useStaggeredInView(3, 0.1);
  const caseStudiesRef = useInView(0.1);
  const { ref: caseStudiesGridRef, visibleCount: caseStudiesVisible } = useStaggeredInView(caseStudies.length, 0.05);
  const testimonialsRef = useInView(0.1);
  const { ref: testimonialsGridRef, visibleCount: testimonialsVisible } = useStaggeredInView(testimonials.length, 0.05);
  const integrationsRef = useInView(0.1);
  const faqRef = useInView(0.1);
  const ctaRef = useInView(0.15);
  const parallaxBg1 = useParallax(0.1);
  const parallaxBg2 = useParallax(-0.08);
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const [liveEventIdx, setLiveEventIdx] = useState(0);
  const [liveVisible, setLiveVisible] = useState(true);
  useEffect(() => {
    let fadeTimeout: ReturnType<typeof setTimeout>;
    const t = setInterval(() => {
      setLiveVisible(false);
      fadeTimeout = setTimeout(() => {
        setLiveEventIdx(i => (i + 1) % liveEvents.length);
        setLiveVisible(true);
      }, 400);
    }, 3000);
    return () => {
      clearInterval(t);
      clearTimeout(fadeTimeout);
    };
  }, []);

  return (
    <>
      {/* ── Hero ── */}
      <section className="relative min-h-[90vh] sm:min-h-[95vh] flex items-center overflow-hidden bg-slate-50 dark:bg-[#080a0f]">
        <div className="absolute inset-0 -z-10">
          <div ref={parallaxBg1} className="absolute top-[-10%] left-[10%] w-[300px] sm:w-[500px] h-[300px] sm:h-[500px] bg-orange-400/15 dark:bg-orange-500/8 rounded-full blur-[80px] animate-blob" />
          <div ref={parallaxBg2} className="absolute bottom-[-5%] right-[5%] w-[250px] sm:w-[400px] h-[250px] sm:h-[400px] bg-teal-400/12 dark:bg-teal-500/8 rounded-full blur-[80px] animate-blob-delayed" />
          <div className="absolute top-[30%] right-[30%] w-[200px] sm:w-[300px] h-[200px] sm:h-[300px] bg-amber-300/10 dark:bg-amber-500/5 rounded-full blur-[60px]" />
          <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(0,0,0,0.06)_1px,transparent_1px)] dark:bg-[radial-gradient(circle,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:32px_32px]" />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 w-full">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-10 sm:gap-16 items-center">
            <div className="space-y-6 sm:space-y-8 text-center lg:text-left">
              <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 dark:bg-orange-500/10 border border-orange-100 dark:border-orange-500/20 text-orange-700 dark:text-orange-400 text-xs font-semibold animate-fade-in">
                <div className="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse" />
                {t('landing.home.heroBadge', 'Trusted by 2,400+ restaurants worldwide')}
              </div>
              <h1 className="text-4xl sm:text-5xl lg:text-[3.6rem] font-bold leading-[1.08] tracking-tight animate-hero-title text-slate-900 dark:text-white">
                {t('landing.home.heroTitleLine1', 'Every call answered.')}<br />
                {t('landing.home.heroTitleLine2', 'Every order captured.')}<br />
                <span className="relative inline-block mt-1">
                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 via-orange-600 to-teal-500 dark:from-orange-400 dark:via-orange-500 dark:to-teal-400">{t('landing.home.heroTitleLine3', 'Zero hold times.')}</span>
                </span>
              </h1>
              <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 leading-relaxed max-w-[480px] mx-auto lg:mx-0 animate-hero-sub">
                {t('landing.home.heroSub', 'AI voice and chat agents built for restaurants — they take orders, manage bookings, and handle customer queries around the clock, in any language.')}
              </p>
              <div className="flex flex-col sm:flex-row flex-wrap gap-3 justify-center lg:justify-start animate-hero-cta">
                <Link href="/register" className="inline-flex items-center justify-center gap-2 px-6 sm:px-7 py-3 sm:py-3.5 rounded-xl bg-orange-500 hover:bg-orange-600 text-white font-semibold text-sm shadow-lg shadow-orange-500/25 hover:shadow-orange-500/40 hover:-translate-y-1 transition-all duration-200 active:scale-95 active:translate-y-0 animate-glow-pulse">
                  {t('landing.home.heroCtaStart', 'Start Free Trial')}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </Link>
                <Link href="/pricing" className="inline-flex items-center justify-center gap-2 px-6 sm:px-7 py-3 sm:py-3.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 font-semibold text-sm hover:border-teal-300 dark:hover:border-teal-700 hover:text-teal-600 dark:hover:text-teal-400 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
                  {t('landing.home.heroCtaPricing', 'View Pricing')}
                </Link>
              </div>
              <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 sm:gap-5 text-sm text-slate-400 dark:text-slate-500 animate-hero-cta">
                {[
                  t('landing.home.heroTrust1', 'No credit card required'),
                  t('landing.home.heroTrust2', '14-day free trial'),
                  t('landing.home.heroTrust3', 'Live in 2 hours')
                ].map((text, i) => (
                  <span key={i} className="flex items-center gap-1.5">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-teal-500"><polyline points="20 6 9 17 4 12"/></svg>
                    {text}
                  </span>
                ))}
              </div>
              {/* Live activity ticker */}
              <div className="animate-hero-cta flex items-center gap-3 px-4 py-2.5 rounded-xl bg-white/60 dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-700/80 backdrop-blur-sm max-w-sm mx-auto lg:mx-0">
                <div className="flex items-center gap-1.5 flex-shrink-0">
                  <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                  <span className="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 uppercase tracking-widest">{t('landing.home.liveLabel', 'Live')}</span>
                </div>
                <div className="min-w-0 flex-1 overflow-hidden">
                  <p className={`text-xs text-slate-600 dark:text-slate-400 truncate transition-all duration-300 ${liveVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1'}`}>
                    <span className="mr-1.5">{liveEvents[liveEventIdx].icon}</span>
                    {liveEvents[liveEventIdx].text}
                  </p>
                </div>
              </div>
            </div>
            <div className="flex justify-center lg:justify-end animate-hero-visual px-4 sm:px-0">
              <DashboardMockup />
            </div>
          </div>
        </div>
      </section>

      {/* ── Integration Marquee ── */}
      <section className="py-3 border-y border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-[#0a0c10]">
        <p className="text-center text-[10px] sm:text-[11px] font-semibold text-slate-400 uppercase tracking-widest mb-3">{t('landing.home.integrationLabel', 'Connects with your existing tools')}</p>
        <Marquee />
      </section>

      {/* ── Features Bento ── */}
      <section id="features" className="py-20 sm:py-28 bg-white dark:bg-[#080a0f]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={featuresHeadingRef.ref}
            className={`mb-12 sm:mb-16 transition-all duration-700 ease-out ${featuresHeadingRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div className="flex items-center gap-3 mb-4">
              <div className="h-px w-8 bg-orange-500" />
              <span className="text-xs font-semibold text-orange-600 dark:text-orange-400 uppercase tracking-widest">{t('landing.home.featuresBadge', 'Platform capabilities')}</span>
            </div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white mb-4 max-w-2xl leading-tight">
              {t('landing.home.featuresTitle', 'Built for restaurants, not call centers')}
            </h2>
            <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 max-w-xl">{t('landing.home.featuresSub', 'Every feature designed around how restaurants actually work — from single-location diners to multi-branch chains.')}</p>
          </div>

          <div ref={featuresGridRef} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4 auto-rows-[minmax(180px,auto)]">
            {/* Card 1 — AI Voice Ordering — wide hero card (8 cols) */}
            <div className={`lg:col-span-8 group relative p-6 sm:p-8 rounded-2xl bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/50 hover:shadow-xl hover:shadow-orange-100/50 dark:hover:shadow-orange-900/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${0 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms' }}>
              <div className="absolute top-0 right-0 w-64 h-64 bg-orange-200/30 dark:bg-orange-500/10 rounded-full -translate-y-32 translate-x-32 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col h-full">
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 rounded-xl bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
                  </div>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {t('landing.home.feat1Badge', '98.7% accuracy')}
                  </span>
                </div>
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.feat1Title', 'AI Voice Agent')}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 max-w-md">{t('landing.home.feat1Desc', 'Natural phone conversations that take orders, handle modifications, and upsell — in any language, any accent.')}</p>
                <div className="mt-auto flex items-end gap-1 h-10">
                  {[3,5,8,6,9,7,10,8,6,9,7,5,8,6,4,7,9,6,8,5,7,9,6,8,10,7,5,8,6,9].map((h, i) => (
                    <div key={i} className="flex-1 rounded-sm bg-orange-300 dark:bg-orange-600/60 group-hover:bg-orange-400 dark:group-hover:bg-orange-500/80 transition-colors duration-300" style={{ height: `${h * 4}%` }} />
                  ))}
                </div>
              </div>
            </div>

            {/* Card 2 — Omnichannel Chat — narrow tall card (4 cols) */}
            <div className={`lg:col-span-4 group relative p-6 rounded-2xl bg-teal-50 dark:bg-teal-950/30 border border-teal-100 dark:border-teal-900/50 hover:shadow-xl hover:shadow-teal-100/50 dark:hover:shadow-teal-900/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${1 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms', transitionDelay: '80ms' }}>
              <div className="absolute bottom-0 left-0 w-48 h-48 bg-teal-200/20 dark:bg-teal-500/10 rounded-full translate-y-24 -translate-x-12 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col h-full">
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 rounded-xl bg-teal-100 dark:bg-teal-900/50 flex items-center justify-center">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0d9488" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                  </div>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {t('landing.home.feat2Badge', '< 1.2s response')}
                  </span>
                </div>
                <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.feat2Title', 'Conversations')}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">{t('landing.home.feat2Desc', 'AI-powered conversations across every channel — 24/7, instant, accurate.')}</p>
                <div className="mt-auto flex flex-col gap-2">
                  {[
                    { channel: 'WhatsApp', msg: t('landing.home.feat2Chat1', 'Do you have vegan options?'), time: '2s', dot: 'bg-green-400', badge: 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300' },
                    { channel: 'Web Chat', msg: t('landing.home.feat2Chat2', 'Book a table for 4 on Saturday?'), time: '0.9s', dot: 'bg-teal-400', badge: 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300' },
                    { channel: 'SMS', msg: t('landing.home.feat2Chat3', 'What are your opening hours?'), time: '1.4s', dot: 'bg-blue-400', badge: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300' },
                  ].map((item) => (
                    <div key={item.channel} className="flex items-start gap-2 p-2 rounded-lg bg-white/60 dark:bg-slate-800/40 border border-teal-100 dark:border-teal-900/40">
                      <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1.5 ${item.dot}`} />
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center justify-between gap-1 mb-0.5">
                          <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${item.badge}`}>{item.channel}</span>
                          <span className="text-[9px] text-teal-500 font-semibold">{item.time} ✓</span>
                        </div>
                        <p className="text-[10px] text-slate-500 dark:text-slate-400 truncate">{item.msg}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Card 3 — Smart Bookings — square card (4 cols) */}
            <div className={`lg:col-span-4 group relative p-6 rounded-2xl bg-blue-50 dark:bg-blue-950/30 border border-blue-100 dark:border-blue-900/50 hover:shadow-xl hover:shadow-blue-100/50 dark:hover:shadow-blue-900/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${2 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms', transitionDelay: '160ms' }}>
              <div className="absolute top-0 right-0 w-40 h-40 bg-blue-200/20 dark:bg-blue-500/10 rounded-full -translate-y-20 translate-x-20 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col h-full">
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                  </div>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {t('landing.home.feat3Badge', '40% fewer no-shows')}
                  </span>
                </div>
                <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.feat3Title', 'Reservations')}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">{t('landing.home.feat3Desc', 'Real-time table availability, automated confirmations, and smart reminder sequences.')}</p>
                <div className="mt-auto">
                  <p className="text-[10px] font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wide mb-2">{t('landing.home.feat3Label', 'Friday evening — open slots')}</p>
                  <div className="grid grid-cols-3 gap-1.5">
                    {[
                      { t: '6:00 PM', s: 'open' }, { t: '6:30 PM', s: 'open' }, { t: '7:00 PM', s: 'selected' },
                      { t: '7:30 PM', s: 'few' }, { t: '8:00 PM', s: 'open' }, { t: '8:30 PM', s: 'few' },
                    ].map((slot) => (
                      <div key={slot.t} className={`text-[10px] font-medium px-1.5 py-1.5 rounded-lg text-center transition-colors ${slot.s === 'selected' ? 'bg-blue-500 text-white shadow-sm shadow-blue-300 dark:shadow-blue-900' : slot.s === 'few' ? 'bg-blue-200 dark:bg-blue-800/60 text-blue-700 dark:text-blue-300' : 'bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400'}`}>
                        {slot.t}
                      </div>
                    ))}
                  </div>
                  <div className="flex items-center gap-3 mt-2">
                    {[[ 'bg-blue-500', t('landing.home.feat3Status1', 'Booked')], ['bg-blue-200 dark:bg-blue-800', t('landing.home.feat3Status2', 'Few left')], ['bg-blue-100 dark:bg-blue-900', t('landing.home.feat3Status3', 'Open')]].map(([c, l]) => (
                      <span key={l as string} className="flex items-center gap-1">
                        <span className={`w-2 h-2 rounded-sm ${c}`} />
                        <span className="text-[9px] text-slate-400">{l}</span>
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Card 4 — Revenue Analytics — wide card (8 cols) */}
            <div className={`lg:col-span-8 group relative p-6 sm:p-8 rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 hover:shadow-xl hover:shadow-black/5 dark:hover:shadow-black/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${3 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms', transitionDelay: '240ms' }}>
              <div className="absolute top-0 right-0 w-56 h-56 bg-slate-200/30 dark:bg-slate-700/20 rounded-full -translate-y-28 translate-x-28 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col h-full">
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                  </div>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {t('landing.home.feat4Badge', 'Live dashboards')}
                  </span>
                </div>
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.feat4Title', 'Analytics')}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 max-w-md">{t('landing.home.feat4Desc', 'Deep insights into order patterns, peak hours, and customer lifetime value.')}</p>
                <div className="mt-auto flex items-end gap-1.5 h-12">
                  {[40,55,45,70,60,80,65,90,75,95,80,100,85,92,78,88,95,82,90,96].map((h, i) => (
                    <div key={i} className="flex-1 rounded-t-sm bg-slate-300 dark:bg-slate-600 group-hover:bg-orange-400 dark:group-hover:bg-orange-500/70 transition-colors duration-500" style={{ height: `${h}%`, transitionDelay: `${i * 20}ms` }} />
                  ))}
                </div>
              </div>
            </div>

            {/* Card 5 — Multi-Branch Control — square card (4 cols) */}
            <div className={`lg:col-span-4 group relative p-6 rounded-2xl bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-100 dark:border-emerald-900/50 hover:shadow-xl hover:shadow-emerald-100/50 dark:hover:shadow-emerald-900/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${4 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms', transitionDelay: '320ms' }}>
              <div className="absolute bottom-0 right-0 w-40 h-40 bg-emerald-200/20 dark:bg-emerald-500/10 rounded-full translate-y-20 translate-x-20 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col h-full">
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18z"/><path d="M6 12H4a2 2 0 0 0-2 2v8h4"/><path d="M18 9h2a2 2 0 0 1 2 2v11h-4"/><line x1="10" y1="6" x2="10" y2="6.01"/><line x1="14" y1="6" x2="14" y2="6.01"/><line x1="10" y1="10" x2="10" y2="10.01"/><line x1="14" y1="10" x2="14" y2="10.01"/><line x1="10" y1="14" x2="10" y2="14.01"/><line x1="14" y1="14" x2="14" y2="14.01"/></svg>
                  </div>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {t('landing.home.feat5Badge', 'Unlimited branches')}
                  </span>
                </div>
                <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.feat5Title', 'Multi-Branch')}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">{t('landing.home.feat5Desc', 'One dashboard for all your locations — unified menu, staff, and analytics.')}</p>
                <div className="mt-auto">
                  <div className="flex items-center gap-2 mb-2.5">
                    {['NYC', 'LA', 'CHI', 'MIA'].map((b) => (
                      <div key={b} className="flex flex-col items-center gap-1">
                        <div className="flex items-center justify-center w-9 h-9 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-800 dark:text-emerald-200 text-xs font-bold">{b}</div>
                        <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
                      </div>
                    ))}
                    <div className="flex flex-col items-center gap-1">
                      <div className="flex items-center justify-center w-9 h-9 rounded-full bg-emerald-500 text-white text-xs font-bold">+12</div>
                      <div className="w-1.5 h-1.5 rounded-full bg-emerald-300" />
                    </div>
                  </div>
                  <div className="flex items-center justify-between px-2 py-1.5 rounded-lg bg-emerald-100/60 dark:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-900/40">
                    <span className="text-[10px] text-emerald-700 dark:text-emerald-400 font-medium">{t('landing.home.feat5Label', 'All branches online')}</span>
                    <span className="text-[10px] font-bold text-emerald-600 dark:text-emerald-400">16 / 16 ✓</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Card 6 — Order Management — wide card (8 cols) */}
            <div className={`lg:col-span-8 group relative p-6 rounded-2xl bg-violet-50 dark:bg-violet-950/30 border border-violet-100 dark:border-violet-900/50 hover:shadow-xl hover:shadow-violet-100/50 dark:hover:shadow-violet-900/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${5 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms', transitionDelay: '400ms' }}>
              <div className="absolute top-0 right-0 w-44 h-44 bg-violet-200/20 dark:bg-violet-500/10 rounded-full -translate-y-22 translate-x-22 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col h-full">
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 rounded-xl bg-violet-100 dark:bg-violet-900/50 flex items-center justify-center">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="9" y1="16" x2="15" y2="16"/><line x1="9" y1="8" x2="12" y2="8"/></svg>
                  </div>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {t('landing.home.feat6Badge', 'Real-time sync')}
                  </span>
                </div>
                <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.feat6Title', 'Order Management')}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">{t('landing.home.feat6Desc', 'Track every order from placement to delivery. AI flags delays, manages modifications, and keeps the kitchen in sync.')}</p>
                <div className="mt-auto flex flex-col gap-1.5">
                  {[t('landing.home.feat6Step1', 'New order received'), t('landing.home.feat6Step2', 'Kitchen notified'), t('landing.home.feat6Step3', 'Ready for pickup')].map((step, j) => (
                    <div key={j} className="flex items-center gap-2">
                      <div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 ${j < 2 ? 'bg-violet-400 dark:bg-violet-500' : 'bg-violet-200 dark:bg-violet-800'}`}>
                        {j < 2 && <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>}
                      </div>
                      <span className={`text-xs ${j < 2 ? 'text-slate-700 dark:text-slate-300' : 'text-slate-400 dark:text-slate-500'}`}>{step}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Card 7 — Knowledge Base — square card (4 cols) */}
            <div className={`lg:col-span-4 group relative p-6 rounded-2xl bg-rose-50 dark:bg-rose-950/30 border border-rose-100 dark:border-rose-900/50 hover:shadow-xl hover:shadow-rose-100/50 dark:hover:shadow-rose-900/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${6 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms', transitionDelay: '480ms' }}>
              <div className="absolute bottom-0 left-0 w-44 h-44 bg-rose-200/20 dark:bg-rose-500/10 rounded-full translate-y-22 -translate-x-22 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col h-full">
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 rounded-xl bg-rose-100 dark:bg-rose-900/50 flex items-center justify-center">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 0 3-3h7z"/></svg>
                  </div>
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {t('landing.home.card7Badge', 'Always learning')}
                  </span>
                </div>
                <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.card7Title', 'Knowledge Base')}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">{t('landing.home.card7Desc', 'Train the AI on your menu, allergens, hours, and FAQs — it answers every customer question accurately.')}</p>
                <div className="mt-auto flex flex-col gap-2">
                  {/* Customer question */}
                  <div className="flex items-end gap-2">
                    <div className="w-6 h-6 rounded-full bg-slate-200 dark:bg-slate-700 flex-shrink-0 flex items-center justify-center text-[9px] font-bold text-slate-500">C</div>
                    <div className="flex-1 bg-white dark:bg-slate-800/60 border border-rose-100 dark:border-rose-900/40 rounded-xl rounded-bl-sm px-3 py-2">
                      <p className="text-[11px] text-slate-600 dark:text-slate-400">{t('landing.home.card7Q', 'Do you have gluten-free pasta?')}</p>
                    </div>
                  </div>
                  {/* AI answer */}
                  <div className="flex items-end gap-2">
                    <div className="w-6 h-6 rounded-full bg-rose-500 flex-shrink-0 flex items-center justify-center text-[9px] font-bold text-white">AI</div>
                    <div className="flex-1 bg-rose-50 dark:bg-rose-950/40 border border-rose-100 dark:border-rose-900/40 rounded-xl rounded-bl-sm px-3 py-2">
                      <p className="text-[11px] text-rose-700 dark:text-rose-300">{t('landing.home.card7A', 'Yes! Our GF penne is available for all pasta dishes. Want to see the full gluten-free menu? 🍝')}</p>
                    </div>
                  </div>
                  {/* Tags */}
                  <div className="flex flex-wrap gap-1.5 pt-0.5">
                    {[t('landing.home.card7Tag1', 'Menu & Prices'), t('landing.home.card7Tag2', 'Allergens'), t('landing.home.card7Tag3', 'Hours'), t('landing.home.card7Tag4', 'Specials'), t('landing.home.card7Tag5', 'Policies')].map((tag) => (
                      <span key={tag} className="px-2 py-0.5 rounded-full text-[10px] font-medium bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300">{tag}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Card 8 — WhatsApp & SMS — wide card (8 cols) */}
            <div className={`lg:col-span-8 group relative p-6 sm:p-8 rounded-2xl bg-green-50 dark:bg-green-950/30 border border-green-100 dark:border-green-900/50 hover:shadow-xl hover:shadow-green-100/50 dark:hover:shadow-green-900/20 transition-all duration-300 hover:-translate-y-1.5 overflow-hidden cursor-default ${7 < featuresVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-95'}`}
              style={{ transitionDuration: '500ms', transitionDelay: '400ms' }}>
              <div className="absolute top-0 left-0 w-56 h-56 bg-green-200/20 dark:bg-green-500/10 rounded-full -translate-y-28 -translate-x-28 group-hover:scale-125 transition-transform duration-700" />
              <div className="relative flex flex-col sm:flex-row sm:items-center gap-6 h-full">
                <div className="flex-1">
                  <div className="flex items-start justify-between mb-4">
                    <div className="w-12 h-12 rounded-xl bg-green-100 dark:bg-green-900/50 flex items-center justify-center">
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    </div>
                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                      {t('landing.home.card8Badge', '99.9% delivery rate')}
                    </span>
                  </div>
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t('landing.home.card8Title', 'WhatsApp & SMS')}</h3>
                  <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed max-w-sm">{t('landing.home.card8Desc', 'Reach customers on WhatsApp and SMS — order confirmations, booking reminders, and AI chat, automatically.')}</p>
                </div>
                <div className="flex flex-col gap-2 flex-shrink-0 min-w-[190px] sm:min-w-[210px]">
                  {/* WhatsApp bubble */}
                  <div className="bg-white dark:bg-slate-800 rounded-xl p-2.5 border border-green-200 dark:border-green-800/60 shadow-sm">
                    <div className="flex items-center gap-1.5 mb-1.5">
                      <div className="w-4 h-4 rounded-full bg-green-500 flex items-center justify-center">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22C6.478 22 2 17.522 2 12S6.478 2 12 2s10 4.478 10 10-4.478 10-10 10z"/></svg>
                      </div>
                      <span className="text-[10px] font-bold text-green-700 dark:text-green-400">WhatsApp</span>
                    </div>
                    <p className="text-[11px] text-slate-600 dark:text-slate-300 leading-snug">{t('landing.home.card8Whatsapp', 'Order #2847 confirmed! 🎉 Table 7 at 7:00 PM. See you tonight!')}</p>
                    <div className="flex items-center justify-end gap-1 mt-1">
                      <span className="text-[9px] text-slate-400">2:34 PM</span>
                      <svg width="12" height="8" viewBox="0 0 18 11" fill="none"><path d="M1 5.5L5.5 10L17 1" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><path d="M6 5.5L10.5 10L17 1" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </div>
                  </div>
                  {/* SMS bubble */}
                  <div className="bg-green-50 dark:bg-green-950/40 rounded-xl p-2.5 border border-green-100 dark:border-green-900/60 shadow-sm">
                    <div className="flex items-center gap-1.5 mb-1.5">
                      <div className="w-4 h-4 rounded-full bg-slate-500 flex items-center justify-center">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
                      </div>
                      <span className="text-[10px] font-bold text-slate-600 dark:text-slate-400">{t('landing.home.card8SmsLabel', 'SMS Reminder')}</span>
                    </div>
                    <p className="text-[11px] text-slate-600 dark:text-slate-300 leading-snug">{t('landing.home.card8Sms', 'Hi Sarah, your booking at Bella Napoli is in 2 hours. Reply CANCEL to cancel. 📍 42 Main St')}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Stats Band ── */}
      <section className="py-16 sm:py-20 bg-slate-900 dark:bg-slate-950 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.15),transparent_60%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(13,148,136,0.12),transparent_60%)]" />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <div ref={statsRef.ref} className={`grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 transition-all duration-700 ${statsRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
            {[
              { value: 2400, suffix: '+', label: t('landing.home.stat1Label', 'Restaurants'), sub: t('landing.home.stat1Sub', 'across 40+ countries'), color: 'text-orange-400' },
              { value: 18, suffix: 'M+', label: t('landing.home.stat2Label', 'Orders Processed'), sub: t('landing.home.stat2Sub', 'this year alone'), color: 'text-teal-400' },
              { value: 99, suffix: '.9%', label: t('landing.home.stat3Label', 'Uptime SLA'), sub: t('landing.home.stat3Sub', 'guaranteed'), color: 'text-blue-400' },
              { value: 40, suffix: '%', label: t('landing.home.stat4Label', 'Revenue Lift'), sub: t('landing.home.stat4Sub', 'average across customers'), color: 'text-emerald-400' },
            ].map((s, i) => (
              <div key={i} className="text-center" style={{ transitionDelay: `${i * 100}ms` }}>
                <div className={`text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 ${s.color} tabular-nums`}>
                  {statsRef.inView ? <Counter end={s.value} suffix={s.suffix} /> : `0${s.suffix}`}
                </div>
                <div className="font-semibold text-white mb-1 text-sm sm:text-base">{s.label}</div>
                <div className="text-xs text-slate-500">{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── How It Works ── */}
      <section className="py-20 sm:py-28 bg-white dark:bg-[#080a0f]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={howHeadingRef.ref}
            className={`mb-14 sm:mb-20 transition-all duration-700 ease-out ${howHeadingRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div className="flex items-center gap-3 mb-4">
              <div className="h-px w-8 bg-teal-500" />
              <span className="text-xs font-semibold text-teal-600 dark:text-teal-400 uppercase tracking-widest">{t('landing.home.howBadge', 'Simple setup')}</span>
            </div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white mb-4 leading-tight">{t('landing.home.howTitle', 'Live in under 2 hours')}</h2>
            <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 max-w-lg">{t('landing.home.howSub', 'No technical expertise needed. We handle the heavy lifting so you can focus on your guests.')}</p>
          </div>
          <div ref={howStepsRef} className="grid grid-cols-1 sm:grid-cols-3 gap-5 sm:gap-6">
            {[
              { step: '01', title: t('landing.home.howStep1Title', 'Connect your menu'), desc: t('landing.home.howStep1Desc', 'Import from your POS or upload a PDF. We parse and structure it automatically.'), icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="9" y1="16" x2="15" y2="16"/></svg>, color: 'bg-orange-50 dark:bg-orange-950/30 border-orange-100 dark:border-orange-900/50', iconBg: 'bg-orange-100 dark:bg-orange-900/40', hoverShadow: 'hover:shadow-orange-100/50 dark:hover:shadow-orange-900/20' },
              { step: '02', title: t('landing.home.howStep2Title', 'Train the AI'), desc: t('landing.home.howStep2Desc', "Add your restaurant's personality, special instructions, and common FAQs."), icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0d9488" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>, color: 'bg-teal-50 dark:bg-teal-950/30 border-teal-100 dark:border-teal-900/50', iconBg: 'bg-teal-100 dark:bg-teal-900/40', hoverShadow: 'hover:shadow-teal-100/50 dark:hover:shadow-teal-900/20' },
              { step: '03', title: t('landing.home.howStep3Title', 'Go live instantly'), desc: t('landing.home.howStep3Desc', 'Point your phone number to RestroAgent and activate your channels. Takes 5 minutes, no downtime.'), icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.19 14.9 19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>, color: 'bg-blue-50 dark:bg-blue-950/30 border-blue-100 dark:border-blue-900/50', iconBg: 'bg-blue-100 dark:bg-blue-900/40', hoverShadow: 'hover:shadow-blue-100/50 dark:hover:shadow-blue-900/20' },
            ].map((s, i) => (
              <div key={i}
                className={`relative p-5 sm:p-7 rounded-2xl border ${s.color} transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl ${s.hoverShadow} ${i < stepsVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}
                style={{ transitionDuration: '600ms', transitionDelay: `${i < stepsVisible ? 0 : i * 100}ms` }}>
                <div className="flex items-start justify-between mb-4 sm:mb-5">
                  <div className={`w-10 sm:w-12 h-10 sm:h-12 rounded-xl ${s.iconBg} flex items-center justify-center text-lg sm:text-xl`}>{s.icon}</div>
                  <span className="text-2xl sm:text-3xl font-black text-slate-100 dark:text-slate-800 select-none">{s.step}</span>
                </div>
                <h3 className="font-bold text-slate-900 dark:text-white mb-2 text-sm sm:text-base">{s.title}</h3>
                <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Case Studies ── */}
      <section className="py-20 sm:py-28 bg-slate-50 dark:bg-[#0a0c10]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={caseStudiesRef.ref}
            className={`mb-12 sm:mb-16 transition-all duration-700 ease-out ${caseStudiesRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div className="flex items-center gap-3 mb-4">
              <div className="h-px w-8 bg-orange-500" />
              <span className="text-xs font-semibold text-orange-600 dark:text-orange-400 uppercase tracking-widest">{t('landing.home.caseStudiesBadge', 'Customer success')}</span>
            </div>
            <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
              <div>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white mb-3 leading-tight">
                  {t('landing.home.caseStudiesTitle', 'Real restaurants, real results')}
                </h2>
                <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 max-w-xl">{t('landing.home.caseStudiesSub', 'See how restaurants like yours transformed operations and grew revenue with RestroAgent.')}</p>
              </div>
              <Link href="/contact" className="inline-flex items-center gap-2 text-sm font-semibold text-orange-600 dark:text-orange-400 hover:gap-3 transition-all duration-200 group relative flex-shrink-0">
                {t('landing.home.caseStudiesCTA', 'See more stories')}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                <span className="absolute -bottom-0.5 left-0 right-0 h-px bg-orange-500 opacity-0 scale-x-0 group-hover:opacity-100 group-hover:scale-x-100 transition-all duration-200" />
              </Link>
            </div>
          </div>

          <div ref={caseStudiesGridRef} className="grid grid-cols-1 lg:grid-cols-12 gap-5 sm:gap-6">
            {caseStudies.map((cs, i) => {
              const a = caseAccentMap[cs.accent];
              const isWide = i === 0;
              return (
                <div key={i}
                  className={`${isWide ? 'lg:col-span-7' : i === 1 ? 'lg:col-span-5' : 'lg:col-span-12'} group relative rounded-2xl border ${a.border} bg-white dark:bg-slate-900 overflow-hidden transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl ${a.glow} ${i < caseStudiesVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-8 scale-[0.97]'}`}
                  style={{ transitionDuration: '500ms', transitionDelay: `${i < caseStudiesVisible ? 0 : i * 130}ms` }}>

                  {/* Card header */}
                  <div className={`p-5 sm:p-6 ${a.bg} border-b ${a.border}`}>
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex items-center gap-3">
                        {/* Logo placeholder */}
                        <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${cs.logoColor} flex items-center justify-center text-white font-bold text-sm flex-shrink-0 shadow-lg`}>
                          {cs.logo}
                        </div>
                        <div>
                          <h3 className="font-bold text-slate-900 dark:text-white text-base">{cs.restaurant}</h3>
                          <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{cs.location}</p>
                        </div>
                      </div>
                      <span className={`px-2.5 py-1 rounded-full text-xs font-semibold flex-shrink-0 ${cs.planColor}`}>{cs.plan}</span>
                    </div>
                  </div>

                  {/* Metrics grid */}
                  <div className="p-5 sm:p-6">
                    <div className={`grid ${i === 2 ? 'grid-cols-1 sm:grid-cols-3' : 'grid-cols-1 sm:grid-cols-3'} gap-3 mb-5`}>
                      {cs.metrics.map((m, mi) => (
                        <div key={mi} className="rounded-xl border border-slate-100 dark:border-slate-800 overflow-hidden">
                          <div className="px-3 py-2 bg-slate-50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800">
                            <p className="text-[10px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">{m.label}</p>
                          </div>
                          <div className="px-3 py-2.5 flex items-center justify-between gap-2">
                            <div className="flex items-center gap-1.5">
                              <span className={`text-xs font-medium px-1.5 py-0.5 rounded ${a.metricBefore}`}>{m.before}</span>
                              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-slate-300 dark:text-slate-600"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                              <span className={`text-xs font-bold px-1.5 py-0.5 rounded ${a.metricAfter}`}>{m.after}</span>
                            </div>
                            <span className="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 flex-shrink-0">{m.improvement}</span>
                          </div>
                        </div>
                      ))}
                    </div>

                    {/* Highlight banner */}
                    <div className={`flex items-center gap-2.5 px-4 py-3 rounded-xl border ${a.highlight} mb-5`}>
                      <span className="flex-shrink-0">{cs.highlightIcon}</span>
                      <span className="text-sm font-semibold">{cs.highlight}</span>
                    </div>

                    {/* Quote */}
                    <blockquote className="relative">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="text-slate-200 dark:text-slate-700 mb-2">
                        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                      </svg>
                      <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed italic mb-3">"{cs.quote}"</p>
                      <footer className="text-xs font-semibold text-slate-500 dark:text-slate-400">— {cs.author}</footer>
                    </blockquote>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── Testimonials — Asymmetric Bento Grid ── */}
      <section className="py-20 sm:py-28 bg-white dark:bg-[#080a0f]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={testimonialsRef.ref}
            className={`mb-12 sm:mb-16 transition-all duration-700 ease-out ${testimonialsRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div className="flex items-center gap-3 mb-4">
              <div className="h-px w-8 bg-orange-500" />
              <span className="text-xs font-semibold text-orange-600 dark:text-orange-400 uppercase tracking-widest">{t('landing.home.testimonialsBadge', 'Customer stories')}</span>
            </div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white mb-3 leading-tight">{t('landing.home.testimonialsTitle', 'Restaurant owners love it')}</h2>
            <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400">{t('landing.home.testimonialsSub', 'Real results from real restaurants — no cherry-picked metrics.')}</p>
          </div>

          {/* Asymmetric bento grid: row1 = 4+8, row2 = 5+7 */}
          <div ref={testimonialsGridRef} className="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-5">
            {testimonials.map((testimonial, i) => (
              <div key={i}
                className={`${testimonial.span} group relative p-5 sm:p-7 rounded-2xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 transition-all duration-500 ease-out hover:-translate-y-2 hover:shadow-2xl hover:shadow-slate-200/60 dark:hover:shadow-black/30 hover:border-orange-200 dark:hover:border-orange-800/50 ${i < testimonialsVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-6 scale-[0.97]'}`}
                style={{ transitionDelay: `${i < testimonialsVisible ? 0 : i * 120}ms` }}>

                {/* Top row: stars + badges */}
                <div className="flex items-start justify-between gap-3 mb-4 sm:mb-5">
                  <div className="flex gap-1">
                    {Array.from({ length: testimonial.rating }).map((_, j) => (
                      <svg key={j} width="13" height="13" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    ))}
                  </div>
                  <div className="flex items-center gap-2 flex-shrink-0">
                    {testimonial.verified && (
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-teal-50 dark:bg-teal-900/30 border border-teal-100 dark:border-teal-800 text-teal-600 dark:text-teal-400 text-[10px] font-semibold">
                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                        {t('landing.home.verifiedBadge', 'Verified')}
                      </span>
                    )}
                    <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold ${testimonial.planColor}`}>{testimonial.plan}</span>
                  </div>
                </div>

                {/* Quote */}
                <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed mb-5 sm:mb-6">"{testimonial.quote}"</p>

                {/* Author */}
                <div className="flex items-center gap-3 mt-auto">
                  <div className={`w-9 sm:w-10 h-9 sm:h-10 rounded-full bg-gradient-to-br ${testimonial.color} flex items-center justify-center text-white text-xs font-bold flex-shrink-0`}>{testimonial.avatar}</div>
                  <div>
                    <p className="text-sm font-semibold text-slate-900 dark:text-white">{testimonial.name}</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section className="py-20 sm:py-28 bg-slate-50 dark:bg-[#0a0c10]">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={faqRef.ref}
            className={`mb-12 sm:mb-14 transition-all duration-700 ease-out ${faqRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div className="flex items-center gap-3 mb-4">
              <div className="h-px w-8 bg-orange-500" />
              <span className="text-xs font-semibold text-orange-600 dark:text-orange-400 uppercase tracking-widest">{t('landing.home.faqBadge', 'Got questions?')}</span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white mb-3 leading-tight">{t('landing.home.faqTitle', 'Frequently asked questions')}</h2>
            <p className="text-base text-slate-500 dark:text-slate-400">{t('landing.home.faqSub', 'Everything you need to know before getting started.')}</p>
          </div>
          <div className={`space-y-3 transition-all duration-700 ease-out ${faqRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`} style={{ transitionDelay: '150ms' }}>
            {faqs.map((faq, i) => (
              <div key={i} className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden transition-all duration-200 hover:border-orange-200 dark:hover:border-orange-800/50 hover:shadow-md">
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="w-full flex items-center justify-between gap-4 px-5 sm:px-6 py-4 sm:py-5 text-left group"
                >
                  <span className="text-sm sm:text-base font-semibold text-slate-900 dark:text-white leading-snug group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors duration-150">{faq.q}</span>
                  <span className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center transition-all duration-300 ${openFaq === i ? 'bg-orange-500 rotate-45' : 'bg-slate-100 dark:bg-slate-800'}`}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={openFaq === i ? 'white' : 'currentColor'} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className={openFaq === i ? '' : 'text-slate-500 dark:text-slate-400'}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                  </span>
                </button>
                <div className={`overflow-hidden transition-all duration-300 ease-out ${openFaq === i ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'}`}>
                  <p className="px-5 sm:px-6 pb-4 sm:pb-5 text-sm text-slate-600 dark:text-slate-400 leading-relaxed border-t border-slate-100 dark:border-slate-800 pt-3">{faq.a}</p>
                </div>
              </div>
            ))}
          </div>
          <div className={`mt-10 text-center transition-all duration-700 ${faqRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`} style={{ transitionDelay: '300ms' }}>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              {t('landing.home.faqFooter', 'Still have questions?')}{' '}
              <Link href="/contact" className="font-semibold text-orange-600 dark:text-orange-400 hover:underline">{t('landing.home.faqCTA', 'Talk to our team')}</Link>
            </p>
          </div>
        </div>
      </section>

      {/* ── Integrations ── */}
      <section className="py-20 sm:py-28 bg-white dark:bg-[#080a0f]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={integrationsRef.ref}
            className={`transition-all duration-700 ease-out ${integrationsRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
            <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-10 sm:gap-16 items-center">
              <div>
                <div className="flex items-center gap-3 mb-4">
                  <div className="h-px w-8 bg-teal-500" />
                  <span className="text-xs font-semibold text-teal-600 dark:text-teal-400 uppercase tracking-widest">{t('landing.home.integrationsBadge', 'Ecosystem')}</span>
                </div>
                <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white mb-4 leading-tight">{t('landing.home.integrationsTitle', 'Works with your entire stack')}</h2>
                <p className="text-slate-500 dark:text-slate-400 leading-relaxed mb-6">{t('landing.home.integrationsSub', 'Connect to 50+ POS systems, delivery platforms, and payment processors. No rip-and-replace required.')}</p>
                <Link href="/#features" className="inline-flex items-center gap-2 text-sm font-semibold text-orange-600 dark:text-orange-400 hover:gap-3 transition-all duration-200 group relative">
                  {t('landing.home.integrationsCTA', 'See all integrations')}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                  <span className="absolute -bottom-0.5 left-0 right-0 h-px bg-orange-500 opacity-0 scale-x-0 group-hover:opacity-100 group-hover:scale-x-100 transition-all duration-200" />
                </Link>
              </div>
              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2.5 sm:gap-3">
                {integrationLogos.map((logo, i) => (
                  <div key={i}
                    className="flex flex-col items-center gap-1.5 sm:gap-2 p-3 sm:p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 hover:border-orange-200 dark:hover:border-orange-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200"
                    style={{ transitionDelay: `${i * 30}ms` }}>
                    <div className="w-7 sm:w-8 h-7 sm:h-8 rounded-lg flex items-center justify-center" style={{ backgroundColor: `${logo.color}18` }}>
                      <div className="w-3 h-3 rounded-full" style={{ backgroundColor: logo.color }} />
                    </div>
                    <span className="text-[10px] sm:text-[11px] font-medium text-slate-600 dark:text-slate-400 text-center leading-tight">{logo.name}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Final CTA ── */}
      <section className="py-20 sm:py-28 bg-white dark:bg-[#080a0f]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={ctaRef.ref}
            className={`relative rounded-2xl sm:rounded-3xl overflow-hidden transition-all duration-800 ease-out ${ctaRef.inView ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-12 scale-[0.97]'}`}
            style={{ transitionDuration: '800ms' }}>
            <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-[#1a0d00] to-slate-900 dark:from-slate-950 dark:via-[#120800] dark:to-slate-950" />
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.25),transparent_50%)]" />
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(13,148,136,0.15),transparent_50%)]" />
            <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:28px_28px]" />
            <div className="relative px-6 sm:px-10 py-14 sm:py-20 lg:px-20 text-center">
              <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-semibold mb-6">
                <div className="w-1.5 h-1.5 rounded-full bg-orange-400 animate-pulse" />
                {t('landing.home.finalCtaBadge', '14-day free trial · No credit card')}
              </div>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-5 leading-tight">
                {t('landing.home.finalCtaTitle', 'Stop missing orders. Start growing revenue.')}
              </h2>
              <p className="text-base sm:text-lg text-slate-400 mb-8 sm:mb-10 max-w-xl mx-auto">
                {t('landing.home.finalCtaSub', 'Join 2,400+ restaurants using RestroAgent to handle every call, chat, and booking — automatically.')}
              </p>
              <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-4">
                <Link href="/register" className="inline-flex items-center justify-center gap-2 px-7 sm:px-8 py-3.5 sm:py-4 rounded-xl bg-orange-500 hover:bg-orange-400 text-white font-semibold shadow-lg shadow-orange-500/30 hover:shadow-orange-500/50 hover:-translate-y-1 transition-all duration-200 active:scale-95 active:translate-y-0 animate-glow-pulse">
                  {t('landing.home.finalCtaPrimary', 'Start Your Free Trial')}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </Link>
                <Link href="/contact" className="inline-flex items-center justify-center gap-2 px-7 sm:px-8 py-3.5 sm:py-4 rounded-xl border border-slate-600 hover:border-teal-500 text-slate-300 hover:text-teal-400 font-semibold transition-all duration-200 hover:-translate-y-0.5">
                  {t('landing.home.finalCtaSecondary', 'Talk to Sales')}
                </Link>
              </div>
              <p className="text-xs text-slate-600 mt-6">{t('landing.home.finalCtaFooter', 'Cancel anytime · Setup in 2 hours · 24/7 support')}</p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
