chatbot/client/src/pages/Home.tsx

/**
 * Home Page — Homelegance Chatbot Integration Demo
 * Design: Warm Showroom — Scandinavian warmth, editorial magazine layout
 * Playfair Display headings, Source Sans 3 body, forest green + terracotta + cream palette
 */
import { useRef } from "react";
import { useAuth } from "@/_core/hooks/useAuth";
import { motion, useInView } from "framer-motion";
import {
  MessageCircle,
  ArrowDown,
  Zap,
  Clock,
  TrendingUp,
  Shield,
  Code2,
  Layers,
  GitBranch,
  CheckCircle2,
  ExternalLink,
  ChevronRight,
  Bot,
  Workflow,
  Server,
  Puzzle,
} from "lucide-react";
import ChatbotWidgetLive from "@/components/ChatbotWidgetLive";
import WorkflowDiagram from "@/components/WorkflowDiagram";
import ArchitectureDiagram from "@/components/ArchitectureDiagram";
import CodeSnippet from "@/components/CodeSnippet";

/* ─── Asset URLs ─── */
const HERO_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/hero-showroom-3kpaMXDd6czasp7Qgkfo5b.webp";
const WORKFLOW_BG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/workflow-bg-fRHbG9vamH9g2W8W8BrAkm.webp";
const CHATBOT_ILLUS = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/chatbot-illustration-BFAPtQzws8tEXvTD9tFm6G.webp";
const INTEGRATION_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/integration-hero-ARBCtGWzCjUdh76eghxiim.webp";
const ARCH_BG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/architecture-bg-k6ZMJihrNCrLkF6CwRB4Jj.webp";

/* ─── Code Snippets ─── */
const EMBED_CODE = `<!-- Add before closing </body> tag -->
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.homelegance.com/chatbot/v2/widget.js';
    s.async = true;
    s.dataset.siteId = 'YOUR_SITE_ID';
    s.dataset.position = 'bottom-right';
    s.dataset.theme = 'forest';
    s.dataset.greeting = 'Welcome to Homelegance!';
    document.body.appendChild(s);
  })();
</script>`;

const CONFIG_CODE = `// chatbot-config.js
export default {
  // Branding
  brandName: "Homelegance",
  primaryColor: "#14532D",
  accentColor: "#C2410C",
  logoUrl: "/assets/logo.svg",

  // Behavior
  autoOpen: false,
  openDelay: 5000,        // ms before showing greeting
  position: "bottom-right",

  // AI Configuration
  model: "gpt-4o-mini",
  temperature: 0.7,
  systemPrompt: \`You are a helpful Homelegance
    furniture assistant. Help dealers find
    products, check orders, and answer FAQs.
    Always be warm and professional.\`,

  // Integrations
  webhookUrl: "https://api.homelegance.com/chatbot/webhook",
  crmIntegration: "salesforce",
  analyticsId: "UA-XXXXXXXX-X",

  // Escalation Rules
  escalation: {
    maxBotTurns: 8,
    sentimentThreshold: -0.3,
    keywords: ["speak to human", "representative"],
    transferMessage: "Connecting you with a team member..."
  }
};`;

const WEBHOOK_CODE = `// server/chatbot-webhook.js
import express from 'express';
const router = express.Router();

router.post('/webhook', async (req, res) => {
  const { event, sessionId, message, metadata } = req.body;

  switch (event) {
    case 'message.received':
      // Process incoming user message
      const intent = await detectIntent(message.text);
      const response = await generateResponse(intent, metadata);
      return res.json({ reply: response });

    case 'escalation.requested':
      // Route to live agent queue
      await notifyAgentTeam(sessionId, metadata);
      return res.json({ status: 'queued' });

    case 'session.ended':
      // Log conversation for analytics
      await saveConversationLog(sessionId);
      return res.json({ status: 'logged' });

    default:
      return res.json({ status: 'ok' });
  }
});

export default router;`;

