// app/(public)/page.tsx
// Teleton Rifa landing (agent A). Mobile-first single scrolling column.
//
// READ PATH (architecture.md 7.1): the spike must never reach Postgres per view.
// getLandingData() reads the active raffle, its prizes, and the confirmed-boletos
// aggregate through unstable_cache with short TTLs, so a viral live costs roughly
// one query per revalidation window, not one per request.
//
// RESILIENCE: agent H seeds the DB in parallel and the DB may be EMPTY or
// unreachable at build time (and secrets may be absent in CI/preview). The page
// is marked force-dynamic so `next build` never executes a live query, and
// getLandingData() wraps every read in try/catch and returns zero-data
// placeholders. The page builds and renders fully with no data.

import * as React from "react";
import type { Metadata } from "next";
import {
  Hero,
  HowItWorks,
  PrizeSlider,
  PricingPlans,
  PrizeGrid,
  CauseImpact,
  BoletosCounter,
  InfluencerBlock,
  Faq,
  SiteFooter,
  BottomCta,
  TrustStrip,
  SmoothScrollProvider,
  getLandingData,
} from "@/components/landing";
import type { PrizeSlide } from "@/components/landing";
import { Countdown } from "@/components/ui/Countdown";

// Never run the DB read at build time; render per request and lean on the cached
// reads inside getLandingData for the spike. A short revalidate would also work,
// but force-dynamic is the safest guarantee that `next build` never hits a live,
// possibly-absent database.
export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Rifa Teletón Perú. Tu ayuda también te ayuda a ti",
  description:
    "Participa en la rifa de Teletón. Ayudas a miles de chicos y entras al sorteo por premios reales.",
  openGraph: {
    title: "Rifa Teletón Perú. Tu ayuda también te ayuda a ti",
    description:
      "Participa en la rifa de Teletón. Ayudas a miles de chicos y entras al sorteo por premios reales.",
    locale: "es_PE",
    type: "website",
    // Explicit reference so the social image survives this page's own openGraph
    // block. A static openGraph object otherwise suppresses the file-convention
    // og:image (app/opengraph-image.tsx). metadataBase makes the path absolute.
    images: [
      {
        url: "/opengraph-image",
        width: 1200,
        height: 630,
        alt: "Rifa Teletón Perú. Tu ayuda también te ayuda a ti",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Rifa Teletón Perú. Tu ayuda también te ayuda a ti",
    description:
      "Participa en la rifa de Teletón. Ayudas a miles de chicos y entras al sorteo por premios reales.",
    images: ["/twitter-image"],
  },
};

export default async function LandingPage() {
  const { raffle, prizes, boletosConfirmed, boletosGoal } = await getLandingData();

  // Slides for the §1.2 prize banner. Until the team's banner art lands (Alex +
  // Churchill), we feed it the confirmed prizes so the hook is never empty; swap
  // in the delivered art slides here when ready.
  const prizeSlides: PrizeSlide[] = prizes
    .filter((p) => p.isConfirmed)
    .map((p) => ({
      id: p.id,
      imageUrl: p.imageUrl,
      kicker: "Premio destacado",
      title: p.name,
      caption: p.description ?? undefined,
    }));

  return (
    // Bottom padding keeps the floating "Quiero participar" button (BottomCta)
    // from covering the last lines of the footer.
    <div className="pb-28">
      {/* First-load legitimacy: a quiet "rifa oficial" sub-lockup + trust strip
          right under the top bar, because users arrive cold from a social link
          and are about to pay (ux.md 1.1, 6). */}
      <div className="border-b border-hairline bg-canvas px-5 py-2">
        <div className="mx-auto flex max-w-[1200px] flex-col items-center gap-1 text-center sm:flex-row sm:justify-between sm:text-left">
          <p className="font-body text-caption font-bold uppercase tracking-wide text-primary">
            Rifa oficial Teletón
          </p>
          <TrustStrip align="left" />
        </div>
      </div>

      {/* data-reveal: each section fades + slides up as it scrolls into view
          (GSAP/ScrollTrigger, driven by SmoothScrollProvider). The hidden start
          state is set pre-paint and is fully gated on JS + prefers-reduced-motion
          (see app/globals.css + app/layout.tsx), so this degrades to plain
          visible content with no motion. The trust header above stays static for
          instant first-load legitimacy. */}
      <div data-reveal>
        <Hero raffle={raffle} />
      </div>
      {/* §1.2 prize banner — the hook, right after the brand/logo block. */}
      <div data-reveal>
        <PrizeSlider slides={prizeSlides} />
      </div>
      {/* §2 countdown to the nearest draw, under the hero (urgency). */}
      {raffle ? (
        <div data-reveal className="bg-canvas px-5 pt-lg">
          <div className="mx-auto flex max-w-[1100px] flex-col items-center">
            <Countdown
              to={raffle.drawAt}
              label="El sorteo más cercano empieza en"
            />
          </div>
        </div>
      ) : null}
      <div data-reveal>
        <HowItWorks />
      </div>
      {/* §1.4 dated prize cards (the specific, live timeline). */}
      <div data-reveal>
        <PrizeGrid prizes={prizes} />
      </div>
      {/* §1.5 planes / precios — cada S/5 = 1 boleto, one-time, no subscription. */}
      <div data-reveal>
        <PricingPlans />
      </div>
      {/* Cause / impact as its own beat (no prize re-listing here). */}
      <div data-reveal>
        <CauseImpact />
      </div>
      <div data-reveal>
        <BoletosCounter count={boletosConfirmed} goal={boletosGoal} />
      </div>
      {/* Optional, data-driven: hidden while there is no influencer profile. */}
      <InfluencerBlock influencer={null} />
      <div data-reveal>
        <Faq basesUrl={raffle?.basesUrl ?? null} />
      </div>
      <div data-reveal>
        <SiteFooter basesUrl={raffle?.basesUrl ?? null} />
      </div>

      {/* Persistent bottom CTA: portals into the layout's #persistent-cta-slot. */}
      <BottomCta />

      {/* Landing motion engine: Lenis smooth scroll + scroll-reveal. Mounted
          only here, so it never runs on the purchase flow or admin. Renders
          nothing; fully no-ops under prefers-reduced-motion. */}
      <SmoothScrollProvider />
    </div>
  );
}