import Image from "next/image";

export default function Home(this: any) {
  const features = [
    {
      title: "AI outbound calling",
      text: "Launch voice agents that call leads instantly, qualify them, and move the right prospects to your calendar.",
    },
    {
      title: "Booked appointments",
      text: "We focus on one outcome: more qualified sales calls booked for your team.",
    },
    {
      title: "Built for scale",
      text: "Run campaigns across lists, track every call outcome, and optimise scripts using real call data.",
    },
  ];

  const steps = [
    "Upload or connect your lead list, or let us identify prospects for you from our interactive data sets",
    "AI agents call, qualify, and handle common objections",
    "Qualified prospects are booked directly into your calendar",
  ];

  const industries = [
    "Solar",
    "Heat pumps",
    "Energy",
    "Telecoms",
    "Business grants",
    "Legal services",
    "Property",
    "Financial services",
    "Home improvement",
    "B2B services",
    "SaaS",
  ];

  return (
    <div className="min-h-screen bg-white text-slate-900">
      <section className="border-b border-slate-200">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-5 lg:px-8">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-900 text-white shadow-sm">
              <span className="text-lg font-bold">CB</span>
            </div>
            <div>
              <div className="text-xl font-bold tracking-tight">CallBooked</div>
              <div className="text-xs text-slate-500">
                AI enhanced intelligent outbound calling for booked appointments
              </div>
            </div>
          </div>
          <div className="hidden items-center gap-8 md:flex">
            <a
              href="#how-it-works"
              className="text-sm text-slate-600 hover:text-slate-900"
            >
              How it works
            </a>
            <a
              href="#industries"
              className="text-sm text-slate-600 hover:text-slate-900"
            >
              Industries
            </a>
            <a
              href="#contact"
              className="text-sm text-slate-600 hover:text-slate-900"
            >
              Contact
            </a>
            <button className="rounded-2xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5">
              Book a demo
            </button>
          </div>
        </div>
      </section>

      <section className="mx-auto grid max-w-7xl gap-12 px-6 py-20 lg:grid-cols-2 lg:px-8 lg:py-28">
        <div className="flex flex-col justify-center">
          <div className="mb-4 inline-flex w-fit items-center rounded-full border border-slate-200 px-4 py-2 text-sm text-slate-600 shadow-sm">
            Faster prospecting. More conversations. More appointments.
          </div>
          <h1 className="max-w-2xl text-5xl font-bold tracking-tight text-slate-900 sm:text-6xl">
            Book more{" "}
            <span className="text-green-600">
              solar installs, heat pump surveys, and telecom sales calls
            </span>{" "}
            with AI enhanced intelligent voice agents.
          </h1>
          <p className="mt-6 max-w-xl text-lg leading-8 text-slate-600">
            CallBooked helps solar, heat pump, energy, and telecom companies
            generate pipeline using AI outbound calling that qualifies leads,
            follows scripts, and books high-quality appointments directly into
            your calendar.
          </p>
          <div className="mt-8 flex flex-wrap gap-4">
            <button className="rounded-2xl bg-slate-900 px-6 py-4 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5">
              Book a demo
            </button>
            <button className="rounded-2xl border border-slate-300 px-6 py-4 text-sm font-semibold text-slate-700 transition hover:border-slate-900 hover:text-slate-900">
              See how it works
            </button>
          </div>
          <div className="mt-10 grid max-w-xl grid-cols-3 gap-4 text-sm">
            <div className="rounded-2xl border border-slate-200 p-4 shadow-sm">
              <div className="text-2xl font-bold">24/7</div>
              <div className="mt-1 text-slate-500">Always-on outreach</div>
            </div>
            <div className="rounded-2xl border border-slate-200 p-4 shadow-sm">
              <div className="text-2xl font-bold">Fast</div>
              <div className="mt-1 text-slate-500">Lead response time</div>
            </div>
            <div className="rounded-2xl border border-slate-200 p-4 shadow-sm">
              <div className="text-2xl font-bold">Clear</div>
              <div className="mt-1 text-slate-500">Call reporting</div>
            </div>
          </div>
        </div>

        <div className="flex items-center justify-center">
          <div className="w-full max-w-xl rounded-[2rem] border border-slate-200 bg-slate-50 p-6 shadow-2xl">
            <div className="rounded-[1.5rem] bg-white p-6 shadow-sm">
              <div className="mb-6 flex items-center justify-between">
                <div>
                  <p className="text-sm text-slate-500">
                    Live campaign snapshot
                  </p>
                  <h3 className="text-xl font-semibold">
                    Outbound performance
                  </h3>
                </div>
                <div className="rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-700">
                  Active
                </div>
              </div>

              <div className="space-y-4">
                <div className="rounded-2xl border border-slate-200 p-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-slate-500">Calls placed</span>
                    <span className="text-lg font-semibold">1,284</span>
                  </div>
                </div>
                <div className="rounded-2xl border border-slate-200 p-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-slate-500">
                      Qualified leads
                    </span>
                    <span className="text-lg font-semibold">217</span>
                  </div>
                </div>
                <div className="rounded-2xl border border-slate-200 p-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-slate-500">Booked calls</span>
                    <span className="text-lg font-semibold text-green-600">
                      46
                    </span>
                  </div>
                </div>
              </div>

              <div className="mt-6 rounded-2xl bg-slate-900 p-5 text-white">
                <p className="text-sm text-slate-300">AI agent summary</p>
                <p className="mt-2 text-sm leading-6 text-slate-100">
                  Prospect matched the target profile, expressed buying intent,
                  and accepted a meeting for Thursday at 2:30 PM.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 pb-8 lg:px-8">
        <div className="grid gap-6 md:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="rounded-[2rem] border border-slate-200 p-8 shadow-sm"
            >
              <h3 className="text-xl font-semibold">{feature.title}</h3>
              <p className="mt-3 leading-7 text-slate-600">{feature.text}</p>
            </div>
          ))}
        </div>
      </section>

      <section
        id="how-it-works"
        className="mx-auto max-w-7xl px-6 py-20 lg:px-8"
      >
        <div className="mb-10 max-w-2xl">
          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-green-600">
            How it works
          </p>
          <h2 className="mt-3 text-4xl font-bold tracking-tight">
            Simple outbound calling that drives pipeline.
          </h2>
          <p className="mt-4 text-lg text-slate-600">
            CallBooked plugs into your outreach process and focuses on one
            thing: turning solar, energy, and telecom lead lists into qualified,
            revenue-generating appointments.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-3">
          {steps.map((step, index) => (
            <div
              key={step}
              className="rounded-[2rem] bg-slate-50 p-8 shadow-sm ring-1 ring-slate-200"
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-900 text-lg font-bold text-white">
                {index + 1}
              </div>
              <p className="mt-6 text-lg font-medium leading-8 text-slate-900">
                {step}
              </p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 pb-8 lg:px-8">
        <div className="mb-10 max-w-2xl">
          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-green-600">
            Use cases
          </p>
          <h2 className="mt-3 text-4xl font-bold tracking-tight">
            Where CallBooked drives real results
          </h2>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {[
            "Book more solar site surveys and installations",
            "Qualify heat pump leads and grant eligibility",
            "Schedule telecom contract reviews and upgrades",
            "Engage businesses for grant funding opportunities",
            "Pre-qualify prospects for legal consultations",
            "Convert cold outreach into high-intent sales calls",
          ].map((item) => (
            <div
              key={item}
              className="rounded-[2rem] border border-slate-200 p-6 shadow-sm"
            >
              <p className="text-lg font-medium text-slate-900">{item}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="industries" className="bg-slate-50 py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mb-10 max-w-2xl">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-green-600">
              Who it is for
            </p>
            <h2 className="mt-3 text-4xl font-bold tracking-tight">
              Built for industries where a booked call directly drives revenue.
            </h2>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {industries.map((industry) => (
              <div
                key={industry}
                className="rounded-[1.5rem] border border-slate-200 bg-white p-6 text-lg font-medium shadow-sm"
              >
                {industry}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
        <div className="mb-12 rounded-[2rem] border border-green-200 bg-green-50 p-8 text-center shadow-sm">
          <h3 className="text-2xl font-bold text-slate-900">
            Only pay for sat appointments
          </h3>
          <p className="mt-3 text-lg text-slate-700">
            Cost-effective, commission-only results. We only succeed when you
            do. With CallBooked, you don’t pay for calls, leads, or maybes — you
            only pay when a qualified prospect shows up to a booked appointment.
          </p>
        </div>
        <div className="rounded-[2rem] bg-slate-900 px-8 py-12 text-white shadow-2xl lg:px-12">
          <div className="grid gap-8 lg:grid-cols-[1.5fr_1fr] lg:items-center">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-green-400">
                Why CallBooked
              </p>
              <h2 className="mt-3 text-4xl font-bold tracking-tight">
                More qualified conversations without building a call team.
              </h2>
              <p className="mt-4 max-w-2xl text-lg leading-8 text-slate-300">
                Use AI calling to qualify solar, heat pump, energy, and telecom
                leads faster, follow up consistently, and keep your sales
                calendar full with high-intent prospects ready to buy.
              </p>
            </div>
            <div className="rounded-[1.5rem] bg-white/5 p-6 ring-1 ring-white/10">
              <div className="space-y-4 text-sm text-slate-300">
                <div className="flex items-center justify-between">
                  <span>Lead qualification</span>
                  <span className="font-semibold text-white">Included</span>
                </div>
                <div className="flex items-center justify-between">
                  <span>Appointment booking</span>
                  <span className="font-semibold text-white">Included</span>
                </div>
                <div className="flex items-center justify-between">
                  <span>Campaign reporting</span>
                  <span className="font-semibold text-white">Included</span>
                </div>
                <div className="flex items-center justify-between">
                  <span>Outbound scale</span>
                  <span className="font-semibold text-white">Built in</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="contact" className="mx-auto max-w-4xl px-6 pb-24 lg:px-8">
        <div className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm lg:p-12">
          <form id="demoForm">
            <h2 className="text-3xl font-bold tracking-tight">Book a demo</h2>
            <p className="mt-3 max-w-2xl text-slate-600">
              See how CallBooked can help you generate more qualified
              appointments with AI enhanced intelligent outbound calling.
            </p>
            <div className="mt-8 grid gap-4 sm:grid-cols-2">
              <input
                id="your-name"
                className="rounded-2xl border border-slate-300 px-4 py-4 outline-none ring-0 transition focus:border-slate-900"
                placeholder="Your name"
              />
              <input
                id="company-name"
                className="rounded-2xl border border-slate-300 px-4 py-4 outline-none ring-0 transition focus:border-slate-900"
                placeholder="Company name"
              />
              <input
                id="work-email"
                className="rounded-2xl border border-slate-300 px-4 py-4 outline-none ring-0 transition focus:border-slate-900 sm:col-span-2"
                placeholder="Work email"
              />
              <textarea
                id="outbound-goals"
                className="min-h-[130px] rounded-2xl border border-slate-300 px-4 py-4 outline-none ring-0 transition focus:border-slate-900 sm:col-span-2"
                placeholder="Tell us about your outbound goals"
              />
            </div>
            <button
              id="request-demo"
              type="submit"
              className="mt-6 rounded-2xl bg-green-600 px-6 py-4 text-sm font-semibold text-white shadow-lg transition hover:-translate-y-0.5"
            >
              Request demo
            </button>
          </form>
        </div>
        <script type="module" src="app.js"></script>
      </section>
    </div>
  );
}