import { Link } from "@tanstack/react-router";
import { useEffect, useState, type ReactNode } from "react";
import { ArrowRight, ArrowUpRight, Check, Menu, X } from "lucide-react";
import { EMAIL, faqs } from "@/lib/content";

const nav = [
  { to: "/", label: "Home" },
  { to: "/services", label: "Services" },
  { to: "/work", label: "Our Work" },
  { to: "/about", label: "About" },
  { to: "/contact", label: "Contact" },
] as const;

export function Logo() {
  return (
    <Link to="/" className="flex items-center gap-2.5">
      <span className="grid h-9 w-9 place-items-center rounded-lg bg-ink text-primary font-bold">»</span>
      <span className="leading-none">
        <span className="block text-sm font-extrabold tracking-wide text-foreground">NEXORA</span>
        <span className="eyebrow block text-[0.55rem] text-primary">Remote</span>
      </span>
    </Link>
  );
}

export function Header() {
  const [open, setOpen] = useState(false);
  return (
    <header className="absolute inset-x-0 top-3 z-50 px-4">
      <div className="mx-auto flex max-w-6xl items-center justify-between rounded-2xl bg-background px-4 py-3 shadow-lg">
        <Logo />
        <nav className="hidden gap-1 md:flex">
          {nav.map((n) => (
            <Link key={n.to} to={n.to} activeOptions={{ exact: true }}
              className="rounded-full px-4 py-2 text-sm text-muted-foreground transition hover:text-foreground"
              activeProps={{ className: "bg-muted text-foreground font-medium" }}>
              {n.label}
            </Link>
          ))}
        </nav>
        <Link to="/contact" className="hidden md:inline-flex"><PrimaryBtn>Book a Discovery Call <ArrowUpRight className="h-4 w-4" /></PrimaryBtn></Link>
        <button className="md:hidden" aria-label="Menu" onClick={() => setOpen(!open)}>{open ? <X /> : <Menu />}</button>
      </div>
      {open && (
        <div className="mx-auto mt-2 max-w-6xl rounded-2xl bg-background p-3 shadow-lg md:hidden">
          {nav.map((n) => (
            <Link key={n.to} to={n.to} onClick={() => setOpen(false)} className="block rounded-lg px-3 py-3 text-foreground hover:bg-muted">{n.label}</Link>
          ))}
        </div>
      )}
    </header>
  );
}

export function PrimaryBtn({ children }: { children: ReactNode }) {
  return <span className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition hover:opacity-90">{children}</span>;
}
export function GhostBtn({ children }: { children: ReactNode }) {
  return <span className="inline-flex items-center gap-2 rounded-full border border-ink-border px-6 py-3 text-sm font-semibold text-ink-foreground transition hover:bg-ink-card">{children}</span>;
}

export function DarkHero({ eyebrow, title, children }: { eyebrow: string; title: ReactNode; children?: ReactNode }) {
  return (
    <section className="ink-grid px-4 pb-20 pt-36 text-ink-foreground">
      <div className="mx-auto max-w-6xl">
        <span className="eyebrow inline-flex items-center gap-2 rounded-full border border-ink-border px-3 py-1.5 text-ink-muted"><span className="h-1.5 w-1.5 rounded-full bg-primary" />{eyebrow}</span>
        <h1 className="mt-6 max-w-3xl text-4xl font-extrabold leading-[1.05] md:text-6xl">{title}</h1>
        {children}
      </div>
    </section>
  );
}

export function SectionHead({ eyebrow, title, text }: { eyebrow: string; title: string; text?: string }) {
  return (
    <div className="max-w-2xl">
      <p className="eyebrow text-primary">{eyebrow}</p>
      <h2 className="mt-3 text-3xl font-extrabold md:text-4xl">{title}</h2>
      {text && <p className="mt-4 text-muted-foreground">{text}</p>}
    </div>
  );
}

export function CheckList({ items }: { items: string[] }) {
  return (
    <ul className="space-y-2.5">
      {items.map((i) => (
        <li key={i} className="flex gap-2.5 text-sm"><Check className="mt-0.5 h-4 w-4 shrink-0 text-primary" />{i}</li>
      ))}
    </ul>
  );
}

export function Faq() {
  return (
    <section className="px-4 py-20">
      <div className="mx-auto grid max-w-6xl gap-10 md:grid-cols-[1fr_1.4fr]">
        <SectionHead eyebrow="Questions" title="The things clients ask before they start" text="If your question isn't here, ask it on the discovery call — we'll answer it straight." />
        <div className="divide-y rounded-2xl border">
          {faqs.map((f) => (
            <details key={f.q} className="group p-5">
              <summary className="flex cursor-pointer list-none items-center justify-between font-semibold">{f.q}<span className="text-primary transition group-open:rotate-45">+</span></summary>
              <p className="mt-3 text-sm text-muted-foreground">{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

export function Clocks() {
  const [now, setNow] = useState<Date | null>(null);
  useEffect(() => { setNow(new Date()); const t = setInterval(() => setNow(new Date()), 30000); return () => clearInterval(t); }, []);
  const zones = [["London", "Europe/London"], ["Johannesburg", "Africa/Johannesburg"], ["New York", "America/New_York"]];
  return (
    <ul className="mt-4 flex flex-wrap gap-3">
      {zones.map(([city, tz]) => (
        <li key={city} className="rounded-xl border bg-background px-4 py-2">
          <span className="font-mono text-lg font-semibold">{now ? now.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", timeZone: tz }) : "--:--"}</span>
          <span className="ml-2 text-xs text-muted-foreground">{city}</span>
        </li>
      ))}
    </ul>
  );
}

export function Cta() {
  return (
    <section className="px-4 pb-20">
      <div className="ink-grid mx-auto max-w-6xl rounded-3xl px-6 py-14 text-ink-foreground md:px-14">
        <p className="eyebrow text-primary">Next step</p>
        <h2 className="mt-3 max-w-2xl text-3xl font-extrabold md:text-4xl">Ready to hand over the work that keeps repeating?</h2>
        <p className="mt-4 max-w-2xl text-ink-muted">Book a 30-minute discovery call. We'll map what you're carrying, tell you honestly whether we're the right fit, and follow up with a written scope within two business days. We reply to every enquiry within one business day.</p>
        <div className="mt-8 flex flex-wrap gap-3">
          <Link to="/contact"><PrimaryBtn>Book a Discovery Call <ArrowRight className="h-4 w-4" /></PrimaryBtn></Link>
          <a href={`mailto:${EMAIL}`}><GhostBtn>Email us directly</GhostBtn></a>
        </div>
      </div>
    </section>
  );
}

export function Footer() {
  return (
    <footer className="border-t px-4 py-10">
      <div className="mx-auto flex max-w-6xl flex-col gap-6 md:flex-row md:items-center md:justify-between">
        <Logo />
        <div className="flex flex-wrap gap-5 text-sm text-muted-foreground">
          {nav.map((n) => <Link key={n.to} to={n.to} className="hover:text-foreground">{n.label}</Link>)}
          <Link to="/how-it-works" className="hover:text-foreground">How it works</Link>
        </div>
        <p className="text-xs text-muted-foreground">© {new Date().getFullYear()} Nexora Remote · <a href={`mailto:${EMAIL}`}>{EMAIL}</a></p>
      </div>
    </footer>
  );
}