'use client';
/*
 * Translator note — new homepage translation keys added in Task #319
 * (English fallbacks live inline at each call site; add per-locale copies
 * to the translations source to localize):
 *
 *   Stats band:        landing.home.stat1Label..stat4Label
 *   How it works:      landing.home.howEyebrow, howTitle, howSub,
 *                      howStep1Title/Desc..howStep3Title/Desc
 *   Channels → Inbox:  landing.home.flowCh1..flowCh4,
 *                      flowItem1Name/Msg..flowItem3Name/Msg,
 *                      flowVia1..flowVia3, flowInboxTitle, flowLive
 *   ROI calculator:    landing.home.roiEyebrow, roiTitle, roiSub,
 *                      roiInput1..roiInput3, roiResultLabel,
 *                      roiResultSub, roiCta, roiDisclaimer
 */
import React, { useEffect, useMemo, useRef, useState } from 'react';
import Link from 'next/link';
import {
  ArrowRight, Check, X as XIcon, Plus, Star,
  Phone, MessageSquare, Mic, Calendar, BarChart3,
  ClipboardList, Building2, BookOpen, Globe, ShieldCheck,
  Plug, BrainCircuit, GraduationCap, Bot, Rocket, Inbox, Zap,
  QrCode, Gift, Megaphone, Tag,
} from 'lucide-react';
import { useTranslation } from '@client/contexts/LanguageContext';
import {
  getCustomerLogos, getCompareRows,
} from './_data/marketing';

const DEMO_MODE_ON = process.env.NEXT_PUBLIC_DEMO_MODE === 'on';

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

/* ─── In-view hook (reduced-motion aware) ─── */
function useInView(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setInView(true);
      return;
    }
    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 };
}

/* ─── Section heading ─── */
function SectionHeading({ eyebrow, title, sub, align = 'left' }: { eyebrow?: string; title: string; sub?: string; align?: 'left' | 'center' }) {
  return (
    <div className={align === 'center' ? 'text-center max-w-2xl mx-auto' : 'max-w-2xl'}>
      {eyebrow && (
        <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-marketing-accent mb-3">
          {eyebrow}
        </p>
      )}
      <h2 className="text-[32px] sm:text-[40px] leading-[1.1] font-semibold tracking-tight text-zinc-900 dark:text-white">
        {title}
      </h2>
      {sub && (
        <p className="mt-4 text-[15px] sm:text-base leading-relaxed text-zinc-500 dark:text-zinc-400">
          {sub}
        </p>
      )}
    </div>
  );
}

