import { createFileRoute } from "@tanstack/react-router";
import { MessageCircle } from "lucide-react";
import heroImage from "@/assets/hero-agency.jpg";

const WHATSAPP_NUMBER = "1234567890"; // placeholder — replace with real number
const WHATSAPP_MESSAGE =
  "Hi! I'd like to talk about a campaign with your agency.";

const waHref = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(WHATSAPP_MESSAGE)}`;

const GOOGLE_ADS_CONVERSION_ID = "AW-18332450765";
const GOOGLE_ADS_CONVERSION_LABEL = "IHdgCI2qytIcEM3_y6VE";

function trackWhatsAppConversion() {
  if (typeof window === "undefined") return;
  const gtag = (window as unknown as { gtag?: (...args: unknown[]) => void }).gtag;
  if (typeof gtag !== "function") return;
  gtag("event", "conversion", {
    send_to: `${GOOGLE_ADS_CONVERSION_ID}/${GOOGLE_ADS_CONVERSION_LABEL}`,
  });
}

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Bold Ad Agency — Campaigns that convert" },
      {
        name: "description",
        content:
          "Independent ad agency crafting brands, campaigns, and content that move markets. Message us on WhatsApp to start your project.",
      },
      { property: "og:title", content: "Bold Ad Agency — Campaigns that convert" },
      {
        property: "og:description",
        content:
          "Independent ad agency crafting brands, campaigns, and content that move markets. Message us on WhatsApp to start your project.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Index,
});

function Index() {
  return (
    <div className="relative min-h-screen w-full overflow-hidden bg-black">
      {/* Hero image */}
      <img
        src={heroImage}
        alt="Creative studio at work inside an ad agency"
        className="absolute inset-0 h-full w-full object-cover"
        width={1920}
        height={1280}
      />
      <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/80" />

      {/* Hero copy */}
      <header className="relative z-10 flex min-h-screen flex-col justify-between p-8 md:p-14">
        <div className="flex items-center gap-2 text-white">
          <span className="h-2 w-2 rounded-full bg-[#25D366]" />
          <span className="text-xs font-semibold uppercase tracking-[0.3em]">
            Bold / Ad Agency
          </span>
        </div>
        <div className="max-w-3xl text-white">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#25D366]">
            Independent · Since 2016
          </p>
          <h1 className="mt-4 text-5xl font-black leading-[0.95] tracking-tight md:text-7xl lg:text-8xl">
            Campaigns
            <br />
            that make
            <br />
            <span className="italic text-[#25D366]">people move.</span>
          </h1>
          <p className="mt-6 max-w-xl text-base text-white/80 md:text-lg">
            Brand, strategy, film and social — built by a small team obsessed with
            work that actually performs. Let's talk about your next launch.
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-x-8 gap-y-2 text-xs uppercase tracking-[0.25em] text-white/60">
          <span>Branding</span>
          <span>Campaigns</span>
          <span>Social</span>
          <span>Film</span>
          <span>Performance</span>
        </div>
      </header>

      {/* Floating WhatsApp button */}
      <a
        href={waHref}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Chat on WhatsApp"
        onClick={trackWhatsAppConversion}
        className="fixed bottom-6 right-6 z-40 flex items-center gap-2 rounded-full bg-[#25D366] px-5 py-4 text-white shadow-2xl transition-transform hover:scale-105"
      >
        <MessageCircle className="h-6 w-6" />
        <span className="font-semibold">WhatsApp</span>
      </a>

      {/* Uncloseable popup */}
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="wa-popup-title"
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"
      >
        <div className="w-full max-w-md rounded-2xl bg-white p-8 text-center shadow-2xl">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#25D366]">
            Bold / Ad Agency
          </p>
          <div className="mx-auto mt-4 mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-[#25D366]">
            <MessageCircle className="h-8 w-8 text-white" />
          </div>
          <h2 id="wa-popup-title" className="text-2xl font-bold text-gray-900">
            Let's brief your next campaign
          </h2>
          <p className="mt-3 text-gray-600">
            We take new projects directly on WhatsApp. Send us a quick note about
            your brand and we'll reply within a few hours.
          </p>
          <a
            href={waHref}
            target="_blank"
            rel="noopener noreferrer"
            onClick={trackWhatsAppConversion}
            className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[#25D366] px-6 py-3 font-semibold text-white shadow-lg transition-transform hover:scale-[1.02]"
          >
            <MessageCircle className="h-5 w-5" />
            Message us on WhatsApp
          </a>
          <p className="mt-4 text-xs text-gray-400">
            Average reply time · under 2 Minutes
          </p>
        </div>
      </div>
    </div>
  );
}