'use client';
import React, { useEffect, useRef, useState } from 'react';
import { ArrowRight, Bookmark, Check, ChevronRight, Clock, Info, Share2 } from 'lucide-react';
import Link from 'next/link';
import { useTranslation } from '@client/contexts/LanguageContext';

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 };
}

interface TocItem {
  id: string;
  title: string;
  level: number;
}

export default function BlogPostPage() {
  const { t } = useTranslation();
  const [activeSection, setActiveSection] = useState('introduction');
  const ctaRef = useInView(0.2);
  const relatedRef = useInView(0.1);

  const tocItems: TocItem[] = [
    { id: 'introduction', title: t('landing.blog.post.toc.introduction', 'Introduction'), level: 2 },
    { id: 'the-problem', title: t('landing.blog.post.toc.problem', 'The Problem with Traditional Phone Orders'), level: 2 },
    { id: 'how-ai-works', title: t('landing.blog.post.toc.how_it_works', 'How AI Voice Ordering Works'), level: 2 },
    { id: 'real-world-results', title: t('landing.blog.post.toc.results', 'Real-World Results'), level: 2 },
    { id: 'implementation', title: t('landing.blog.post.toc.implementation', 'Implementation Guide'), level: 2 },
    { id: 'common-concerns', title: t('landing.blog.post.toc.concerns', 'Addressing Common Concerns'), level: 2 },
    { id: 'conclusion', title: t('landing.blog.post.toc.conclusion', 'Conclusion'), level: 2 },
  ];

  const relatedArticles = [
    {
      slug: 'reduce-no-shows-ai-reminders',
      category: t('landing.blog.categories.bookings', 'Bookings'),
      categoryColor: 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300',
      title: t('landing.blog.related1.title', 'How to Reduce No-Shows by 40% with AI-Powered Reminders'),
      excerpt: t('landing.blog.related1.excerpt', 'Automated SMS and WhatsApp reminders that adapt to customer behavior patterns can dramatically cut no-show rates.'),
      readTime: t('landing.blog.related1.readTime', '5 min read'),
      date: t('landing.blog.related1.date', 'Mar 8, 2026'),
      avatar: 'SK',
      author: 'Sarah Kim',
      color: 'from-teal-400 to-teal-600',
    },
    {
      slug: 'multilingual-ai-restaurant',
      category: t('landing.blog.categories.ai_features', 'AI Features'),
      categoryColor: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
      title: t('landing.blog.related2.title', 'Serving Every Customer: Multilingual AI for Modern Restaurants'),
      excerpt: t('landing.blog.related2.excerpt', 'How restaurants are using AI to serve customers in 30+ languages without hiring multilingual staff.'),
      readTime: t('landing.blog.related2.readTime', '7 min read'),
      date: t('landing.blog.related2.date', 'Mar 1, 2026'),
      avatar: 'JL',
      author: 'James Liu',
      color: 'from-blue-400 to-blue-600',
    },
    {
      slug: 'restaurant-revenue-analytics',
      category: t('landing.blog.categories.analytics', 'Analytics'),
      categoryColor: 'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300',
      title: t('landing.blog.related3.title', "The Restaurant Owner's Guide to Revenue Analytics in 2026"),
      excerpt: t('landing.blog.related3.excerpt', 'Understanding peak hours, customer lifetime value, and order patterns to make smarter business decisions.'),
      readTime: t('landing.blog.related3.readTime', '9 min read'),
      date: t('landing.blog.related3.date', 'Feb 22, 2026'),
      avatar: 'MR',
      author: 'Maria Rodriguez',
      color: 'from-orange-400 to-orange-600',
    },
  ];

  useEffect(() => {
    const handleScroll = () => {
      const sections = tocItems.map(item => document.getElementById(item.id));
      const scrollY = window.scrollY + 120;
      for (let i = sections.length - 1; i >= 0; i--) {
        const el = sections[i];
        if (el && el.offsetTop <= scrollY) {
          setActiveSection(tocItems[i].id);
          break;
        }
      }
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, [tocItems]);

  const scrollToSection = (id: string) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 100;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <>
      {/* ── Hero ── */}
      <section className="relative bg-white dark:bg-[#080a0f] pt-10 sm:pt-14 pb-0 overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-orange-400/8 dark:bg-orange-500/5 rounded-full blur-3xl" />
          <div className="absolute top-0 right-1/4 w-80 h-80 bg-teal-400/8 dark:bg-teal-500/5 rounded-full blur-3xl" />
        </div>

        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Breadcrumb */}
          <nav className="flex items-center gap-2 text-xs text-slate-400 dark:text-slate-500 mb-6">
            <Link href="/home-landing" className="hover:text-orange-500 transition-colors">{t('landing.blog.post.breadcrumb.home', 'Home')}</Link>
            <ChevronRight size={12} strokeWidth={2} />
            <Link href="/blog" className="hover:text-orange-500 transition-colors">{t('landing.blog.post.breadcrumb.blog', 'Blog')}</Link>
            <ChevronRight size={12} strokeWidth={2} />
            <span className="text-slate-600 dark:text-slate-400 truncate max-w-[200px]">{t('landing.blog.post.breadcrumb.current', 'AI Voice Ordering')}</span>
          </nav>

          {/* Category + meta */}
          <div className="flex flex-wrap items-center gap-2.5 mb-5">
            <span className="px-2.5 py-1 rounded-full bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300 text-xs font-semibold">{t('landing.blog.categories.ai_features', 'AI Features')}</span>
            <span className="text-slate-300 dark:text-slate-600">·</span>
            <span className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1">
              <Clock size={12} strokeWidth={2} />
              {t('landing.blog.post.meta.readTime', '8 min read')}
            </span>
            <span className="text-slate-300 dark:text-slate-600">·</span>
            <span className="text-xs text-slate-500 dark:text-slate-400">{t('landing.blog.post.meta.date', 'March 12, 2026')}</span>
          </div>

          {/* Title */}
          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white leading-tight mb-5">
            {t('landing.blog.post.title', 'How AI Voice Ordering Helped 2,400+ Restaurants Capture Every Call')}
          </h1>

          {/* Subtitle */}
          <p className="text-lg sm:text-xl text-slate-500 dark:text-slate-400 leading-relaxed mb-8 max-w-3xl">
            {t('landing.blog.post.subtitle', 'A deep dive into how AI-powered phone ordering is eliminating missed calls, reducing staff workload, and adding thousands in monthly revenue for restaurants of all sizes.')}
          </p>

          {/* Author row */}
          <div className="flex items-center justify-between gap-4 pb-8 border-b border-slate-100 dark:border-slate-800">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white text-sm font-bold flex-shrink-0">AR</div>
              <div>
                <p className="text-sm font-semibold text-slate-900 dark:text-white">Alex Rivera</p>
                <p className="text-xs text-slate-500 dark:text-slate-400">{t('landing.blog.post.author.role', 'Head of Product, RestroAgent')}</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-xs text-slate-600 dark:text-slate-400 hover:border-orange-300 dark:hover:border-orange-700 hover:text-orange-600 dark:hover:text-orange-400 transition-all duration-200">
                <Share2 size={12} strokeWidth={2} />
                {t('landing.blog.post.actions.share', 'Share')}
              </button>
              <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-xs text-slate-600 dark:text-slate-400 hover:border-orange-300 dark:hover:border-orange-700 hover:text-orange-600 dark:hover:text-orange-400 transition-all duration-200">
                <Bookmark size={12} strokeWidth={2} />
                {t('landing.blog.post.actions.save', 'Save')}
              </button>
            </div>
          </div>
        </div>

        {/* Hero image */}
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
          <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-900 via-orange-950/40 to-slate-900 aspect-[16/7]">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(249,115,22,0.2),transparent_60%)]" />
            <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:24px_24px]" />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-center">
                <div className="text-6xl mb-4">🎙️</div>
                <p className="text-white/60 text-sm font-medium">{t('landing.blog.post.hero.image_label', 'AI Voice Ordering in Action')}</p>
              </div>
            </div>
            {/* Floating stat cards on hero image */}
            <div className="absolute top-4 left-4 sm:top-6 sm:left-6 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-xl px-3 sm:px-4 py-2.5 sm:py-3 shadow-xl border border-white/20">
              <div className="text-[10px] text-slate-500 mb-0.5">{t('landing.blog.post.stats.resolution.label', 'AI Resolution Rate')}</div>
              <div className="text-lg font-bold text-slate-900 dark:text-white">98.7%</div>
              <div className="text-[10px] text-emerald-500 font-medium">↑ {t('landing.blog.post.stats.resolution.context', 'Industry avg: 72%')}</div>
            </div>
            <div className="absolute bottom-4 right-4 sm:bottom-6 sm:right-6 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-xl px-3 sm:px-4 py-2.5 sm:py-3 shadow-xl border border-white/20">
              <div className="text-[10px] text-slate-500 mb-0.5">{t('landing.blog.post.stats.revenue.label', 'Avg Revenue Lift')}</div>
              <div className="text-lg font-bold text-orange-600">+40%</div>
              <div className="text-[10px] text-slate-400">{t('landing.blog.post.stats.revenue.context', 'across 2,400+ restaurants')}</div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Article Body + Sidebar ── */}
      <section className="py-12 sm:py-16 bg-white dark:bg-[#080a0f]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_280px] xl:grid-cols-[1fr_300px] gap-10 lg:gap-14">

            {/* ── Main Article Content ── */}
            <article className="min-w-0">
              {/* Introduction */}
              <div id="introduction" className="scroll-mt-24 mb-10">
                <p className="text-base sm:text-lg text-slate-600 dark:text-slate-400 leading-relaxed mb-5">
                  {t('landing.blog.post.intro.p1', "Every restaurant owner knows the feeling: it's Friday night, the dining room is packed, the kitchen is firing on all cylinders — and the phone won't stop ringing. Your best server is stuck answering calls instead of serving tables. Orders get missed. Customers hang up frustrated. Revenue walks out the door.")}
                </p>
                <p className="text-base sm:text-lg text-slate-600 dark:text-slate-400 leading-relaxed">
                  {t('landing.blog.post.intro.p2', "This is the problem that AI voice ordering was built to solve. And after analyzing data from over 2,400 restaurants using RestroAgent, the results are clear: AI-powered phone ordering isn't just a convenience — it's a competitive advantage.")}
                </p>
              </div>

              {/* Callout box */}
              <div className="my-8 p-5 sm:p-6 rounded-2xl bg-orange-50 dark:bg-orange-950/30 border border-orange-100 dark:border-orange-900/50">
                <div className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <Info size={14} strokeWidth={2} className="text-orange-500" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-orange-800 dark:text-orange-200 mb-1">{t('landing.blog.post.callout.label', 'Key Insight')}</p>
                    <p className="text-sm text-orange-700 dark:text-orange-300 leading-relaxed">
                      {t('landing.blog.post.callout.text', 'Restaurants using AI voice ordering report an average of 0 missed calls during peak hours, compared to a 30-40% miss rate for manually-staffed phone lines.')}
                    </p>
                  </div>
                </div>
              </div>

              {/* Section: The Problem */}
              <div id="the-problem" className="scroll-mt-24 mb-10">
                <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-4 mt-10">{t('landing.blog.post.problem.title', 'The Problem with Traditional Phone Orders')}</h2>
                <p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
                  {t('landing.blog.post.problem.p1', 'Traditional phone ordering creates a bottleneck that costs restaurants in three distinct ways: missed revenue from unanswered calls, reduced service quality when staff are pulled away from tables, and human error in order-taking.')}
                </p>
                <p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
                  {t('landing.blog.post.problem.p2', "Our research found that the average restaurant misses 23% of incoming calls during peak hours. For a restaurant doing $50K/month in phone orders, that's over $11,500 in lost revenue every single month.")}
                </p>

                {/* Stats grid */}
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 my-8">
                  {[
                    { value: '23%', label: t('landing.blog.post.problem.stats.missed', 'Calls missed during peak hours'), color: 'text-red-500', bg: 'bg-red-50 dark:bg-red-950/30 border-red-100 dark:border-red-900/50' },
                    { value: '4.2min', label: t('landing.blog.post.problem.stats.hold', 'Average hold time before hang-up'), color: 'text-amber-500', bg: 'bg-amber-50 dark:bg-amber-950/30 border-amber-100 dark:border-amber-900/50' },
                    { value: '8.3%', label: t('landing.blog.post.problem.stats.error', 'Order error rate (human)'), color: 'text-orange-500', bg: 'bg-orange-50 dark:bg-orange-950/30 border-orange-100 dark:border-orange-900/50' },
                  ].map((stat, i) => (
                    <div key={i} className={`p-4 rounded-xl border ${stat.bg} text-center`}>
                      <div className={`text-3xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
                      <p className="text-xs text-slate-500 dark:text-slate-400 leading-tight">{stat.label}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Section: How AI Works */}
              <div id="how-ai-works" className="scroll-mt-24 mb-10">
                <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-4 mt-10">{t('landing.blog.post.how_it_works.title', 'How AI Voice Ordering Works')}</h2>
                <p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
                  {t('landing.blog.post.how_it_works.p1', "Modern AI voice ordering systems use large language models fine-tuned on restaurant-specific data to understand natural speech, handle complex order modifications, and respond in the customer's preferred language.")}
                </p>

                {/* Step list */}
                <div className="space-y-4 my-6">
                  {[
                    { step: '01', title: t('landing.blog.post.how_it_works.step1.title', 'Customer calls your number'), desc: t('landing.blog.post.how_it_works.step1.desc', 'The AI answers instantly — no hold music, no "please wait." It greets the customer using your restaurant\'s name and personality.') },
                    { step: '02', title: t('landing.blog.post.how_it_works.step2.title', 'Natural conversation'), desc: t('landing.blog.post.how_it_works.step2.desc', 'The AI understands complex requests like "I\'d like the pasta but without mushrooms and can you add extra parmesan?" — just like a human would.') },
                    { step: '03', title: t('landing.blog.post.how_it_works.step3.title', 'Order confirmation'), desc: t('landing.blog.post.how_it_works.step3.desc', 'The AI reads back the complete order, confirms the total, and asks for payment or pickup/delivery details.') },
                    { step: '04', title: t('landing.blog.post.how_it_works.step4.title', 'Instant kitchen notification'), desc: t('landing.blog.post.how_it_works.step4.desc', 'The confirmed order fires directly to your POS or kitchen display system. No manual entry, no errors.') },
                  ].map((s, i) => (
                    <div key={i} className="flex gap-4 p-4 rounded-xl bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800">
                      <div className="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/40 flex items-center justify-center text-xs font-bold text-orange-600 dark:text-orange-400 flex-shrink-0">{s.step}</div>
                      <div>
                        <h4 className="text-sm font-semibold text-slate-900 dark:text-white mb-1">{s.title}</h4>
                        <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{s.desc}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Section: Real World Results */}
              <div id="real-world-results" className="scroll-mt-24 mb-10">
                <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-4 mt-10">{t('landing.blog.post.results.title', 'Real-World Results')}</h2>
                <p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
                  {t('landing.blog.post.results.p1', 'After analyzing 12 months of data across 2,400+ restaurants, the numbers speak for themselves.')}
                </p>

                {/* Quote block */}
                <blockquote className="my-8 pl-5 border-l-4 border-orange-400">
                  <p className="text-lg sm:text-xl text-slate-700 dark:text-slate-300 italic leading-relaxed mb-3">
                    {t('landing.blog.post.results.quote', '"We went from missing 30% of phone orders during rush hour to zero missed calls. The ROI was clear within the first week. I wish we\'d done this years ago."')}
                  </p>
                  <footer className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white text-xs font-bold">MR</div>
                    <div>
                      <p className="text-sm font-semibold text-slate-900 dark:text-white">Marco Rossi</p>
                      <p className="text-xs text-slate-500 dark:text-slate-400">{t('landing.blog.post.results.author_role', 'Owner, Bella Napoli, New York')}</p>
                    </div>
                  </footer>
                </blockquote>
              </div>

              {/* Section: Implementation */}
              <div id="implementation" className="scroll-mt-24 mb-10">
                <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-4 mt-10">{t('landing.blog.post.implementation.title', 'Implementation Guide')}</h2>
                <p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
                  {t('landing.blog.post.implementation.p1', 'Getting started with AI voice ordering is simpler than most restaurant owners expect. The entire setup process takes under 2 hours and requires no technical expertise.')}
                </p>
                <div className="my-6 p-5 sm:p-6 rounded-2xl bg-teal-50 dark:bg-teal-950/30 border border-teal-100 dark:border-teal-900/50">
                  <h4 className="text-sm font-bold text-teal-800 dark:text-teal-200 mb-3 flex items-center gap-2">
                    <Check size={14} strokeWidth={2.5} className="text-teal-600" />
                    {t('landing.blog.post.implementation.list_title', "What you'll need to get started")}
                  </h4>
                  <ul className="space-y-2">
                    {[
                      t('landing.blog.post.implementation.item1', 'Your current menu (PDF, image, or POS export)'),
                      t('landing.blog.post.implementation.item2', 'Your phone number (we handle the forwarding)'),
                      t('landing.blog.post.implementation.item3', "15 minutes to review and approve the AI's responses"),
                      t('landing.blog.post.implementation.item4', 'Optional: POS integration credentials')
                    ].map((item, i) => (
                      <li key={i} className="flex items-start gap-2 text-sm text-teal-700 dark:text-teal-300">
                        <Check size={12} strokeWidth={2.5} className="text-teal-500 flex-shrink-0 mt-0.5" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              {/* Section: Common Concerns */}
              <div id="common-concerns" className="scroll-mt-24 mb-10">
                <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-4 mt-10">{t('landing.blog.post.concerns.title', 'Addressing Common Concerns')}</h2>
                <div className="space-y-4">
                  {[
                    { q: t('landing.blog.post.concerns.q1.q', "Will customers know they're talking to an AI?"), a: t('landing.blog.post.concerns.q1.a', "The AI is transparent about being an automated system when asked directly. However, most customers simply don't ask — they just want their order taken quickly and accurately.") },
                    { q: t('landing.blog.post.concerns.q2.q', 'What about complex orders or complaints?'), a: t('landing.blog.post.concerns.q2.a', 'The AI handles modifications and special requests natively. For complaints or situations requiring human judgment, it escalates to a staff member in under 3 seconds.') },
                    { q: t('landing.blog.post.concerns.q3.q', 'What if the AI makes a mistake?'), a: t('landing.blog.post.concerns.q3.a', "The AI's order accuracy rate is 98.7% — significantly higher than the human average of 91.7%. Every order is confirmed with the customer before being sent to the kitchen.") },
                  ].map((item, i) => (
                    <div key={i} className="p-4 sm:p-5 rounded-xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/50">
                      <h4 className="text-sm font-semibold text-slate-900 dark:text-white mb-2">{item.q}</h4>
                      <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">{item.a}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Section: Conclusion */}
              <div id="conclusion" className="scroll-mt-24 mb-10">
                <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-4 mt-10">{t('landing.blog.post.conclusion.title', 'Conclusion')}</h2>
                <p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
                  {t('landing.blog.post.conclusion.p1', 'AI voice ordering has moved from a novelty to a necessity for competitive restaurants. The data is clear: restaurants that adopt AI phone ordering capture more revenue, reduce staff stress, and deliver a better customer experience.')}
                </p>
                <p className="text-base text-slate-600 dark:text-slate-400 leading-relaxed">
                  {t('landing.blog.post.conclusion.p2', "The question is no longer whether AI voice ordering works — it's whether your restaurant can afford to wait any longer to implement it.")}
                </p>
              </div>

              {/* Author Bio Card */}
              <div className="mt-12 p-5 sm:p-6 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/50">
                <div className="flex items-start gap-4">
                  <div className="w-14 h-14 rounded-full bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center text-white font-bold text-lg flex-shrink-0">AR</div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-3 mb-1">
                      <div>
                        <h3 className="font-bold text-slate-900 dark:text-white">Alex Rivera</h3>
                        <p className="text-xs text-slate-500 dark:text-slate-400">{t('landing.blog.post.author.role', 'Head of Product, RestroAgent')}</p>
                      </div>
                      <span className="px-2 py-0.5 rounded-full bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300 text-[10px] font-semibold flex-shrink-0">{t('landing.blog.post.author.badge', 'Author')}</span>
                    </div>
                    <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mt-2">
                      {t('landing.blog.post.author.bio', 'Alex has spent 8 years at the intersection of hospitality and technology. Before RestroAgent, he led product at two restaurant tech startups and spent 3 years as a restaurant operator himself.')}
                    </p>
                    <div className="flex items-center gap-3 mt-3">
                      <a href="#" className="text-xs text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300 font-medium transition-colors">LinkedIn →</a>
                    </div>
                  </div>
                </div>
              </div>
            </article>

            {/* ── Sidebar ── */}
            <aside className="space-y-8">
              {/* Table of Contents */}
              <div className="sticky top-24">
                <div className="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-sm">
                  <h3 className="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider mb-5">{t('landing.blog.post.toc.title', 'In this article')}</h3>
                  <div className="space-y-1 relative">
                    {/* Active indicator line */}
                    <div className="absolute left-0 top-0 bottom-0 w-px bg-slate-100 dark:bg-slate-800" />

                    {tocItems.map((item) => (
                      <button
                        key={item.id}
                        onClick={() => scrollToSection(item.id)}
                        className={`group flex items-center w-full py-2 pl-4 text-left text-sm transition-all relative ${
                          activeSection === item.id
                            ? 'text-orange-600 dark:text-orange-400 font-medium'
                            : 'text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-300'
                        }`}
                      >
                        {activeSection === item.id && (
                          <div className="absolute left-[-1px] top-0 bottom-0 w-[2px] bg-orange-500" />
                        )}
                        {item.title}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Newsletter Card */}
                <div className="mt-6 p-6 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 dark:from-slate-950 dark:to-slate-900 border border-slate-800 shadow-xl overflow-hidden relative">
                  <div className="absolute top-0 right-0 w-24 h-24 bg-orange-500/10 rounded-full blur-2xl" />
                  <h3 className="text-white font-bold mb-2 relative">{t('landing.blog.post.newsletter.title', 'Stay Ahead')}</h3>
                  <p className="text-xs text-slate-400 mb-4 leading-relaxed relative">
                    {t('landing.blog.post.newsletter.desc', 'Get the latest restaurant tech insights delivered to your inbox.')}
                  </p>
                  <input
                    type="email"
                    placeholder={t('landing.blog.post.newsletter.placeholder', 'Your email')}
                    className="w-full px-3 py-2 rounded-lg bg-slate-800 border border-slate-700 text-xs text-white placeholder:text-slate-500 focus:outline-none focus:ring-1 focus:ring-orange-500/50 mb-2 transition-all"
                  />
                  <button className="w-full py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg text-xs font-bold transition-all hover:shadow-lg hover:shadow-orange-500/20">
                    {t('landing.blog.post.newsletter.button', 'Subscribe')}
                  </button>
                  <p className="text-[10px] text-slate-600 mt-3 text-center">{t('landing.blog.post.newsletter.footer', 'Join 4,500+ restaurant leaders.')}</p>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* ── Related Articles ── */}
      <section ref={relatedRef.ref} className="py-20 bg-slate-50 dark:bg-black/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between mb-10">
            <div>
              <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-2">{t('landing.blog.post.related.title', 'Keep Reading')}</h2>
              <p className="text-slate-500 dark:text-slate-400 text-sm sm:text-base">{t('landing.blog.post.related.subtitle', 'More insights on restaurant technology and operations.')}</p>
            </div>
            <Link href="/blog" className="hidden sm:flex items-center gap-2 text-orange-600 dark:text-orange-400 text-sm font-bold hover:gap-3 transition-all">
              {t('landing.blog.post.related.view_all', 'View all articles')}
              <ArrowRight size={16} strokeWidth={2.5} />
            </Link>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {relatedArticles.map((article, i) => (
              <Link
                key={article.slug}
                href={`/blog/${article.slug}`}
                className={`group bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col ${
                  relatedRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
                }`}
                style={{ transitionDelay: `${i * 100}ms` }}
              >
                <div className="p-6 flex-1">
                  <span className={`px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider mb-4 inline-block ${article.categoryColor}`}>
                    {article.category}
                  </span>
                  <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-3 group-hover:text-orange-600 transition-colors line-clamp-2">
                    {article.title}
                  </h3>
                  <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-3 leading-relaxed mb-6">
                    {article.excerpt}
                  </p>
                  <div className="flex items-center justify-between pt-6 border-t border-slate-50 dark:border-slate-800 mt-auto">
                    <div className="flex items-center gap-2">
                      <div className={`w-7 h-7 rounded-full bg-gradient-to-br ${article.color} flex items-center justify-center text-white text-[10px] font-bold`}>
                        {article.avatar}
                      </div>
                      <span className="text-xs font-semibold text-slate-700 dark:text-slate-300">{article.author}</span>
                    </div>
                    <span className="text-[10px] text-slate-400 font-medium uppercase tracking-tight">{article.readTime}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ── Footer CTA ── */}
      <section ref={ctaRef.ref} className="py-20 relative overflow-hidden bg-white dark:bg-[#080a0f]">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-orange-500/5 dark:bg-orange-500/10 rounded-full blur-[120px]" />
        </div>

        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className={`transition-all duration-700 ${ctaRef.inView ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}>
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white mb-6">
              {t('landing.blog.post.cta.title', 'Stop missing phone orders today.')}
            </h2>
            <p className="text-lg text-slate-500 dark:text-slate-400 mb-10 max-w-2xl mx-auto">
              {t('landing.blog.post.cta.subtitle', 'Join 2,400+ restaurants using RestroAgent to capture every call, increase revenue, and free up their staff.')}
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link
                href="/register"
                className="w-full sm:w-auto px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white rounded-xl font-bold shadow-lg shadow-orange-500/25 transition-all hover:-translate-y-0.5"
              >
                {t('landing.blog.post.cta.primary', 'Start your 14-day free trial')}
              </Link>
              <Link
                href="/contact"
                className="w-full sm:w-auto px-8 py-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-xl font-bold hover:bg-slate-50 dark:hover:bg-slate-800 transition-all"
              >
                {t('landing.blog.post.cta.secondary', 'Schedule a demo')}
              </Link>
            </div>
            <p className="mt-6 text-xs text-slate-500 dark:text-slate-600">
              {t('landing.blog.post.cta.footer', 'No credit card required. Setup takes under 2 minutes.')}
            </p>
          </div>
        </div>
      </section>
    </>
  );
}