لندینگِ انرژیِ خورشیدی

"use client";

import {
  ArrowUpIcon,
  BoltIcon,
  CheckIcon,
  ShieldCheckIcon,
  SunIcon,
  UsersIcon,
} from "@/components/icons";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Avatar, AvatarGroup } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { ControlSizeProvider } from "@/components/ui/control-size";
import { CountUp } from "@/components/ui/count-up";
import { Reveal } from "@/components/ui/reveal";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { formatNumber, toFaDigits } from "@/lib/persian";
import { cn } from "@/lib/utils";
import { stockImages } from "@/lib/stock-images";

const PARTNERS = [
  "آفتابگردان",
  "نیرو پارس",
  "سپهر انرژی",
  "دشتِ نور",
  "بادران",
];
const PACKAGES = [
  {
    name: "خانگیِ پایه",
    text: "برای آپارتمان و خانهٔ کوچک",
    from: 180,
    to: 250,
    power: "۳ کیلووات",
    battery: false,
    featured: false,
  },
  {
    name: "خانگیِ کامل",
    text: "خانهٔ ویلایی با مصرفِ بالا",
    from: 320,
    to: 450,
    power: "۶ کیلووات",
    battery: true,
    featured: true,
  },
  {
    name: "تجاری و باتری",
    text: "کارگاه، فروشگاه و ساختمانِ اداری",
    from: 650,
    to: 1200,
    power: "۱۵ کیلووات",
    battery: true,
    featured: false,
  },
];
const ROWS: { label: string; values: (string | boolean)[] }[] = [
  { label: "توانِ سامانه", values: ["۳ کیلووات", "۶ کیلووات", "۱۵ کیلووات"] },
  { label: "باتریِ ذخیره", values: [false, true, true] },
  { label: "پایش در اپ", values: [true, true, true] },
  { label: "گارانتیِ پنل", values: ["۱۵ سال", "۲۵ سال", "۲۵ سال"] },
  {
    label: "بازدیدِ دوره‌ای",
    values: ["سالی یک بار", "سالی دو بار", "هر فصل"],
  },
];
const FAQ = [
  {
    q: "نصب چقدر طول می‌کشد؟",
    a: "برای خانه معمولاً یک روز. مجوزها پیش از روزِ نصب آماده می‌شود و برق فقط چند ساعت قطع است.",
  },
  {
    q: "در روزهای ابری هم برق تولید می‌شود؟",
    a: "بله، کمتر. با باتری، برقِ روزهای آفتابی برای روزهای ابری و شب ذخیره می‌ماند.",
  },
  {
    q: "می‌توانم برقِ اضافه را بفروشم؟",
    a: "بله. قراردادِ خریدِ تضمینی با توزیعِ برق را خودمان برایتان پیگیری می‌کنیم.",
  },
  {
    q: "اقساطی هم می‌شود پرداخت کرد؟",
    a: "بله، تا ۲۴ قسط بدونِ ضامن برای بسته‌های خانگی.",
  },
];

/**
 * لندینگِ شرکتِ انرژیِ خورشیدی، آبی و روشن: هیرو روی عکسِ مزرعهٔ توربین‌های بادی با سایهٔ
 * آبی و کارتِ شناورِ خانواده‌ها، ردیفِ همکاران، بنتوی ویژگی با کارتِ آبیِ ٪۳۰،
 * پروژهٔ شاخص روی آبیِ تمام‌عرض، بسته‌ها با جدولِ مقایسه، پرسش‌های پرتکرار و فراخوانِ پایانی.
 */
