// src/pages/Landing.jsx
import React, { useEffect, useMemo, useRef, useState, useCallback } from "react";
import Logo from "../assets/logo.png";
import Heart from "../assets/heart.svg";
import Iran from "../assets/iran.svg";
import Shotdark from "../assets/scd-shot.png";
import Data from "../assets/secure-data.svg";
import Stars from "../assets/stars.svg";
import Files from "../assets/files.svg";
import View from "../assets/view.svg";
import Share from "../assets/share.svg";
import Privacy from "../assets/privacy.svg";
import One from "../assets/01.svg";
import Two from "../assets/02.svg";
import Three from "../assets/03.svg";
import Line from "../assets/Vector 7.svg";
import Line2 from "../assets/Vector 4.svg";
import { HiArrowLongRight, HiPaperAirplane } from "react-icons/hi2";
import { TbBrandInstagram, TbBrandLinkedin, TbBrandTelegram, TbBrandWhatsapp, TbMail, TbPhone } from "react-icons/tb";
import {
  TbDatabase,
  TbFiles,
  TbFolder,
  TbStar,
  TbPalette,
  TbShare2,
  TbClock,
  TbLock,
  TbWorldWww,
  TbShieldLock,
  TbEye,
  TbTrash,
  TbHistory,
  TbSearch,
  TbDevices,
  TbCloud,
  TbUpload,
  TbDownload,
  TbUser,
  TbWallet,
} from "react-icons/tb";

import {
  LuHardDrive,
  LuClock,
  LuShare2,
  LuHeadphones,
  LuCheck,
  LuSparkles,
  LuBadgeCheck,
  LuChevronLeft,
  LuChevronRight,
  LuBuilding2,
  LuUser,
  LuCalendarDays,
  LuCalendar,
  LuPercent,
  LuChevronDown,
  LuChevronUp,
} from "react-icons/lu";

import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";

import { Axiosinstance } from "../services/auth/Axiosinstance";

/* ---------------- helpers ---------------- */
function cn(...a) {
  return a.filter(Boolean).join(" ");
}

function formatBytes(bytes) {
  if (bytes === null || bytes === undefined) return "-";
  const gb = bytes / 1024 / 1024 / 1024;
  if (!isFinite(gb)) return "-";
  if (gb < 1) {
    const mb = bytes / 1024 / 1024;
    return `${mb.toFixed(0)} MB`;
  }
  return `${gb.toFixed(gb < 10 ? 1 : 0)} GB`;
}

function formatPrice(price) {
  try {
    return Number(price || 0).toLocaleString("fa-IR");
  } catch {
    return String(price ?? "");
  }
}

const getErrMsg = (e, fallback) => {
  const d = e?.response?.data;
  if (!d) return e?.message || fallback;
  if (typeof d === "string") return d;
  if (d.detail) return d.detail;
  if (d.message) return d.message;
  try {
    return JSON.stringify(d);
  } catch {
    return fallback;
  }
};

/* ---------------- data ---------------- */
const NAV_LINKS = [
  { label: "خانه", href: "#home" },
  { label: "خدمات ما", href: "#services" },
  { label: "تعرفه ها", href: "#pricing" },
  { label: "درباره ما", href: "#about" },
  { label: "تماس با ما", href: "#contact" },
];

