import { Link } from "@tanstack/react-router";
import { ArrowUpRight, type LucideIcon } from "lucide-react";

export function PageHero({ eyebrow, title, lede }: { eyebrow: string; title: string; lede?: string }) {
  return (
    <section className="border-b">
      <div className="container-page py-20">
        <div className="text-xs uppercase tracking-[0.25em] text-brand-blue font-semibold">{eyebrow}</div>
        <h1 className="mt-4 font-display text-5xl md:text-6xl font-black leading-[1]">{title}</h1>
        {lede && <p className="mt-6 max-w-2xl text-lg text-muted-foreground">{lede}</p>}
      </div>
    </section>
  );
}

export function Section({ children, className = "" }: { children: React.ReactNode; className?: string }) {
  return <section className={`py-20 ${className}`}><div className="container-page">{children}</div></section>;
}

export function FeatureRow({ img, title, body, reverse, Icon }: { img: string; title: string; body: string; reverse?: boolean; Icon?: LucideIcon }) {
  return (
    <div className={`grid lg:grid-cols-2 gap-10 items-center ${reverse ? "lg:[&>*:first-child]:order-2" : ""}`}>
      <img src={img} alt={title} className="w-full h-[380px] object-cover" />
      <div>
        {Icon && <Icon className="h-6 w-6 text-brand-red" />}
        <h3 className="mt-4 font-display text-3xl font-black">{title}</h3>
        <p className="mt-4 text-muted-foreground whitespace-pre-line">{body}</p>
      </div>
    </div>
  );
}

export function CTA() {
  return (
    <section className="bg-brand-blue text-white">
      <div className="container-page py-12 flex flex-wrap items-center justify-between gap-6">
        <div>
          <div className="text-xl md:text-2xl font-bold leading-tight">
            Questions? Call Now:{" "}
            <span className="text-3xl md:text-4xl font-black whitespace-nowrap">+971 4 320 3552</span>
          </div>
        </div>
        <Link
          to="/enquiry"
          className="inline-flex items-center gap-2 bg-white text-brand-blue px-8 py-4 rounded-md text-lg font-bold hover:opacity-90 transition-opacity"
        >
          BOOK NOW <ArrowUpRight className="h-5 w-5" />
        </Link>
      </div>
    </section>
  );
}