"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { PlaceholderImage } from "./PlaceholderImage";

// Numbers modeled loosely on the real Ace Eye Care engagement, ticking gently
// to suggest a live system without claiming a live data connection.
// This must stay clearly labeled as illustrative — see the caption below.
function useSimulatedMetric(base: number, variance: number, intervalMs = 3200) {
  const [value, setValue] = useState(base);
  useEffect(() => {
    const id = setInterval(() => {
      setValue(base + Math.floor(Math.random() * variance));
    }, intervalMs);
    return () => clearInterval(id);
  }, [base, variance, intervalMs]);
  return value;
}

function LiveSystemCard() {
  const bookings = useSimulatedMetric(25, 5);
  const leads = useSimulatedMetric(7, 5);

  return (
    <div className="absolute -bottom-7 -left-7 w-[300px] rounded-2xl bg-navy p-5 text-white shadow-[0_24px_50px_-16px_rgba(11,29,58,0.4)] max-[600px]:static max-[600px]:mt-4 max-[600px]:w-auto">
      <div className="mb-2.5 flex items-center justify-between text-[11.5px] text-white/55">
        <span>Ace Eye Care — this week</span>
        <span className="flex items-center gap-1.5 text-green">
          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-green" />
          Simulated
        </span>
      </div>
      <div className="flex justify-between border-t border-white/10 py-2 text-sm first:border-t-0">
        <span>Bookings</span>
        <span className="font-semibold text-green">{bookings} confirmed</span>
      </div>
      <div className="flex justify-between border-t border-white/10 py-2 text-sm">
        <span>No-shows</span>
        <span className="font-semibold text-green">Down 41%</span>
      </div>
      <div className="flex justify-between border-t border-white/10 py-2 text-sm">
        <span>New leads</span>
        <span className="font-semibold text-green">+{leads}</span>
      </div>
    </div>
  );
}

export function Hero() {
  return (
    <section className="pb-24 pt-14">
      <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-11 px-8 md:grid-cols-2">
        <div>
          <p className="mb-4 font-heading text-sm font-semibold text-blue">
            Systems that make business work
          </p>
          <h1 className="mb-5 font-heading text-4xl font-semibold leading-tight tracking-tight md:text-5xl">
            The systems run themselves. The relationship doesn&apos;t.
          </h1>
          <p className="mb-8 max-w-[460px] text-lg text-navy/65">
            We build the website, booking, and marketing setup that quietly runs
            in the background — and we stay close as real people, not a support
            ticket queue.
          </p>
          <div className="mb-8 flex flex-wrap gap-3.5">
            <Link
              href="/book"
              className="rounded-full bg-green px-6 py-4 text-[15px] font-semibold text-white"
            >
              Book your free 30-minute call
            </Link>
            <Link
              href="/work"
              className="rounded-full border border-navy/10 px-6 py-4 text-[15px] font-semibold"
            >
              See our work
            </Link>
          </div>
          <div className="flex items-center gap-2 text-sm text-navy/65">
            <div className="flex">
              <span className="h-[26px] w-[26px] rounded-full border-2 border-white bg-gradient-to-br from-blue to-green" />
              <span className="-ml-2 h-[26px] w-[26px] rounded-full border-2 border-white bg-gradient-to-br from-blue to-green" />
              <span className="-ml-2 h-[26px] w-[26px] rounded-full border-2 border-white bg-gradient-to-br from-blue to-green" />
            </div>
            Trusted by clinics and growing service businesses
          </div>
        </div>

        <div className="relative">
          <div className="absolute -right-4 -top-5 hidden max-w-[200px] rounded-2xl border border-navy/10 bg-white p-4 text-[12.5px] text-navy/65 shadow-[0_14px_30px_-14px_rgba(11,29,58,0.25)] sm:block">
            &ldquo;They handled everything — we just started getting
            bookings.&rdquo; — Ace Eye Care
          </div>
          <PlaceholderImage
            label="Photo placeholder — real client or team, warm and candid · 760×920"
            className="h-[460px]"
          />
          <LiveSystemCard />
        </div>
      </div>
      <p className="mx-auto mt-3 max-w-6xl px-8 text-xs text-navy/50">
        Illustrative simulation for demonstration — modeled on real automation
        built for dChimes Systems clients.
      </p>
    </section>
  );
}