import { ButtonLink } from "@/components/ui/Button";

// Two-column hero: copy + CTAs on the left (max-w 620px), phone-mockup
// graphic on the right. Structure/spacing verified against the reference
// (border-bottom hairline under the whole hero, clamp-based fluid padding).
export default function Hero() {
  return (
    <section className="border-b border-neutral-300 flex flex-wrap w-full">
      <div className="flex-1 basis-[420px] max-w-[620px] px-[5%] lg:px-10 py-16 lg:py-[88px]">
        <h1 className="font-display font-black text-[34px] sm:text-[44px] lg:text-[54px] leading-[1.05] tracking-[-0.02em] mb-5 text-ink">
          The app where allBETs matter!
        </h1>
        <p className="text-base leading-relaxed text-neutral-700 max-w-[56ch] mb-6">
          allBETs provide a peer-to-peer, simple, trash-talking, and friction-less experience. Place a
          friendly wager with your friends, verified the money is real, and go live to wager on anything!
        </p>
        <div className="flex flex-wrap gap-3">
          <ButtonLink href="https://app.allbetsgo.com" variant="primary">
            Log In / Open App
          </ButtonLink>
          <ButtonLink href="/shop" variant="outline">
            Shop allBETs Go
          </ButtonLink>
        </div>
      </div>

      <div className="flex-1 basis-[340px] max-w-[620px] px-[5%] lg:px-10 pt-4 lg:pt-10 flex items-end justify-center">
        {/* Deliberate approximation: the reference uses a bespoke composite phone-mockup
            illustration (app screens + star accents) that isn't extractable as a discrete
            asset. Recreated here as a lightweight phone-frame + star SVG in the same
            palette/position so the layout and proportions still match. */}
        <PhoneMockup />
      </div>
    </section>
  );
}

function PhoneMockup() {
  return (
    <div className="relative w-full max-w-[420px] aspect-[560/460]">
      <svg viewBox="0 0 400 340" className="w-full h-full" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M60 60l30-24 22 26-160 250-30 24-22-26z" fill="#f4b123" opacity="0.9" />
        <path d="M330 40l16-30 22 12-70 172-16 30-22-12z" fill="#b08968" opacity="0.5" />

        <rect x="70" y="60" width="150" height="270" rx="26" fill="#1d2739" />
        <rect x="78" y="76" width="134" height="238" rx="4" fill="#f5f6f8" />
        <rect x="120" y="220" width="90" height="34" rx="17" fill="#f4b123" />

        <rect x="190" y="20" width="150" height="270" rx="26" fill="#1d2739" />
        <rect x="198" y="36" width="134" height="238" rx="4" fill="#ffffff" />
        <circle cx="265" cy="90" r="22" fill="#b08968" />
        <rect x="210" y="130" width="110" height="10" rx="5" fill="#dfe3e9" />
        <rect x="210" y="150" width="80" height="10" rx="5" fill="#dfe3e9" />
        <rect x="210" y="230" width="110" height="30" rx="8" fill="#1d2739" />
      </svg>
    </div>
  );
}