"use client";

import * as React from "react";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight, Mail } from "lucide-react";
import { company, services, navItems } from "@/lib/content";
import { useToast } from "@/hooks/use-toast";

export function SiteFooter() {
  const { toast } = useToast();
  const [email, setEmail] = React.useState("");

  const subscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email.trim()) return;
    toast({
      title: "Subscribed",
      description:
        "This is a demo form. In production, your address would be added to our quarterly briefing.",
    });
    setEmail("");
  };

  return (
    <footer className="relative overflow-hidden border-t border-border/60 bg-card/40">
      <div
        className="pointer-events-none absolute inset-x-0 top-0 h-px"
        style={{
          background:
            "linear-gradient(90deg, transparent, var(--brand), transparent)",
        }}
      />
      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
        {/* Top — CTA + newsletter */}
        <div className="grid gap-10 lg:grid-cols-[1.3fr_1fr] lg:gap-16">
          <div>
            <div className="flex items-center gap-3">
              <Image
                src="/brand/logo-right.png"
                alt="StratOps logo"
                width={44}
                height={44}
                className="h-11 w-11 object-contain drop-shadow-[0_2px_12px_rgba(110,170,255,0.4)]"
              />
              <div>
                <p className="font-display text-lg font-semibold tracking-tight text-foreground">
                  {company.name}
                </p>
                <p className="font-mono-num text-[10px] uppercase tracking-[0.22em] text-brand">
                  {company.location}
                </p>
              </div>
            </div>
            <p className="mt-6 max-w-md text-sm leading-relaxed text-muted-foreground">
              {company.legalNote}
            </p>
          </div>

          <div>
            <h3 className="font-display text-xl font-semibold text-foreground">
              The StratOps briefing
            </h3>
            <p className="mt-2 text-sm text-muted-foreground">
              Quarterly notes on strategy, operations and transformation — from
              the founders, no fluff.
            </p>
            <form onSubmit={subscribe} className="mt-4 flex flex-col gap-2 sm:flex-row">
              <div className="relative flex-1">
                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Your work email"
                  className="w-full rounded-full border border-border bg-background/40 px-3 py-2.5 pl-9 text-sm text-foreground placeholder:text-muted-foreground/60 focus:border-brand/60 focus:outline-none focus:ring-2 focus:ring-brand/30"
                />
              </div>
              <button
                type="submit"
                className="inline-flex items-center justify-center gap-1.5 rounded-full bg-brand px-4 py-2.5 text-sm font-semibold text-background transition-colors hover:bg-brand/90"
              >
                Subscribe
                <ArrowRight className="h-3.5 w-3.5" />
              </button>
            </form>
            <p className="mt-2 text-[11px] text-muted-foreground">
              Demo form — no data is stored or transmitted.
            </p>
          </div>
        </div>

        {/* Divider with hex motif */}
        <div className="my-12 flex items-center gap-3" aria-hidden="true">
          <div className="h-px flex-1 bg-border/60" />
          <svg viewBox="0 0 24 24" className="h-3 w-3 text-brand" fill="none">
            <path
              d="M12 2L21 7V17L12 22L3 17V7L12 2Z"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinejoin="round"
            />
          </svg>
          <div className="h-px flex-1 bg-border/60" />
        </div>

        {/* Link columns */}
        <div className="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:grid-cols-4">
          <FooterCol title="Services">
            {services.map((s) => (
              <FooterLink key={s.id} href="#services">
                {s.title}
              </FooterLink>
            ))}
          </FooterCol>
          <FooterCol title="Company">
            {navItems.map((n) => (
              <FooterLink key={n.href} href={n.href}>
                {n.label}
              </FooterLink>
            ))}
          </FooterCol>
          <FooterCol title="Get in touch">
            <FooterLink href="#book">Book a session</FooterLink>
            <FooterLink href={`mailto:${company.primaryEmail}`}>
              {company.primaryEmail}
            </FooterLink>
            <FooterLink href="mailto:jerry@stratops.co.za">
              jerry@stratops.co.za
            </FooterLink>
            <FooterLink href="mailto:angus@stratops.co.za">
              angus@stratops.co.za
            </FooterLink>
          </FooterCol>
          <FooterCol title="Compliance">
            <FooterLink href="#compliance">B-BBEE Level 1</FooterLink>
            <FooterLink href="#compliance">POPIA-aligned</FooterLink>
            <FooterLink href="#compliance">CSD registered</FooterLink>
            <FooterLink href="#compliance">CIPC compliant</FooterLink>
            <FooterLink href="#compliance">COIDA insured</FooterLink>
          </FooterCol>
        </div>

        {/* Bottom bar */}
        <div className="mt-14 flex flex-col items-start justify-between gap-4 border-t border-border/60 pt-6 sm:flex-row sm:items-center">
          <p className="font-mono-num text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
            © {company.year} {company.legal}. All rights reserved.
          </p>
          <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
            <Link
              href="#compliance"
              className="text-xs text-muted-foreground transition-colors hover:text-brand"
            >
              Privacy & POPIA
            </Link>
            <Link
              href="#compliance"
              className="text-xs text-muted-foreground transition-colors hover:text-brand"
            >
              B-BBEE Certificate
            </Link>
            <span className="font-mono-num text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
              Johannesburg, ZA
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col gap-3">
      <h4 className="font-mono-num text-[10px] uppercase tracking-[0.24em] text-brand">
        {title}
      </h4>
      <ul className="flex flex-col gap-2">{children}</ul>
    </div>
  );
}

function FooterLink({
  href,
  children,
}: {
  href: string;
  children: React.ReactNode;
}) {
  return (
    <li>
      <Link
        href={href}
        className="text-sm text-muted-foreground transition-colors hover:text-foreground"
      >
        {children}
      </Link>
    </li>
  );
}