const FEATURES = [
  { icon: TbDatabase, title: "امنیت داده‌ها", desc: "نگهداری چند نسخه از داده‌ها برای اطمینان و پایداری بیشتر" },
  { icon: TbFiles, title: "مدیریت کامل فایل‌ها", desc: "آپلود، دانلود، جابه‌جایی، تغییرنام و ساخت پوشه‌ها با چند کلیک ساده" },
  { icon: TbFolder, title: "ساختار پوشه‌ای انعطاف‌پذیر", desc: "ایجاد پوشه‌های تو در تو برای مرتب‌سازی حرفه‌ای فایل‌ها" },
  { icon: TbStar, title: "ستاره‌دار کردن فایل‌ها", desc: "علامت‌گذاری فایل‌های مهم برای دسترسی سریع‌تر" },
  { icon: TbPalette, title: "تغییر رنگ فایل و پوشه", desc: "شخصی‌سازی فایل‌ها با رنگ‌بندی دلخواه برای نظم بیشتر" },

  { icon: TbShare2, title: "اشتراک‌گذاری امن فایل", desc: "ارسال لینک امن برای اشتراک فایل‌ها بدون پیچیدگی" },
  { icon: TbClock, title: "تعیین تاریخ انقضا لینک", desc: "کنترل مدت اعتبار لینک‌های اشتراک‌گذاری برای امنیت بالاتر" },
  { icon: TbLock, title: "سطح دسترسی قابل تنظیم", desc: "انتخاب دسترسی فقط مشاهده یا امکان دانلود برای لینک‌ها" },
  { icon: TbWorldWww, title: "اشتراک‌گذاری با دامنه اختصاصی", desc: "دانلود فایل‌ها از طریق دامنه شخصی شما با ظاهر حرفه‌ای" },

  { icon: TbShieldLock, title: "ورود امن با کد یکبار مصرف", desc: "ثبت‌نام و ورود ایمن با تایید پیامکی یا ایمیلی" },
  { icon: TbEye, title: "پیش‌نمایش فایل‌ها", desc: "مشاهده فایل‌ها بدون نیاز به دانلود (بسته به نوع فایل)" },
  { icon: TbTrash, title: "سطل زباله هوشمند", desc: "حذف فایل‌ها با امکان بازیابی قبل از حذف دائمی" },
  { icon: TbHistory, title: "دسترسی به فایل‌های اخیر", desc: "نمایش فایل‌ها و پوشه‌هایی که اخیراً استفاده شده‌اند" },

  { icon: TbSearch, title: "جستجوی سریع فایل‌ها", desc: "پیدا کردن فایل‌ها و پوشه‌ها در کمترین زمان" },
  { icon: TbDevices, title: "دسترسی از همه دستگاه‌ها", desc: "استفاده از حساب کاربری در موبایل، تبلت و دسکتاپ" },
  { icon: TbCloud, title: "ذخیره‌سازی ابری پایدار", desc: "نگهداری فایل‌ها در فضای ابری با دسترسی همیشگی" },

  { icon: TbUpload, title: "آپلود آسان فایل‌ها", desc: "آپلود سریع فایل‌ها با تجربه کاربری ساده و روان" },
  { icon: TbDownload, title: "دانلود مستقیم", desc: "دانلود فایل‌ها بدون نیاز به ابزار جانبی" },
  { icon: TbUser, title: "مدیریت پروفایل کاربری", desc: "ویرایش اطلاعات حساب و تنظیمات شخصی" },
  { icon: TbWallet, title: "مدیریت پلن و فضای ذخیره‌سازی", desc: "مشاهده میزان فضای مصرفی و ارتقای پلن در صورت نیاز" },
];

const SECURITY_CARDS = [
  { title: "کنترل سطح دسترسی", desc: "مدیریت دسترسی کاربران به فایل‌ها" },
  { title: "لینک‌های اشتراک امن", desc: "اشتراک‌گذاری فایل با لینک‌های کنترل‌شده" },
  { title: "نگهداری ایمن اطلاعات", desc: "حفاظت از داده‌ها در فضای امن" },
];

const STEPS = [
  { nIcon: Three, title: "مدیریت و اشتراک‌گذاری", desc: "دسته‌بندی، دسترسی سریع و اشتراک امن" },
  { nIcon: Two, title: "آپلود فایل‌ها", desc: "انتقال فایل‌ها و پوشه‌ها به فضای ابری" },
  { nIcon: One, title: "ایجاد حساب کاربری", desc: "ثبت‌نام سریع و بدون مراحل پیچیده" },
];

const FOOTER_LINKS_1 = [
  { label: "امکانات", href: "#services" },
  { label: "امنیت و حریم خصوصی", href: "#security" },
  { label: "مراحل استفاده", href: "#steps" },
  { label: "درباره ما", href: "#about" },
];

const FOOTER_LINKS_2 = [
  { label: "ورود", href: "auth" },
  { label: "ثبت‌نام", href: "auth/register" },
  { label: "شروع رایگان", href: "auth" },
  { label: "پشتیبانی", href: "#support" },
];