const API_CODE = `// Example: Product Search API Integration
async function searchProducts(query, filters) {
  const response = await fetch(
    'https://api.homelegance.com/v2/products/search',
    {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        query,
        filters: {
          category: filters.category,
          collection: filters.collection,
          priceRange: filters.priceRange,
          inStock: true
        },
        limit: 5,
        include: ['images', 'pricing', 'availability']
      })
    }
  );
  return response.json();
}`;

/* ─── Section wrapper with scroll animation ─── */
function AnimatedSection({
  children,
  className = "",
  id,
  style,
}: {
  children: React.ReactNode;
  className?: string;
  id?: string;
  style?: React.CSSProperties;
}) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });
  return (
    <motion.section
      ref={ref}
      id={id}
      initial={{ opacity: 0, y: 40 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6, ease: "easeOut" }}
      className={className}
      style={style}
    >
      {children}
    </motion.section>
  );
}

/* ─── Navigation ─── */
function Nav() {
  const links = [
    { label: "Workflow", href: "#workflow" },
    { label: "Architecture", href: "#architecture" },
    { label: "Integration", href: "#integration" },
    { label: "Benefits", href: "#benefits" },
  ];

  const { user, isAuthenticated, loading } = useAuth();

  return (
    <nav
      className="fixed top-0 left-0 right-0 z-40 backdrop-blur-md border-b"
      style={{ background: "rgba(255, 251, 235, 0.88)", borderColor: "#e7e0d5" }}
    >
      <div className="container flex items-center justify-between h-16">
        <div className="flex items-center gap-3">
          <div
            className="w-9 h-9 rounded-lg flex items-center justify-center"
            style={{ background: "#14532D" }}
          >
            <Bot className="w-5 h-5 text-white" />
          </div>
          <div>
            <span
              className="text-sm font-bold tracking-tight"
              style={{ color: "#14532D", fontFamily: "'Playfair Display', serif" }}
            >
              Homelegance
            </span>
            <span
              className="text-xs block -mt-0.5"
              style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}
            >
              Chatbot Integration
            </span>
          </div>
        </div>
        <div className="hidden md:flex items-center gap-1">
          {links.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-black/5"
              style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
            >
              {link.label}
            </a>
          ))}
          <div className="w-px h-5 mx-1" style={{ background: "#e7e0d5" }} />
          {!loading && isAuthenticated ? (
            <div className="flex items-center gap-2">
              <span
                className="text-sm"
                style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
              >
                {user?.name || user?.email}
              </span>
              {(user?.role === "admin" || user?.role === "agent") && (
                <a
                  href={`${import.meta.env.BASE_URL}dashboard`}
                  className="px-3 py-2 rounded-lg text-sm font-semibold transition-colors"
                  style={{
                    background: "#14532D",
                    color: "#fff",
                    fontFamily: "'Source Sans 3', sans-serif",
                    borderRadius: "8px",
                    padding: "6px 16px",
                  }}
                >
                  Dashboard
                </a>
              )}
            </div>
          ) : (
            <a
              href={`${import.meta.env.BASE_URL}login`}
              className="px-3 py-2 rounded-lg text-sm font-semibold transition-colors"
              style={{
                background: "#14532D",
                color: "#fff",
                fontFamily: "'Source Sans 3', sans-serif",
                borderRadius: "8px",
                padding: "6px 16px",
              }}
            >
              Sign In
            </a>
          )}
        </div>
      </div>
    </nav>
  );
}

