import type { Metadata } from "next";
import Link from "next/link";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { CONTACT } from "@/lib/vulai-content";

export const metadata: Metadata = {
  title: "Bash — Hire & Production · VibePass Tickets",
  description:
    "Bash is the production arm of VibePass. Hire sound, instruments, a live band and full stage production across Kenya — à la carte, or hand us the whole night.",
};

type IconProps = { className?: string };

function box(children: React.ReactNode, className?: string) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className ?? "w-7 h-7"}
      aria-hidden="true"
    >
      {children}
    </svg>
  );
}

const SoundIcon = ({ className }: IconProps) =>
  box(
    <>
      <rect x="5" y="3" width="14" height="18" rx="2" />
      <circle cx="12" cy="9" r="2" />
      <circle cx="12" cy="15.5" r="3" />
    </>,
    className
  );
const BacklineIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M9 18a3 3 0 1 1-3-3" />
      <path d="M9 18V6l10-3v9" />
      <path d="M19 12a3 3 0 1 1-3-3" />
    </>,
    className
  );
const BandIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M3 11v2M7 8v8M11 5v14M15 9v6M19 7v10M23 10v4" />
    </>,
    className
  );
const LightingIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M9 18h6M10 21h4" />
      <path d="M12 3a6 6 0 0 0-3 11.2c.6.4 1 1 1 1.8h4c0-.8.4-1.4 1-1.8A6 6 0 0 0 12 3Z" />
    </>,
    className
  );
const StageIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M3 8h18M3 8l3-4h12l3 4M5 8v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8" />
      <path d="M9 18v3M15 18v3" />
    </>,
    className
  );
const PackageIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
      <path d="m3.3 7 8.7 5 8.7-5M12 22V12" />
    </>,
    className
  );

const SERVICES = [
  { title: "Sound & PA", blurb: "Line arrays, monitors, mixing and engineers sized to the room — clubs to showgrounds.", Icon: SoundIcon },
  { title: "Instruments & Backline", blurb: "Drums, keys, guitars, amps and DI — fully spec'd and stage-ready for any act.", Icon: BacklineIcon },
  { title: "Live Band", blurb: "Book a full live band or session players to back your headliner or carry the night.", Icon: BandIcon },
  { title: "Lighting & Visuals", blurb: "Stage wash, moving heads, LED walls and operators that match the energy of the set.", Icon: LightingIcon },
  { title: "Stage & Rigging", blurb: "Decks, trussing, risers and safe rigging — built and struck by an experienced crew.", Icon: StageIcon },
  { title: "Full Production", blurb: "Hand us the whole night: design, gear, crew and run-of-show, managed end to end.", Icon: PackageIcon },
];

const WAYS = [
  {
    label: "À la carte",
    body: "Pick exactly what you need — just sound, just a band, just lighting. We deliver, set up and run it, then strike. You stay in control of the rest of the night.",
  },
  {
    label: "Whole-night package",
    body: "Tell us the date, the venue and the vibe. Bash designs and delivers the full production as one package — one crew, one invoice, one point of contact.",
  },
];

export default function BashPage() {
  const whatsappNumber = CONTACT.phone.replace(/[^\d]/g, "");
  const prefill = encodeURIComponent(
    "Hi Bash 👋 I'd like to hire production for an event."
  );
  const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${prefill}`;

  return (
    <div className="flex-1 bg-bg">
      {/* Hero */}
      <section className="relative overflow-hidden bg-bg">
        <div
          className="absolute inset-0 opacity-70"
          style={{
            backgroundImage:
              "radial-gradient(circle at 20% 0%, rgba(31, 157, 122, 0.35), transparent 55%)",
          }}
        />
        <div className="relative">
          <SiteNav transparent />
          <div className="max-w-6xl mx-auto px-4 pt-16 pb-20">
            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
              Bash — hire &amp; production
            </p>
            <h1 className="mt-5 text-5xl sm:text-7xl font-black leading-[0.95] tracking-tight text-white">
              Bash by VibePass. The whole show, one invoice.
            </h1>
            <p className="mt-6 max-w-2xl text-lg text-ink/80">
              Sound systems, musical instruments, live bands, and stage visuals — hired
              together or à la carte. One team, one setup, zero finger-pointing.
            </p>
            <div className="mt-9 flex flex-wrap items-center gap-4">
              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-full bg-brand-green px-7 py-3 text-base font-semibold text-white hover:bg-brand-green-h"
              >
                Get a quote
              </a>
              <Link
                href="/#featured"
                className="rounded-full border border-white/30 px-7 py-3 text-base font-semibold text-white hover:bg-white/10"
              >
                See what we power
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="bg-panel border-y border-line">
        <div className="max-w-6xl mx-auto px-4 py-20">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
            The one-stop package
          </p>
          <h2 className="mt-3 text-3xl sm:text-4xl font-black tracking-tight text-white">
            Sound + Instruments + Band + Visuals, quoted and billed as one.
          </h2>
          <p className="mt-3 max-w-2xl text-muted">
            You plan the event; we make it loud, lit, and live.
          </p>
          <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {SERVICES.map((s) => (
              <div
                key={s.title}
                className="rounded-2xl border border-line bg-panel-soft p-6 transition-all duration-200 hover:-translate-y-0.5 hover:border-brand-green motion-reduce:hover:translate-y-0"
              >
                <span className="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-brand-green-wash text-brand-green-h">
                  <s.Icon className="w-6 h-6" />
                </span>
                <h3 className="mt-4 font-bold text-lg text-white">{s.title}</h3>
                <p className="mt-2 text-sm text-muted leading-relaxed">{s.blurb}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Two ways to work with Bash */}
      <section className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 py-20">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
            Two ways to work with Bash
          </p>
          <h2 className="mt-3 text-3xl sm:text-4xl font-black tracking-tight text-white">
            Pick the pieces, or hand us the whole night.
          </h2>
          <div className="mt-10 grid sm:grid-cols-2 gap-6">
            {WAYS.map((w) => (
              <div key={w.label} className="rounded-2xl border border-line bg-panel p-7">
                <p className="text-sm font-bold uppercase tracking-widest text-brand-green-h">
                  {w.label}
                </p>
                <p className="mt-3 text-muted leading-relaxed">{w.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="relative overflow-hidden bg-brand-green-panel border-t border-line">
        <div className="relative max-w-6xl mx-auto px-4 py-20 text-center">
          <h2 className="text-3xl sm:text-5xl font-black tracking-tight text-white">
            Tell us about your event.
          </h2>
          <p className="mt-4 text-ink/80">
            Share the date, venue and vibe — we&apos;ll build the production around it.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
            <a
              href={whatsappUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="rounded-full bg-white px-7 py-3 text-base font-semibold text-brand-green-panel hover:bg-white/90"
            >
              Chat on WhatsApp
            </a>
            <a
              href={`mailto:${CONTACT.email}`}
              className="rounded-full border border-white/40 px-7 py-3 text-base font-semibold text-white hover:bg-white/10"
            >
              Email {CONTACT.email}
            </a>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}