"use client";

import { ArrowRight, Check, CupSoda, Share2, Globe, Linkedin, Facebook, Github, Instagram, Lock } from "lucide-react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { useApp } from "@/components/app-context";
import { Logo } from "@/components/site-header";
import { toast } from "@/hooks/use-toast";
import { bn } from "@/components/sections/landing";
import type { LText } from "@/lib/i18n";

function FeatureRow({
  heading, body, bullets, cta, onCta, flip, art,
}: {
  heading: string;
  body: string;
  bullets: string[];
  cta: string;
  onCta: () => void;
  flip?: boolean;
  art: React.ReactNode;
}) {
  return (
    <div className={`mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 ${flip ? "" : ""}`}>
      <div className={`${flip ? "lg:order-2" : ""}`}>{art}</div>
      <div className={`${flip ? "lg:order-1" : ""}`}>
        <h3 className="text-[26px] font-extrabold leading-tight tracking-tight text-zinc-950 dark:text-white sm:text-[32px]">{heading}</h3>
        <p className="mt-4 text-[15.5px] leading-7 text-zinc-600 dark:text-zinc-300">{body}</p>
        <ul className="mt-5 space-y-2.5">
          {bullets.map((b, i) => (
            <li key={i} className="flex items-start gap-2.5 text-[14.5px] font-medium text-zinc-700 dark:text-zinc-200">
              <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#0b8a47]" />
              {b}
            </li>
          ))}
        </ul>
        <button
          onClick={onCta}
          className="mt-7 inline-flex h-11 items-center gap-2 rounded-xl bg-[#0b7a43] px-6 text-[15px] font-bold text-white shadow-md shadow-emerald-700/20 transition-all hover:bg-[#096c3b] active:scale-[0.98]"
        >
          {cta}
          <ArrowRight className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}

const Dots = ({ className }: { className?: string }) => (
  <div className={`absolute inset-0 opacity-[0.35] ${className ?? ""}`} style={{ backgroundImage: "radial-gradient(rgba(0,0,0,0.16) 1px, transparent 1px)", backgroundSize: "14px 14px" }} />
);

export function FeatureSections({ onOpenTool }: { onOpenTool: (id: string) => void }) {
  const { T } = useApp();
  return (
    <div className="mx-auto max-w-7xl space-y-20 px-4 py-16 sm:px-6">
      <FeatureRow
        heading={T("f1h")}
        body={T("f1p")}
        bullets={[T("f1b1"), T("f1b2"), T("f1b3"), T("f1b4")]}
        cta={T("f1cta")}
        onCta={() => onOpenTool("edit-pdf")}
        art={
          <div className="relative mx-auto max-w-lg rounded-3xl bg-white p-4 shadow-[0_24px_60px_-20px_rgba(190,40,80,0.25)] ring-1 ring-black/5 dark:bg-[#12201a] dark:ring-white/10">
            <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-rose-100 via-rose-50 to-white p-6 dark:from-rose-500/10 dark:via-transparent dark:to-transparent">
              <Dots />
              <span className="absolute right-4 top-4 z-10 inline-flex items-center gap-1.5 rounded-full bg-rose-600 px-3.5 py-1.5 text-[13px] font-bold text-white shadow-lg">
                <Check className="h-3.5 w-3.5" /> {T("mockOriginalKept")}
              </span>
              <div className="relative rounded-xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-[#182b22]">
                <div className="flex items-center gap-1.5 border-b border-zinc-100 px-4 py-2.5 dark:border-white/10">
                  <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" /><span className="h-2.5 w-2.5 rounded-full bg-zinc-300" /><span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
                  <span className="ml-2 text-[12px] font-semibold text-zinc-600 dark:text-zinc-300">Invoice-2041.pdf</span>
                </div>
                <div className="flex gap-1.5 px-3 pt-3">
                  {["Text", "Image", "Shape", "Sign"].map((x, i) => (
                    <span key={x} className={`rounded-full px-3 py-1 text-[11.5px] font-bold ${i === 0 ? "bg-rose-600 text-white" : "bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-300"}`}>{x}</span>
                  ))}
                </div>
                <div className="flex gap-3 p-3">
                  <div className="flex-1 rounded-lg border border-zinc-100 p-3 dark:border-white/10">
                    <div className="text-[15px] font-extrabold text-zinc-800 dark:text-zinc-100">Invoice 2041</div>
                    <div className="mt-2 h-1.5 w-full rounded bg-zinc-200 dark:bg-white/10" />
                    <div className="mt-1.5 h-1.5 w-5/6 rounded bg-zinc-200 dark:bg-white/10" />
                    <div className="relative mt-3 rounded-md border-2 border-rose-400 bg-rose-50 px-2 py-1.5 text-[13px] font-bold text-rose-700">
                      Total due: $1,240.00
                      <span className="absolute -left-1 -top-1 h-2 w-2 rounded-sm border border-rose-400 bg-white" />
                      <span className="absolute -bottom-1 -left-1 h-2 w-2 rounded-sm border border-rose-400 bg-white" />
                      <span className="absolute -right-1 -top-1 h-2 w-2 rounded-sm border border-rose-400 bg-white" />
                    </div>
                    <div className="mt-3 h-1.5 w-2/3 rounded bg-zinc-200 dark:bg-white/10" />
                  </div>
                  <div className="hidden w-24 rounded-lg border border-zinc-100 p-2.5 sm:block dark:border-white/10">
                    <div className="text-[10px] font-bold text-zinc-400">Font</div>
                    <div className="text-[12px] font-extrabold text-zinc-800 dark:text-zinc-100">Inter</div>
                    <div className="mt-1.5 text-[10px] font-bold text-zinc-400">Size</div>
                    <div className="text-[12px] font-extrabold text-zinc-800 dark:text-zinc-100">12 pt</div>
                    <div className="mt-1.5 text-[10px] font-bold text-zinc-400">Colour</div>
                    <div className="flex items-center gap-1 text-[12px] font-extrabold text-zinc-800 dark:text-zinc-100"><span className="h-3 w-3 rounded-sm bg-[#1F2937]" /> #1F2937</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }
      />

      <FeatureRow
        flip
        heading={T("f2h")}
        body={T("f2p")}
        bullets={[T("f2b1"), T("f2b2"), T("f2b3"), T("f2b4")]}
        cta={T("f2cta")}
        onCta={() => onOpenTool("compress-pdf")}
        art={
          <div className="relative mx-auto max-w-lg rounded-3xl bg-white p-4 shadow-[0_24px_60px_-20px_rgba(16,120,74,0.25)] ring-1 ring-black/5 dark:bg-[#12201a] dark:ring-white/10">
            <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-100 via-emerald-50 to-white p-6 dark:from-emerald-500/10 dark:via-transparent dark:to-transparent">
              <Dots />
              <span className="absolute right-4 top-4 z-10 inline-flex items-center gap-1.5 rounded-full bg-emerald-700 px-3.5 py-1.5 text-[13px] font-bold text-white shadow-lg">
                <ShieldIc /> {T("mockPrivate")}
              </span>
              <div className="relative rounded-xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-[#182b22]">
                <div className="flex items-center gap-2 border-b border-zinc-100 px-4 py-2.5 dark:border-white/10">
                  <span className="h-2.5 w-2.5 rounded-full bg-zinc-300" /><span className="h-2.5 w-2.5 rounded-full bg-zinc-300" /><span className="h-2.5 w-2.5 rounded-full bg-zinc-300" />
                  <span className="ml-2 flex flex-1 items-center gap-1.5 rounded-full bg-zinc-100 px-3 py-1 text-[12px] font-medium text-zinc-600 dark:bg-white/10 dark:text-zinc-300">
                    <Lock className="h-3 w-3" /> https://markpdf
                  </span>
                </div>
                <div className="p-4">
                  <div className="flex items-center gap-3 rounded-lg border border-zinc-100 p-3 dark:border-white/10">
                    <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-600"><FileMini /></span>
                    <div>
                      <div className="text-[13.5px] font-bold text-zinc-800 dark:text-zinc-100">contract.pdf</div>
                      <div className="text-[11.5px] text-zinc-400">2.1 MB · 8 pages</div>
                    </div>
                    <span className="ml-auto rounded-full bg-emerald-50 px-2.5 py-1 text-[10.5px] font-bold text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">100% local</span>
                  </div>
                  <div className="mt-3 rounded-lg border border-dashed border-zinc-200 p-3 text-center text-[12px] font-medium text-zinc-400 dark:border-white/15">
                    ⌁ processed in your browser
                  </div>
                </div>
              </div>
            </div>
          </div>
        }
      />

      <FeatureRow
        heading={T("f3h")}
        body={T("f3p")}
        bullets={[T("f3b1"), T("f3b2"), T("f3b3")]}
        cta={T("f3cta")}
        onCta={() => onOpenTool("compress-image")}
        art={
          <div className="relative mx-auto max-w-lg rounded-3xl bg-white p-4 shadow-[0_24px_60px_-20px_rgba(30,80,160,0.22)] ring-1 ring-black/5 dark:bg-[#12201a] dark:ring-white/10">
            <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-sky-100 via-sky-50 to-white p-6 dark:from-sky-500/10 dark:via-transparent dark:to-transparent">
              <Dots />
              <span className="absolute left-4 top-4 z-10 rounded-full bg-sky-700 px-3.5 py-1.5 text-[13px] font-bold text-white shadow-lg">{T("mockAnyDevice")}</span>
              <div className="relative mx-auto mt-4 w-[78%] rounded-lg border-[3px] border-zinc-800 bg-white shadow-xl dark:border-zinc-100 dark:bg-[#182b22]">
                <div className="px-4 py-3">
                  <div className="text-[15px] font-extrabold text-zinc-900 dark:text-white">Compress PDF</div>
                  <div className="mt-1 text-[13px] font-semibold text-zinc-500">8.2 MB → <span className="font-extrabold text-sky-700 dark:text-sky-400">1.4 MB</span></div>
                  <div className="mt-2 h-1.5 w-full rounded-full bg-zinc-100 dark:bg-white/10">
                    <div className="h-1.5 w-[83%] rounded-full bg-sky-700 dark:bg-sky-400" />
                  </div>
                </div>
              </div>
              <div className="absolute bottom-6 right-5 w-24 rounded-xl border-[3px] border-zinc-800 bg-white p-2 shadow-xl dark:border-zinc-100 dark:bg-[#182b22] sm:w-28">
                <div className="text-[11px] font-extrabold text-zinc-900 dark:text-white">Compress PDF</div>
                <div className="text-[10px] font-semibold text-zinc-500">8.2 MB → <span className="text-sky-700 dark:text-sky-400">1.4 MB</span></div>
                <div className="mt-1 h-1 w-full rounded-full bg-zinc-100 dark:bg-white/10"><div className="h-1 w-[83%] rounded-full bg-sky-700 dark:bg-sky-400" /></div>
              </div>
              <span className="absolute bottom-4 left-5 rounded-lg bg-white px-3 py-1.5 text-[12px] font-bold text-zinc-700 shadow dark:bg-white/10 dark:text-zinc-200">Windows · macOS · Linux</span>
            </div>
            <p className="mt-3 text-center text-[12.5px] text-zinc-500 dark:text-zinc-400">{T("mockLaptopPhone")}</p>
          </div>
        }
      />
    </div>
  );
}

function ShieldIc() {
  return <span className="text-[13px]">🛡</span>;
}
function FileMini() {
  return <span className="text-[13px] font-black text-white">▦</span>;
}

/* ---------------- What is + popular jobs ---------------- */
export function WhatIs({ onOpenTool }: { onOpenTool: (id: string) => void }) {
  const { T, lang } = useApp();
  const jobs: { label: LText; id: string }[] = [
    { label: { en: "Edit text in a PDF online", bn: "অনলাইনে পিডিএফের টেক্সট সম্পাদনা" }, id: "edit-pdf" },
    { label: { en: "Merge PDF files into one", bn: "একাধিক পিডিএফ এক ফাইলে" }, id: "merge-pdf" },
    { label: { en: "Compress a PDF to a smaller size", bn: "পিডিএফ ছোট সাইজে আনুন" }, id: "compress-pdf" },
    { label: { en: "Convert PDF to Word", bn: "PDF থেকে Word-এ বদলান" }, id: "pdf-to-word" },
    { label: { en: "Turn JPG photos into a PDF", bn: "JPG ছবি দিয়ে পিডিএফ" }, id: "jpg-to-pdf" },
    { label: { en: "Save PDF pages as JPG images", bn: "পিডিএফ পেজ JPG ছবিতে" }, id: "pdf-to-jpg" },
    { label: { en: "Split a PDF into separate files", bn: "পিডিএফ আলাদা ফাইলে ভাগ" }, id: "split-pdf" },
    { label: { en: "Sign a PDF on your phone", bn: "ফোনেই পিডিএফে সই" }, id: "sign-pdf" },
    { label: { en: "Make a scanned PDF searchable (OCR)", bn: "স্ক্যান করা পিডিএফ সার্চেবল করুন" }, id: "pdf-to-text" },
    { label: { en: "Convert PDF pages to Markdown", bn: "PDF পেজ Markdown-এ" }, id: "pdf-to-markdown" },
    { label: { en: "Resize an image online", bn: "অনলাইনে ছবির মাপ বদল" }, id: "resize-image" },
    { label: { en: "Compress images without losing quality", bn: "মান ঠিক রেখে ছবি ছোট করুন" }, id: "compress-image" },
  ];
  return (
    <section className="mx-auto max-w-5xl px-4 pb-6 sm:px-6">
      <div className="rounded-3xl bg-white p-7 shadow-[0_12px_48px_-18px_rgba(15,80,50,0.18)] ring-1 ring-black/5 dark:bg-[#12201a] dark:ring-white/10 sm:p-10">
        <h2 className="text-[24px] font-extrabold tracking-tight text-zinc-950 dark:text-white sm:text-[28px]">{T("whatTitle")}</h2>
        <p className="mt-4 text-[15px] leading-7 text-zinc-600 dark:text-zinc-300">{T("whatP1")}</p>
        <p className="mt-3 text-[15px] leading-7 text-zinc-600 dark:text-zinc-300">{T("whatP2")}</p>
        <h3 className="mt-7 text-[17px] font-extrabold text-zinc-900 dark:text-white">{T("popularJobs")}</h3>
        <div className="mt-3 grid gap-x-8 gap-y-1 sm:grid-cols-2 lg:grid-cols-3">
          {jobs.map((j, i) => (
            <button key={i} onClick={() => onOpenTool(j.id)} className="group flex items-center gap-1.5 rounded-md py-1.5 text-left text-[14px] font-semibold text-emerald-800 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-300">
              <span className="truncate underline-offset-4 group-hover:underline">{j.label[lang]}</span>
              <ArrowRight className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
export function FaqSection() {
  const { T, lang } = useApp();
  const faqs: { q: LText; a: LText }[] = [
    {
      q: { en: "Is FileDeck really free?", bn: "FileDeck কি সত্যিই ফ্রি?" },
      a: { en: "Yes. Every tool is free with no sign-up, no watermark and no limit on how many files you process or how many edits you make. The site is supported by voluntary donations.", bn: "হ্যাঁ। প্রতিটি টুল ফ্রি — সাইন-আপ নেই, ওয়াটারমার্ক নেই, কত ফাইল প্রসেস বা কত এডিট করবেন তারও সীমা নেই। সাইট চলে স্বেচ্ছায় দেওয়া ডোনেশনে।" },
    },
    {
      q: { en: "Are my files uploaded to a server?", bn: "আমার ফাইল কি সার্ভারে যায়?" },
      a: { en: "Almost every tool runs inside your browser, so the file never leaves your device. The exceptions are the AI tools (AI Write, Summarize and Translate), which send the text you enter to an AI provider, and they tell you so before you run them.", bn: "প্রায় প্রতিটি টুল আপনার ব্রাউজারেই চলে, তাই ফাইল কখনো ডিভাইস ছাড়ে না। শুধু এআই টুলগুলো (এআই রাইট, সামারি ও অনুবাদ) আপনার দেওয়া লেখা এআই প্রোভাইডারের কাছে পাঠায় — আর সেটা চালানোর আগেই জানিয়ে দেওয়া হয়।" },
    },
    {
      q: { en: "Can I edit the text that is already in my PDF?", bn: "পিডিএফে আগে থেকে থাকা টেক্সট কি বদলানো যায়?" },
      a: { en: "Yes. Open Edit PDF, click any line of text, picture or shape and change it. The original font, size, colour and position are kept, and the old content is removed from the file rather than just covered up. Scanned pages are pictures, so run OCR first to make their text editable.", bn: "হ্যাঁ। Edit PDF খুলে যেকোনো লাইন, ছবি বা শেপে ক্লিক করে বদলে দিন। মূল ফন্ট, সাইজ, রঙ ও অবস্থান অক্ষত থাকে, আর পুরনো অংশ ঢেকে রাখা না হয়ে ফাইল থেকেই সরে যায়। স্ক্যান করা পেজ আসলে ছবি — টেক্সট এডিট করতে আগে OCR দরকার।" },
    },
    {
      q: { en: "Does it work with Bengali PDFs?", bn: "বাংলা পিডিএফে কি কাজ করে?" },
      a: { en: "Yes. Bengali text is shaped correctly when you add it to a PDF, and PDF to Markdown pulls out proper Unicode Bengali text. Some very old PDFs use non-Unicode legacy fonts, which can limit what any tool can recover.", bn: "হ্যাঁ। পিডিএফে বাংলা লেখা যোগ করলে সঠিকভাবে দেখায়, আর PDF to Markdown খাঁটি ইউনিকোড বাংলা টেক্সট বের করে দেয়। খুব পুরনো কিছু পিডিএফে নন-ইউনিকোড লিগ্যাসি ফন্ট থাকে, যা যেকোনো টুলের জন্যই সীমাবদ্ধতা হতে পারে।" },
    },
    {
      q: { en: "Will my PDF keep its layout after editing?", bn: "সম্পাদনার পর কি পিডিএফের লেআউট ঠিক থাকবে?" },
      a: { en: "Pages you don't touch are left exactly as they were. On the pages you change, only the items you edit are rewritten, so the rest of the layout, fonts and images stay in place.", bn: "যে পেজে হাত দেবেন না, সেগুলো হুবহু আগের মতোই থাকে। যে পেজ বদলান, সেখানে শুধু আপনার এডিট করা অংশটাই নতুন করে লেখা হয় — বাকি লেআউট, ফন্ট ও ছবি জায়গামতোই থাকে।" },
    },
  ];
  return (
    <section id="faq" className="mx-auto max-w-4xl scroll-mt-20 px-4 py-14 sm:px-6">
      <h2 className="text-center text-[30px] font-extrabold tracking-tight text-zinc-950 dark:text-white sm:text-[40px]">{T("faqTitle")}</h2>
      <p className="mt-3 text-center text-[15px] text-zinc-500 dark:text-zinc-400">{T("faqSub")}</p>
      <Accordion type="single" collapsible className="mt-8 space-y-3">
        {faqs.map((f, i) => (
          <AccordionItem key={i} value={`q${i}`} className="rounded-2xl border border-zinc-100 bg-white px-5 shadow-sm dark:border-white/10 dark:bg-[#12201a]">
            <AccordionTrigger className="py-4 text-left text-[15.5px] font-bold text-zinc-900 hover:no-underline dark:text-white">{f.q[lang]}</AccordionTrigger>
            <AccordionContent className="pb-5 text-[14.5px] leading-7 text-zinc-600 dark:text-zinc-300">{f.a[lang]}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </section>
  );
}

/* ---------------- Donation ---------------- */
export function TeaCard() {
  const { T } = useApp();
  const share = async () => {
    try {
      if (navigator.share) await navigator.share({ title: "FileDeck", url: location.href });
      else {
        await navigator.clipboard.writeText(location.href);
        toast({ title: T("linkCopied") });
      }
    } catch {}
  };
  return (
    <section className="mx-auto max-w-5xl px-4 pb-16 sm:px-6">
      <div className="overflow-hidden rounded-3xl bg-white shadow-[0_12px_48px_-18px_rgba(15,80,50,0.18)] ring-1 ring-black/5 dark:bg-[#12201a] dark:ring-white/10">
        <div className="h-2 w-full bg-[linear-gradient(90deg,#7c2d12,#b45309,#d97706,#f59e0b,#fbbf24,#fde68a,#a7f3d0,#34d399)]" />
        <div className="grid items-center gap-8 p-7 sm:p-10 lg:grid-cols-[1fr_auto]">
          <div className="flex items-start gap-5">
            <span className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-[#fef3e2] text-5xl">🥤</span>
            <div>
              <h2 className="text-[24px] font-extrabold tracking-tight text-zinc-950 dark:text-white">{T("teaTitle")}</h2>
              <p className="mt-2 max-w-xl text-[15px] leading-7 text-zinc-600 dark:text-zinc-300">{T("teaBody")}</p>
            </div>
          </div>
          <div className="flex flex-col items-stretch gap-3 lg:w-80">
            <button className="inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-[#0b7a43] px-6 text-[15.5px] font-bold text-white shadow-md shadow-emerald-700/20 transition-all hover:bg-[#096c3b] active:scale-[0.98]">
              <CupSoda className="h-5 w-5" />
              {T("teaCta")}
              <ArrowRight className="h-4 w-4 -rotate-45" />
            </button>
            <p className="text-center text-[12px] text-zinc-400">{T("teaNote")}</p>
            <div className="rounded-2xl border border-dashed border-emerald-200 p-4 text-center dark:border-emerald-500/30">
              <p className="text-[13.5px] font-semibold text-zinc-700 dark:text-zinc-200">{T("teaFriend")}</p>
              <button onClick={share} className="mx-auto mt-3 inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 text-[13.5px] font-bold text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-white/15 dark:bg-transparent dark:text-zinc-200 dark:hover:bg-white/5">
                <Share2 className="h-4 w-4" />
                {T("tellFriend")}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
export function SiteFooter({ onNavigate }: { onNavigate: (id: string) => void }) {
  const { T, lang } = useApp();
  const cols: { title: string; items: { label: string; onClick?: () => void; href?: string }[] }[] = [
    {
      title: T("footProduct"),
      items: [
        { label: T("features"), href: "#features" },
        { label: T("allTools"), href: "#tools" },
        { label: T("donation"), href: "#donate" },
        { label: T("faq"), href: "#faq" },
      ],
    },
    {
      title: T("footTools"),
      items: [
        { label: T("catPdf"), onClick: () => onNavigate("merge-pdf") },
        { label: T("catImage"), onClick: () => onNavigate("resize-image") },
        { label: T("catAI"), onClick: () => onNavigate("ai-paragraph") },
        { label: T("catFile"), onClick: () => onNavigate("qr-generator") },
      ],
    },
    {
      title: T("footCompany"),
      items: [
        { label: T("aboutUs"), href: "#" },
        { label: T("contactUs"), href: "#" },
        { label: T("blog"), href: "#" },
        { label: T("press"), href: "#" },
      ],
    },
    {
      title: T("footLegal"),
      items: [
        { label: T("security"), href: "#" },
        { label: T("privacyPolicy"), href: "#" },
        { label: T("terms"), href: "#" },
        { label: T("cookies"), href: "#" },
      ],
    },
  ];

  return (
    <footer className="mt-auto border-t border-zinc-200/70 bg-white dark:border-white/10 dark:bg-[#0c1512]">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[1.4fr_repeat(4,1fr)]">
        <div>
          <Logo />
          <p className="mt-4 max-w-xs text-[13.5px] leading-6 text-zinc-500 dark:text-zinc-400">{T("footTag")}</p>
          <p className="mt-4 text-[13px] text-zinc-500 dark:text-zinc-400">{T("madeBy")}</p>
          <div className="mt-4 flex items-center gap-3">
            <a href="#" className="inline-flex h-9 items-center gap-1.5 rounded-full bg-emerald-50 px-3.5 text-[13px] font-bold text-emerald-800 transition-colors hover:bg-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-300">
              <Globe className="h-4 w-4" /> {T("devProfile")} <span className="text-[11px]">↗</span>
            </a>
            {[Linkedin, Facebook, Github, Instagram].map((Icon, i) => (
              <a key={i} href="#" aria-label="social link" className="text-zinc-400 transition-colors hover:text-emerald-700 dark:hover:text-emerald-400">
                <Icon className="h-[18px] w-[18px]" />
              </a>
            ))}
          </div>
        </div>
        {cols.map((col, i) => (
          <nav key={i} aria-label={col.title}>
            <div className="text-[11.5px] font-extrabold uppercase tracking-widest text-zinc-400 dark:text-zinc-500">{col.title}</div>
            <ul className="mt-3 space-y-2.5">
              {col.items.map((it, j) => (
                <li key={j}>
                  {it.onClick ? (
                    <button onClick={it.onClick} className="text-[13.5px] text-zinc-600 transition-colors hover:text-emerald-700 dark:text-zinc-300 dark:hover:text-emerald-400">{it.label}</button>
                  ) : (
                    <a href={it.href} className="text-[13.5px] text-zinc-600 transition-colors hover:text-emerald-700 dark:text-zinc-300 dark:hover:text-emerald-400">{it.label}</a>
                  )}
                </li>
              ))}
            </ul>
          </nav>
        ))}
      </div>
      <div className="border-t border-zinc-100 py-5 text-center text-[12.5px] text-zinc-400 dark:border-white/5">
        {T("copyright")} · {bn(102, lang)} {lang === "en" ? "free tools" : "ফ্রি টুল"}
      </div>
    </footer>
  );
}