import React, { useState, useEffect } from 'react';
import { CheckCircle, ArrowRight, Clock, MessageCircle, Zap, Phone, Calendar, ShoppingCart, Star, ChevronRight } from 'lucide-react';

export default function WhatzSuiteCustom() {
  const [selectedUseCase, setSelectedUseCase] = useState(null);
  const [activeDemo, setActiveDemo] = useState(null);

  const useCases = [
    {
      id: 'missed-call',
      name: 'Missed-call rescue',
      tagline: 'Turns missed calls into booked jobs',
      steps: ['Auto-reply in local language', 'Capture job type and area', 'Send calendar link and UPI'],
      industry: 'Services',
      icon: Phone
    },
    {
      id: 'restaurant',
      name: 'Restaurant orders',
      tagline: 'Takes orders and table bookings in chat',
      steps: ['Menu and add-ons', 'Slot booking', 'UPI pay link'],
      industry: 'Restaurants',
      icon: ShoppingCart
    },
    {
      id: 'clinic',
      name: 'Clinic appointments',
      tagline: 'Fills calendar and reduces no-shows',
      steps: ['Booking', 'Reminders', 'Payment link', 'Follow-up'],
      industry: 'Healthcare',
      icon: Calendar
    },
    {
      id: 'cart-recovery',
      name: 'D2C cart recovery',
      tagline: 'Brings back drop-offs and confirms COD',
      steps: ['Abandoned cart nudge', '1-tap COD confirm', 'Segmented broadcasts'],
      industry: 'D2C',
      icon: ShoppingCart
    },
    {
      id: 'reviews',
      name: 'Reviews and referrals',
      tagline: 'Captures ratings and referrals post service',
      steps: ['Smart timing', 'Google review link', 'Referral coupon'],
      industry: 'All',
      icon: Star
    }
  ];

  const packages = [
    {
      name: 'Starter Custom Automation',
      bestFor: 'A single high-impact use-case',
      inclusions: ['1 number', '1 automation', '2 languages', 'Basic analytics', 'Template approvals', 'Training']
    },
    {
      name: 'Growth Custom Suite',
      bestFor: 'Multi-step operations',
      inclusions: ['2–3 automations', 'Catalogs or calendar', 'UPI', 'Dashboards', 'Light CRM integration']
    },
    {
      name: 'Pro Integration Build',
      bestFor: 'Multi-location and data-heavy',
      inclusions: ['3–5 automations', 'Deep CRM or ERP integration', 'SLAs', 'Multi-location', 'Advanced analytics']
    }
  ];

  const logos = ['LFB Group', 'Oldcastle', 'Heatcraft', 'SEENs', 'Patrick HVAC', 'Everything Ahead', 'TetraPak', 'JCB', 'Lennox'];

  const DemoModal = ({ useCase, onClose }) => {
    if (!useCase) return null;
    
    return (
      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4" onClick={onClose}>
        <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl" onClick={e => e.stopPropagation()}>
          <div className="p-6 border-b border-gray-200">
            <div className="flex items-start justify-between">
              <div>
                <h3 className="text-2xl font-bold text-gray-900 mb-2">{useCase.name}</h3>
                <p className="text-gray-600">{useCase.tagline}</p>
              </div>
              <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl leading-none">×</button>
            </div>
          </div>
          
          <div className="p-6">
            <div className="bg-gray-50 rounded-xl p-6 mb-6">
              <h4 className="font-semibold text-gray-900 mb-4">How it works</h4>
              <div className="space-y-3">
                {useCase.steps.map((step, i) => (
                  <div key={i} className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-sm font-semibold flex-shrink-0">
                      {i + 1}
                    </div>
                    <span className="text-gray-700">{step}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-6 border border-emerald-100 mb-6">
              <h4 className="font-semibold text-gray-900 mb-3">Chat preview</h4>
              <div className="space-y-3">
                <div className="bg-white rounded-lg p-3 shadow-sm">
                  <div className="text-xs text-gray-500 mb-1">WhatzSuite Bot</div>
                  <div className="text-sm text-gray-700">Hi! I see you called. How can I help you today?</div>
                </div>
                <div className="flex gap-2 justify-end">
                  <button className="bg-emerald-100 text-emerald-700 px-4 py-2 rounded-lg text-sm font-medium">
                    Book service
                  </button>
                  <button className="bg-emerald-100 text-emerald-700 px-4 py-2 rounded-lg text-sm font-medium">
                    Get quote
                  </button>
                </div>
              </div>
            </div>

            <div className="flex gap-3">
              <button className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-lg font-semibold transition-all">
                Book strategy session
              </button>
              <button className="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-3 rounded-lg font-semibold transition-all">
                Download spec
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-white">
      {activeDemo && <DemoModal useCase={activeDemo} onClose={() => setActiveDemo(null)} />}

      {/* Hero */}
      <header className="bg-gradient-to-br from-emerald-50 to-teal-50 border-b border-emerald-100">
        <div className="max-w-6xl mx-auto px-4 py-16 sm:py-24">
          <div className="text-center max-w-4xl mx-auto">
            <h1 className="text-4xl sm:text-6xl font-bold text-gray-900 mb-6 leading-tight">
              Custom WhatsApp automations that book, sell, and support
            </h1>
            <p className="text-xl text-gray-700 mb-8 max-w-3xl mx-auto">
              We design, build, and deploy WhatsApp playbooks for your exact process. Auto reply in local language, qualify fast, book or take orders, and collect UPI in chat.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
              <button className="bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-4 rounded-full font-semibold text-lg flex items-center justify-center gap-2 shadow-lg hover:shadow-xl transition-all">
                Book a strategy session <ArrowRight size={20} />
              </button>
              <button className="bg-white hover:bg-gray-50 text-emerald-600 px-8 py-4 rounded-full font-semibold text-lg border-2 border-emerald-600 transition-all">
                See automation samples
              </button>
            </div>

            <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-gray-600 mb-6">
              <span className="flex items-center gap-1">
                <Clock size={16} className="text-emerald-600" /> First response under 5 minutes
              </span>
              <span className="flex items-center gap-1">
                <MessageCircle size={16} className="text-emerald-600" /> 50+ languages and voice
              </span>
              <span className="flex items-center gap-1">
                <CheckCircle size={16} className="text-emerald-600" /> UPI in chat
              </span>
            </div>

            <div className="bg-white/60 backdrop-blur-sm rounded-xl px-6 py-3 inline-block border border-emerald-100">
              <p className="text-sm text-gray-700">
                <strong className="text-gray-900">Your customers are already on WhatsApp.</strong> Meet them there.
              </p>
            </div>
          </div>
        </div>
      </header>

      {/* Trust Strip */}
      <div className="border-b border-gray-100 bg-white">
        <div className="max-w-6xl mx-auto px-4 py-8">
          <div className="flex flex-wrap justify-center items-center gap-6 opacity-60">
            {logos.map((logo, i) => (
              <div key={i} className="text-gray-600 font-semibold text-sm">{logo}</div>
            ))}
          </div>
        </div>
      </div>

      {/* Who this is for */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-6xl mx-auto px-4">
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-4">
            Built for your industry
          </h2>
          <p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
            Choose a use-case to see a working recipe
          </p>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
            {['Services', 'Restaurants', 'Healthcare', 'D2C & Marketplaces', 'Events', 'Education'].map((industry, i) => (
              <div key={i} className="bg-white rounded-xl p-4 text-center border border-gray-100 hover:border-emerald-200 hover:shadow-md transition-all cursor-pointer">
                <div className="font-semibold text-gray-900">{industry}</div>
                <div className="text-xs text-gray-500 mt-1">HVAC, plumbing, repair, home services</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Use-case recipes */}
      <section className="py-16 bg-white">
        <div className="max-w-6xl mx-auto px-4">
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-12">
            Ready-to-deploy automations
          </h2>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {useCases.map((useCase) => {
              const Icon = useCase.icon;
              return (
                <div key={useCase.id} className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-6 border border-emerald-100 hover:shadow-lg transition-all">
                  <div className="flex items-start justify-between mb-4">
                    <Icon className="text-emerald-600" size={24} />
                    <span className="text-xs bg-white px-2 py-1 rounded-full text-emerald-700 font-medium">
                      {useCase.industry}
                    </span>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{useCase.name}</h3>
                  <p className="text-gray-600 text-sm mb-4">{useCase.tagline}</p>
                  <div className="space-y-2 mb-4">
                    {useCase.steps.slice(0, 3).map((step, i) => (
                      <div key={i} className="flex items-start gap-2">
                        <ChevronRight size={16} className="text-emerald-600 mt-0.5 flex-shrink-0" />
                        <span className="text-sm text-gray-700">{step}</span>
                      </div>
                    ))}
                  </div>
                  <button 
                    onClick={() => setActiveDemo(useCase)}
                    className="w-full bg-white hover:bg-gray-50 text-emerald-600 py-2 rounded-lg font-semibold text-sm border border-emerald-200 transition-all"
                  >
                    View sample
                  </button>
                </div>
              );
            })}

            <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 text-white">
              <Zap className="text-emerald-400 mb-4" size={24} />
              <h3 className="text-xl font-bold mb-2">Custom playbook</h3>
              <p className="text-gray-300 text-sm mb-4">
                Solves your specific case end-to-end
              </p>
              <div className="space-y-2 mb-4 text-sm text-gray-300">
                <div>• Discovery</div>
                <div>• Design</div>
                <div>• Build</div>
                <div>• Integrate</div>
                <div>• Train</div>
              </div>
              <button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-2 rounded-lg font-semibold text-sm transition-all">
                Book a strategy session
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Why custom */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-5xl mx-auto px-4">
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-12">
            Why custom with WhatzSuite
          </h2>
          
          <div className="bg-white rounded-xl shadow-sm overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-emerald-50">
                  <tr>
                    <th className="text-left p-4 font-semibold text-gray-900 min-w-[150px]">Criteria</th>
                    <th className="text-left p-4 font-semibold text-emerald-700 min-w-[200px]">Custom with WhatzSuite</th>
                    <th className="text-left p-4 font-semibold text-gray-600 min-w-[200px]">Typical DIY tool</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  <tr>
                    <td className="p-4 text-gray-700 font-medium">Fit to process</td>
                    <td className="p-4 text-emerald-700">Built to your rules and teams</td>
                    <td className="p-4 text-gray-500">You adapt to the tool</td>
                  </tr>
                  <tr>
                    <td className="p-4 text-gray-700 font-medium">Language and voice</td>
                    <td className="p-4 text-emerald-700">50+ languages and voice included</td>
                    <td className="p-4 text-gray-500">Limited or add-on</td>
                  </tr>
                  <tr>
                    <td className="p-4 text-gray-700 font-medium">Payments</td>
                    <td className="p-4 text-emerald-700">UPI and links inside chat</td>
                    <td className="p-4 text-gray-500">External steps</td>
                  </tr>
                  <tr>
                    <td className="p-4 text-gray-700 font-medium">Speed to go live</td>
                    <td className="p-4 text-emerald-700">Weeks with clear milestones</td>
                    <td className="p-4 text-gray-500">Weeks of trial and error</td>
                  </tr>
                  <tr>
                    <td className="p-4 text-gray-700 font-medium">Integration</td>
                    <td className="p-4 text-emerald-700">CRM and store connectors scoped in</td>
                    <td className="p-4 text-gray-500">DIY or extra vendor</td>
                  </tr>
                  <tr>
                    <td className="p-4 text-gray-700 font-medium">Handoff</td>
                    <td className="p-4 text-emerald-700">Training and documentation provided</td>
                    <td className="p-4 text-gray-500">Minimal guidance</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div className="text-center mt-8">
            <button className="bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-3 rounded-full font-semibold inline-flex items-center gap-2 shadow-md hover:shadow-lg transition-all">
              Book a strategy session <ArrowRight size={18} />
            </button>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="py-16 bg-white">
        <div className="max-w-4xl mx-auto px-4">
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-12">
            How it works
          </h2>
          
          <div className="space-y-6">
            {[
              { step: '1', title: 'Discovery', desc: 'We map your process, systems, languages, and KPI targets.' },
              { step: '2', title: 'Design', desc: 'Low-fidelity flow maps and message templates. You sign off.' },
              { step: '3', title: 'Build and QA', desc: 'Automations, templates, and approvals on WhatsApp Cloud API.' },
              { step: '4', title: 'Integrate', desc: 'CRM or store connections. Data mapping and events.' },
              { step: '5', title: 'Deploy', desc: 'Go live with guardrails, rate limits, and fallbacks.' },
              { step: '6', title: 'Train and Support', desc: 'Editor training, playbook docs, and a 30-day optimization pass.' }
            ].map((item, i) => (
              <div key={i} className="flex gap-4 items-start">
                <div className="w-12 h-12 bg-emerald-600 text-white rounded-full flex items-center justify-center font-bold text-xl flex-shrink-0">
                  {item.step}
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{item.title}</h3>
                  <p className="text-gray-600">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12">
            <button className="bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-3 rounded-full font-semibold inline-flex items-center gap-2 shadow-md hover:shadow-lg transition-all">
              Book a strategy session <ArrowRight size={18} />
            </button>
          </div>
        </div>
      </section>

      {/* Packages */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-6xl mx-auto px-4">
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-12">
            Packages and inclusions
          </h2>
          
          <div className="grid md:grid-cols-3 gap-6 mb-8">
            {packages.map((pkg, i) => (
              <div key={i} className="bg-white rounded-xl p-6 shadow-sm hover:shadow-lg transition-all border border-gray-100">
                <h3 className="text-xl font-bold text-gray-900 mb-2">{pkg.name}</h3>
                <p className="text-emerald-600 text-sm font-medium mb-4">{pkg.bestFor}</p>
                <ul className="space-y-2 mb-6">
                  {pkg.inclusions.map((item, j) => (
                    <li key={j} className="flex items-start gap-2 text-sm text-gray-700">
                      <CheckCircle size={16} className="text-emerald-600 mt-0.5 flex-shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
                <button className="w-full bg-emerald-50 hover:bg-emerald-100 text-emerald-700 py-2 rounded-lg font-semibold text-sm transition-all">
                  Learn more
                </button>
              </div>
            ))}
          </div>

          <div className="text-center">
            <p className="text-gray-600 mb-4">
              <strong>Add-ons:</strong> Broadcasts • Advanced analytics • Extra languages • Additional numbers • Priority support
            </p>
            <button className="text-emerald-600 font-semibold hover:text-emerald-700 inline-flex items-center gap-1">
              See full inclusions <ArrowRight size={16} />
            </button>
          </div>
        </div>
      </section>

      {/* Results */}
      <section className="py-16 bg-white">
        <div className="max-w-6xl mx-auto px-4">
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-12">
            Results that matter
          </h2>
          
          <div className="grid md:grid-cols-4 gap-6 mb-12">
            {[
              { metric: 'Qualified leads up 40%', icon: '📈' },
              { metric: 'Friday releases stayed Friday', icon: '✅' },
              { metric: 'Support tickets down in week one', icon: '📉' },
              { metric: 'Trial to paid at or above 20%', icon: '💰' }
            ].map((stat, i) => (
              <div key={i} className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-6 text-center border border-emerald-100">
                <div className="text-3xl mb-3">{stat.icon}</div>
                <div className="font-semibold text-gray-900">{stat.metric}</div>
              </div>
            ))}
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-gray-50 rounded-xl p-6">
              <div className="flex gap-1 mb-3">
                {[1,2,3,4,5].map(i => <Star key={i} size={16} fill="#10b981" className="text-emerald-600" />)}
              </div>
              <p className="text-gray-700 mb-3 italic">
                "We turned missed calls into booked jobs the same week."
              </p>
              <p className="text-sm font-semibold text-gray-900">Operations Lead</p>
              <p className="text-sm text-gray-500">Regional HVAC Services</p>
            </div>
            <div className="bg-gray-50 rounded-xl p-6">
              <div className="flex gap-1 mb-3">
                {[1,2,3,4,5].map(i => <Star key={i} size={16} fill="#10b981" className="text-emerald-600" />)}
              </div>
              <p className="text-gray-700 mb-3 italic">
                "Pages got faster and leads got better. The numbers back it up."
              </p>
              <p className="text-sm font-semibold text-gray-900">Growth Manager</p>
              <p className="text-sm text-gray-500">D2C Brand</p>
            </div>
          </div>

          <div className="text-center mt-8">
            <button className="text-emerald-600 font-semibold hover:text-emerald-700 inline-flex items-center gap-1">
              See case highlights <ArrowRight size={16} />
            </button>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-3xl mx-auto px-4">
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-gray-900 mb-12">
            Common questions
          </h2>
          
          <div className="space-y-4">
            {[
              { q: 'Does this work with our existing number?', a: 'Yes' },
              { q: 'Is it compliant?', a: 'We use WhatsApp Cloud API and approved templates' },
              { q: 'Can you handle regional languages and voice?', a: 'Yes, 50+ languages and voice' },
              { q: 'How long to go live?', a: 'Weeks not months for typical scopes' },
              { q: 'Do you integrate with our systems?', a: 'Yes. Zoho, Shopify, Woo, Salesforce and more' },
              { q: 'Can you train our team?', a: 'Yes. Handover docs and live sessions are included' }
            ].map((faq, i) => (
              <div key={i} className="bg-white rounded-xl p-6 shadow-sm">
                <h3 className="font-bold text-gray-900 mb-2">{faq.q}</h3>
                <p className="text-gray-600">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 bg-gradient-to-br from-emerald-600 to-teal-600 text-white">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <h2 className="text-3xl sm:text-5xl font-bold mb-6">
            Ready to automate your WhatsApp?
          </h2>
          <p className="text-xl text-emerald-50 mb-8 max-w-2xl mx-auto">
            Book a free strategy session. We'll map your process and show you exactly what's possible—in 30 minutes or less.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-6">
            <button className="bg-white hover:bg-gray-100 text-emerald-600 px-8 py-4 rounded-full font-semibold text-lg flex items-center justify-center gap-2 shadow-lg hover:shadow-xl transition-all">
              Book a strategy session <ArrowRight size={20} />
            </button>
            <button className="bg-emerald-700 hover:bg-emerald-800 text-white px-8 py-4 rounded-full font-semibold text-lg border-2 border-white/20 transition-all">
              See automation samples
            </button>
          </div>

          <p className="text-sm text-emerald-100">
            Cancel anytime • Keep your number • Local language templates included
          </p>
        </div>
      </section>

      {/* Sticky Bottom CTA - Mobile */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 md:hidden shadow-lg z-50">
        <button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-full font-semibold text-sm flex items-center justify-center gap-2">
          Book strategy session <ArrowRight size={16} />
        </button>
      </div>
    </div>
  );
}