/* ---------------- UI: Switch Pill ---------------- */
function SwitchPill({ value, onChange, options, className = "" }) {
  return (
    <div className={cn("inline-flex items-center p-1 rounded-2xl border border-black/10 bg-white shadow-sm", "gap-1 w-full sm:w-auto", className)} role="tablist">
      {options.map((opt) => {
        const active = value === opt.value;
        return (
          <button
            key={opt.value}
            type="button"
            onClick={() => onChange(opt.value)}
            className={cn(
              "flex-1 sm:flex-none inline-flex items-center justify-center gap-2",
              "px-3 py-2 rounded-xl text-sm font-semibold transition",
              active ? "bg-[#A1E3F980] border border-[#43BEFF]/30 text-black shadow" : "bg-transparent hover:bg-black/5 text-black/70"
            )}
            aria-pressed={active}
          >
            {opt.icon ? <opt.icon className="w-4 h-4" /> : null}
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}

/* ---------------- Pricing Carousel (PRO - Embla | Responsive FIXED) ---------------- */
function PricingCarousel({ items, loading, errorText, billingCycle, setBillingCycle, planKind, setPlanKind }) {
  const autoplay = useRef(Autoplay({ delay: 4500, stopOnInteraction: true, stopOnMouseEnter: true }, (emblaRoot) => emblaRoot.parentElement));

  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      direction: "rtl",
      align: "start",
      containScroll: "trimSnaps",
      loop: false,
      dragFree: false,
      skipSnaps: false,
    },
    items?.length ? [autoplay.current] : []
  );

  const [selectedIndex, setSelectedIndex] = useState(0);
  const [snapCount, setSnapCount] = useState(0);
  const [canPrev, setCanPrev] = useState(false);
  const [canNext, setCanNext] = useState(false);

  const syncState = useCallback(() => {
    if (!emblaApi) return;
    setSnapCount(emblaApi.scrollSnapList().length);
    setSelectedIndex(emblaApi.selectedScrollSnap());
    setCanPrev(emblaApi.canScrollPrev());
    setCanNext(emblaApi.canScrollNext());
  }, [emblaApi]);

  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
  const scrollTo = useCallback((i) => emblaApi?.scrollTo(i), [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    syncState();
    emblaApi.on("select", syncState);
    emblaApi.on("reInit", syncState);
    return () => {
      try {
        emblaApi.off("select", syncState);
        emblaApi.off("reInit", syncState);
      } catch {}
    };
  }, [emblaApi, syncState]);

  useEffect(() => {
    try {
      emblaApi?.scrollTo(0);
    } catch {}
  }, [billingCycle, planKind, emblaApi]);

  useEffect(() => {
    const onKey = (e) => {
      if (!emblaApi) return;
      if (e.key === "ArrowLeft") emblaApi.scrollNext();
      if (e.key === "ArrowRight") emblaApi.scrollPrev();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [emblaApi]);

  return (
    <div className="w-full min-w-0">
      <div className="flex items-end justify-between gap-3 flex-wrap">
        <div className="w-[92px] lg:block hidden" />

        <div className="min-w-0 w-full lg:w-fit">
          <h2 className="text-2xl text-center font-extrabold">تعرفه‌ها</h2>
          <p className="text-sm font-medium text-black/60 mt-2 text-center">پلن مناسب خودتان را انتخاب کنید و هر زمان که خواستید ارتقا دهید.</p>

          <div className="mt-5 flex flex-col sm:flex-row gap-3 justify-center items-stretch sm:items-center">
            <SwitchPill
              value={planKind}
              onChange={setPlanKind}
              options={[
                { value: "personal", label: "شخصی", icon: LuUser },
                { value: "org", label: "سازمانی", icon: LuBuilding2 },
              ]}
              className="min-w-0"
            />
            <SwitchPill
              value={billingCycle}
              onChange={setBillingCycle}
              options={[
                { value: "monthly", label: "ماهیانه", icon: LuCalendarDays },
                { value: "yearly", label: "سالیانه", icon: LuCalendar },
              ]}
              className="min-w-0"
            />
          </div>
        </div>

        <div className="flex items-center gap-2 w-full lg:w-auto justify-center lg:justify-end">
          <button
            type="button"
            onClick={scrollPrev}
            disabled={loading || !canPrev}
            className="px-3 py-2 rounded-xl bg-white shadow border border-black/10 hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed"
            aria-label="قبلی"
          >
            <LuChevronRight className="w-5 h-5" />
          </button>
          <button
            type="button"
            onClick={scrollNext}
            disabled={loading || !canNext}
            className="px-3 py-2 rounded-xl bg-white shadow border border-black/10 hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed"
            aria-label="بعدی"
          >
            <LuChevronLeft className="w-5 h-5" />
          </button>
        </div>
      </div>

      {loading && (
        <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {[1, 2, 3].map((i) => (
            <div key={i} className="animate-pulse h-[380px] rounded-3xl shadow bg-white/70 border border-black/5" />
          ))}
        </div>
      )}

      {!loading && errorText && <div className="mt-10 p-4 rounded-2xl border border-red-200 bg-red-50 text-red-700 text-sm font-semibold">{errorText}</div>}

      {!loading && !errorText && (!items || items.length === 0) && (
        <div className="mt-10 p-4 rounded-2xl border border-black/10 bg-white text-black/70 text-sm font-semibold">در این حالت، هیچ پلنی یافت نشد.</div>
      )}

      {!loading && !errorText && items && items.length > 0 && (
        <div className="relative mt-10 w-full min-w-0">
          <div ref={emblaRef} className="overflow-hidden w-full py-2 pl-2 -ml-2 max-w-full" role="group" aria-label="کاروسل تعرفه‌ها">
            <div className="flex touch-pan-y select-none -mx-3">
              {items.map((plan) => (
                <div
                  key={plan.key}
                  className="
                    shrink-0 min-w-0
                    basis-full
                    sm:basis-1/2
                    lg:basis-1/3
                    px-3
                  "
                >
                  <div
                    className={cn(
                      "relative p-5 rounded-3xl shadow border overflow-hidden bg-white min-h-[380px] w-full",
                      plan.highlight ? "border-[#43BEFF]/60 ring-1 ring-[#43BEFF]/40" : "border-black/5",
                      !plan.isActive ? "opacity-70" : ""
                    )}
                  >
                    <div className="absolute top-4 left-4 flex gap-2 flex-wrap">
                      {!plan.isActive ? (
                        <span className="text-xs px-3 py-1 rounded-full bg-red-500/10 text-red-700 border border-red-500/20">غیرفعال</span>
                      ) : plan.highlight ? (
                        <span className="text-xs px-3 py-1 rounded-full bg-yellow-500/10 text-yellow-700 flex items-center gap-1">
                          <LuSparkles className="w-3.5 h-3.5" />
                          {plan.badge || "پیشنهادی"}
                        </span>
                      ) : (
                        <span className="text-xs px-3 py-1 rounded-full bg-[#43BEFF]/10 text-[#0b6ea3] flex items-center gap-1 border border-[#43BEFF]/20">
                          <LuBadgeCheck className="w-3.5 h-3.5" />
                          {plan.badge || "پلن"}
                        </span>
                      )}

                      {plan.discountText ? (
                        <span className="text-xs px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-700 border border-emerald-500/20 flex items-center gap-1">
                          <LuPercent className="w-3.5 h-3.5" />
                          {plan.discountText}
                        </span>
                      ) : null}
                    </div>

                    <div className="pt-10 text-center">
                      <h3 className="text-lg font-bold text-black">{plan.name}</h3>
                      <p className="text-xs text-black/60 mt-1">
                        دوره: {plan.cycleLabel} • مدت: {plan.durationDays} روز
                      </p>

                      <div className="mt-5">
                        <span className="text-3xl font-extrabold text-black">{plan.price}</span>
                        <span className="text-sm text-black/60"> ریال</span>
                      </div>

                      <div className="mt-6 space-y-3 text-sm text-right">
                        <div className="flex items-center gap-2">
                          <LuHardDrive className="w-4 h-4 text-[#43BEFF]" />
                          فضای ذخیره‌سازی: <b className="text-black">{plan.storage}</b>
                        </div>

                        <div className="flex items-center gap-2">
                          <LuCheck className="w-4 h-4 text-[#43BEFF]" />
                          حداکثر حجم فایل: <b className="text-black">{plan.maxFile}</b>
                        </div>

                        <div className="flex items-center gap-2">
                          <LuShare2 className={cn("w-4 h-4", plan.canShare ? "text-[#43BEFF]" : "text-black/30")} />
                          اشتراک‌گذاری عمومی: {plan.canShare ? "دارد" : "ندارد"}
                        </div>

                        <div className="flex items-center gap-2">
                          <LuHeadphones className={cn("w-4 h-4", plan.support ? "text-[#43BEFF]" : "text-black/30")} />
                          پشتیبانی ویژه: {plan.support ? "دارد" : "ندارد"}
                        </div>

                        <div className="flex items-center gap-2">
                          <LuClock className="w-4 h-4 text-[#43BEFF]" />
                          مدت: {plan.durationDays} روز
                        </div>
                      </div>

                      <a
                        href={plan.href || "auth"}
                        className={cn(
                          "mt-7 w-full inline-flex items-center justify-center px-4 py-2 rounded-xl shadow text-sm font-semibold transition",
                          !plan.isActive ? "bg-black/5 cursor-not-allowed pointer-events-none" : plan.highlight ? "bg-[#A1E3F980] hover:bg-[#43BEFF]/30" : "bg-black/5 hover:bg-black/10"
                        )}
                      >
                        {!plan.isActive ? "فعلاً قابل خرید نیست" : plan.cta || "انتخاب پلن"}
                      </a>

                      {plan.note && <p className="mt-3 text-xs text-black/50">{plan.note}</p>}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="mt-6 flex justify-center gap-2">
            {Array.from({ length: snapCount }).map((_, i) => (
              <button
                key={i}
                type="button"
                onClick={() => scrollTo(i)}
                className={cn("h-2.5 rounded-full transition-all", i === selectedIndex ? "w-8 bg-[#43BEFF]" : "w-2.5 bg-black/15 hover:bg-black/25")}
                aria-label={`اسلاید ${i + 1}`}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function Landing() {
  const [plans, setPlans] = useState([]);
  const [plansLoading, setPlansLoading] = useState(true);
  const [plansError, setPlansError] = useState("");

  const [planKind, setPlanKind] = useState("personal");
  const [billingCycle, setBillingCycle] = useState("monthly");

  // ✅ NEW: features "show more" (mobile only)
  const [showAllFeaturesMobile, setShowAllFeaturesMobile] = useState(false);
  const [isBelowMd, setIsBelowMd] = useState(false);
  const mobileFeaturesWrapRef = useRef(null);
  const [mobileFeaturesHeight, setMobileFeaturesHeight] = useState(0);

  // detect < md
  useEffect(() => {
    const mq = window.matchMedia("(max-width: 767px)");
    const onChange = () => setIsBelowMd(!!mq.matches);
    onChange();
    try {
      mq.addEventListener("change", onChange);
      return () => mq.removeEventListener("change", onChange);
    } catch {
      // safari fallback
      mq.addListener(onChange);
      return () => mq.removeListener(onChange);
    }
  }, []);

  const visibleFeatures = useMemo(() => {
    if (!isBelowMd) return FEATURES;
    if (showAllFeaturesMobile) return FEATURES;
    return FEATURES.slice(0, 8);
  }, [isBelowMd, showAllFeaturesMobile]);

  // smooth expand/collapse using maxHeight
  const updateMobileHeight = useCallback(() => {
    if (!isBelowMd) return;
    const el = mobileFeaturesWrapRef.current;
    if (!el) return;
    const h = el.scrollHeight || 0;
    setMobileFeaturesHeight(h);
  }, [isBelowMd]);

  useEffect(() => {
    updateMobileHeight();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isBelowMd, showAllFeaturesMobile]);

  useEffect(() => {
    if (!isBelowMd) return;
    const onResize = () => updateMobileHeight();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [isBelowMd, updateMobileHeight]);

  const canToggleFeatures = isBelowMd && FEATURES.length > 8;

  const fetchPlans = async () => {
    setPlansLoading(true);
    setPlansError("");
    try {
      const res = await Axiosinstance.get("billing/plans/");
      setPlans(Array.isArray(res.data) ? res.data : []);
    } catch (e) {
      setPlans([]);
      setPlansError(getErrMsg(e, "خطا در دریافت پلن‌ها"));
    } finally {
      setPlansLoading(false);
    }
  };

  useEffect(() => {
    fetchPlans();
  }, []);

  const pricingItems = useMemo(() => {
    const arr = Array.isArray(plans) ? [...plans] : [];

    const kindFiltered = arr.filter((p) => {
      const t = String(p?.plan_type || "").toLowerCase();
      if (planKind === "org") return t === "org" || t === "organization" || t === "organisational";
      return t === "personal" || t === "user";
    });

    const cycleFiltered = kindFiltered.filter((p) => {
      if (billingCycle === "yearly") return p?.yearly_enabled === true;
      return p?.monthly_enabled !== false;
    });

    cycleFiltered.sort((a, b) => {
      const ap = billingCycle === "yearly" ? Number(a?.yearly_price ?? 0) : Number(a?.price ?? 0);
      const bp = billingCycle === "yearly" ? Number(b?.yearly_price ?? 0) : Number(b?.price ?? 0);
      return ap - bp;
    });

    const bestId = (() => {
      const active = cycleFiltered.filter((p) => p?.is_active);
      return active[active.length - 1]?.id ?? cycleFiltered[cycleFiltered.length - 1]?.id ?? null;
    })();

    return cycleFiltered.map((p) => {
      const isYearly = billingCycle === "yearly";
      const shownPrice = isYearly ? p?.yearly_price ?? 0 : p?.price ?? 0;
      const shownDuration = isYearly ? p?.yearly_duration_days ?? 365 : p?.duration_days ?? "-";
      const discount = isYearly ? Number(p?.yearly_discount_percent ?? 0) : 0;

      return {
        key: p?.id ?? p?.slug ?? Math.random().toString(16).slice(2),
        id: p?.id,
        slug: p?.slug,
        name: p?.name || p?.title || "پلن",
        price: formatPrice(shownPrice),
        durationDays: shownDuration,
        storage: formatBytes(p?.storage_limit_bytes),
        maxFile: formatBytes(p?.max_file_size_bytes),
        canShare: !!p?.can_share_public,
        support: !!p?.priority_support,
        isActive: p?.is_active !== false,
        highlight: p?.id === bestId,
        badge: p?.id === bestId ? "پیشنهادی" : p?.is_active ? "پلن" : "غیرفعال",
        cta: "انتخاب پلن",
        href: "auth",
        note: p?.is_active ? "" : "این پلن فعلاً برای خرید فعال نیست.",
        cycleLabel: isYearly ? "سالیانه" : "ماهیانه",
        discountText: discount > 0 ? `${discount}% تخفیف سالیانه` : "",
      };
    });
  }, [plans, planKind, billingCycle]);

  return (
    <div dir="rtl" className="font-iran **:transition-all **:duration-500 overflow-x-hidden w-full max-w-full">
      {/* Header */}
      <header className="w-full text-white max-w-7xl z-10 absolute left-1/2 -translate-x-1/2 top-10 px-6 flex justify-between items-center gap-4">
        <div className="flex items-center min-w-0 sm:min-w-52">
          <img src={Logo} alt="NET NEST logo" className="h-20 object-contain" />
          <div className="sm:block hidden"></div>
        </div>

        <nav className="hidden md:flex items-center font-medium gap-8">
          {NAV_LINKS.map((l) => (
            <a key={l.label} href={l.href} className="hover:text-cyan-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 rounded">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="min-w-0 sm:min-w-52 flex justify-end">
          <a
            href="auth"
            className="inline-flex items-center justify-center rounded-md bg-white hover:bg-cyan-800 text-black hover:text-inherit font-medium text-lg px-4 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
          >
            ورود یا ثبت‌نام
          </a>
        </div>
      </header>

      <main className="w-full flex flex-col flex-wrap gap-40 justify-center overflow-x-hidden">
        {/* Hero */}
        <section id="home" className="pt-[40vh] back-imagei text-white w-full text-center relative grid gap-12 px-6">
          <h1 className="text-3xl sm:text-4xl font-extrabold">درایو ابری برای مدیریت فایل‌های شما</h1>
          <h2 className="text-base sm:text-lg font-semibold">ذخیره، سازمان‌دهی و اشتراک‌گذاری فایل‌ها — سریع، امن و ساده.</h2>

          <div className="flex flex-col sm:flex-row justify-center w-full gap-4 sm:gap-6">
            <a
              href="#contact"
              className="inline-flex sm:w-3xs items-center justify-center border-2 border-white font-semibold rounded-md hover:border-cyan-800 hover:bg-cyan-800 py-1.5 px-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
            >
              دریافت مشاوره
            </a>
            <a
              href="auth"
              className="inline-flex sm:w-3xs items-center justify-center border-2 border-white font-semibold bg-white text-black hover:text-white rounded-md hover:border-cyan-800 hover:bg-cyan-800 py-1.5 px-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
            >
              با 5 گیگ فضای رایگان شروع کنید
            </a>
          </div>
          <img src={Shotdark} alt="پیش‌نمایش محیط کاربری درایو" className="max-w-7xl rounded-4xl shadow mx-auto w-full" />
        </section>

        {/* Features */}
        <section id="services" className="grid gap-16 pt-16 -mt-16 max-w-5xl w-full mx-auto">
          <h2 className="text-2xl text-center font-extrabold">مدیریت راحت‌تر و سریع‌تر فایل‌ها</h2>

          {/* ✅ wrapper that animates only on mobile */}
          <div
            className={cn("lg:p-0 px-6", isBelowMd ? "overflow-hidden transition-[max-height] duration-700 ease-in-out" : "")}
            style={
              isBelowMd
                ? {
                    maxHeight: showAllFeaturesMobile ? `${mobileFeaturesHeight}px` : `${mobileFeaturesHeight}px`, // computed from content
                  }
                : undefined
            }
          >
            <div ref={mobileFeaturesWrapRef} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-7">
              {visibleFeatures.map((f) => {
                const Icon = f.icon;
                return (
                  <div key={f.title} className="border shadow grid gap-2 sm:text-right text-center items-center min-h-40 border-black/5 p-6 rounded-3xl bg-white">
                    <div className="sm:flex items-center gap-2">
                      <Icon className="w-14 stroke-1 h-14 text-black sm:mx-0 mx-auto" />
                      <h3 className="text-lg font-semibold">{f.title}</h3>
                    </div>
                    <p className="font-medium text-black/60">{f.desc}</p>
                  </div>
                );
              })}
            </div>
          </div>

          {/* ✅ Show more button - only on mobile and only if > 8 */}
          {canToggleFeatures && (
            <div className="px-6 flex justify-center">
              <button
                type="button"
                onClick={() => setShowAllFeaturesMobile((s) => !s)}
                className="inline-flex items-center gap-2 px-5 py-2 rounded-2xl bg-white border border-black/10 shadow hover:bg-black/5 text-sm font-semibold"
                aria-expanded={showAllFeaturesMobile}
                aria-controls="features-grid"
              >
                {showAllFeaturesMobile ? (
                  <>
                    نمایش کمتر
                    <LuChevronUp className="w-5 h-5" />
                  </>
                ) : (
                  <>
                    نمایش بیشتر
                    <LuChevronDown className="w-5 h-5" />
                  </>
                )}
              </button>
            </div>
          )}
        </section>

        {/* ✅ Pricing */}
        <section id="pricing" className="grid gap-16 pt-20 -mt-16 max-w-5xl w-full px-6 mx-auto overflow-x-hidden">
          <PricingCarousel
            items={pricingItems}
            loading={plansLoading}
            errorText={plansError}
            billingCycle={billingCycle}
            setBillingCycle={setBillingCycle}
            planKind={planKind}
            setPlanKind={setPlanKind}
          />

          {!plansLoading && plansError && (
            <div className="flex justify-center">
              <button type="button" onClick={fetchPlans} className="px-5 py-2 rounded-xl shadow bg-white border border-black/10 hover:bg-black/5 text-sm font-semibold">
                تلاش مجدد
              </button>
            </div>
          )}
        </section>

        {/* About */}
        <section id="about" className="grid grid-cols-1 lg:grid-cols-2 gap-12 pt-20 -mt-16 mx-auto lg:gap-16 max-w-5xl w-full px-6">
          <div>
            <h2 className="text-2xl leading-10 font-extrabold">همه‌چیز، دقیقاً همون‌جایی که باید باشه</h2>

            <div className="mt-4 space-y-4 text-justify font-medium text-base sm:text-lg leading-8 sm:leading-9 text-black/60">
              <p>
                این پلتفرم با هدف ایجاد یک محیط منظم و قابل اعتماد برای مدیریت فایل‌ها طراحی شده است. در فضایی شفاف و بدون پیچیدگی، می‌توانید فایل‌ها و پوشه‌های خود را دسته‌بندی کنید، به‌سرعت به آن‌ها
                دسترسی داشته باشید و فرآیند اشتراک‌گذاری را با اطمینان کامل انجام دهید. تمرکز اصلی طراحی، بر سادگی، سرعت و تجربه‌ای روان برای کاربر بوده است.
              </p>
            </div>

            <a href="#services" className="inline-flex items-center justify-center bg-[#001F3F] text-white rounded-md font-semibold mt-10 py-2 px-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20">
              مشاهده امکانات
            </a>
          </div>

          <div className="flex gap-4 items-center">
            <a referrerpolicy="origin" className="w-1/2 rounded-2xl shadow-2xl overflow-hidden" target="_blank" href="https://trustseal.enamad.ir/?id=366285&Code=O2FWPNe7Wq32TFX5bLrs">
              <img
                referrerpolicy="origin"
                src="https://trustseal.enamad.ir/logo.aspx?id=366285&Code=O2FWPNe7Wq32TFX5bLrs"
                alt=""
                className="cursor-pointer w-full max-h-80 min-h-60 border-0"
                code="O2FWPNe7Wq32TFX5bLrs"
              />
            </a>
            <img
              referrerpolicy="origin"
              id="rgvjfukzsizpesgtnbqewlao"
              className="cursor-pointer w-1/2 max-h-80 min-h-60 border-0 rounded-2xl shadow-2xl"
              onclick='window.open("https://logo.samandehi.ir/Verify.aspx?id=369024&p=xlaogvkapfvlobpduiwkaods", "Popup","toolbar=no, scrollbars=no, location=no, statusbar=no, menubar=no, resizable=0, width=450, height=630, top=30")'
              alt="logo-samandehi"
              src="https://logo.samandehi.ir/logo.aspx?id=369024&p=qftiwlbqbsiylymaodrfshwl"
            />
          </div>
        </section>

        {/* Security */}
        <section id="security" className="back-imagei2 w-full -mt-16">
          <div className="bg-linear-to-b flex gap-5 pt-20 flex-wrap justify-center text-center from-white/60 via-transparent to-white/60 w-full py-20 px-6">
            <h2 className="text-2xl font-extrabold w-full">امنیت و حریم خصوصی اطلاعات</h2>

            <div className="w-full flex justify-center">
              <p className="text-base sm:text-lg font-medium max-w-[420px]">
                امنیت داده‌ها یکی از اصلی‌ترین اولویت‌های این پلتفرم است.
                <br />
                اطلاعات کاربران در بستری امن نگهداری می‌شود و دسترسی به فایل‌ها تنها بر اساس مجوزهای تعریف‌شده انجام می‌گیرد.
              </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl w-full mt-10 gap-6 sm:gap-10 lg:gap-20">
              {SECURITY_CARDS.map((c) => (
                <div key={c.title} className="border w-full shadow grid gap-2 bg-white items-center border-black/5 p-6 rounded-3xl">
                  <div className="grid justify-center gap-4">
                    <h3 className="text-lg font-semibold">{c.title}</h3>
                    <p className="font-medium text-black/60">{c.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Steps */}
        <section id="steps" className="grid gap-16 max-w-4xl w-full px-6 mx-auto">
          <div className="text-center w-full">
            <h2 className="text-2xl font-extrabold w-full">شروع استفاده در چند قدم ساده</h2>
          </div>

          <div className="hidden lg:flex w-full items-start justify-between">
            <div className="text-center grid gap-2">
              <img src={STEPS[0].nIcon} alt="" className="mx-auto h-28 w-28 -mb-2" />
              <h3 className="text-lg font-semibold">{STEPS[0].title}</h3>
              <p className="font-medium text-black/60">{STEPS[0].desc}</p>
            </div>

            <div className="-mx-5 mt-8">
              <img src={Line2} alt="" />
            </div>

            <div className="text-center grid gap-2">
              <img src={STEPS[1].nIcon} alt="" className="mx-auto h-28 w-28 -mb-2" />
              <h3 className="text-lg font-semibold">{STEPS[1].title}</h3>
              <p className="font-medium text-black/60">{STEPS[1].desc}</p>
            </div>

            <div className="-mx-5 mt-8">
              <img src={Line} alt="" />
            </div>

            <div className="text-center grid gap-2">
              <img src={STEPS[2].nIcon} alt="" className="mx-auto h-28 w-28 -mb-2" />
              <h3 className="text-lg font-semibold">{STEPS[2].title}</h3>
              <p className="font-medium text-black/60">{STEPS[2].desc}</p>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 lg:hidden">
            {[
              { ...STEPS[2], key: "s1" },
              { ...STEPS[1], key: "s2" },
              { ...STEPS[0], key: "s3" },
            ].map((s) => (
              <div key={s.key} className="text-center grid gap-2">
                <img src={s.nIcon} alt="" className="mx-auto h-28 w-28 -mb-2" />
                <h3 className="text-lg font-semibold">{s.title}</h3>
                <p className="font-medium text-black/60">{s.desc}</p>
              </div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section id="cta" className="grid gap-16 mx-auto w-full px-6">
          <div className="bg-[#001F3F] mx-auto w-full max-w-5xl text-white grid p-8 sm:p-10 gap-5 shadow rounded-4xl">
            <h2 className="text-2xl text-center font-extrabold">شروع استفاده از فضای ذخیره‌سازی امن</h2>
            <p className="text-base sm:text-lg text-center font-semibold">ثبت‌نام سریع و دسترسی فوری به محیط کار</p>
            <a href="auth" className="flex gap-1 items-center font-semibold mx-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 rounded">
              <HiArrowLongRight className="h-6 w-6" />
              <span>شروع رایگان</span>
            </a>
          </div>
        </section>

        <section id="contact" />
      </main>

      {/* Footer */}
      <footer className="bg-[#001F3F] text-white flex flex-wrap justify-center w-full pt-20 pb-8 px-6">
        <div className="max-w-5xl w-full grid grid-cols-1 md:grid-cols-5 gap-10">
          <div className="grid gap-4 md:col-span-2">
            <div className="flex items-center min-w-0 sm:min-w-52">
              <img src={Logo} alt="NET NEST logo" className="h-20 object-contain" />
              <div className="sm:block hidden">
                <h1 className="text-xl font-bold">NET NEST</h1>
                <p className="font-light">In Your Mind</p>
              </div>
            </div>

            <p className="font-semibold">فضای امن و ساده برای ذخیره‌سازی، مدیریت و اشتراک‌گذاری فایل‌ها طراحی‌شده برای استفاده سریع و بدون پیچیدگی.</p>

            <form onSubmit={(e) => e.preventDefault()} className="border-2 border-white rounded-full flex overflow-hidden" aria-label="عضویت در خبرنامه">
              <button type="submit" className="bg-white rounded-r-full w-14 flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-label="ارسال">
                <HiPaperAirplane className="h-6 w-6 text-[#001F3F]" />
              </button>

              <label className="sr-only" htmlFor="newsletterEmail">
                ایمیل شما
              </label>
              <input
                id="newsletterEmail"
                name="email"
                type="email"
                autoComplete="email"
                placeholder="ایمیل شما"
                className="h-14 rounded-l-full w-full outline-0 ring-0 p-4 text-lg text-white bg-transparent"
              />
            </form>
          </div>

          <div>
            <ul className="grid gap-3">
              <li className="text-lg font-semibold">لینک‌های مهم</li>
              {FOOTER_LINKS_1.map((l) => (
                <li key={l.label} className="font-medium">
                  <a href={l.href} className="hover:text-cyan-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 rounded">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <ul className="grid gap-3">
              <li className="text-lg font-semibold">خدمات</li>
              {FOOTER_LINKS_2.map((l) => (
                <li key={l.label} className="font-medium">
                  <a href={l.href} className="hover:text-cyan-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 rounded">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <ul className="grid gap-4">
              <li className="flex justify-end gap-2 items-center">
                <a href="mailto:info@netnest.com" className="hover:text-cyan-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 rounded">
                  info@netnest.com
                </a>
                <TbMail className="h-6 w-6" />
              </li>
              <li className="flex justify-end gap-2 items-center">
                <a href="tel:02191307595" className="hover:text-cyan-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 rounded">
                  02191307595
                </a>
                <TbPhone className="h-6 w-6" />
              </li>
            </ul>

            <div className="flex mt-5 justify-evenly">
              <a href="https://www.instagram.com/NetNest_org" className="bg-white text-[#001f3f] rounded-md p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-label="Instagram">
                <TbBrandInstagram className="h-6 w-6" />
              </a>
              <a href="https://wa.me/02191307595" className="bg-white text-[#001f3f] rounded-md p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-label="WhatsApp">
                <TbBrandWhatsapp className="h-6 w-6" />
              </a>
              <a href="https://t.me/NetNest_org" className="bg-white text-[#001f3f] rounded-md p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-label="Telegram">
                <TbBrandTelegram className="h-6 w-6" />
              </a>
            </div>
          </div>
        </div>

        <hr className="w-full my-8 border-white/30" />

        <div className="text-center font-semibold w-full flex justify-center">
          <p className="flex leading-4">
            طراحی شده با <img src={Heart} alt="Heart" className="w-5 h-5 mx-1" /> برای مردم <img src={Iran} alt="iran" className="w-5 h-5 mx-1" />
          </p>
        </div>
      </footer>
    </div>
  );
}

export default Landing;
