import React from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { HeroBanner } from "../components/HeroBanner";
import { ProcessSection } from "../components/ProcessSection";
import { WhyChooseWDI } from "../components/WhyChooseWDI";
import { FAQSection } from "../components/FAQSection";
import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
  Smartphone,
  Truck,
  MapPin,
  CreditCard,
  Star,
  Bell,
  BarChart3,
  Target,
  CheckCircle,
  Users,
  Clock,
  Zap,
  Globe,
  Award,
} from "lucide-react";
import { Helmet } from "react-helmet-async";

// Problem Solution Block Component
const ProblemSolutionBlock = () => {
  return (
    <section className="py-20 bg-[#0E0E0E]">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Food Ordering & Delivery App Solutions | WDI</title>
        <meta
          name="description"
          content="WDI develops custom Food Ordering & Delivery apps with real-time tracking, secure payments, and seamless user experience to grow your food business online."
        />

        {/* Canonical Link */}
        <link rel="canonical" href="https://www.wdipl.com/industries/commerce/food-ordering-delivery" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Food Ordering & Delivery App Solutions | WDI" />
        <meta
          property="og:description"
          content="WDI develops custom Food Ordering & Delivery apps with real-time tracking, secure payments, and seamless user experience to grow your food business online."
        />
        <meta property="og:url" content="https://www.wdipl.com/services" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Twitter Card Tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Food Ordering & Delivery App Solutions | WDI" />
        <meta
          name="twitter:description"
          content="WDI develops custom Food Ordering & Delivery apps with real-time tracking, secure payments, and seamless user experience to grow your food business online."
        />
        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Social Profiles (using JSON-LD Schema) */}
        <script type="application/ld+json">
          {`
                              {
                                "@context": "https://schema.org",
                                "@type": "Organization",
                                "name": "WDI",
                                "url": "https://www.wdipl.com",
                                "sameAs": [
                                  "https://www.facebook.com/wdideas",
                                  "https://www.linkedin.com/in/website-developers-india/",
                                  "https://www.instagram.com/wdipl/"
                                ]
                              }
                            `}
        </script>
      </Helmet>
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="max-w-6xl mx-auto"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
            <span className="text-white">
              Addressing the Core Challenges of{" "}
            </span>
            <span className="text-[#E5195E]">Food Ordering & Delivery</span>
          </h2>

          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              viewport={{ once: true }}
              className="space-y-6"
            >
              <div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-8">
                <h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
                  <div className="w-8 h-8 bg-red-500/20 rounded-lg flex items-center justify-center">
                    <Target className="w-4 h-4 text-red-400" />
                  </div>
                  The Challenge
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  The food ordering and delivery landscape is highly competitive
                  and demands real-time order management, efficient logistics,
                  and intuitive user experiences for both customers and
                  restaurants. Businesses face hurdles with scalability during
                  peak hours, managing diverse menus, and integrating with
                  payment and delivery systems.
                </p>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
              className="space-y-6"
            >
              <div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8">
                <h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
                  <div className="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-400" />
                  </div>
                  Our Food Ordering & Delivery Solution
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  WDI specializes in building end-to-end food ordering and
                  delivery platforms. We create solutions that encompass
                  customer-facing apps, restaurant management systems, and
                  driver logistics tools, all designed for seamless order flow,
                  real-time tracking, and optimal operational efficiency.
                </p>
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Features Grid Component
const IconWithDescriptionGrid = () => {
  const features = [
    {
      icon: Smartphone,
      title: "Customer Ordering Apps (Web & Mobile)",
      description:
        "Intuitive menu browsing, customizable orders, secure payment options, and real-time order tracking.",
    },
    {
      icon: BarChart3,
      title: "Restaurant Management Dashboards",
      description:
        "Tools for menu updates, order acceptance/rejection, kitchen display systems (KDS), and performance analytics.",
    },
    {
      icon: Truck,
      title: "Driver/Delivery Partner Apps",
      description:
        "Route optimization, real-time pick-up/delivery notifications, earning tracking, and customer communication features.",
    },
    {
      icon: MapPin,
      title: "Real-time GPS Tracking",
      description:
        "Live tracking of orders from preparation to delivery, enhancing customer satisfaction and transparency.",
    },
    {
      icon: CreditCard,
      title: "Secure Payment Integrations",
      description:
        "Support for various payment methods including credit cards, digital wallets, and loyalty points.",
    },
    {
      icon: Star,
      title: "Personalized Recommendations",
      description:
        "AI-driven suggestions for dishes, restaurants, and promotions based on user preferences and order history.",
    },
    {
      icon: Bell,
      title: "Loyalty Programs & Promotions",
      description:
        "Built-in features for discounts, coupon codes, and loyalty points to drive repeat business.",
    },
  ];

  return (
    <section className="py-20 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            Powerful Features for Your Food Ordering & Delivery Platforms
          </h2>
          <p className="text-lg text-gray-400 max-w-3xl mx-auto">
            Comprehensive tools to create seamless food delivery experiences
            that satisfy customers and optimize operations.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => {
            const IconComponent = feature.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                className="group"
              >
                <Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
                  <CardContent className="p-8">
                    <div className="w-12 h-12 bg-[#E5195E]/20 rounded-lg flex items-center justify-center mb-6">
                      <IconComponent className="w-6 h-6 text-[#E5195E]" />
                    </div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      {feature.title}
                    </h3>
                    <p className="text-gray-400 leading-relaxed">
                      {feature.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Three Column Feature Block Component
const ThreeColumnFeatureBlock = () => {
  const advantages = [
    {
      icon: Users,
      title: "End-to-End Ecosystem Expertise",
      description:
        "Developing seamless solutions for customers, restaurants, and delivery fleets from a single partner.",
    },
    {
      icon: Zap,
      title: "Scalability for Peak Demand",
      description:
        "Building platforms designed to handle massive order volumes during lunch rushes or dinner times without issues.",
    },
    {
      icon: MapPin,
      title: "Real-time Location Intelligence",
      description:
        "Expert integration of mapping, GPS, and routing algorithms for efficient delivery.",
    },
    {
      icon: Smartphone,
      title: "Intuitive UX for All Users",
      description:
        "Creating user-friendly interfaces for diverse user groups, from busy restaurant staff to hungry customers.",
    },
  ];

  return (
    <section className="py-20 bg-[#0E0E0E]">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            Why Partner with WDI for Food Ordering & Delivery Development?
          </h2>
          <p className="text-lg text-gray-400 max-w-3xl mx-auto">
            Leverage our expertise to create food delivery platforms that truly
            satisfy all stakeholders.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {advantages.map((advantage, index) => {
            const IconComponent = advantage.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                className="text-center"
              >
                <div className="w-16 h-16 bg-[#E5195E]/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <IconComponent className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-semibold text-white mb-4">
                  {advantage.title}
                </h3>
                <p className="text-gray-400 leading-relaxed">
                  {advantage.description}
                </p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Case Study Component
const CaseStudyHighlightGrid = () => {
  const caseStudies = [
    {
      title: "Hyperlocal Multi-Restaurant Delivery Platform",
      problem:
        "A startup aimed to launch a fast, reliable hyperlocal food delivery service connecting multiple restaurants with customers.",
      solution:
        "WDI built a comprehensive platform comprising customer, restaurant, and driver apps with real-time tracking, dynamic pricing, and diverse payment options.",
      results:
        "Facilitated over 5,000 orders per day within the first year of operation, achieving a 98% on-time delivery rate.",
      metrics: ["5K+ Orders/Day", "98% On-Time", "Multi-Restaurant"],
    },
    {
      title: "Restaurant Chain's Custom Online Ordering System",
      problem:
        "A large restaurant chain needed to reduce reliance on third-party aggregators and build its own branded online ordering system.",
      solution:
        "Developed a custom web and mobile ordering system integrated directly with their kitchen display systems and loyalty program.",
      results:
        "Increased direct online orders by 40% and reduced commission fees by 20%, boosting profitability.",
      metrics: ["40% ↑ Orders", "20% ↓ Fees", "Direct Sales"],
    },
  ];

  return (
    <section className="py-20 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            Food Ordering & Delivery Success Stories
          </h2>
          <p className="text-lg text-gray-400 max-w-3xl mx-auto">
            Real results from our food delivery platform implementations that
            transformed businesses.
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-8">
          {caseStudies.map((study, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.2 }}
              viewport={{ once: true }}
            >
              <Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
                <CardContent className="p-8">
                  <div className="flex gap-2 mb-4">
                    {study.metrics.map((metric, i) => (
                      <Badge
                        key={i}
                        variant="secondary"
                        className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
                      >
                        {metric}
                      </Badge>
                    ))}
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    {study.title}
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-medium text-gray-300 mb-2">
                        Problem:
                      </h4>
                      <p className="text-gray-400 text-sm">{study.problem}</p>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-300 mb-2">
                        Solution:
                      </h4>
                      <p className="text-gray-400 text-sm">{study.solution}</p>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-300 mb-2">
                        Results:
                      </h4>
                      <p className="text-gray-400 text-sm">{study.results}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

// FAQ Data
const foodDeliveryFAQs = [
  {
    question:
      "How do you ensure real-time order tracking and delivery updates?",
    answer:
      "We implement GPS-based tracking systems with real-time updates sent via push notifications and SMS. Our platforms integrate with mapping services to provide accurate delivery estimates and live location sharing between customers, restaurants, and delivery partners.",
  },
  {
    question:
      "What are your strategies for scalability during peak hours (e.g., lunch, dinner)?",
    answer:
      "We design cloud-native architectures with auto-scaling capabilities, implement load balancing, use CDNs for faster content delivery, and optimize database queries. Our systems can handle 10x traffic spikes without performance degradation.",
  },
  {
    question:
      "Can you integrate with existing POS (Point of Sale) systems and kitchen displays?",
    answer:
      "Yes, we have extensive experience integrating with major POS systems like Square, Toast, Clover, and custom solutions. We also support kitchen display system (KDS) integrations for seamless order management workflows.",
  },
  {
    question:
      "What payment gateway integrations do you offer for food ordering apps?",
    answer:
      "We integrate with all major payment gateways including Stripe, PayPal, Razorpay, Square, and local payment providers. We also support digital wallets, loyalty points, and split payment options for enhanced user convenience.",
  },
  {
    question:
      "Do you develop solutions for multi-restaurant aggregators or single-restaurant chains?",
    answer:
      "We develop both! Our flexible platform architecture supports single-restaurant branded apps with custom features, as well as multi-vendor marketplace platforms with vendor management, commission tracking, and order routing capabilities.",
  },
];

export const FoodOrderingDelivery = () => {
  return (
    <div className="min-h-screen bg-[#0E0E0E]">
      {/* <Navigation /> */}

      <HeroBanner
        category="Commerce & Consumer"
        title="Food Ordering & Delivery"
        description="Launch or optimize your food business with seamless, intuitive, and efficient online ordering and delivery platforms for restaurants, aggregators, and dark kitchens."
        primaryCTA={{
          text: "Get a Free Consultation",
          // href: "/contact/schedule-a-discovery-call"
          href: "/start-a-project",
        }}
        secondaryCTA={{
          text: "View FoodTech Case Studies",
          href: "/case-studies",
        }}
      />

      <ProblemSolutionBlock />

      <IconWithDescriptionGrid />

      <ThreeColumnFeatureBlock />

      <div className="bg-[#0E0E0E]">
        <ProcessSection />
      </div>

      <CaseStudyHighlightGrid />

      <div className="bg-[#0E0E0E]">
        <FAQSection
          title="Food Ordering & Delivery FAQs"
          subtitle="Get answers to common questions about our food delivery platform development services."
          faqs={foodDeliveryFAQs}
        />
      </div>

      <div className="bg-black">
        <SplitCallToAction />
      </div>

      {/* <Footer /> */}
    </div>
  );
};