/**
 * ThinkSchool Public Website — Cinematic Hero Section
 * Large Instrument Serif headline, amber glow effects, and real Organization Overview ERP mockup.
 */
function Hero() {
  const siteConfig = window.SITE_CONFIG || {};
  const hero = siteConfig.hero || {};
  const assetsConfig = window.ASSETS_CONFIG || {};
  const screenshots = assetsConfig.screenshots || {};

  return (
    <section className="relative pt-32 sm:pt-40 pb-20 md:pb-28 overflow-hidden bg-black text-white">
      {/* Background Radial Glow & Sub-grid decoration */}
      <div
        className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-gradient-to-b from-amber-500/15 via-orange-600/5 to-transparent rounded-full blur-3xl pointer-events-none -z-10"
        aria-hidden="true"
      />
      <div
        className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] -z-10 pointer-events-none"
        aria-hidden="true"
      />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Editorial Text Content */}
        <div className="flex flex-col items-center text-center max-w-4xl mx-auto">
          {hero.eyebrow && (
            <div className="mb-5 animate-fade-in">
              <Badge variant="amber" icon={<Icon name="award" size={14} />}>
                {hero.eyebrow}
              </Badge>
            </div>
          )}

          <h1 className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-normal font-heading italic tracking-tight text-white leading-[1.06] mb-6">
            {hero.headline || "Run your entire school from one connected platform."}
          </h1>

          <p className="text-base sm:text-xl text-zinc-300 font-body leading-relaxed max-w-2xl sm:max-w-3xl mb-10">
            {hero.description ||
              "ThinkSchool connects academics, admissions, attendance, fee collections, timetable, exams, and multi-campus operations with server-enforced role privacy."}
          </p>

          {/* Action CTAs */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full sm:w-auto mb-16">
            {hero.primaryCTA && (
              <Button
                href={hero.primaryCTA.href}
                size="lg"
                variant="primary"
                iconAfter={<Icon name="arrow-right" size={16} />}
                className="w-full sm:w-auto text-base px-8 py-3.5"
              >
                {hero.primaryCTA.label}
              </Button>
            )}

            {hero.secondaryCTA && (
              <Button
                href={hero.secondaryCTA.href}
                size="lg"
                variant="secondary"
                className="w-full sm:w-auto text-base px-7 py-3.5"
              >
                {hero.secondaryCTA.label}
              </Button>
            )}
          </div>

          {/* Quick Pillar Badges */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-6 text-xs text-zinc-400 font-body pt-6 border-t border-white/10 w-full max-w-3xl mb-14">
            <div className="flex items-center justify-center gap-2">
              <Icon name="check" size={14} className="text-amber-400" />
              <span>Multi-Campus Scoping</span>
            </div>
            <div className="flex items-center justify-center gap-2">
              <Icon name="check" size={14} className="text-amber-400" />
              <span>24-hr Attendance Cutoff</span>
            </div>
            <div className="flex items-center justify-center gap-2">
              <Icon name="check" size={14} className="text-amber-400" />
              <span>Partial Fee Receipts</span>
            </div>
            <div className="flex items-center justify-center gap-2">
              <Icon name="check" size={14} className="text-amber-400" />
              <span>Native Flutter Client</span>
            </div>
          </div>
        </div>

        {/* Hero Visual Mockup */}
        <div className="relative max-w-5xl mx-auto mt-4 px-2 sm:px-0">
          <div className="absolute -inset-4 bg-gradient-to-b from-amber-500/20 via-orange-500/10 to-transparent rounded-3xl blur-2xl -z-10 pointer-events-none" />
          <ScreenshotFrame
            src={(screenshots.adminOverview && screenshots.adminOverview.src) || "/ASSETS/admin-overview.png"}
            alt="ThinkSchool Organization Overview Dashboard"
            title="app.thinkschool.live/dashboard"
            roleBadge="Super Admin & Management"
            caption="Real Organization Overview: authorized campus switcher, quick tool launcher, admissions inbox, and daily roll-call."
            perspective={true}
            priority={true}
            className="hero-mockup-frame"
          />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;