import type { ReactNode } from "react";
import { Link } from "@tanstack/react-router";
import { ArrowRight, MessageCircle, Phone } from "lucide-react";
import { PHONE, WA } from "@/lib/site";

export const btn = "inline-flex items-center justify-center gap-2 rounded-md px-6 py-3 text-sm font-bold uppercase tracking-wider transition";

export const Eyebrow = ({ children }: { children: ReactNode }) => (
  <p className="text-xs font-bold uppercase tracking-[0.25em] text-accent">{children}</p>
);

export const H2 = ({ children }: { children: ReactNode }) => (
  <h2 className="mt-3 text-3xl font-extrabold leading-tight text-primary md:text-4xl">{children}</h2>
);

export function PageHero({ eyebrow, title, desc }: { eyebrow: string; title: string; desc: string }) {
  return (
    <section className="grid-bg border-b border-border">
      <div className="mx-auto max-w-6xl px-4 py-20 md:py-28">
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="mt-4 max-w-3xl text-4xl font-extrabold leading-[1.1] text-primary md:text-5xl">{title}</h1>
        <p className="mt-5 max-w-2xl text-lg leading-relaxed text-muted-foreground">{desc}</p>
      </div>
    </section>
  );
}

export function CtaBand() {
  return (
    <section className="bg-primary text-primary-foreground">
      <div className="mx-auto flex max-w-6xl flex-col items-start justify-between gap-6 px-4 py-14 md:flex-row md:items-center">
        <div>
          <h2 className="text-2xl font-extrabold md:text-3xl">Discuss your engineering project with Fantasol.</h2>
          <p className="mt-2 opacity-90">Get practical guidance for electrical engineering, solar energy, ICT and ELV systems in Kenya.</p>
        </div>
        <Link to="/contact" className={`${btn} bg-accent text-accent-foreground hover:opacity-90`}>
          Get in Touch <ArrowRight className="h-4 w-4" />
        </Link>
      </div>
    </section>
  );
}

export function FloatingActions() {
  return (
    <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3">
      <a href={`tel:${PHONE}`} aria-label="Call Fantasol Engineering" className="grid h-12 w-12 place-items-center rounded-full bg-accent text-accent-foreground shadow-lg transition hover:opacity-90">
        <Phone className="h-5 w-5" />
      </a>
      <a href={WA} target="_blank" rel="noreferrer" aria-label="Chat on WhatsApp" className="grid h-12 w-12 place-items-center rounded-full bg-success text-primary-foreground shadow-lg transition hover:opacity-90">
        <MessageCircle className="h-5 w-5" />
      </a>
    </div>
  );
}