export default function LandingEnergyBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex w-full flex-col">
        {/* هیرو */}
        <section className="relative isolate overflow-hidden bg-[var(--dig-blue-700)] px-4 pt-6 pb-16 text-[var(--dig-white)] sm:px-6">
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img
            src={stockImages.windFarmField.src}
            alt=""
            className="absolute inset-0 -z-20 size-full object-cover"
          />
          <span
            aria-hidden
            className="absolute inset-0 -z-10 bg-[linear-gradient(180deg,color-mix(in_oklab,var(--dig-blue-900)_75%,transparent),color-mix(in_oklab,var(--dig-blue-700)_35%,transparent)_55%,transparent)]"
          />
          <nav
            aria-label="منوی اصلی"
            className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 rounded-full bg-[color-mix(in_oklab,var(--dig-white)_14%,transparent)] p-2 ps-5 backdrop-blur-md"
          >
            <span className="flex items-center gap-2 font-black">
              <SunIcon aria-hidden className="size-5" />
              نورسان
            </span>
            <ul className="hidden items-center gap-1 text-sm md:flex">
              {["خانه", "درباره ما", "خدمات", "پروژه‌ها"].map((item, index) => (
                <li key={item}>
                  <a
                    href="#"
                    className={cn(
                      "rounded-full px-4 py-2",
                      index === 0
                        ? "bg-[var(--dig-white)] text-[var(--dig-blue-800)]"
                        : "hover:bg-[color-mix(in_oklab,var(--dig-white)_16%,transparent)]",
                    )}
                  >
                    {item}
                  </a>
                </li>
              ))}
            </ul>
            <Button
              radius="full"
              className="[--primary-foreground:var(--dig-blue-800)] [--primary:var(--dig-white)]"
            >
              تماس با ما
            </Button>
          </nav>
          <div className="mx-auto flex min-h-[32rem] w-full max-w-6xl flex-col justify-between gap-10 pt-16">
            <div className="flex max-w-xl flex-col items-start gap-5">
              <span className="rounded-full bg-[color-mix(in_oklab,var(--dig-white)_18%,transparent)] px-3 py-1 text-sm backdrop-blur-sm">
                انرژیِ پاک و ارزان برای هر خانه
              </span>
              <h1 className="text-4xl leading-tight font-black text-balance sm:text-6xl sm:leading-tight">
                انرژی‌ای که نفس می‌کشد
              </h1>
              <p className="max-w-md text-lg leading-8 text-[var(--dig-blue-50)]">
                پنلِ خورشیدی و باتری، طراحی‌شده برای بامِ شما؛ قبضِ برق تا ٪۷۰
                کمتر از همان ماهِ اول.
              </p>
              <Button
                radius="full"
                className="[--primary-foreground:var(--dig-white)] [--primary:var(--dig-graphite-950)]"
              >
                مشاورهٔ رایگان
                <ArrowUpIcon aria-hidden className="-rotate-45" />
              </Button>
            </div>
            <div className="flex w-fit items-center gap-3 self-end rounded-xl bg-card p-3 pe-5 text-foreground shadow-xl">
              {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
              <img
                src={stockImages.solarInstaller.src}
                alt=""
                className="size-16 rounded-lg object-cover"
              />
              <div className="flex flex-col gap-1">
                <span className="flex items-center gap-2">
                  <AvatarGroup max={3} size="sm">
                    <Avatar src={stockImages.personWoman1.src} alt="" />
                    <Avatar src={stockImages.personMan1.src} alt="" />
                    <Avatar src={stockImages.personWoman3.src} alt="" />
                  </AvatarGroup>
                  <span className="text-xl font-black tabular-nums">
                    +<CountUp value={300} />
                  </span>
                </span>
                <span className="max-w-44 text-xs leading-5 text-muted-foreground">
                  خانواده با نورسان برقِ خودشان را می‌سازند.
                </span>
              </div>
            </div>
          </div>
        </section>

        <ul
          aria-label="همکاران"
          className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center gap-x-12 gap-y-4 px-4 py-10 text-muted-foreground sm:justify-between sm:px-6"
        >
          {PARTNERS.map((name) => (
            <li
              key={name}
              className="flex items-center gap-2 text-lg font-black"
            >
              <BoltIcon aria-hidden className="size-5" />
              {name}
            </li>
          ))}
        </ul>

        {/* بنتوی ویژگی‌ها */}
        <section
          aria-labelledby="le-features"
          className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-20 sm:px-6"
        >
          <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
            <span className="text-sm text-muted-foreground">• ویژگی‌ها</span>
            <h2
              id="le-features"
              className="max-w-lg text-3xl leading-snug font-black sm:text-4xl"
            >
              فناوریِ هوشمند،{" "}
              <span className="text-muted-foreground">طراحیِ سفارشی</span>
            </h2>
          </div>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_1fr_1.1fr]">
            <Reveal className="flex flex-col justify-between gap-10 rounded-xl bg-subtle p-6">
              <div className="flex items-start justify-between gap-4">
                <h3 className="text-lg font-bold">پنلِ عمرطولانی</h3>
                <span
                  aria-hidden
                  className="flex size-10 items-center justify-center rounded-full bg-card"
                >
                  <ShieldCheckIcon className="size-5" />
                </span>
              </div>
              <p className="text-sm leading-6 text-muted-foreground">
                سلول‌های تک‌کریستالِ ردهٔ یک با افتِ توانِ کمتر از نیم درصد در
                سال.
              </p>
              <span className="flex items-baseline gap-2">
                <span className="text-5xl font-black tabular-nums">۲۵</span>
                <span className="text-sm text-muted-foreground">
                  سال گارانتیِ تولید
                </span>
              </span>
            </Reveal>
            <Reveal
              delay={100}
              className="relative min-h-72 overflow-hidden rounded-xl"
            >
              {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
              <img
                src={stockImages.solarPanelsSky.src}
                alt=""
                className="absolute inset-0 size-full object-cover"
              />
              <div className="absolute inset-0 flex flex-col justify-between bg-linear-to-b from-[var(--dig-blue-900)] to-transparent p-6 text-[var(--dig-white)]">
                <div className="flex flex-col gap-2">
                  <h3 className="text-lg font-bold">نصبِ بهینه</h3>
                  <p className="max-w-56 text-sm leading-6 text-[var(--dig-blue-50)]">
                    زاویه و جهتِ هر پنل با نقشهٔ سایه‌ی بام محاسبه می‌شود.
                  </p>
                </div>
                <span className="w-fit rounded-full bg-card px-3 py-1.5 text-sm font-semibold text-foreground">
                  ۲۰ سال کارکردِ تضمینی
                </span>
              </div>
            </Reveal>
            <Reveal
              delay={200}
              className="flex flex-col justify-between gap-6 rounded-xl bg-[var(--dig-blue-600)] p-6 text-[var(--dig-white)]"
            >
              <div className="flex flex-col gap-2">
                <span className="text-6xl font-black tabular-nums">
                  ٪<CountUp value={30} />
                </span>
                <p className="max-w-56 text-sm leading-6 text-[var(--dig-blue-50)]">
                  بهره‌وریِ بیشتر از سامانه‌های معمولی با ردیابِ نورِ روزانه.
                </p>
              </div>
              <div aria-hidden className="flex h-32 items-end gap-3">
                {[38, 52, 46, 70, 64, 92].map((value, index) => (
                  <span
                    key={index}
                    className={cn(
                      "flex-1 rounded-md",
                      index === 5
                        ? "bg-[var(--dig-white)]"
                        : "bg-[var(--dig-blue-400)]",
                    )}
                    style={{ height: `${value}%` }}
                  />
                ))}
              </div>
            </Reveal>
          </div>
        </section>

        {/* پروژهٔ شاخص */}
        <section
          aria-labelledby="le-project"
          className="relative isolate overflow-hidden bg-[var(--dig-blue-800)] px-4 py-24 text-[var(--dig-white)] sm:px-6"
        >
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img
            src={stockImages.solarRoofHouses.src}
            alt=""
            className="absolute inset-0 -z-20 size-full object-cover"
          />
          <span
            aria-hidden
            className="absolute inset-0 -z-10 bg-[linear-gradient(270deg,color-mix(in_oklab,var(--dig-blue-900)_85%,transparent),color-mix(in_oklab,var(--dig-blue-800)_30%,transparent))]"
          />
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
            <span className="flex w-fit items-center gap-2 rounded-full bg-[color-mix(in_oklab,var(--dig-white)_16%,transparent)] px-3 py-1 text-sm">
              <span className="rounded-full bg-[var(--dig-white)] px-2 text-[var(--dig-blue-800)]">
                پروژه
              </span>
              نیروگاهِ خانگیِ اصفهان
            </span>
            <h2
              id="le-project"
              className="max-w-xl text-3xl leading-snug font-black text-balance sm:text-5xl sm:leading-tight"
            >
              ۱۲ کیلووات روی یک بام؛ صفر تومان قبضِ برق
            </h2>
            <dl className="mt-10 grid max-w-xl grid-cols-3 gap-6 border-t border-[color-mix(in_oklab,var(--dig-white)_25%,transparent)] pt-6">
              {[
                ["۱۴۰۴", "سالِ نصب"],
                ["۳۶ پنل", "و دو باتری"],
                ["۴٫۲ سال", "بازگشتِ سرمایه"],
              ].map(([value, label]) => (
                <div key={label} className="flex flex-col gap-1">
                  <dt className="order-2 text-sm text-[var(--dig-blue-50)]">
                    {label}
                  </dt>
                  <dd className="order-1 text-xl font-black">{value}</dd>
                </div>
              ))}
            </dl>
          </div>
        </section>

        {/* بسته‌ها */}
        <section
          aria-labelledby="le-pricing"
          className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-24 sm:px-6"
        >
          <div className="mx-auto flex max-w-xl flex-col items-center gap-3 text-center">
            <span className="text-sm text-muted-foreground">• بسته‌ها</span>
            <h2
              id="le-pricing"
              className="text-3xl leading-snug font-black sm:text-4xl"
            >
              بسته‌هایی برای خانه و کسب‌وکار
            </h2>
            <p className="text-muted-foreground">
              بسته‌ای را انتخاب کنید که با مصرفِ شما جور است.
            </p>
          </div>
          <Table className="min-w-[44rem] border-separate border-spacing-x-3">
            <TableCaption className="sr-only">مقایسهٔ بسته‌ها</TableCaption>
            <TableHeader className="bg-transparent">
              <TableRow className="border-0">
                <TableHead
                  scope="col"
                  className="h-auto w-48 px-0 align-bottom text-base font-bold text-foreground"
                >
                  امکانات
                </TableHead>
                {PACKAGES.map((item) => (
                  <TableHead
                    key={item.name}
                    scope="col"
                    className={cn(
                      "h-auto rounded-t-xl p-5 align-top font-normal whitespace-normal",
                      item.featured
                        ? "bg-[var(--dig-blue-600)] text-[var(--dig-white)]"
                        : "bg-subtle",
                    )}
                  >
                    <span className="block text-base font-bold">
                      {item.name}
                    </span>
                    <span
                      className={cn(
                        "block text-xs",
                        item.featured
                          ? "text-[var(--dig-blue-50)]"
                          : "text-muted-foreground",
                      )}
                    >
                      {item.text}
                    </span>
                    <span className="mt-4 block text-xl font-black tabular-nums">
                      {formatNumber(item.from)} تا {formatNumber(item.to)} م
                    </span>
                    <Button
                      size="sm"
                      fullWidth
                      className={cn(
                        "mt-4",
                        item.featured &&
                          "[--primary-foreground:var(--dig-blue-800)] [--primary:var(--dig-white)]",
                      )}
                    >
                      انتخابِ بسته
                    </Button>
                  </TableHead>
                ))}
              </TableRow>
            </TableHeader>
            <TableBody>
              {ROWS.map((row, rowIndex) => (
                <TableRow
                  key={row.label}
                  className="border-0 hover:bg-transparent"
                >
                  <TableCell className="border-b border-border px-0 py-4 font-medium text-muted-foreground">
                    {row.label}
                  </TableCell>
                  {row.values.map((value, index) => (
                    <TableCell
                      key={index}
                      className={cn(
                        "border-b border-border px-5 py-4",
                        PACKAGES[index].featured &&
                          "bg-[var(--dig-blue-50)] dark:bg-[var(--dig-blue-950)]",
                        PACKAGES[index].featured &&
                          rowIndex === ROWS.length - 1 &&
                          "rounded-b-xl",
                      )}
                    >
                      {typeof value === "boolean" ? (
                        value ? (
                          <span className="flex size-6 items-center justify-center rounded-full bg-[var(--dig-blue-600)] text-[var(--dig-white)]">
                            <CheckIcon aria-label="دارد" className="size-4" />
                          </span>
                        ) : (
                          <span className="text-muted-foreground">ندارد</span>
                        )
                      ) : (
                        value
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </section>

        {/* پرسش‌ها */}
        <section
          aria-labelledby="le-faq"
          className="bg-subtle px-4 py-24 sm:px-6"
        >
          <div className="mx-auto flex w-full max-w-3xl flex-col gap-10">
            <div className="flex flex-col items-center gap-3 text-center">
              <span className="text-sm text-muted-foreground">• پرسش‌ها</span>
              <h2 id="le-faq" className="text-3xl font-black sm:text-4xl">
                پیش از خورشیدی‌شدن
              </h2>
            </div>
            <Accordion
              type="single"
              collapsible
              defaultValue="0"
              variant="splitted"
            >
              {FAQ.map((item, index) => (
                <AccordionItem key={item.q} value={String(index)}>
                  <AccordionTrigger>{item.q}</AccordionTrigger>
                  <AccordionContent>{item.a}</AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </section>

        {/* فراخوان */}
        <section className="px-4 py-16 sm:px-6">
          <div className="relative isolate mx-auto flex w-full max-w-6xl flex-col items-center gap-6 overflow-hidden rounded-xl bg-[linear-gradient(180deg,var(--dig-blue-700),var(--dig-blue-500))] px-6 py-20 text-center text-[var(--dig-white)]">
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img
              src={stockImages.windTurbines.src}
              alt=""
              className="absolute inset-0 -z-20 size-full object-cover"
            />
            <span
              aria-hidden
              className="absolute inset-0 -z-10 bg-[color-mix(in_oklab,var(--dig-blue-800)_55%,transparent)]"
            />
            <h2 className="max-w-lg text-3xl leading-snug font-black text-balance sm:text-5xl sm:leading-tight">
              آماده‌اید برقتان را خودتان بسازید؟
            </h2>
            <p className="max-w-md text-[var(--dig-blue-50)]">
              بازدید و طراحیِ اولیه رایگان است؛ فقط یک قبضِ اخیر لازم داریم.
            </p>
            <div className="flex flex-wrap justify-center gap-3">
              <Button
                radius="full"
                className="[--primary-foreground:var(--dig-blue-800)] [--primary:var(--dig-white)]"
              >
                <UsersIcon />
                رزروِ بازدید
              </Button>
              <Button
                radius="full"
                variant="outline"
                className="border-[var(--dig-blue-300)] bg-transparent text-[var(--dig-white)] hover:bg-[var(--dig-blue-600)]"
              >
                {toFaDigits("021-9100")} تماس
              </Button>
            </div>
          </div>
        </section>
      </main>
    </ControlSizeProvider>
  );
}