import Link from "next/link";
import { ArrowRight, BadgeDollarSign, BarChart3, Building2, Calculator, Cloud, Globe2, Lock, Megaphone, Sparkles, Users, Zap } from "lucide-react";
import { Header } from "@/components/marketing/header";
import { ProfitMarginCalculator } from "@/components/calculators/profit-margin-calculator";

const categories = [
  { title: "Ecommerce", subtitle: "Margins, pricing, fees", icon: BadgeDollarSign },
  { title: "Marketing & Ads", subtitle: "ROAS, CPC, CAC", icon: Megaphone },
  { title: "SaaS", subtitle: "MRR, churn, LTV", icon: Cloud },
  { title: "Freelance", subtitle: "Rates and proposals", icon: Users },
  { title: "Finance", subtitle: "Loans, ROI, budgets", icon: Building2 },
  { title: "International", subtitle: "VAT, duties, currency", icon: Globe2 }
];

export default function HomePage() {
  return (
    <main>
      <Header />
      <section className="container-shell py-16 md:py-24">
        <div className="grid gap-10 lg:grid-cols-[1fr_520px] lg:items-center">
          <div>
            <div className="mb-6 inline-flex rounded-full bg-blue-50 px-4 py-2 text-sm font-semibold text-blue-700">
              100+ calculators · Free & Premium
            </div>
            <h1 className="max-w-3xl text-5xl font-black tracking-tight md:text-7xl">
              Free Business Calculators for <span className="gradient-text">Smarter Decisions</span>
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
              Calculate margins, pricing, ROI, taxes, SaaS metrics and business costs in seconds. Save scenarios, export reports and make better business decisions.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <Link href="/calculators" className="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-6 py-4 font-bold text-white shadow-lg shadow-blue-600/20">
                Explore calculators <ArrowRight size={18} />
              </Link>
              <Link href="/pricing" className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-6 py-4 font-bold text-slate-900">
                <Sparkles size={18} /> View premium features
              </Link>
            </div>
          </div>
          <DashboardPreview />
        </div>
      </section>

      <section className="container-shell pb-10">
        <ProfitMarginCalculator />
      </section>

      <section className="container-shell py-8">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-6">
          {categories.map((item) => (
            <Link href={`/categories/${item.title.toLowerCase().replaceAll(" & ", "-").replaceAll(" ", "-")}`} key={item.title} className="card p-5 transition hover:-translate-y-1">
              <item.icon className="mb-8 text-blue-600" />
              <h3 className="font-black">{item.title}</h3>
              <p className="mt-2 text-sm leading-6 text-slate-600">{item.subtitle}</p>
            </Link>
          ))}
        </div>
      </section>

      <section className="container-shell py-8">
        <div className="card grid gap-8 p-6 lg:grid-cols-[260px_1fr]">
          <div className="rounded-2xl bg-slate-950 p-6 text-white">
            <span className="rounded-full bg-blue-600 px-3 py-1 text-xs font-black">PRO</span>
            <h2 className="mt-5 text-2xl font-black">Your command center</h2>
            <p className="mt-3 text-sm leading-6 text-slate-300">Unlock powerful tools to save time, collaborate and scale your business with data-driven decisions.</p>
            <Link href="/pricing" className="mt-6 inline-flex rounded-xl bg-blue-600 px-5 py-3 font-bold">Upgrade to Pro</Link>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            {["Saved calculations", "Compare scenarios", "Exports", "Templates", "Workspace", "API access"].map((feature) => (
              <div className="metric" key={feature}>
                <Calculator className="text-blue-600" size={20} />
                <h3 className="mt-4 font-black">{feature}</h3>
                <p className="mt-2 text-sm text-slate-600">Premium workflow ready for serious operators.</p>
              </div>
            ))}
            <div className="md:col-span-3 rounded-2xl bg-blue-50 p-4 text-sm font-semibold text-blue-700">
              Upgrade to unlock unlimited history, multi-currency, reports and team workspace.
            </div>
          </div>
        </div>
      </section>

      <section className="container-shell py-8 pb-16">
        <div className="card grid gap-4 p-6 md:grid-cols-3">
          <TrustItem icon={Lock} title="No signup required" text="Use free tools instantly in your browser." />
          <TrustItem icon={Users} title="Built for teams" text="For entrepreneurs, agencies and SaaS teams." />
          <TrustItem icon={Zap} title="Fast and exportable" text="Get results in seconds and export with ease." />
        </div>
      </section>
    </main>
  );
}

function DashboardPreview() {
  return (
    <div className="card p-5">
      <div className="mb-5 flex items-center justify-between">
        <div className="flex items-center gap-3 font-black"><BarChart3 className="text-blue-600" /> Dashboard</div>
        <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">This month</span>
      </div>
      <div className="grid gap-3 sm:grid-cols-4">
        {["248 calculations", "32 scenarios", "18 exports", "15.2h saved"].map((metric) => (
          <div key={metric} className="rounded-2xl border border-slate-200 p-4 text-sm font-bold">{metric}</div>
        ))}
      </div>
      <div className="mt-5 rounded-2xl border border-slate-200 p-5">
        <div className="mb-4 flex items-center justify-between">
          <h3 className="font-black">Margin trend</h3>
          <span className="text-xs text-slate-500">30 days</span>
        </div>
        <div className="flex h-32 items-end gap-3">
          {[38, 44, 40, 52, 48, 60, 54, 68, 63].map((height, index) => (
            <div key={index} className="w-full rounded-t-lg bg-blue-600" style={{ height: `${height}%` }} />
          ))}
        </div>
      </div>
    </div>
  );
}

function TrustItem({ icon: Icon, title, text }: { icon: typeof Lock; title: string; text: string }) {
  return (
    <div className="flex items-center gap-4">
      <div className="rounded-2xl bg-blue-50 p-4 text-blue-600"><Icon /></div>
      <div>
        <h3 className="font-black">{title}</h3>
        <p className="text-sm text-slate-600">{text}</p>
      </div>
    </div>
  );
}