'use client';

import { ShieldCheck, Ban, UserX, Smartphone, ArrowUp } from 'lucide-react';
import Mascot from '../Mascot';

const LINKS = [
  { href: '#features', label: 'ফিচার' },
  { href: '#learn', label: 'কী শিখবে' },
  { href: '#pricing', label: 'দাম' },
  { href: '#faq', label: 'প্রশ্ন-উত্তর' },
];

const TRUST = [
  { icon: Ban, label: 'বিজ্ঞাপন নেই' },
  { icon: UserX, label: 'অচেনা চ্যাট নেই' },
  { icon: ShieldCheck, label: 'Parent-নিয়ন্ত্রিত AI' },
];

export default function Footer({
  onStart,
  onLogin,
}: {
  onStart: () => void;
  onLogin: () => void;
}) {
  const year = new Date().getFullYear();

  return (
    <footer className="relative -mt-8 rounded-t-[2.5rem] bg-cream-200 px-4 pb-24 pt-10 sm:px-6 lg:pb-8">
      <div className="mx-auto max-w-6xl">
        <div className="grid grid-cols-2 gap-x-6 gap-y-7 lg:grid-cols-[1.4fr_1fr_1fr_1fr]">
          {/* brand */}
          <div className="col-span-2 lg:col-span-1">
            <div className="flex items-center gap-2">
              <Mascot size={34} />
              <span className="font-heading text-xl font-extrabold text-ink">WonderKids</span>
            </div>
            <p className="mt-3 max-w-xs text-sm leading-relaxed text-ink-soft">
              মজা করে শেখা। ৩-১৪ বছরের বাচ্চাদের জন্য বাংলায় বানানো নিরাপদ শেখার অ্যাপ।
            </p>
          </div>

          {/* links + account */}
          <div>
            <p className="font-heading text-sm font-bold text-ink">লিংক</p>
            <ul className="mt-3 space-y-2 text-sm">
              {LINKS.map((l) => (
                <li key={l.href}>
                  <a href={l.href} className="text-ink-soft transition hover:text-mango-600">
                    {l.label}
                  </a>
                </li>
              ))}
              <li>
                <button onClick={onLogin} className="text-ink-soft transition hover:text-mango-600">
                  আগে সাবস্ক্রাইব করেছি
                </button>
              </li>
            </ul>
          </div>

          {/* operator */}
          <div>
            <p className="font-heading text-sm font-bold text-ink">অপারেটর</p>
            <div className="mt-3 flex flex-wrap gap-2">
              <span className="rounded-full bg-white px-3 py-1 text-xs font-bold text-mango-600 shadow-card">
                Robi 018
              </span>
              <span className="rounded-full bg-white px-3 py-1 text-xs font-bold text-leaf-600 shadow-card">
                Cirkle 016
              </span>
            </div>
            <p className="mt-2 flex items-start gap-1.5 text-xs text-ink-soft">
              <Smartphone className="mt-0.5 h-3.5 w-3.5 shrink-0 text-leaf-600" />
              ব্যালেন্স থেকে দিনে ৫.৫৬ টাকা, কার্ড লাগে না।
            </p>
          </div>

          {/* trust */}
          <div>
            <p className="font-heading text-sm font-bold text-ink">নিরাপদ পরিবেশ</p>
            <ul className="mt-3 space-y-2 text-sm">
              {TRUST.map((t) => (
                <li key={t.label} className="flex items-center gap-2 text-ink-soft">
                  <t.icon className="h-4 w-4 text-leaf-600" />
                  {t.label}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-8 flex flex-col items-center justify-between gap-3 border-t border-ink/10 pt-5 text-xs text-ink-soft sm:flex-row">
          <p>© {year} WonderKids। সব অধিকার সংরক্ষিত।</p>
          <a
            href="#top"
            className="flex items-center gap-1 rounded-full bg-white px-3 py-1.5 font-semibold text-ink shadow-card transition hover:text-mango-600"
          >
            <ArrowUp className="h-3.5 w-3.5" /> উপরে যাও
          </a>
        </div>
      </div>
    </footer>
  );
}