canina/frontend/application/components/B2BLandingClient.tsx

"use client";

import React, { useState } from "react";
import { 
  Building2, 
  ShieldCheck, 
  Truck, 
  TrendingUp, 
  Download, 
  CheckCircle2, 
  FileSpreadsheet, 
  PhoneCall, 
  Award, 
  Send,
  HelpCircle,
  Clock,
  Sparkles,
  ChevronDown
} from "lucide-react";
import { toast } from "sonner";
import api from "../lib/services/api";
import Link from "next/link";
import { useSettingsStore } from "../lib/store/settingsStore";

export default function B2BLandingClient() {
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const getText = useSettingsStore((s) => s.getText);
  const phone = getText('contact_phone', '۰۹۲۱۱۲۳۱۵۱۷');
  const wholesaleDiscount = getText('B2B_DISCOUNT_PERCENT', '۳۰');

  const [formData, setFormData] = useState({
    businessName: '',
    contactName: '',
    phone: '',
    city: '',
    businessType: 'کلینیک دامپزشکی',
    notes: '',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.businessName || !formData.phone) {
      toast.error('لطفاً نام مجموعه و شماره تماس را وارد کنید.');
      return;
    }

    setSubmitting(true);
    try {
      await api.post('/wholesale/apply', {
        businessName: `${formData.businessName} (${formData.businessType} - ${formData.city}) - رابط: ${formData.contactName}`,
        licenseNumber: formData.phone,
        notes: formData.notes,
      });
      setSubmitted(true);
      toast.success('درخواست همکاری شما با موفقیت ثبت شد. همکاران ما حداکثر تا ۲۴ ساعت آینده با شما تماس خواهند گرفت.');
    } catch {
      toast.error('خطایی در ثبت درخواست رخ داد. لطفاً با پشتیبانی تماس بگیرید.');
    } finally {
      setSubmitting(false);
    }
  };

  const faqs = [
    {
      q: 'حداقل مبلغ و تعداد برای سفارش عمده B2B چقدر است؟',
      a: 'برای اولین سفارش همکاران گرامی، حداقل سبد خرید با تخفیف همکار معادل ۵ میلیون تومان تعریف شده تا فرآیند ثبت نمایندگی و تست کشش بازار به آسانی انجام شود.',
    },
    {
      q: 'نحوه ارسال سفارشات عمده به شهرستان‌ها چگونه است؟',
      a: 'کلیه سفارشات B2B از طریق باربری‌های ویژه، تیپاکس اکسپرس یا پست ویژه در بسته‌بندی‌های استاندارد دارویی مقاوم به ضربه و دما با بیمه کامل مرسوله ارسال می‌گردند.',
    },
    {
      q: 'آیا برای کلینیک‌ها و داروخانه‌ها فاکتور رسمی صادر می‌شود؟',
      a: 'بله، تمامی سفارشات عمده همراه با فاکتور رسمی معتبر شرکتی و گواهی اصالت و پروانه ورود سازمان دامپزشکی کل کشور صادر می‌گردد.',
    },
    {
      q: 'آیا امکان دریافت نمونه یا کاتالوگ چاپی برای ویزیتورها وجود دارد؟',
      a: 'بله، پس از تأیید حساب کاربری B2B، پکیج اختصاصی شامل کاتالوگ جامع پزشکی، بروشورهای تخصصی برای مراجعین و راهنمای درمانی به آدرس کلینیک ارسال می‌شود.',
    },
  ];

  return (
    <div className="bg-medical-gray-50 min-h-screen font-vazir" dir="rtl">
      
      {/* Top Hero Banner */}
      <section className="relative overflow-hidden bg-gradient-to-br from-canina-blue via-[#0d3b66] to-medical-gray-900 text-white py-16 lg:py-24 px-4 sm:px-6 lg:px-8">
        <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:20px_20px]" />
        
        <div className="max-w-6xl mx-auto relative z-10 grid lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-7 space-y-6 text-center lg:text-right">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-blue-200 text-xs font-bold uppercase tracking-wider">
              <Building2 className="w-4 h-4 text-amber-300" />
              پرتال رسمی همکاران تجاری، کلینیک‌ها و پت‌شاپ‌ها
            </div>
            
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight">
              تأمین عمده و همکاری تجاری مکمل‌های <span className="text-amber-400">کنینا آلمان</span>
            </h1>
            
            <p className="text-base sm:text-lg text-white/80 leading-relaxed max-w-2xl">
              دسترسی مستقیم و بدون واسطه جامعه دامپزشکی، بیمارستان‌ها و فروشگاه‌های تخصصی به کامل‌ترین سبد مکمل‌های درمانی Canina با بالاترین حاشیه سود و ضمانت ۱۰۰٪ اصالت.
            </p>

            <div className="flex flex-wrap gap-4 justify-center lg:justify-start pt-2">
              <a
                href="#b2b-form"
                className="bg-amber-400 hover:bg-amber-500 text-gray-950 font-black px-8 py-4 rounded-2xl shadow-xl shadow-amber-400/20 transition-all flex items-center gap-2 transform hover:-translate-y-0.5 cursor-pointer"
              >
                <Send className="w-5 h-5" />
                درخواست همکاری و دریافت لیست قیمت
              </a>
              <Link
                href="/catalog"
                className="bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 text-white font-bold px-6 py-4 rounded-2xl transition-all flex items-center gap-2 cursor-pointer"
              >
                <Download className="w-5 h-5 text-blue-300" />
                مشاهده کاتالوگ دیجیتال
              </Link>
            </div>
          </div>

          <div className="lg:col-span-5">
            <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-[2.5rem] p-8 text-white shadow-2xl space-y-6">
              <div className="flex items-center justify-between border-b border-white/10 pb-4">
                <span className="text-xs font-bold text-white/70">تخفیف ویژه همکاران</span>
                <span className="bg-amber-400/20 text-amber-300 border border-amber-400/30 text-xs font-black px-3 py-1 rounded-full">
                  تا {wholesaleDiscount}٪ تخفیف
                </span>
              </div>
              
              <ul className="space-y-4 text-sm text-white/90">
                <li className="flex items-center gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
                  <span>تأمین پیوسته و بدون قطعی از انبار مرکزی تهران</span>
                </li>
                <li className="flex items-center gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
                  <span>پروانه بهداشتی واردات و برچسب اصالت دامپزشکی</span>
                </li>
                <li className="flex items-center gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
                  <span>ارسال اکسپرس رایگان برای سبدهای همکار</span>
                </li>
                <li className="flex items-center gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
                  <span>مشاوره علمی و وبینارهای تخصصی ارزیابی بالینی</span>
                </li>
              </ul>

              <div className="pt-2 border-t border-white/10 flex items-center justify-between text-xs text-white/60">
                <span>پشتیبانی امور همکاران:</span>
                <a href={`tel:${phone.replace(/[^0-9]/g, '')}`} className="font-bold text-white hover:text-amber-300 transition-colors dir-ltr">
                  {phone}
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Value Propositions Grid */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
        <div className="text-center space-y-3 mb-12">
          <span className="text-canina-blue font-black text-xs uppercase tracking-widest bg-canina-blue/5 px-4 py-1.5 rounded-full border border-canina-blue/10">
            مزایای عضویت در باشگاه همکاران
          </span>
          <h2 className="text-2xl sm:text-3xl font-black text-medical-gray-900">
            چرا کلینیک‌ها و پت‌شاپ‌ها کنینا را انتخاب می‌کنند؟
          </h2>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div className="bg-white border border-medical-gray-200 rounded-[2rem] p-6 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1">
            <div className="w-14 h-14 bg-canina-blue text-white rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-canina-blue/20">
              <ShieldCheck className="w-7 h-7" />
            </div>
            <h3 className="text-lg font-black text-medical-gray-900 mb-2">اصالت قطعی آلمان</h3>
            <p className="text-xs text-medical-gray-500 font-bold leading-relaxed">
              واردات قانونی تحت نظارت مستقیم Canina pharma GmbH همراه با گواهی سلامت و برچسب هولوگرام اصالت.
            </p>
          </div>

          <div className="bg-white border border-medical-gray-200 rounded-[2rem] p-6 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1">
            <div className="w-14 h-14 bg-emerald-600 text-white rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-emerald-600/20">
              <TrendingUp className="w-7 h-7" />
            </div>
            <h3 className="text-lg font-black text-medical-gray-900 mb-2">حاشیه سود رقابتی</h3>
            <p className="text-xs text-medical-gray-500 font-bold leading-relaxed">
              تخفیف‌های پلکانی متناسب با حجم خرید و آفر‌های فصلی ویژه همکاران فعال جهت بیشینه‌سازی سودآوری.
            </p>
          </div>

          <div className="bg-white border border-medical-gray-200 rounded-[2rem] p-6 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1">
            <div className="w-14 h-14 bg-amber-500 text-white rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-amber-500/20">
              <Truck className="w-7 h-7" />
            </div>
            <h3 className="text-lg font-black text-medical-gray-900 mb-2">ارسال سریع و مطمئن</h3>
            <p className="text-xs text-medical-gray-500 font-bold leading-relaxed">
              تحویل در همان روز برای تهران و ارسال اکسپرس ۴۸ ساعته به کلینیک‌ها و داروخانه‌های سراسر ایران.
            </p>
          </div>

          <div className="bg-white border border-medical-gray-200 rounded-[2rem] p-6 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1">
            <div className="w-14 h-14 bg-indigo-600 text-white rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-indigo-600/20">
              <Award className="w-7 h-7" />
            </div>
            <h3 className="text-lg font-black text-medical-gray-900 mb-2">پشتیبانی علمی و بالینی</h3>
            <p className="text-xs text-medical-gray-500 font-bold leading-relaxed">
              دسترسی به منابع پژوهشی، مشاوره پروتکل‌های تجویزی با تیم دامپزشکی و ارائه استندهای نمایشگاهی.
            </p>
          </div>
        </div>
      </section>

      {/* Interactive Form & Tier Preview */}
      <section id="b2b-form" className="py-16 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
        <div className="bg-white border border-medical-gray-200 rounded-[3rem] p-8 md:p-14 shadow-2xl grid lg:grid-cols-12 gap-12">
          
          {/* Form */}
          <div className="lg:col-span-7 space-y-6">
            <div>
              <span className="text-xs font-black text-canina-blue uppercase tracking-widest">
                ثبت‌نام همکاران جدید
              </span>
              <h3 className="text-2xl sm:text-3xl font-black text-medical-gray-900 mt-1">
                فرم درخواست همکاری تجاری B2B
              </h3>
              <p className="text-sm text-medical-gray-500 mt-2 leading-relaxed">
                لطفاً مشخصات مجموعه خود را تکمیل نمایید تا کد اختصاصی همکار و لیست قیمت مصوب برای شما فعال گردد.
              </p>
            </div>

            {submitted ? (
              <div className="bg-emerald-50 border border-emerald-200 rounded-3xl p-8 text-center space-y-4 animate-fade-in">
                <div className="w-16 h-16 bg-emerald-500 text-white rounded-full flex items-center justify-center mx-auto shadow-lg shadow-emerald-500/20">
                  <CheckCircle2 className="w-8 h-8" />
                </div>
                <h4 className="text-xl font-black text-emerald-900">درخواست شما با موفقیت ثبت شد</h4>
                <p className="text-sm text-emerald-700 max-w-md mx-auto leading-relaxed">
                  کارشناسان فروش سازمانی کنینا ایران جهت احراز هویت و ارسال لیست قیمت با شماره ثبت‌شده تماس خواهند گرفت.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid sm:grid-cols-2 gap-4">
                  <div>
                    <label htmlFor="b2b-businessName" className="block text-xs font-bold text-medical-gray-700 mb-1.5">
                      نام مجموعه / داروخانه / کلینیک <span className="text-red-500">*</span>
                    </label>
                    <input
                      id="b2b-businessName"
                      type="text"
                      required
                      placeholder="مثلاً کلینیک تخصصی دکتر البرزی"
                      value={formData.businessName}
                      onChange={(e) => setFormData({ ...formData, businessName: e.target.value })}
                      className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl px-4 py-3 text-sm text-medical-gray-900 focus:bg-white focus:border-canina-blue focus:ring-4 focus:ring-canina-blue/10 outline-none transition-all"
                    />
                  </div>

                  <div>
                    <label htmlFor="b2b-businessType" className="block text-xs font-bold text-medical-gray-700 mb-1.5">
                      نوع فعالیت <span className="text-red-500">*</span>
                    </label>
                    <select
                      id="b2b-businessType"
                      value={formData.businessType}
                      onChange={(e) => setFormData({ ...formData, businessType: e.target.value })}
                      className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl px-4 py-3 text-sm text-medical-gray-900 focus:bg-white focus:border-canina-blue focus:ring-4 focus:ring-canina-blue/10 outline-none transition-all"
                    >
                      <option value="کلینیک دامپزشکی">کلینیک دامپزشکی</option>
                      <option value="بیمارستان دامپزشکی">بیمارستان دامپزشکی</option>
                      <option value="داروخانه دامپزشکی">داروخانه دامپزشکی</option>
                      <option value="پت‌شاپ فیزیکی و آنلاین">پت‌شاپ فیزیکی و آنلاین</option>
                      <option value="دامپزشک مستقل / ویزیتور">دامپزشک مستقل / ویزیتور</option>
                    </select>
                  </div>
                </div>

                <div className="grid sm:grid-cols-3 gap-4">
                  <div>
                    <label htmlFor="b2b-contactName" className="block text-xs font-bold text-medical-gray-700 mb-1.5">
                      نام رابط / مسئول خرید
                    </label>
                    <input
                      id="b2b-contactName"
                      type="text"
                      placeholder="نام و نام خانوادگی"
                      value={formData.contactName}
                      onChange={(e) => setFormData({ ...formData, contactName: e.target.value })}
                      className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl px-4 py-3 text-sm text-medical-gray-900 focus:bg-white focus:border-canina-blue focus:ring-4 focus:ring-canina-blue/10 outline-none transition-all"
                    />
                  </div>

                  <div>
                    <label htmlFor="b2b-phone" className="block text-xs font-bold text-medical-gray-700 mb-1.5">
                      شماره تماس همراه <span className="text-red-500">*</span>
                    </label>
                    <input
                      id="b2b-phone"
                      type="tel"
                      required
                      placeholder="۰۹۱۲۳۴۵۶۷۸۹"
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl px-4 py-3 text-sm text-medical-gray-900 focus:bg-white focus:border-canina-blue focus:ring-4 focus:ring-canina-blue/10 outline-none transition-all dir-ltr text-right"
                    />
                  </div>

                  <div>
                    <label htmlFor="b2b-city" className="block text-xs font-bold text-medical-gray-700 mb-1.5">
                      شهر / استان
                    </label>
                    <input
                      id="b2b-city"
                      type="text"
                      placeholder="مثلاً تهران / اصفهان"
                      value={formData.city}
                      onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                      className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl px-4 py-3 text-sm text-medical-gray-900 focus:bg-white focus:border-canina-blue focus:ring-4 focus:ring-canina-blue/10 outline-none transition-all"
                    />
                  </div>
                </div>

                <div>
                  <label htmlFor="b2b-notes" className="block text-xs font-bold text-medical-gray-700 mb-1.5">
                    توضیحات تکمیلی یا اقلام مدنظر (اختیاری)
                  </label>
                  <textarea
                    id="b2b-notes"
                    rows={3}
                    placeholder="در صورت داشتن نیاز دارویی خاص یا حجم تخمینی سفارش، در اینجا درج فرمایید..."
                    value={formData.notes}
                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                    className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl px-4 py-3 text-sm text-medical-gray-900 focus:bg-white focus:border-canina-blue focus:ring-4 focus:ring-canina-blue/10 outline-none transition-all"
                  />
                </div>

                <button
                  type="submit"
                  disabled={submitting}
                  className="w-full bg-canina-blue hover:bg-canina-blue/90 text-white font-black text-base py-4 rounded-2xl shadow-xl shadow-canina-blue/20 transition-all flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
                >
                  {submitting ? (
                    <span>در حال ارسال اطلاعات...</span>
                  ) : (
                    <>
                      <Send className="w-5 h-5" />
                      <span>ثبت درخواست و فعال‌سازی حساب همکار</span>
                    </>
                  )}
                </button>
              </form>
            )}
          </div>

          {/* Quick FAQ / Info sidebar */}
          <div className="lg:col-span-5 space-y-6">
            <div className="bg-medical-gray-50 rounded-3xl p-6 border border-medical-gray-200 space-y-4">
              <h4 className="text-base font-black text-medical-gray-900 flex items-center gap-2">
                <Sparkles className="w-5 h-5 text-amber-500" />
                مراحل ثبت‌نام و دریافت کالا
              </h4>
              
              <div className="space-y-4 text-xs font-bold text-medical-gray-600">
                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-canina-blue text-white flex items-center justify-center text-xs font-black shrink-0">۱</div>
                  <div>
                    <strong className="text-medical-gray-900 block mb-0.5">ثبت فرم آنلاین</strong>
                    ارسال مشخصات کلینیک یا پت‌شاپ از طریق فرم روبه‌رو.
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-canina-blue text-white flex items-center justify-center text-xs font-black shrink-0">۲</div>
                  <div>
                    <strong className="text-medical-gray-900 block mb-0.5">تماس کارشناس B2B</strong>
                    تأیید تلفنی و فعال‌سازی دسترسی قیمت عمده در پرتال.
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-canina-blue text-white flex items-center justify-center text-xs font-black shrink-0">۳</div>
                  <div>
                    <strong className="text-medical-gray-900 block mb-0.5">ثبت سفارش و ارسال اکسپرس</strong>
                    انتخاب محصولات با فاکتور رسمی و ارسال فوری با بیمه.
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-gradient-to-br from-amber-500/10 to-amber-500/5 border border-amber-500/20 rounded-3xl p-6 space-y-3">
              <div className="flex items-center gap-2 text-amber-900 font-black text-sm">
                <PhoneCall className="w-5 h-5 text-amber-600" />
                مشاوره مستقیم با مدیریت فروش سازمانی
              </div>
              <p className="text-xs text-amber-800 leading-relaxed">
                همکاران و مدیران محترم مراکز درمانی می‌توانند مستقیماً با دپارتمان فروش B2B تماس حاصل فرمایند.
              </p>
              <a
                href={`tel:${phone.replace(/[^0-9]/g, '')}`}
                className="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white font-black text-xs px-5 py-2.5 rounded-xl transition-all shadow-md dir-ltr"
              >
                {phone}
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Accordion FAQ */}
      <section className="py-12 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
        <div className="text-center space-y-2 mb-8">
          <HelpCircle className="w-8 h-8 text-canina-blue mx-auto mb-2" />
          <h3 className="text-2xl font-black text-medical-gray-900">
            پرسش‌های متداول همکاران و کلینیک‌ها
          </h3>
        </div>

        <div className="space-y-3">
          {faqs.map((faq, idx) => (
            <div
              key={idx}
              className="bg-white border border-medical-gray-200 rounded-2xl overflow-hidden transition-all shadow-sm"
            >
              <button
                onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                className="w-full p-5 text-right flex items-center justify-between gap-4 font-bold text-sm text-medical-gray-900 hover:text-canina-blue transition-colors cursor-pointer"
              >
                <span>{faq.q}</span>
                <ChevronDown className={`w-5 h-5 text-medical-gray-400 transition-transform ${openFaq === idx ? 'rotate-180 text-canina-blue' : ''}`} />
              </button>
              {openFaq === idx && (
                <div className="px-5 pb-5 text-xs text-medical-gray-600 leading-relaxed border-t border-medical-gray-100 pt-3 animate-fade-in">
                  {faq.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

    </div>
  );
}