/* ─── Hero Section ─── */
function HeroSection() {
  return (
    <section className="relative min-h-[92vh] flex items-center pt-16 overflow-hidden">
      {/* Background image */}
      <div className="absolute inset-0">
        <img
          src={HERO_IMG}
          alt="Modern furniture showroom"
          className="w-full h-full object-cover"
        />
        <div
          className="absolute inset-0"
          style={{
            background: "linear-gradient(135deg, rgba(20, 83, 45, 0.82) 0%, rgba(20, 83, 45, 0.65) 40%, rgba(194, 65, 12, 0.3) 100%)",
          }}
        />
      </div>

      <div className="container relative z-10">
        <div className="max-w-2xl">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-8"
            style={{ background: "rgba(255,255,255,0.15)", backdropFilter: "blur(8px)" }}
          >
            <Zap className="w-4 h-4 text-amber-300" />
            <span className="text-sm text-white/90" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
              AI-Powered Customer Experience
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"
            style={{ fontFamily: "'Playfair Display', serif", color: "#fff" }}
          >
            Chatbot Workflow
            <br />
            <span style={{ color: "#fbbf24" }}>& Integration Guide</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            className="text-lg mb-10 max-w-xl leading-relaxed"
            style={{ color: "rgba(255,255,255,0.85)", fontFamily: "'Source Sans 3', sans-serif" }}
          >
            A comprehensive guide to designing, building, and integrating an
            AI-powered chatbot for homelegance.com — from conversation workflows
            to production deployment.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="flex flex-wrap gap-4"
          >
            <a
              href="#workflow"
              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all hover:shadow-lg"
              style={{
                background: "#fff",
                color: "#14532D",
                fontFamily: "'Source Sans 3', sans-serif",
                boxShadow: "0 4px 16px rgba(0,0,0,0.1)",
              }}
            >
              <Workflow className="w-4 h-4" />
              Explore Workflow
            </a>
            <a
              href="#integration"
              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all hover:bg-white/20"
              style={{
                background: "rgba(255,255,255,0.12)",
                color: "#fff",
                border: "1px solid rgba(255,255,255,0.25)",
                fontFamily: "'Source Sans 3', sans-serif",
              }}
            >
              <Code2 className="w-4 h-4" />
              Integration Code
            </a>
          </motion.div>
        </div>
      </div>

      {/* Scroll indicator */}
      <motion.div
        animate={{ y: [0, 8, 0] }}
        transition={{ repeat: Infinity, duration: 2 }}
        className="absolute bottom-8 left-1/2 -translate-x-1/2"
      >
        <ArrowDown className="w-5 h-5 text-white/50" />
      </motion.div>
    </section>
  );
}

