import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, BarChart3, Layers, ShieldCheck, Zap, Users, Bell } from "lucide-react";
import { MarketingLayout } from "@/components/marketing/MarketingLayout";
import { InstallPWAButton } from "@/components/pwa/InstallPWAButton";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "eBay BOS — Business Operating System for eBay sellers" },
      {
        name: "description",
        content:
          "Run your entire eBay business from one modern dashboard: multiple accounts, live performance, and secure operations.",
      },
      { property: "og:title", content: "eBay BOS — Business Operating System for eBay sellers" },
      {
        property: "og:description",
        content:
          "Run your entire eBay business from one modern dashboard: multiple accounts, live performance, and secure operations.",
      },
    ],
  }),
  component: Landing,
});

const features = [
  { icon: Layers, title: "Multiple eBay accounts", body: "Manage every store you sell on from one workspace. Switch context in a click." },
  { icon: BarChart3, title: "Live performance", body: "Orders, inventory, and revenue update in real time — no manual exports." },
  { icon: ShieldCheck, title: "Secure by default", body: "Row-level security, audit logs, and per-device tracking on every action." },
  { icon: Zap, title: "Fast by design", body: "Modern edge stack. Pages load in milliseconds, not seconds." },
  { icon: Users, title: "Team ready", body: "Invite teammates into workspaces with clear roles and access." },
  { icon: Bell, title: "Never miss an event", body: "In-app and email notifications for sales, sync issues, and account changes." },
];

function Landing() {
  return (
    <MarketingLayout>
      <section className="mx-auto max-w-6xl px-6 py-24 text-center">
        <div className="mx-auto inline-flex items-center gap-2 rounded-full border bg-muted px-3 py-1 text-xs text-muted-foreground">
          <span className="h-1.5 w-1.5 rounded-full bg-primary" /> Built for eBay sellers
        </div>
        <h1 className="mt-6 text-5xl font-bold tracking-tight sm:text-6xl">
          The Business Operating System
          <br />
          <span className="text-primary">for eBay sellers.</span>
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
          Connect every eBay account you own. Watch orders, inventory, and revenue update live.
          Run your entire eBay business from one clean, modern dashboard.
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <Link
            to="/auth"
            className="inline-flex h-11 items-center rounded-md bg-primary px-6 text-sm font-medium text-primary-foreground hover:bg-primary/90"
          >
            Start free <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
          <Link
            to="/pricing"
            className="inline-flex h-11 items-center rounded-md border border-input bg-background px-6 text-sm font-medium hover:bg-accent"
          >
            See pricing
          </Link>
          <InstallPWAButton className="h-11 px-6" />
        </div>
      </section>

      <section className="border-t bg-muted/30">
        <div className="mx-auto max-w-6xl px-6 py-16">
          <div className="mb-10 text-center">
            <h2 className="text-3xl font-bold tracking-tight">Everything you need to run eBay well</h2>
            <p className="mx-auto mt-2 max-w-2xl text-sm text-muted-foreground">
              A modern operating system for professional sellers, purpose-built for eBay's realities.
            </p>
          </div>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {features.map(({ icon: Icon, title, body }) => (
              <div key={title} className="rounded-xl border bg-card p-6">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <Icon className="h-5 w-5" />
                </div>
                <h3 className="mt-4 font-semibold">{title}</h3>
                <p className="mt-1 text-sm text-muted-foreground">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-4xl px-6 py-20 text-center">
        <h2 className="text-3xl font-bold tracking-tight">Ready in a minute</h2>
        <p className="mx-auto mt-3 max-w-xl text-muted-foreground">
          Create your free workspace, connect an eBay store, and start operating your business today.
        </p>
        <Link
          to="/auth"
          className="mt-6 inline-flex h-11 items-center rounded-md bg-primary px-6 text-sm font-medium text-primary-foreground hover:bg-primary/90"
        >
          Create free account <ArrowRight className="ml-2 h-4 w-4" />
        </Link>
      </section>
    </MarketingLayout>
  );
}