/* ─── Hero product preview ─── */
function HeroPreview() {
  const { t } = useTranslation();
  const [activeOrders, setActiveOrders] = useState(14);
  useEffect(() => {
    if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const id = setInterval(() => setActiveOrders(v => v + Math.floor(Math.random() * 2)), 4000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="relative w-full">
      <div
        className="relative rounded-2xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden"
        style={{ boxShadow: '0 30px 80px -20px rgba(91, 91, 214, 0.18), 0 12px 24px -12px rgba(15, 15, 25, 0.12)' }}
      >
        {/* Window chrome */}
        <div className="flex items-center justify-between px-4 py-2.5 border-b border-zinc-100 dark:border-zinc-900 bg-zinc-50 dark:bg-zinc-900/60">
          <div className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />
            <span className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />
            <span className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />
          </div>
          <div className="flex items-center gap-1.5 text-[11px] text-zinc-500">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 motion-safe:animate-pulse" />
            {t('landing.home.mockLiveDashboard', 'Live dashboard')}
          </div>
          <div className="text-[11px] text-zinc-400">RestroAgent</div>
        </div>

        {/* KPI strip */}
        <div className="grid grid-cols-3 border-b border-zinc-100 dark:border-zinc-900">
          {[
            { label: t('landing.home.mockKpi1', 'Active orders'), value: String(activeOrders) },
            { label: t('landing.home.mockKpi2', 'AI handled'), value: '98%' },
            { label: t('landing.home.mockKpi3', 'Avg response'), value: '1.2s' },
          ].map((k, i) => (
            <div key={i} className={`px-4 py-3 ${i < 2 ? 'border-r border-zinc-100 dark:border-zinc-900' : ''}`}>
              <div className="text-lg font-semibold text-zinc-900 dark:text-white tabular-nums">{k.value}</div>
              <div className="text-[11px] text-zinc-500 dark:text-zinc-400 mt-0.5">{k.label}</div>
            </div>
          ))}
        </div>

        {/* Activity rows */}
        <div className="p-3 space-y-1.5">
          {[
            { icon: MessageSquare, 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') },
            { icon: Phone, name: t('landing.home.mockMsg2Name', 'Phone +1 (555) 0142'), msg: t('landing.home.mockMsg2Text', 'Booking for 4 on Friday 7pm — confirmed'), time: t('landing.home.mockTime2', '18s') },
            { icon: MessageSquare, name: t('landing.home.mockMsg3Name', 'Web chat'), msg: t('landing.home.mockMsg3Text', 'Asking about gluten-free options — AI responding'), time: t('landing.home.mockTime3', '34s') },
          ].map((row, i) => {
            const Icon = row.icon;
            return (
              <div key={i} className="flex items-start gap-3 p-2.5 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-900/60 transition-colors">
                <div className="w-7 h-7 rounded-md bg-zinc-100 dark:bg-zinc-900 flex items-center justify-center flex-shrink-0">
                  <Icon size={13} className="text-zinc-500" />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between gap-2">
                    <span className="text-[12px] font-semibold text-zinc-800 dark:text-zinc-100 truncate">{row.name}</span>
                    <span className="text-[10px] text-zinc-400 flex-shrink-0">{row.time}</span>
                  </div>
                  <p className="text-[11px] text-zinc-500 dark:text-zinc-400 truncate mt-0.5">{row.msg}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Floating accent card */}
      <div
        className="hidden sm:block absolute -bottom-5 -left-5 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-4 py-3 shadow-lg"
        style={{ boxShadow: '0 18px 40px -12px rgba(91, 91, 214, 0.18)' }}
      >
        <div className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-md bg-marketing-accent-soft flex items-center justify-center text-marketing-accent">
            <Check size={14} strokeWidth={2.5} />
          </div>
          <div>
            <div className="text-[12px] font-semibold text-zinc-900 dark:text-white">{t('landing.home.mockCallsStat', 'Zero missed calls')}</div>
            <div className="text-[10px] text-zinc-500">{t('landing.home.mockTimeframe', 'Last 30 days')}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── Customer logo wall ─── */
function CustomerLogoWall() {
  const { t } = useTranslation();
  const logos = getCustomerLogos(t);
  return (
    <section className="border-y border-zinc-200/70 dark:border-zinc-900 bg-zinc-50/60 dark:bg-zinc-950/40">
      <div className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8 py-12 sm:py-14">
        <p className="text-center text-[11px] font-semibold uppercase tracking-[0.2em] text-zinc-400 mb-8">
          {t('landing.home.logoWallLabel', 'Trusted by 2,400+ restaurants worldwide')}
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-x-6 gap-y-7 items-center">
          {logos.map(l => (
            <div key={l.name} className="flex items-center justify-center h-9 px-2 opacity-60 hover:opacity-100 transition-opacity duration-200">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={l.logoSrc}
                alt={l.logoAlt}
                className="max-h-7 w-auto object-contain grayscale dark:invert dark:brightness-90 hover:grayscale-0 transition-[filter] duration-200"
                loading="lazy"
                decoding="async"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Stats band ─── */
function StatsBand() {
  const { t } = useTranslation();
  const stats = [
    {
      Icon: Building2,
      v: '2,400+',
      l: t('landing.home.stat1Label', 'Restaurants worldwide'),
      sub: t('landing.home.stat1Sub', 'Across 40+ countries'),
    },
    {
      Icon: Phone,
      v: '12M+',
      l: t('landing.home.stat2Label', 'Calls handled'),
      sub: t('landing.home.stat2Sub', 'Zero missed, every time'),
    },
    {
      Icon: BrainCircuit,
      v: '98.4%',
      l: t('landing.home.stat3Label', 'AI resolution rate'),
      sub: t('landing.home.stat3Sub', 'No human needed'),
    },
    {
      Icon: Zap,
      v: '1.2s',
      l: t('landing.home.stat4Label', 'Avg response time'),
      sub: t('landing.home.stat4Sub', 'Faster than any staff'),
    },
  ];
  return (
    <section className="border-y border-zinc-200/70 dark:border-zinc-900 bg-white dark:bg-[#0A0A0A]">
      <div className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8 py-12 sm:py-16">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-y-10 gap-x-4">
          {stats.map((s, i) => (
            <div
              key={s.l}
              className={`flex flex-col items-center text-center px-4 ${
                i < 3 ? 'md:border-r md:border-zinc-200/80 dark:md:border-zinc-800' : ''
              }`}
            >
              <div className="w-10 h-10 rounded-xl bg-marketing-accent-soft text-marketing-accent flex items-center justify-center mb-4">
                <s.Icon size={18} strokeWidth={2} />
              </div>
              <div className="text-[32px] sm:text-[38px] font-bold tracking-tight text-zinc-900 dark:text-white tabular-nums leading-none">
                {s.v}
              </div>
              <div className="mt-2 text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">
                {s.l}
              </div>
              <div className="mt-1 text-[11px] text-zinc-400 dark:text-zinc-500">
                {s.sub}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── How it works ─── */
function HowItWorks() {
  const { t } = useTranslation();
  const { ref, inView } = useInView(0.1);
  const steps = [
    {
      Icon: Plug,
      n: '01',
      title: t('landing.home.howStep1Title', 'Connect'),
      desc: t('landing.home.howStep1Desc', 'Plug in your phone number, POS, and menu in minutes — no developers required.'),
    },
    {
      Icon: GraduationCap,
      n: '02',
      title: t('landing.home.howStep2Title', 'Train'),
      desc: t('landing.home.howStep2Desc', 'Upload menus, hours, and FAQs. The AI learns your brand voice and policies automatically.'),
    },
    {
      Icon: Rocket,
      n: '03',
      title: t('landing.home.howStep3Title', 'Go live'),
      desc: t('landing.home.howStep3Desc', 'Flip the switch. Every call, chat, and booking is answered around the clock — in any language.'),
    },
  ];
  return (
    <section className="bg-white dark:bg-[#0A0A0A] py-20 sm:py-28 border-b border-zinc-200/70 dark:border-zinc-900">
      <div ref={ref} className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8">
        <div className={`mb-12 sm:mb-14 transition-all duration-700 motion-reduce:transition-none ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
          <SectionHeading
            eyebrow={t('landing.home.howEyebrow', 'How it works')}
            title={t('landing.home.howTitle', 'Live in two hours, not two months')}
            sub={t('landing.home.howSub', 'Three simple steps to a fully automated front-of-house — connect, train, go live.')}
          />
        </div>

        <div className="relative">
          {/* Connector line — desktop only */}
          <div
            aria-hidden
            className="hidden lg:block absolute left-[16.66%] right-[16.66%] top-[28px] h-px bg-gradient-to-r from-transparent via-zinc-200 dark:via-zinc-800 to-transparent"
          />
          <div className="relative grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
            {steps.map((s, i) => (
              <div
                key={s.n}
                className={`relative transition-all duration-700 motion-reduce:transition-none ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}
                style={{ transitionDelay: `${i * 80}ms` }}
              >
                <div className="flex items-start gap-4 lg:flex-col lg:items-start">
                  <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-marketing-accent text-white flex items-center justify-center shadow-[0_8px_20px_-8px_rgba(91,91,214,0.45)]">
                    <s.Icon size={22} strokeWidth={2} />
                  </div>
                  <div className="flex-1 lg:mt-5">
                    <div className="text-[11px] font-semibold tracking-[0.18em] text-marketing-accent tabular-nums mb-2">{s.n}</div>
                    <h3 className="text-[18px] font-semibold text-zinc-900 dark:text-white mb-1.5">{s.title}</h3>
                    <p className="text-[14px] leading-relaxed text-zinc-500 dark:text-zinc-400 max-w-sm">{s.desc}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Channels → Inbox flow visual ─── */
function ChannelsInboxFlow() {
  const { t } = useTranslation();
  const channels = [
    {
      Icon: Phone,
      label: t('landing.home.flowCh1', 'Phone'),
      iconCls: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400',
    },
    {
      Icon: MessageSquare,
      label: t('landing.home.flowCh2', 'WhatsApp'),
      iconCls: 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400',
    },
    {
      Icon: Globe,
      label: t('landing.home.flowCh3', 'Web chat'),
      iconCls: 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
    },
  ];
  const items = [
    { name: t('landing.home.flowItem1Name', 'Table 7 — Dine-in'),  msg: t('landing.home.flowItem1Msg', 'Order: Pasta Carbonara × 2'),    via: t('landing.home.flowVia1', 'via Phone'),    time: '2s' },
    { name: t('landing.home.flowItem2Name', '+1 (555) 0142'),       msg: t('landing.home.flowItem2Msg', 'Booking for 4 — Friday 7pm'),    via: t('landing.home.flowVia2', 'via WhatsApp'), time: '18s' },
    { name: t('landing.home.flowItem3Name', 'Web visitor'),         msg: t('landing.home.flowItem3Msg', 'Asking about gluten-free menu'), via: t('landing.home.flowVia3', 'via Web chat'), time: '34s' },
  ];
  return (
    <div className="relative grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-8 lg:gap-12 items-center">
      {/* Channels column */}
      <div className="grid grid-cols-2 lg:grid-cols-1 gap-3 lg:gap-4 lg:w-44">
        {channels.map((c) => (
          <div
            key={c.label}
            className="flex items-center gap-3 px-3.5 py-2.5 rounded-xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-950 shadow-sm"
          >
            <div className={`w-8 h-8 rounded-md flex items-center justify-center flex-shrink-0 ${c.iconCls}`}>
              <c.Icon size={14} strokeWidth={2} />
            </div>
            <span className="text-[13px] font-medium text-zinc-800 dark:text-zinc-200 truncate">{c.label}</span>
          </div>
        ))}
      </div>

      {/* Connector arrows — desktop only */}
      <svg
        aria-hidden
        className="hidden lg:block absolute left-44 top-0 h-full w-24 pointer-events-none"
        viewBox="0 0 96 240"
        preserveAspectRatio="none"
      >
        <defs>
          <linearGradient id="flowLine" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--marketing-accent, #5B5BD6)" stopOpacity="0" />
            <stop offset="100%" stopColor="var(--marketing-accent, #5B5BD6)" stopOpacity="0.55" />
          </linearGradient>
        </defs>
        {[40, 120, 200].map((y, i) => (
          <path
            key={i}
            d={`M0 ${y} C 40 ${y}, 56 120, 96 120`}
            stroke="url(#flowLine)"
            strokeWidth="1.25"
            fill="none"
          />
        ))}
      </svg>

      {/* Inbox card */}
      <div
        className="relative rounded-2xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden lg:ml-12"
        style={{ boxShadow: '0 30px 80px -20px rgba(91, 91, 214, 0.18), 0 12px 24px -12px rgba(15, 15, 25, 0.10)' }}
      >
        <div className="flex items-center justify-between px-4 py-2.5 border-b border-zinc-100 dark:border-zinc-900 bg-zinc-50 dark:bg-zinc-900/60">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-md bg-marketing-accent text-white flex items-center justify-center">
              <Inbox size={14} strokeWidth={2.2} />
            </div>
            <span className="text-[13px] font-semibold text-zinc-900 dark:text-white">
              {t('landing.home.flowInboxTitle', 'Unified inbox')}
            </span>
          </div>
          <div className="flex items-center gap-1.5 text-[11px] text-zinc-500">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 motion-safe:animate-pulse" />
            {t('landing.home.flowLive', 'Live')}
          </div>
        </div>
        <div className="p-3 space-y-1.5">
          {items.map((it, i) => (
            <div key={i} className="flex items-start gap-3 p-2.5 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-900/60 transition-colors">
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <span className="text-[12.5px] font-semibold text-zinc-800 dark:text-zinc-100 truncate">{it.name}</span>
                  <span className="text-[10px] text-zinc-400 flex-shrink-0">{it.time}</span>
                </div>
                <p className="text-[11.5px] text-zinc-500 dark:text-zinc-400 truncate mt-0.5">{it.msg}</p>
                <p className="text-[10px] text-marketing-accent font-medium mt-0.5">{it.via}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─── Product preview / dashboard mockup section ─── */
function ProductPreview() {
  const { t } = useTranslation();
  const { ref, inView } = useInView(0.1);
  return (
    <section className="bg-white dark:bg-[#0A0A0A] py-20 sm:py-28">
      <div ref={ref} className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8">
        <div className={`text-center max-w-2xl mx-auto mb-12 transition-all duration-700 motion-reduce:transition-none ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-marketing-accent mb-3">
            {t('landing.home.previewEyebrow', 'One workspace')}
          </p>
          <h2 className="text-[32px] sm:text-[40px] leading-[1.1] font-semibold tracking-tight text-zinc-900 dark:text-white">
            {t('landing.home.previewTitle', 'Every channel, every order — in one view')}
          </h2>
          <p className="mt-4 text-[15px] leading-relaxed text-zinc-500 dark:text-zinc-400">
            {t('landing.home.previewSub', 'Phone calls, web chat, and messaging streams flow into a single live dashboard your team can watch at a glance.')}
          </p>
        </div>

        <div
          className={`relative max-w-4xl mx-auto transition-all duration-700 motion-reduce:transition-none delay-150 ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}
        >
          <div className="absolute inset-x-12 -bottom-4 h-12 rounded-[40px] bg-marketing-accent/15 blur-2xl -z-10" aria-hidden />
          <ChannelsInboxFlow />
        </div>
      </div>
    </section>
  );
}

/* ─── ROI calculator ─── */
function RoiField({
  id, label, value, min, max, step, suffix, onChange,
}: { id: string; label: string; value: number; min: number; max: number; step: number; suffix?: string; onChange: (n: number) => void; }) {
  const numId = `${id}-num`;
  const rangeId = `${id}-range`;
  return (
    <div>
      <div className="flex items-center justify-between mb-2">
        <label htmlFor={numId} className="text-[13px] font-semibold text-zinc-700 dark:text-zinc-300">{label}</label>
        <div className="flex items-center gap-1.5">
          <input
            id={numId}
            type="number"
            value={value}
            min={min}
            max={max}
            step={step}
            onChange={(e) => {
              const n = Number(e.target.value);
              if (Number.isFinite(n)) onChange(Math.max(min, Math.min(max, n)));
            }}
            className="w-20 px-2 py-1 text-right text-[13px] font-semibold tabular-nums rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-marketing-accent/40 focus:border-marketing-accent/60"
          />
          {suffix && <span className="text-[12px] text-zinc-500">{suffix}</span>}
        </div>
      </div>
      <input
        id={rangeId}
        type="range"
        value={value}
        min={min}
        max={max}
        step={step}
        onChange={(e) => onChange(Number(e.target.value))}
        className="w-full h-1.5 rounded-full bg-zinc-200 dark:bg-zinc-800 cursor-pointer"
        style={{ accentColor: 'var(--marketing-accent, #5B5BD6)' }}
        aria-label={label}
      />
    </div>
  );
}

function RoiCalculator() {
  const { t } = useTranslation();
  const { ref, inView } = useInView(0.1);
  const [calls, setCalls] = useState(1200);
  const [missedPct, setMissedPct] = useState(30);
  const [aov, setAov] = useState(42);

  const recovered = useMemo(() => {
    const missed = Math.round(calls * (missedPct / 100));
    return Math.round(missed * aov);
  }, [calls, missedPct, aov]);

  const formatted = recovered.toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });

  return (
    <section className="bg-white dark:bg-[#0A0A0A] py-20 sm:py-28 border-y border-zinc-200/70 dark:border-zinc-900">
      <div ref={ref} className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8">
        <div className={`mb-10 sm:mb-12 transition-all duration-700 motion-reduce:transition-none ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
          <SectionHeading
            eyebrow={t('landing.home.roiEyebrow', 'ROI calculator')}
            title={t('landing.home.roiTitle', 'See what missed calls are costing you')}
            sub={t('landing.home.roiSub', 'A few quick numbers — find out how much revenue RestroAgent recovers every month.')}
          />
        </div>

        <div className={`grid grid-cols-1 lg:grid-cols-[1fr_1fr] gap-6 lg:gap-8 transition-all duration-700 motion-reduce:transition-none delay-150 ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}>
          <div className="rounded-2xl border border-zinc-200/80 dark:border-zinc-800 bg-zinc-50/60 dark:bg-zinc-950/40 p-7 sm:p-8 space-y-6">
            <RoiField
              id="roi-calls"
              label={t('landing.home.roiInput1', 'Monthly inbound calls')}
              value={calls} min={100} max={20000} step={50}
              onChange={setCalls}
            />
            <RoiField
              id="roi-missed"
              label={t('landing.home.roiInput2', 'Currently missed')}
              value={missedPct} min={0} max={80} step={1} suffix="%"
              onChange={setMissedPct}
            />
            <RoiField
              id="roi-aov"
              label={t('landing.home.roiInput3', 'Average order value')}
              value={aov} min={5} max={500} step={1} suffix="$"
              onChange={setAov}
            />
          </div>

          <div className="rounded-2xl border border-marketing-accent/30 bg-marketing-accent-soft p-7 sm:p-8 flex flex-col justify-center">
            <p className="text-[12px] font-semibold uppercase tracking-[0.18em] text-marketing-accent mb-3">
              {t('landing.home.roiResultLabel', 'Recovered with RestroAgent')}
            </p>
            <div className="text-[44px] sm:text-[56px] leading-none font-semibold tracking-tight text-zinc-900 dark:text-white tabular-nums">
              {formatted}
              <span className="text-[18px] sm:text-[22px] font-medium text-zinc-500 dark:text-zinc-400 ml-1">/mo</span>
            </div>
            <p className="mt-4 text-[13px] text-zinc-600 dark:text-zinc-400 max-w-sm">
              {t('landing.home.roiResultSub', 'Based on capturing every missed call at your average order value. Estimate uses industry averages — most restaurants see more.')}
            </p>
            <div className="mt-6 flex flex-col sm:flex-row gap-3">
              <Link
                href="/register"
                className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-md text-[13.5px] font-semibold text-white bg-marketing-accent hover:bg-marketing-accent-hover transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[#0A0A0A] focus-visible:ring-marketing-accent"
              >
                {t('landing.home.roiCta', 'Start free trial')}
                <ArrowRight size={13} strokeWidth={2.5} />
              </Link>
              <p className="text-[11px] text-zinc-500 self-center">
                {t('landing.home.roiDisclaimer', 'Estimate based on industry averages.')}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Features bento ─── */
type AccentKey = 'indigo' | 'violet' | 'sky' | 'emerald' | 'amber' | 'rose';

type AccentClasses = {
  card: string;        // gradient wash background applied to card
  border: string;      // hover border tint
  glow: string;        // hover outer glow (motion-safe)
  chip: string;        // icon chip background gradient
  chipText: string;    // icon stroke color
  visualBg: string;    // group-hover bg for bars / fill
  visualText: string;  // text color (chat times, +12 chip uses bg)
  visualSolid: string; // solid bg (filled time slot, +12 chip, completed step)
};

const ACCENTS: Record<AccentKey, AccentClasses> = {
  indigo: {
    card: 'bg-gradient-to-br from-indigo-50/50 via-white to-white dark:from-indigo-950/25 dark:via-zinc-950 dark:to-zinc-950',
    border: 'hover:border-indigo-300/70 dark:hover:border-indigo-700/60',
    glow: 'motion-safe:hover:shadow-[0_0_40px_-8px_rgba(99,102,241,0.45)]',
    chip: 'bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-950/60 dark:to-indigo-900/40',
    chipText: 'text-indigo-600 dark:text-indigo-300',
    visualBg: 'group-hover:bg-indigo-500',
    visualText: 'text-indigo-600 dark:text-indigo-400',
    visualSolid: 'bg-indigo-500',
  },
  violet: {
    card: 'bg-gradient-to-br from-violet-50/50 via-white to-white dark:from-violet-950/25 dark:via-zinc-950 dark:to-zinc-950',
    border: 'hover:border-violet-300/70 dark:hover:border-violet-700/60',
    glow: 'motion-safe:hover:shadow-[0_0_40px_-8px_rgba(139,92,246,0.45)]',
    chip: 'bg-gradient-to-br from-violet-100 to-violet-200 dark:from-violet-950/60 dark:to-violet-900/40',
    chipText: 'text-violet-600 dark:text-violet-300',
    visualBg: 'group-hover:bg-violet-500',
    visualText: 'text-violet-600 dark:text-violet-400',
    visualSolid: 'bg-violet-500',
  },
  sky: {
    card: 'bg-gradient-to-br from-sky-50/50 via-white to-white dark:from-sky-950/25 dark:via-zinc-950 dark:to-zinc-950',
    border: 'hover:border-sky-300/70 dark:hover:border-sky-700/60',
    glow: 'motion-safe:hover:shadow-[0_0_40px_-8px_rgba(14,165,233,0.45)]',
    chip: 'bg-gradient-to-br from-sky-100 to-sky-200 dark:from-sky-950/60 dark:to-sky-900/40',
    chipText: 'text-sky-600 dark:text-sky-300',
    visualBg: 'group-hover:bg-sky-500',
    visualText: 'text-sky-600 dark:text-sky-400',
    visualSolid: 'bg-sky-500',
  },
  emerald: {
    card: 'bg-gradient-to-br from-emerald-50/50 via-white to-white dark:from-emerald-950/25 dark:via-zinc-950 dark:to-zinc-950',
    border: 'hover:border-emerald-300/70 dark:hover:border-emerald-700/60',
    glow: 'motion-safe:hover:shadow-[0_0_40px_-8px_rgba(16,185,129,0.45)]',
    chip: 'bg-gradient-to-br from-emerald-100 to-emerald-200 dark:from-emerald-950/60 dark:to-emerald-900/40',
    chipText: 'text-emerald-600 dark:text-emerald-300',
    visualBg: 'group-hover:bg-emerald-500',
    visualText: 'text-emerald-600 dark:text-emerald-400',
    visualSolid: 'bg-emerald-500',
  },
  amber: {
    card: 'bg-gradient-to-br from-amber-50/50 via-white to-white dark:from-amber-950/25 dark:via-zinc-950 dark:to-zinc-950',
    border: 'hover:border-amber-300/70 dark:hover:border-amber-700/60',
    glow: 'motion-safe:hover:shadow-[0_0_40px_-8px_rgba(245,158,11,0.45)]',
    chip: 'bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-950/60 dark:to-amber-900/40',
    chipText: 'text-amber-600 dark:text-amber-300',
    visualBg: 'group-hover:bg-amber-500',
    visualText: 'text-amber-600 dark:text-amber-400',
    visualSolid: 'bg-amber-500',
  },
  rose: {
    card: 'bg-gradient-to-br from-rose-50/50 via-white to-white dark:from-rose-950/25 dark:via-zinc-950 dark:to-zinc-950',
    border: 'hover:border-rose-300/70 dark:hover:border-rose-700/60',
    glow: 'motion-safe:hover:shadow-[0_0_40px_-8px_rgba(244,63,94,0.45)]',
    chip: 'bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-950/60 dark:to-rose-900/40',
    chipText: 'text-rose-600 dark:text-rose-300',
    visualBg: 'group-hover:bg-rose-500',
    visualText: 'text-rose-600 dark:text-rose-400',
    visualSolid: 'bg-rose-500',
  },
};

type Feature = {
  span: string;
  accent: AccentKey;
  Icon: React.ComponentType<{ size?: number; className?: string; strokeWidth?: number }>;
  title: string;
  desc: string;
  visual?: (a: AccentClasses) => React.ReactNode;
};

function FeaturesBento() {
  const { t } = useTranslation();
  const { ref, inView } = useInView(0.05);

  const features: Feature[] = [
    {
      span: 'lg:col-span-7',
      accent: 'indigo',
      Icon: Mic,
      title: t('landing.home.feat1Title', 'AI voice agent'),
      desc: t('landing.home.feat1Desc', 'Natural phone conversations that take orders, confirm bookings, and upsell — in 40+ languages, any accent.'),
      visual: (a) => (
        <div className="mt-6 flex items-end gap-1 h-12">
          {[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-zinc-200 dark:bg-zinc-800 ${a.visualBg} transition-colors`}
              style={{ height: `${h * 4}%`, transitionDelay: `${i * 12}ms` }}
            />
          ))}
        </div>
      ),
    },
    {
      span: 'lg:col-span-5',
      accent: 'violet',
      Icon: MessageSquare,
      title: t('landing.home.feat2Title', 'Omnichannel chat'),
      desc: t('landing.home.feat2Desc', 'WhatsApp, web chat, and SMS — answered in under 1.2 seconds with context that spans the whole conversation.'),
      visual: (a) => (
        <div className="mt-6 space-y-2">
          {[
            { ch: 'WhatsApp', msg: t('landing.home.feat2Chat1', 'Do you have vegan options?'), time: '2s' },
            { ch: 'Web chat', msg: t('landing.home.feat2Chat2', 'Book a table for 4 on Saturday?'), time: '0.9s' },
          ].map(c => (
            <div key={c.ch} className="flex items-center justify-between gap-2 px-3 py-2 rounded-md bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-100 dark:border-zinc-800">
              <div className="min-w-0">
                <div className="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{c.ch}</div>
                <div className="text-[12px] text-zinc-700 dark:text-zinc-300 truncate">{c.msg}</div>
              </div>
              <span className={`text-[11px] font-semibold ${a.visualText} tabular-nums flex-shrink-0`}>{c.time}</span>
            </div>
          ))}
        </div>
      ),
    },
    {
      span: 'lg:col-span-4',
      accent: 'sky',
      Icon: Calendar,
      title: t('landing.home.feat3Title', 'Smart reservations'),
      desc: t('landing.home.feat3Desc', 'Real-time availability, automated confirmations, and reminder sequences that cut no-shows by 40%.'),
      visual: (a) => (
        <div className="mt-6 grid grid-cols-3 gap-1.5">
          {['6:00', '6:30', '7:00', '7:30', '8:00', '8:30'].map((time, i) => (
            <div
              key={time}
              className={`text-[11px] font-medium px-2 py-1.5 rounded-md text-center ${
                i === 2
                  ? `${a.visualSolid} text-white`
                  : 'bg-zinc-50 dark:bg-zinc-900/60 text-zinc-600 dark:text-zinc-400 border border-zinc-100 dark:border-zinc-800'
              }`}
            >
              {time}
            </div>
          ))}
        </div>
      ),
    },
    {
      span: 'lg:col-span-4',
      accent: 'emerald',
      Icon: BarChart3,
      title: t('landing.home.feat4Title', 'Live analytics'),
      desc: t('landing.home.feat4Desc', 'Order patterns, peak hours, and customer lifetime value — surfaced in dashboards your team actually uses.'),
      visual: (a) => (
        <div className="mt-6 flex items-end gap-1 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-sm bg-zinc-200 dark:bg-zinc-800 ${a.visualBg} transition-colors`}
              style={{ height: `${h}%`, transitionDelay: `${i * 18}ms` }}
            />
          ))}
        </div>
      ),
    },
    {
      span: 'lg:col-span-4',
      accent: 'amber',
      Icon: Building2,
      title: t('landing.home.feat5Title', 'Multi-branch'),
      desc: t('landing.home.feat5Desc', 'One dashboard for every location — unified menu, staff, and analytics across the whole group.'),
      visual: (a) => (
        <div className="mt-6 flex items-center gap-2">
          {['NYC', 'LA', 'CHI', 'MIA'].map(b => (
            <div key={b} className="w-9 h-9 rounded-full bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 text-[10px] font-bold flex items-center justify-center">
              {b}
            </div>
          ))}
          <div className={`w-9 h-9 rounded-full ${a.visualSolid} text-white text-[10px] font-bold flex items-center justify-center`}>
            +12
          </div>
        </div>
      ),
    },
    {
      span: 'lg:col-span-4',
      accent: 'rose',
      Icon: ClipboardList,
      title: t('landing.home.feat6Title', 'Order management'),
      desc: t('landing.home.feat6Desc', 'Track every order from placement to delivery. AI flags delays, manages modifications, and keeps the kitchen in sync.'),
      visual: (a) => (
        <div className="mt-6 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.5">
              <div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 ${j < 2 ? a.visualSolid : 'border border-zinc-300 dark:border-zinc-700'}`}>
                {j < 2 && <Check size={9} className="text-white" strokeWidth={3} />}
              </div>
              <span className={`text-[12px] ${j < 2 ? 'text-zinc-700 dark:text-zinc-300' : 'text-zinc-400'}`}>{step}</span>
            </div>
          ))}
        </div>
      ),
    },
    {
      span: 'lg:col-span-4',
      accent: 'indigo',
      Icon: BookOpen,
      title: t('landing.home.card7Title', 'Knowledge base'),
      desc: t('landing.home.card7Desc', 'Train the AI on your menu, allergens, hours, and FAQs — it answers every customer question accurately.'),
    },
    {
      span: 'lg:col-span-4',
      accent: 'sky',
      Icon: Globe,
      title: t('landing.home.feat8Title', 'Multilingual'),
      desc: t('landing.home.feat8Desc', '40+ languages, automatic detection. Mandarin and English customers get the same flawless service.'),
    },
    {
      span: 'lg:col-span-7',
      accent: 'sky',
      Icon: QrCode,
      title: t('landing.home.feat9Title', 'QR storefront'),
      desc: t('landing.home.feat9Desc', 'Guests scan a table QR code, browse your live menu, customise their meal, and place orders — no app download, no waiting for staff.'),
      visual: (a) => (
        <div className="mt-6 flex gap-3 items-start">
          <div className="flex-shrink-0 w-16 h-16 rounded-lg border-2 border-dashed border-zinc-200 dark:border-zinc-800 flex items-center justify-center">
            <QrCode size={32} className="text-zinc-300 dark:text-zinc-700" />
          </div>
          <div className="flex-1 space-y-1.5">
            {[
              { name: t('landing.home.feat9Item1', 'Pasta Carbonara'), price: '$18' },
              { name: t('landing.home.feat9Item2', 'Margherita Pizza'), price: '$14' },
              { name: t('landing.home.feat9Item3', 'Tiramisu'), price: '$8' },
            ].map((item, i) => (
              <div key={i} className="flex items-center justify-between gap-2 px-2.5 py-1.5 rounded-md bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-100 dark:border-zinc-800">
                <span className="text-[12px] text-zinc-700 dark:text-zinc-300 truncate">{item.name}</span>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <span className={`text-[11px] font-semibold tabular-nums ${a.visualText}`}>{item.price}</span>
                  <div className={`w-4 h-4 rounded-full ${a.visualSolid} flex items-center justify-center`}>
                    <Plus size={9} className="text-white" strokeWidth={3} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ),
    },
    {
      span: 'lg:col-span-5',
      accent: 'emerald',
      Icon: MessageSquare,
      title: t('landing.home.feat10Title', 'WhatsApp Business'),
      desc: t('landing.home.feat10Desc', 'Official WhatsApp Business API — AI handles orders, reservations, and support right in the chat customers already use every day.'),
      visual: (a) => (
        <div className="mt-6 space-y-2">
          {[
            { dir: 'in', msg: t('landing.home.feat10Msg1', "Hi! I'd like a table for 2 tonight at 7pm") },
            { dir: 'out', msg: t('landing.home.feat10Msg2', 'Confirmed! Table for 2 at 7 pm — see you then 🎉') },
          ].map((m, i) => (
            <div
              key={i}
              className={`max-w-[85%] px-3 py-1.5 rounded-xl text-[12px] leading-snug ${
                m.dir === 'out'
                  ? `ml-auto ${a.visualSolid} text-white`
                  : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300'
              }`}
            >
              {m.msg}
            </div>
          ))}
        </div>
      ),
    },
    {
      span: 'lg:col-span-6',
      accent: 'amber',
      Icon: Gift,
      title: t('landing.home.feat11Title', 'Loyalty, coupons & gift cards'),
      desc: t('landing.home.feat11Desc', 'Built-in loyalty tiers, points redemption, coupon campaigns, and digital gift cards — everything to keep guests coming back.'),
      visual: (a) => (
        <div className="mt-6 space-y-2">
          <div className={`flex items-center justify-between px-3 py-2 rounded-lg ${a.visualSolid} text-white`}>
            <div className="flex items-center gap-2">
              <Gift size={13} strokeWidth={2} />
              <span className="text-[12px] font-semibold">{t('landing.home.feat11Label1', 'Gold member')}</span>
            </div>
            <span className="text-[12px] font-bold tabular-nums">1,240 pts</span>
          </div>
          <div className="flex gap-2">
            <div className="flex-1 flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-100 dark:border-zinc-800">
              <Tag size={11} className={a.visualText} />
              <span className="text-[11px] text-zinc-600 dark:text-zinc-400 font-mono">SUMMER20</span>
            </div>
            <div className="flex-1 flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-100 dark:border-zinc-800">
              <Gift size={11} className={a.visualText} />
              <span className="text-[11px] text-zinc-600 dark:text-zinc-400">{t('landing.home.feat11Label2', '$25 gift card')}</span>
            </div>
          </div>
        </div>
      ),
    },
    {
      span: 'lg:col-span-6',
      accent: 'violet',
      Icon: Megaphone,
      title: t('landing.home.feat12Title', 'Marketing campaigns'),
      desc: t('landing.home.feat12Desc', 'Segment your audience and send targeted email or WhatsApp campaigns — with AI-assisted copy and real-time delivery analytics.'),
      visual: (a) => (
        <div className="mt-6 space-y-2">
          {[
            { label: t('landing.home.feat12Row1', 'Weekend promo'), sent: '1,284', rate: '38%' },
            { label: t('landing.home.feat12Row2', 'Loyalty win-back'), sent: '540', rate: '51%' },
          ].map((row, i) => (
            <div key={i} className="flex items-center gap-3 px-3 py-2 rounded-md bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-100 dark:border-zinc-800">
              <div className="flex-1 min-w-0">
                <div className="text-[12px] font-semibold text-zinc-700 dark:text-zinc-300 truncate">{row.label}</div>
                <div className="text-[10px] text-zinc-400">{row.sent} {t('landing.home.feat12Sent', 'sent')}</div>
              </div>
              <span className={`text-[13px] font-bold tabular-nums ${a.visualText}`}>{row.rate}</span>
            </div>
          ))}
        </div>
      ),
    },
  ];

  return (
    <section id="features" className="bg-zinc-50/60 dark:bg-zinc-950/40 border-y border-zinc-200/70 dark:border-zinc-900 py-20 sm:py-28">
      <div className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8">
        <div ref={ref} className={`mb-12 sm:mb-14 transition-all duration-700 motion-reduce:transition-none ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
          <SectionHeading
            eyebrow={t('landing.home.featuresBadge', 'Platform')}
            title={t('landing.home.featuresTitle', 'Built for restaurants, not call centers')}
            sub={t('landing.home.featuresSub', 'Every feature designed around how restaurants actually work — from single-location diners to multi-branch chains.')}
          />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
          {features.map((f, i) => {
            const a = ACCENTS[f.accent];
            return (
              <div
                key={i}
                className={`group ${f.span} relative p-6 sm:p-7 rounded-2xl border border-zinc-200/80 dark:border-zinc-800 ${a.card} ${a.border} ${a.glow} motion-safe:hover:-translate-y-0.5 transition-all duration-200 motion-reduce:transition-none motion-reduce:transform-none`}
              >
                <div className="flex items-start justify-between mb-4">
                  <div className={`w-9 h-9 rounded-md ${a.chip} ${a.chipText} flex items-center justify-center shadow-sm`}>
                    <f.Icon size={17} strokeWidth={2} />
                  </div>
                </div>
                <h3 className="text-[17px] font-semibold text-zinc-900 dark:text-white mb-1.5">{f.title}</h3>
                <p className="text-[14px] text-zinc-500 dark:text-zinc-400 leading-relaxed max-w-md">{f.desc}</p>
                {f.visual?.(a)}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─── Case study highlight ─── */
function CaseStudyHighlight() {
  const { t } = useTranslation();
  const { ref, inView } = useInView(0.1);
  return (
    <section className="bg-white dark:bg-[#0A0A0A] py-20 sm:py-28">
      <div ref={ref} className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8">
        <div className={`mb-12 transition-all duration-700 motion-reduce:transition-none ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
          <SectionHeading
            eyebrow={t('landing.home.caseStudiesBadge', 'Case study')}
            title={t('landing.home.caseStudiesTitle', 'Spice Garden lifted revenue 31% in 90 days')}
            sub={t('landing.home.caseStudiesSub', 'How an 8-location group cut staff phone time from 4 hours a day to 22 minutes — without losing a single guest interaction.')}
          />
        </div>

        <div className={`grid grid-cols-1 lg:grid-cols-[1.3fr_1fr] gap-6 lg:gap-8 transition-all duration-700 motion-reduce:transition-none delay-150 ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}>
          <div className="rounded-2xl border border-zinc-200/80 dark:border-zinc-800 bg-zinc-50/60 dark:bg-zinc-950/40 p-8 sm:p-10 flex flex-col">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-marketing-accent text-white font-bold text-sm flex items-center justify-center">SG</div>
              <div>
                <div className="text-[14px] font-semibold text-zinc-900 dark:text-white">Spice Garden Group</div>
                <div className="text-[12px] text-zinc-500">Chicago, IL · 8 locations</div>
              </div>
            </div>
            <blockquote className="text-[20px] sm:text-[22px] leading-[1.4] tracking-tight text-zinc-900 dark:text-white font-medium">
              "{t('landing.home.caseStudyQuote', 'Managing 8 branches from one dashboard changed everything. Staff focus on guests, not phones. Revenue up 31% in 3 months.')}"
            </blockquote>
            <footer className="mt-5 text-[13px] text-zinc-500">— Priya Sharma, General Manager</footer>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-3">
            {[
              { label: t('landing.home.caseMetric1Label', 'Staff phone time'), value: '↓ 91%', sub: '4 h/day → 22 min' },
              { label: t('landing.home.caseMetric2Label', 'AI resolution rate'), value: '98.4%', sub: t('landing.home.caseMetric2Sub', 'across all calls') },
              { label: t('landing.home.caseMetric3Label', 'Revenue lift'), value: '+31%', sub: '$96K in 90 days' },
            ].map((m, i) => (
              <div key={i} className="rounded-2xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6">
                <div className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 mb-2">{m.label}</div>
                <div className="text-2xl font-semibold text-marketing-accent tabular-nums">{m.value}</div>
                <div className="text-[12px] text-zinc-500 mt-1">{m.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Testimonials ─── */
function Testimonials() {
  const { t } = useTranslation();
  const { ref, inView } = useInView(0.1);
  const items = [
    {
      name: t('landing.home.t1Name', 'Marco Rossi'),
      role: t('landing.home.t1Role', 'Owner, Bella Napoli'),
      quote: t('landing.home.testimonial1Quote', "We went from missing 30% of phone orders during rush hour to zero missed calls. Our regulars can't tell the difference."),
      avatar: 'MR',
    },
    {
      name: t('landing.home.t3Name', 'James Chen'),
      role: t('landing.home.t3Role', 'CEO, Dragon Palace'),
      quote: t('landing.home.testimonial3Quote', 'The multilingual support is incredible. Mandarin and English customers both get flawless service. Setup took one afternoon.'),
      avatar: 'JC',
    },
    {
      name: t('landing.home.t4Name', 'Sofia Andrade'),
      role: t('landing.home.t4Role', 'Owner, Casa Mia'),
      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.'),
      avatar: 'SA',
    },
  ];
  return (
    <section className="bg-zinc-50/60 dark:bg-zinc-950/40 border-y border-zinc-200/70 dark:border-zinc-900 py-20 sm:py-28">
      <div ref={ref} className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8">
        <div className={`mb-12 sm:mb-14 transition-all duration-700 motion-reduce:transition-none ${inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
          <SectionHeading
            eyebrow={t('landing.home.testimonialsBadge', 'Customers')}
            title={t('landing.home.testimonialsTitle', 'Restaurant owners love it')}
            sub={t('landing.home.testimonialsSub', 'Real results from real restaurants — no cherry-picked metrics.')}
          />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {items.map((it, i) => (
            <div
              key={i}
              className="rounded-2xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 sm:p-7 flex flex-col"
            >
              <div className="flex gap-1 mb-4">
                {Array.from({ length: 5 }).map((_, j) => (
                  <Star key={j} size={13} className="text-marketing-accent" fill="currentColor" strokeWidth={0} />
                ))}
              </div>
              <p className="text-[15px] leading-relaxed text-zinc-700 dark:text-zinc-200 mb-6">"{it.quote}"</p>
              <div className="mt-auto flex items-center gap-3">
                <div className="w-9 h-9 rounded-full bg-marketing-accent-soft text-marketing-accent text-xs font-semibold flex items-center justify-center">
                  {it.avatar}
                </div>
                <div>
                  <div className="text-[13px] font-semibold text-zinc-900 dark:text-white">{it.name}</div>
                  <div className="text-[12px] text-zinc-500">{it.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Comparison table ─── */
function CompareTable() {
  const { t } = useTranslation();
  const rows = getCompareRows(t);
  const cell = (v: string | true | false, kind: 'ra' | 'other') => {
    if (v === true) return <Check size={16} className="text-marketing-accent inline" strokeWidth={2.5} />;
    if (v === false) return <XIcon size={16} className="text-zinc-300 dark:text-zinc-700 inline" strokeWidth={2.5} />;
    return <span className={`text-[13px] ${kind === 'ra' ? 'font-semibold text-zinc-900 dark:text-white' : 'text-zinc-500'}`}>{v}</span>;
  };
  return (
    <section className="bg-white dark:bg-[#0A0A0A] py-20 sm:py-28">
      <div className="mx-auto max-w-5xl px-5 sm:px-6 lg:px-8">
        <div className="mb-10 text-center">
          <SectionHeading
            align="center"
            eyebrow={t('landing.home.cmpBadge', 'Comparison')}
            title={t('landing.home.cmpTitle', 'Why teams pick RestroAgent')}
            sub={t('landing.home.cmpSub', 'A side-by-side look at how RestroAgent compares to legacy answering services and generic AI bots.')}
          />
        </div>
        <div className="overflow-x-auto rounded-2xl border border-zinc-200 dark:border-zinc-800">
          <table className="w-full min-w-[600px] text-left">
            <thead>
              <tr className="border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/80 dark:bg-zinc-950/60">
                <th className="px-6 py-4 text-[12px] font-semibold uppercase tracking-wider text-zinc-500">{t('landing.home.cmpColFeature', 'Capability')}</th>
                <th className="px-6 py-4 text-center text-[13px] font-semibold text-marketing-accent">{t('landing.home.cmpColRA', 'RestroAgent')}</th>
                <th className="px-6 py-4 text-center text-[13px] font-medium text-zinc-500">{t('landing.home.cmpColLegacy', 'Legacy')}</th>
                <th className="px-6 py-4 text-center text-[13px] font-medium text-zinc-500">{t('landing.home.cmpColGeneric', 'Generic AI')}</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} className="border-b last:border-0 border-zinc-100 dark:border-zinc-900">
                  <td className="px-6 py-3.5 text-[13.5px] text-zinc-700 dark:text-zinc-300 font-medium">{r.feature}</td>
                  <td className="px-6 py-3.5 text-center bg-marketing-accent-soft/40">{cell(r.ra, 'ra')}</td>
                  <td className="px-6 py-3.5 text-center">{cell(r.legacy, 'other')}</td>
                  <td className="px-6 py-3.5 text-center">{cell(r.generic, 'other')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ─── FAQ ─── */
function Faq() {
  const { t } = useTranslation();
  const [open, setOpen] = useState<number | null>(0);
  const faqs = [
    { 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 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.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.') },
  ];
  return (
    <section className="bg-zinc-50/60 dark:bg-zinc-950/40 border-y border-zinc-200/70 dark:border-zinc-900 py-20 sm:py-28">
      <div className="mx-auto max-w-3xl px-5 sm:px-6 lg:px-8">
        <div className="mb-10 text-center">
          <SectionHeading
            align="center"
            eyebrow={t('landing.home.faqBadge', 'FAQ')}
            title={t('landing.home.faqTitle', 'Frequently asked questions')}
            sub={t('landing.home.faqSub', 'Everything you need to know before getting started.')}
          />
        </div>
        <div className="space-y-2">
          {faqs.map((f, i) => (
            <div
              key={i}
              className="rounded-xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden"
            >
              <button
                onClick={() => setOpen(open === i ? null : i)}
                aria-expanded={open === i}
                className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-marketing-accent"
              >
                <span className="text-[14.5px] font-semibold text-zinc-900 dark:text-white">{f.q}</span>
                <span
                  className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center transition-all duration-200 ${
                    open === i ? 'bg-marketing-accent rotate-45' : 'bg-zinc-100 dark:bg-zinc-900'
                  }`}
                >
                  <Plus size={11} strokeWidth={2.5} className={open === i ? 'text-white' : 'text-zinc-500'} />
                </span>
              </button>
              {open === i && (
                <div className="px-5 pb-4 text-[13.5px] leading-relaxed text-zinc-600 dark:text-zinc-400 border-t border-zinc-100 dark:border-zinc-900 pt-3">
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Final CTA ─── */
function FinalCTA() {
  const { t } = useTranslation();
  return (
    <section className="bg-white dark:bg-[#0A0A0A] py-20 sm:py-28">
      <div className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8">
        <div
          className="relative rounded-3xl overflow-hidden bg-marketing-ink text-white px-8 sm:px-12 py-14 sm:py-20 text-center"
          style={{
            backgroundImage:
              'radial-gradient(ellipse 70% 60% at 50% 0%, var(--marketing-accent-soft, rgba(91,91,214,0.18)), transparent 70%)',
          }}
        >
          <h2 className="text-[32px] sm:text-[44px] leading-[1.08] font-semibold tracking-tight max-w-2xl mx-auto">
            {t('landing.home.finalCtaTitle', 'Stop missing orders. Start growing revenue.')}
          </h2>
          <p className="mt-5 text-[15px] sm:text-base text-zinc-400 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="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/register"
              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-md bg-marketing-accent hover:bg-marketing-accent-hover text-white font-semibold text-sm transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-marketing-ink focus-visible:ring-marketing-accent"
            >
              {t('landing.home.finalCtaPrimary', 'Start free trial')}
              <ArrowRight size={14} strokeWidth={2.5} />
            </Link>
            <Link
              href="/contact"
              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-md border border-zinc-700 hover:border-zinc-500 text-zinc-200 font-semibold text-sm transition-colors duration-150"
            >
              {t('landing.home.finalCtaSecondary', 'Talk to sales')}
            </Link>
          </div>
          <p className="mt-6 text-[12px] text-zinc-500">
            {t('landing.home.finalCtaFooter', 'Cancel anytime · Setup in 2 hours · 24/7 support')}
          </p>
        </div>
      </div>
    </section>
  );
}

/* ─── Page ─── */
export default function HomePage() {
  const { t } = useTranslation();

  return (
    <>
      {/* ─── Hero ─── */}
      <section className="relative bg-white dark:bg-[#0A0A0A] overflow-hidden">
        <div
          className="absolute inset-x-0 top-0 -z-10 h-[600px] opacity-50"
          aria-hidden
          style={{
            backgroundImage:
              'radial-gradient(ellipse 80% 50% at 50% -10%, var(--marketing-accent-soft, rgba(91,91,214,0.18)), transparent 70%)',
          }}
        />
        <div className="mx-auto max-w-marketing px-5 sm:px-6 lg:px-8 pt-16 sm:pt-24 lg:pt-28 pb-16 sm:pb-20">
          <div className="grid grid-cols-1 lg:grid-cols-[1.05fr_1fr] gap-12 lg:gap-16 items-center">
            {/* Left: trust strip + headline + sub + CTAs */}
            <div className="text-center lg:text-left">
              {/* Trust row — rating + chips, Certus-style */}
              <div className="flex flex-wrap items-center justify-center lg:justify-start gap-2.5 mb-7">
                <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-200/80 dark:border-zinc-800 text-[12px]">
                  <span className="flex gap-0.5">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star key={i} size={11} className="text-marketing-accent" fill="currentColor" strokeWidth={0} />
                    ))}
                  </span>
                  <span className="font-semibold text-zinc-900 dark:text-white">4.9</span>
                </div>
                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-200/80 dark:border-zinc-800 text-[12px] text-zinc-600 dark:text-zinc-400">
                  <Bot size={11} className="text-marketing-accent" />
                  {t('landing.home.heroChip1', 'Always-On AI')}
                </span>
                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-200/80 dark:border-zinc-800 text-[12px] text-zinc-600 dark:text-zinc-400">
                  <Globe size={11} className="text-marketing-accent" />
                  {t('landing.home.heroChip2', 'Regional Languages')}
                </span>
                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-50 dark:bg-zinc-900/60 border border-zinc-200/80 dark:border-zinc-800 text-[12px] text-zinc-600 dark:text-zinc-400">
                  <QrCode size={11} className="text-marketing-accent" />
                  {t('landing.home.heroChip3', 'QR Storefront')}
                </span>
              </div>

              <h1 className="text-[40px] sm:text-[56px] lg:text-[64px] leading-[1.04] tracking-[-0.02em] font-semibold text-zinc-900 dark:text-white">
                {t('landing.home.heroTitlePre', 'AI agents that answer every call for')}{' '}
                <span className="text-marketing-accent">{t('landing.home.heroTitleBrand', 'restaurants')}</span>
                <span className="text-zinc-900 dark:text-white">.</span>
              </h1>

              <p className="mt-6 text-[16px] sm:text-[18px] leading-relaxed text-zinc-500 dark:text-zinc-400 max-w-[560px] mx-auto lg:mx-0">
                {t('landing.home.heroSub', 'AI voice, chat, and WhatsApp agents — plus QR scan-to-order, loyalty programs, and marketing campaigns. Everything a modern restaurant needs, in one platform.')}
              </p>

              <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center lg:justify-start">
                <Link
                  href="/register"
                  className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-md text-[14px] font-semibold text-white bg-marketing-accent hover:bg-marketing-accent-hover transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[#0A0A0A] focus-visible:ring-marketing-accent"
                >
                  {t('landing.home.heroCtaStart', 'Start free trial')}
                  <ArrowRight size={14} strokeWidth={2.5} />
                </Link>
                <Link
                  href={DEMO_MODE_ON ? '/demo' : '/contact'}
                  className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-md text-[14px] font-semibold text-zinc-700 dark:text-zinc-200 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors duration-150"
                >
                  {DEMO_MODE_ON ? t('landing.home.heroCtaDemo', 'See live demo') : t('landing.home.heroCtaContact', 'Talk to sales')}
                </Link>
              </div>

              <p className="mt-5 text-[12.5px] text-zinc-500">
                {t('landing.home.heroTrustLine', 'No credit card required · 14-day free trial · Live in 2 hours')}
              </p>
            </div>

            {/* Right: hero visual */}
            <div className="relative">
              <HeroPreview />
            </div>
          </div>
        </div>
      </section>

      <CustomerLogoWall />
      <StatsBand />
      <HowItWorks />
      <ProductPreview />
      <FeaturesBento />
      <RoiCalculator />
      <CaseStudyHighlight />
      <Testimonials />
      <CompareTable />
      <Faq />
      <FinalCTA />
    </>
  );
}
