// components/landing/Hero.tsx
// "Banner Principal" (rifa-solidaria-estructura.docx). The campaign's signature
// red key-visual band carries the official "Teletón La Hacemos Todos" lockup, the
// rifa title + subtitle + cause line, and a scatter of hand-drawn doodles; the
// donation form sits directly underneath, overlapping the band, so the form is
// "de frente" exactly as the brief asks. Server component: it only renders the
// brand chrome and hands the raffle to the client <DonationForm>.

import * as React from "react";
import type { PublicRaffle } from "@/lib/types";
import { DonationForm } from "@/components/flow/DonationForm";
import { TrustStrip } from "./TrustStrip";
import { AnimatedHeading } from "./AnimatedHeading";
import { BrandLogo, BrushUnderline, Doodle } from "./brand";

export interface HeroProps {
  raffle: PublicRaffle | null;
}

export function Hero({ raffle }: HeroProps) {
  return (
    <section aria-labelledby="hero-title" className="bg-canvas">
      {/* Red campaign band (Manual visual TLHT key visual). */}
      <div className="relative overflow-hidden bg-primary text-on-primary">
        {/* Decorative doodles (aria-hidden, white-on-red, never intercept taps). */}
        <Doodle name="corazon-02" white className="absolute left-3 top-8 w-12 opacity-30 -rotate-12 sm:w-16" />
        <Doodle name="estrella-02" white className="absolute right-4 top-12 w-14 opacity-25 rotate-12 sm:w-20" />
        <Doodle name="nube-02" white className="absolute right-[18%] bottom-32 hidden w-24 opacity-20 sm:block" />
        <Doodle name="flor-02" white className="absolute left-[12%] bottom-28 hidden w-16 opacity-20 sm:block" />

        <div className="relative mx-auto flex max-w-[760px] flex-col items-center gap-md px-5 pb-40 pt-section text-center">
          <BrandLogo variant="white" withDate className="mx-auto h-20 w-auto sm:h-24" />

          <div className="flex flex-col items-center gap-1">
            <AnimatedHeading
              as="h1"
              id="hero-title"
              className="font-display text-display-sm font-extrabold tracking-tight text-on-primary xs:text-display-md md:text-display-lg"
            >
              Rifa Solidaria
            </AnimatedHeading>
            <BrushUnderline tone="white" className="h-3 w-48 sm:w-60" />
          </div>

          <p className="font-display text-heading-md font-bold uppercase tracking-wide text-on-primary">
            Participa por increíbles premios
          </p>

          <p className="max-w-[54ch] text-pretty font-body text-body-lg text-on-primary/90">
            Cada boleto de la Rifa Solidaria Teletón ayuda a que más niñas y niños
            accedan a sus terapias de rehabilitación.
          </p>
        </div>
      </div>

      {/* The form, pulled up so it overlaps the red band ("de frente"). */}
      <div id="donar" className="relative z-10 -mt-28 scroll-mt-24 px-5">
        <div className="mx-auto flex w-full max-w-[480px] flex-col items-center gap-md">
          <DonationForm raffle={raffle} />
          <TrustStrip />
        </div>
      </div>
    </section>
  );
}