/* ─── Stats Bar ─── */
function StatsBar() {
  const stats = [
    { value: "73%", label: "Queries Resolved by Bot", icon: <CheckCircle2 className="w-5 h-5" /> },
    { value: "< 2s", label: "Average Response Time", icon: <Clock className="w-5 h-5" /> },
    { value: "24/7", label: "Availability", icon: <Shield className="w-5 h-5" /> },
    { value: "40%", label: "Support Cost Reduction", icon: <TrendingUp className="w-5 h-5" /> },
  ];

  return (
    <div style={{ background: "#14532D" }}>
      <div className="container py-10">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {stats.map((stat, i) => (
            <motion.div
              key={stat.label}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="text-center"
            >
              <div className="flex justify-center mb-2">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: "rgba(255,255,255,0.12)", color: "#fbbf24" }}>
                  {stat.icon}
                </div>
              </div>
              <div className="text-2xl sm:text-3xl font-bold text-white mb-1" style={{ fontFamily: "'Playfair Display', serif" }}>
                {stat.value}
              </div>
              <div className="text-xs text-green-200/70" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
                {stat.label}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─── Workflow Section ─── */
function WorkflowSection() {
  return (
    <AnimatedSection
      id="workflow"
      className="py-20 lg:py-28 relative"
    >
      <div
        className="absolute inset-0 opacity-30"
        style={{
          backgroundImage: `url(${WORKFLOW_BG})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      />
      <div className="container relative z-10">
        <div className="max-w-2xl mx-auto text-center mb-14">
          <div
            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
            style={{ background: "#14532D12", color: "#14532D" }}
          >
            <GitBranch className="w-4 h-4" />
            <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
              Conversation Flow
            </span>
          </div>
          <h2
            className="text-3xl sm:text-4xl font-bold mb-4"
            style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
          >
            Chatbot Workflow Design
          </h2>
          <p className="text-base leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
            The chatbot follows a structured conversation flow that routes users to the right
            information based on their intent. Click on any node below to see how each branch works.
          </p>
        </div>

        <WorkflowDiagram />
      </div>
    </AnimatedSection>
  );
}

/* ─── Architecture Section ─── */
function ArchitectureSection() {
  return (
    <AnimatedSection
      id="architecture"
      className="py-20 lg:py-28"
      style={{ background: "#f5f0e8" }}
    >
      <div className="container">
        <div className="grid lg:grid-cols-2 gap-12 items-start">
          {/* Left: text */}
          <div>
            <div
              className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
              style={{ background: "#C2410C12", color: "#C2410C" }}
            >
              <Server className="w-4 h-4" />
              <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
                System Architecture
              </span>
            </div>
            <h2
              className="text-3xl sm:text-4xl font-bold mb-4"
              style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
            >
              How It All Connects
            </h2>
            <p className="text-base leading-relaxed mb-8" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
              The chatbot architecture is designed as a layered system. The frontend widget communicates
              through a secure API gateway to the AI processing layer, which connects to Homelegance's
              existing CRM and fulfillment systems.
            </p>

            <div className="space-y-4">
              {[
                {
                  title: "Client Layer",
                  desc: "The chat widget is embedded via a lightweight JavaScript SDK that loads asynchronously. It handles the UI, message rendering, and WebSocket connection for real-time communication.",
                },
                {
                  title: "Middleware",
                  desc: "An API gateway handles authentication, rate limiting, and request routing. Webhooks process events like new messages, escalation requests, and session endings.",
                },
                {
                  title: "AI & Logic",
                  desc: "The NLP engine uses a fine-tuned language model to detect user intent and extract entities (product names, order numbers, locations). The dialog manager maintains conversation state.",
                },
                {
                  title: "Integrations",
                  desc: "The chatbot connects to Homelegance's CRM for order data, the product catalog API for search, and the dealer database for location queries. Live agent handoff uses the existing support queue.",
                },
              ].map((item, i) => (
                <motion.div
                  key={item.title}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  className="p-4 rounded-xl"
                  style={{ background: "#fff", border: "1px solid #e7e0d5" }}
                >
                  <h4 className="text-sm font-bold mb-1" style={{ color: "#14532D", fontFamily: "'Source Sans 3', sans-serif" }}>
                    {item.title}
                  </h4>
                  <p className="text-sm leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
                    {item.desc}
                  </p>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Right: diagram */}
          <div className="lg:sticky lg:top-24">
            <div className="p-6 rounded-2xl" style={{ background: "#FFFBEB", border: "1px solid #e7e0d5" }}>
              <ArchitectureDiagram />
            </div>
          </div>
        </div>
      </div>
    </AnimatedSection>
  );
}

/* ─── Integration Guide Section ─── */
function IntegrationSection() {
  const steps = [
    {
      step: "01",
      title: "Embed the Widget",
      description: "Add a single script tag to your website's HTML. The widget loads asynchronously and won't affect page performance. Configure it with your site ID and preferred settings.",
      code: EMBED_CODE,
      language: "html",
      filename: "index.html",
    },
    {
      step: "02",
      title: "Configure Behavior",
      description: "Customize the chatbot's appearance, AI model, escalation rules, and integration endpoints through a configuration file. This controls everything from colors to conversation flow.",
      code: CONFIG_CODE,
      language: "javascript",
      filename: "chatbot-config.js",
    },
    {
      step: "03",
      title: "Set Up Webhooks",
      description: "Create server-side webhook handlers to process chatbot events. This is where you connect to your CRM, order management system, and live agent queue.",
      code: WEBHOOK_CODE,
      language: "javascript",
      filename: "server/chatbot-webhook.js",
    },
    {
      step: "04",
      title: "Connect Product APIs",
      description: "Integrate the chatbot with Homelegance's product catalog API to enable real-time product search, availability checking, and personalized recommendations within conversations.",
      code: API_CODE,
      language: "javascript",
      filename: "api/product-search.js",
    },
  ];

  return (
    <AnimatedSection id="integration" className="py-20 lg:py-28">
      <div className="container">
        <div className="max-w-2xl mx-auto text-center mb-14">
          <div
            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
            style={{ background: "#14532D12", color: "#14532D" }}
          >
            <Code2 className="w-4 h-4" />
            <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
              Step-by-Step Guide
            </span>
          </div>
          <h2
            className="text-3xl sm:text-4xl font-bold mb-4"
            style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
          >
            Integration Guide
          </h2>
          <p className="text-base leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
            Follow these four steps to integrate the chatbot into homelegance.com.
            Each step includes production-ready code that you can customize to your needs.
          </p>
        </div>

        {/* Steps */}
        <div className="max-w-4xl mx-auto space-y-16">
          {steps.map((step, i) => (
            <motion.div
              key={step.step}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
              className="relative"
            >
              {/* Step number + connector */}
              <div className="flex items-start gap-6">
                <div className="shrink-0 hidden sm:flex flex-col items-center">
                  <div
                    className="w-14 h-14 rounded-2xl flex items-center justify-center text-lg font-bold"
                    style={{
                      background: "#14532D",
                      color: "#fff",
                      fontFamily: "'Playfair Display', serif",
                      boxShadow: "0 4px 16px rgba(20, 83, 45, 0.25)",
                    }}
                  >
                    {step.step}
                  </div>
                  {i < steps.length - 1 && (
                    <div className="w-0.5 h-16 mt-3" style={{ background: "#e7e0d5" }} />
                  )}
                </div>

                <div className="flex-1">
                  <h3
                    className="text-xl sm:text-2xl font-bold mb-3"
                    style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
                  >
                    <span className="sm:hidden mr-2" style={{ color: "#C2410C" }}>{step.step}.</span>
                    {step.title}
                  </h3>
                  <p className="text-sm leading-relaxed mb-5" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
                    {step.description}
                  </p>
                  <CodeSnippet
                    code={step.code}
                    language={step.language}
                    filename={step.filename}
                  />
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

/* ─── Benefits Section ─── */
function BenefitsSection() {
  const benefits = [
    {
      icon: <Clock className="w-6 h-6" />,
      title: "24/7 Availability",
      description: "The chatbot never sleeps. Dealers and retailers across time zones can get instant answers to product questions, check order status, and find information at any hour.",
    },
    {
      icon: <TrendingUp className="w-6 h-6" />,
      title: "Increased Engagement",
      description: "Interactive conversation drives deeper product exploration. Dealers discover collections they might have missed, leading to larger and more diverse orders.",
    },
    {
      icon: <Zap className="w-6 h-6" />,
      title: "Faster Resolution",
      description: "Common queries like order status, dealer location, and product specs are answered instantly. This frees up sales reps to focus on complex, high-value conversations.",
    },
    {
      icon: <Shield className="w-6 h-6" />,
      title: "Consistent Experience",
      description: "Every interaction follows the same quality standards. The chatbot delivers accurate product information, current pricing, and up-to-date availability data every time.",
    },
    {
      icon: <Layers className="w-6 h-6" />,
      title: "Scalable Support",
      description: "Handle hundreds of simultaneous conversations without adding headcount. The chatbot scales with your business during peak seasons like market weeks and promotions.",
    },
    {
      icon: <Puzzle className="w-6 h-6" />,
      title: "Seamless Integration",
      description: "Connects with existing CRM, ERP, and order management systems. No need to replace current tools — the chatbot enhances what you already have.",
    },
  ];

  return (
    <AnimatedSection
      id="benefits"
      className="py-20 lg:py-28"
    >
      <div
        className="absolute inset-0 opacity-5"
        style={{
          backgroundImage: `url(${ARCH_BG})`,
          backgroundSize: "cover",
        }}
      />
      <div className="container relative z-10">
        <div className="max-w-2xl mx-auto text-center mb-14">
          <div
            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
            style={{ background: "#C2410C12", color: "#C2410C" }}
          >
            <Zap className="w-4 h-4" />
            <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
              Why a Chatbot
            </span>
          </div>
          <h2
            className="text-3xl sm:text-4xl font-bold mb-4"
            style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
          >
            Business Benefits
          </h2>
          <p className="text-base leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
            An AI chatbot transforms how Homelegance connects with its dealer network,
            delivering measurable improvements across customer experience and operational efficiency.
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {benefits.map((benefit, i) => (
            <motion.div
              key={benefit.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.08 }}
              whileHover={{ y: -4, boxShadow: "0 12px 32px rgba(120, 113, 108, 0.12)" }}
              className="p-6 rounded-xl transition-all"
              style={{
                background: "#fff",
                border: "1px solid #e7e0d5",
                boxShadow: "0 2px 8px rgba(120, 113, 108, 0.06)",
              }}
            >
              <div
                className="w-12 h-12 rounded-xl flex items-center justify-center mb-4"
                style={{ background: "#14532D12", color: "#14532D" }}
              >
                {benefit.icon}
              </div>
              <h3
                className="text-lg font-bold mb-2"
                style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
              >
                {benefit.title}
              </h3>
              <p className="text-sm leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
                {benefit.description}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

/* ─── CTA Section ─── */
function CTASection() {
  return (
    <section className="relative py-20 overflow-hidden">
      <div className="absolute inset-0">
        <img
          src={INTEGRATION_IMG}
          alt="Developer workspace"
          className="w-full h-full object-cover"
        />
        <div
          className="absolute inset-0"
          style={{
            background: "linear-gradient(135deg, rgba(20, 83, 45, 0.88) 0%, rgba(20, 83, 45, 0.75) 100%)",
          }}
        />
      </div>
      <div className="container relative z-10 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
        >
          <h2
            className="text-3xl sm:text-4xl font-bold mb-4 text-white"
            style={{ fontFamily: "'Playfair Display', serif" }}
          >
            Ready to Get Started?
          </h2>
          <p
            className="text-base mb-8 max-w-lg mx-auto"
            style={{ color: "rgba(255,255,255,0.8)", fontFamily: "'Source Sans 3', sans-serif" }}
          >
            Try the live chatbot demo by clicking the green chat icon in the bottom-right corner.
            Experience the conversation flow firsthand.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <a
              href="#workflow"
              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all"
              style={{
                background: "#fff",
                color: "#14532D",
                fontFamily: "'Source Sans 3', sans-serif",
                boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
              }}
            >
              Review Workflow
              <ChevronRight className="w-4 h-4" />
            </a>
            <a
              href="#integration"
              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all"
              style={{
                background: "rgba(255,255,255,0.12)",
                color: "#fff",
                border: "1px solid rgba(255,255,255,0.25)",
                fontFamily: "'Source Sans 3', sans-serif",
              }}
            >
              View Integration Code
              <ExternalLink className="w-4 h-4" />
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

/* ─── Footer ─── */
function Footer() {
  return (
    <footer className="py-8 border-t" style={{ borderColor: "#e7e0d5", background: "#FFFBEB" }}>
      <div className="container">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-md flex items-center justify-center" style={{ background: "#14532D" }}>
              <Bot className="w-4 h-4 text-white" />
            </div>
            <span className="text-sm font-semibold" style={{ color: "#14532D", fontFamily: "'Playfair Display', serif" }}>
              Homelegance Chatbot Demo
            </span>
          </div>
          <p className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>
            Chatbot integration concept for homelegance.com
          </p>
        </div>
      </div>
    </footer>
  );
}

/* ─── Main Page ─── */
export default function Home() {
  return (
    <div className="min-h-screen" style={{ background: "#FFFBEB" }}>
      <Nav />
      <HeroSection />
      <StatsBar />
      <WorkflowSection />
      <ArchitectureSection />
      <IntegrationSection />
      <BenefitsSection />
      <CTASection />
      <Footer />
      <ChatbotWidgetLive />
    </div>
  );
}