YÜKSEK MÜŞTERİ MEMNUNİYETİ
KUATRA NATURAL KURUMSAL SATIŞ SİTESİ
YÜKSEK MÜŞTERİ MEMNUNİYETİ
KUATRA NATURAL KURUMSAL SATIŞ SİTESİ
  • 0
export default function KuatraWholesaleOfferPage() {
  const React = window.React;
  const { useMemo, useState } = React;

  const products = [
    {
      id: 1,
      category: "Renkli Cilt Bakımı",
      name: "Botanical Porcelain Concealer & BB Stick",
      size: "11.5 mL",
      price: 356.94,
      image:
        "https://images.unsplash.com/photo-1526758097130-bab247274f58?auto=format&fit=crop&w=400&q=80",
    },
    {
      id: 2,
      category: "Renkli Cilt Bakımı",
      name: "Multi-Use Stick Contour Earth Minerals",
      size: "11.5 mL",
      price: 356.94,
      image:
        "https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=400&q=80",
    },
    {
      id: 3,
      category: "Renkli Cilt Bakımı",
      name: "Amber Crystal Highlighter Stick",
      size: "11.5 mL",
      price: 356.94,
      image:
        "https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?auto=format&fit=crop&w=400&q=80",
    },
    {
      id: 4,
      category: "Güneş Koruması",
      name: "Kuatra SPF 50+ Renkli Güneş Koruyucu Balm",
      size: "50 mL",
      price: 689.9,
      image:
        "https://images.unsplash.com/photo-1556228578-8c89e6adf883?auto=format&fit=crop&w=400&q=80",
    },
    {
      id: 5,
      category: "Göz Çevresi Bakımı",
      name: "Radiant Eyes Gündüz Stick SPF 30+",
      size: "11.5 mL",
      price: 389.9,
      image:
        "https://images.unsplash.com/photo-1512496015851-a90fb38ba796?auto=format&fit=crop&w=400&q=80",
    },
    {
      id: 6,
      category: "Gece Bakımı",
      name: "Skin Perfecting Night",
      size: "30 mL",
      price: 549.9,
      image:
        "https://images.unsplash.com/photo-1571781926291-c477ebfd024b?auto=format&fit=crop&w=400&q=80",
    },
  ];

  const [quantities, setQuantities] = useState(() =>
    products.reduce((acc, product) => {
      acc[product.id] = 0;
      return acc;
    }, {})
  );

  const [openCategories, setOpenCategories] = useState({
    "Renkli Cilt Bakımı": true,
    "Güneş Koruması": true,
    "Göz Çevresi Bakımı": true,
    "Gece Bakımı": true,
  });

  const [formData, setFormData] = useState({
    company: "",
    name: "",
    phone: "",
    email: "",
    note: "",
  });

  const updateQty = (id, delta) => {
    setQuantities((prev) => ({
      ...prev,
      [id]: Math.max(0, (prev[id] || 0) + delta),
    }));
  };

  const toggleCategory = (category) => {
    setOpenCategories((prev) => ({
      ...prev,
      [category]: !prev[category],
    }));
  };

  const handleInputChange = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const selectedLines = useMemo(() => {
    return products
      .filter((product) => (quantities[product.id] || 0) > 0)
      .map((product) => ({
        ...product,
        quantity: quantities[product.id],
        subtotal: product.price * quantities[product.id],
      }));
  }, [products, quantities]);

  const totals = useMemo(() => {
    const totalItems = selectedLines.reduce((sum, item) => sum + item.quantity, 0);
    const totalPrice = selectedLines.reduce((sum, item) => sum + item.subtotal, 0);
    return { totalItems, totalPrice };
  }, [selectedLines]);

  const groupedProducts = useMemo(() => {
    return products.reduce((acc, product) => {
      if (!acc[product.category]) acc[product.category] = [];
      acc[product.category].push(product);
      return acc;
    }, {});
  }, [products]);

  const formatPrice = (value) =>
    value.toLocaleString("tr-TR", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });

  return (
    <div className="min-h-screen bg-[#f7f1e8] p-4 md:p-8">
      <div className="mx-auto max-w-7xl space-y-6">
        <section className="overflow-hidden rounded-[30px] border border-[#eadfce] bg-white shadow-[0_12px_40px_rgba(113,80,42,0.08)]">
          <div className="grid gap-0 lg:grid-cols-[1.2fr_0.8fr]">
            <div className="relative p-6 md:p-8 lg:p-10">
              <div className="absolute left-0 top-0 hidden h-full w-3 bg-gradient-to-b from-[#c7a24a] via-[#9a7b39] to-[#6f8a57] lg:block" />

              <div className="lg:pl-6">
                <span className="inline-flex rounded-full border border-[#e8dbc7] bg-[#fbf7f1] px-4 py-2 text-sm font-medium text-[#8b6c3f]">
                  Kuatra Profesyonel Satış Kanalı
                </span>

                <h1 className="mt-4 text-3xl font-bold leading-tight text-[#3f2d1d] md:text-5xl">
                  Kuatra Toptan Fiyat Teklifi
                </h1>

                <p className="mt-4 max-w-2xl text-base leading-7 text-[#6d5a45] md:text-lg">
                  Temiz içerikli, doğal yağ bazlı ve çok amaçlı Kuatra ürünleri için teklifinizi hızlıca oluşturun. Seçiminizi iletin, size en kısa sürede özel fiyatlandırma ve iş birliği detaylarıyla dönüş yapalım.
                </p>

                <div className="mt-6 space-y-3">
                  <div className="flex items-center gap-3 rounded-2xl border border-[#eee3d4] bg-[#fcfaf6] px-4 py-4 text-[#4e3d2b]">
                    <span className="flex h-4 w-4 items-center justify-center rounded-full bg-[#b7a14c] ring-4 ring-[#f4ecd9]" />
                    <p>
                      Toptan ürün teklifinizi <strong>ürün seçerek ve formu doldurarak</strong> kolayca oluşturabilirsiniz.
                    </p>
                  </div>

                  <div className="flex items-center gap-3 rounded-2xl border border-[#eee3d4] bg-[#fcfaf6] px-4 py-4 text-[#4e3d2b]">
                    <span className="flex h-4 w-4 items-center justify-center rounded-full bg-[#7f9a68] ring-4 ring-[#eef5e7]" />
                    <p>
                      Butik mağaza, eczane, konsept satış noktası ve iş ortaklıklarına <strong>özel değerlendirme</strong> yapılır.
                    </p>
                  </div>
                </div>

                <div className="mt-7 flex flex-col gap-4 md:flex-row md:items-center">
                  <button className="inline-flex items-center justify-center gap-3 rounded-2xl bg-gradient-to-r from-[#a6853a] to-[#6f8a57] px-6 py-4 text-lg font-semibold text-white shadow-sm transition hover:scale-[1.01]">
                    Teklif Formunu İncele
                    <span aria-hidden>→</span>
                  </button>

                  <div className="inline-flex items-center gap-3 rounded-2xl border border-[#eadfce] bg-[#fbf7f1] px-4 py-3 text-[#7a6852]">
                    <span className="text-lg">🔗</span>
                    <span className="text-sm md:text-base">https://kuatra.com/pages/toptan-teklif</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="border-t border-[#eadfce] bg-[#fcfaf6] p-6 lg:border-l lg:border-t-0 lg:p-8">
              <h2 className="text-xl font-semibold text-[#3f2d1d]">Teklif Özeti</h2>
              <p className="mt-2 text-sm leading-6 text-[#6d5a45]">
                Seçtiğiniz ürünler burada listelenir. Talebinizi ilettikten sonra size uygun adet, iskonto ve iş birliği koşulları paylaşılır.
              </p>

              <div className="mt-5 space-y-3">
                {selectedLines.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-[#ddcfbb] bg-white px-4 py-6 text-sm text-[#8a755b]">
                    Henüz ürün seçilmedi. Aşağıdan ürün ekleyerek teklifinizi oluşturmaya başlayabilirsiniz.
                  </div>
                ) : (
                  selectedLines.map((item) => (
                    <div key={item.id} className="rounded-2xl border border-[#eee3d4] bg-white px-4 py-4">
                      <div className="flex items-start justify-between gap-4">
                        <div>
                          <p className="font-medium text-[#3f2d1d]">{item.name}</p>
                          <p className="mt-1 text-sm text-[#7a6852]">
                            {item.quantity} adet × {formatPrice(item.price)} TL
                          </p>
                        </div>
                        <p className="whitespace-nowrap font-semibold text-[#8b6c3f]">
                          {formatPrice(item.subtotal)} TL
                        </p>
                      </div>
                    </div>
                  ))
                )}
              </div>

              <div className="mt-5 rounded-2xl bg-white px-4 py-4 shadow-sm">
                <div className="flex items-center justify-between text-sm text-[#7a6852]">
                  <span>Toplam ürün</span>
                  <span>{totals.totalItems} adet</span>
                </div>
                <div className="mt-2 flex items-center justify-between text-lg font-semibold text-[#3f2d1d]">
                  <span>Tahmini toplam</span>
                  <span>{formatPrice(totals.totalPrice)} TL</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {Object.entries(groupedProducts).map(([category, items]) => (
          <section key={category} className="overflow-hidden rounded-[28px] border border-[#eadfce] bg-white shadow-[0_10px_30px_rgba(113,80,42,0.06)]">
            <button
              onClick={() => toggleCategory(category)}
              className="flex w-full items-center justify-between border-b border-[#f0e6d9] px-5 py-5 text-left md:px-7"
            >
              <h2 className="text-2xl font-bold text-[#3f2d1d]">{category}</h2>
              <span className="text-2xl text-[#8b6c3f]">{openCategories[category] ? "−" : "+"}</span>
            </button>

            {openCategories[category] && (
              <div className="grid gap-5 p-5 md:grid-cols-2 md:p-7">
                {items.map((product) => (
                  <div
                    key={product.id}
                    className="rounded-[24px] border border-[#efe4d7] bg-[#fffdfa] p-4 md:p-6"
                  >
                    <div className="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
                      <div className="flex items-center gap-4">
                        <div className="h-20 w-20 overflow-hidden rounded-2xl border border-[#eadfce] bg-white">
                          <img
                            src={product.image}
                            alt={product.name}
                            className="h-full w-full object-cover"
                          />
                        </div>

                        <div>
                          <h3 className="text-lg font-semibold leading-snug text-[#3f2d1d] md:text-xl">
                            {product.name}
                          </h3>
                          <p className="mt-1 text-sm text-[#7a6852]">{product.size}</p>
                          <p className="mt-1 text-sm font-medium text-[#8b6c3f]">
                            Birim fiyat: {formatPrice(product.price)} TL
                          </p>
                        </div>
                      </div>

                      <div className="flex h-16 min-w-[220px] items-center justify-between rounded-full border border-[#eadfce] bg-white px-3 md:min-w-[300px]">
                        <button
                          onClick={() => updateQty(product.id, -1)}
                          className="flex h-11 w-11 items-center justify-center rounded-full bg-[#f8f2e8] text-3xl font-semibold text-[#6a5435] shadow-sm"
                        >
                          −
                        </button>

                        <span className="text-3xl font-semibold text-[#6f8a57]">
                          {quantities[product.id] || 0}
                        </span>

                        <button
                          onClick={() => updateQty(product.id, 1)}
                          className="flex h-11 w-11 items-center justify-center rounded-full bg-[#f8f2e8] text-3xl font-semibold text-[#6a5435] shadow-sm"
                        >
                          +
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </section>
        ))}

        <section className="grid gap-6 lg:grid-cols-[1fr_0.9fr]">
          <div className="rounded-[28px] border border-[#eadfce] bg-white p-6 shadow-[0_10px_30px_rgba(113,80,42,0.06)] md:p-8">
            <h2 className="text-2xl font-bold text-[#3f2d1d]">İletişim Bilgileri</h2>
            <p className="mt-2 text-sm leading-6 text-[#6d5a45]">
              Teklifinizi değerlendirebilmemiz için iletişim bilgilerinizi bırakın. Dilerseniz mağaza yapınız, hedef satış kanalınız veya iş birliği modelinizle ilgili kısa bir not ekleyebilirsiniz.
            </p>

            <div className="mt-6 grid gap-4 md:grid-cols-2">
              <label className="space-y-2 md:col-span-1">
                <span className="text-sm font-medium text-[#5d4a35]">Firma / Mağaza Adı</span>
                <input
                  value={formData.company}
                  onChange={(e) => handleInputChange("company", e.target.value)}
                  placeholder="Örn. Kuatra Concept Store"
                  className="w-full rounded-2xl border border-[#e7d9c5] bg-[#fffdfa] px-4 py-3 outline-none transition focus:border-[#a6853a]"
                />
              </label>

              <label className="space-y-2 md:col-span-1">
                <span className="text-sm font-medium text-[#5d4a35]">Yetkili Kişi</span>
                <input
                  value={formData.name}
                  onChange={(e) => handleInputChange("name", e.target.value)}
                  placeholder="Ad Soyad"
                  className="w-full rounded-2xl border border-[#e7d9c5] bg-[#fffdfa] px-4 py-3 outline-none transition focus:border-[#a6853a]"
                />
              </label>

              <label className="space-y-2 md:col-span-1">
                <span className="text-sm font-medium text-[#5d4a35]">Telefon</span>
                <input
                  value={formData.phone}
                  onChange={(e) => handleInputChange("phone", e.target.value)}
                  placeholder="05xx xxx xx xx"
                  className="w-full rounded-2xl border border-[#e7d9c5] bg-[#fffdfa] px-4 py-3 outline-none transition focus:border-[#a6853a]"
                />
              </label>

              <label className="space-y-2 md:col-span-1">
                <span className="text-sm font-medium text-[#5d4a35]">E-posta</span>
                <input
                  value={formData.email}
                  onChange={(e) => handleInputChange("email", e.target.value)}
                  placeholder="[email protected]"
                  className="w-full rounded-2xl border border-[#e7d9c5] bg-[#fffdfa] px-4 py-3 outline-none transition focus:border-[#a6853a]"
                />
              </label>

              <label className="space-y-2 md:col-span-2">
                <span className="text-sm font-medium text-[#5d4a35]">Notunuz</span>
                <textarea
                  value={formData.note}
                  onChange={(e) => handleInputChange("note", e.target.value)}
                  rows={5}
                  placeholder="Mağaza konsepti, hedef adet, satış kanalı veya özel talebinizi yazabilirsiniz."
                  className="w-full rounded-2xl border border-[#e7d9c5] bg-[#fffdfa] px-4 py-3 outline-none transition focus:border-[#a6853a]"
                />
              </label>
            </div>
          </div>

          <div className="rounded-[28px] border border-[#eadfce] bg-gradient-to-br from-[#fffaf3] to-[#f7f1e8] p-6 shadow-[0_10px_30px_rgba(113,80,42,0.06)] md:p-8">
            <h2 className="text-2xl font-bold text-[#3f2d1d]">Neden Kuatra?</h2>
            <div className="mt-5 space-y-4">
              <div className="rounded-2xl border border-[#eadfce] bg-white px-4 py-4">
                <p className="font-medium text-[#3f2d1d]">Temiz içerik yaklaşımı</p>
                <p className="mt-1 text-sm leading-6 text-[#6d5a45]">
                  Doğal yağlar, balmumları ve mineral bazlı içeriklerle geliştirilen çok amaçlı formüller.
                </p>
              </div>

              <div className="rounded-2xl border border-[#eadfce] bg-white px-4 py-4">
                <p className="font-medium text-[#3f2d1d]">Seçici satış noktaları için uygun</p>
                <p className="mt-1 text-sm leading-6 text-[#6d5a45]">
                  Eczane, butik mağaza, clean beauty seçkileri ve premium satış noktalarına uyumlu ürün yapısı.
                </p>
              </div>

              <div className="rounded-2xl border border-[#eadfce] bg-white px-4 py-4">
                <p className="font-medium text-[#3f2d1d]">Marka hikâyesi güçlü sunum</p>
                <p className="mt-1 text-sm leading-6 text-[#6d5a45]">
                  Her damlası değerli yaklaşımıyla, bakım ve makyajı birleştiren etkili bir raf dili sunar.
                </p>
              </div>
            </div>

            <button className="mt-6 w-full rounded-2xl bg-gradient-to-r from-[#a6853a] to-[#6f8a57] px-6 py-4 text-base font-semibold text-white shadow-sm transition hover:opacity-95">
              Teklif Talebini Gönder
            </button>
          </div>
        </section>
      </div>
    </div>
  );
}