import { ArrowRight, Github, Download, Layers3 } from "lucide-react";
import { PROJECT } from "@/lib/project-config";
import { Chip, MiniKpi, StatusBadge, LegendDot } from "./primitives";
import { HeroSnapshotChart } from "./charts";

const CHIPS = [
  "5 VOCs",
  "41 completed experiments",
  "20 wt% TiO₂/SiO₂",
  "UVC 254 nm",
  "23.8 L min⁻¹",
  "GC-PID/TID",
  "PFR + Langmuir–Hinshelwood",
  "Levenberg–Marquardt",
];

export function Hero() {
  return (
    <section id="top" className="relative overflow-hidden">
      <div className="mx-auto max-w-7xl px-6 pb-20 pt-16 lg:pt-24">
        <div className="grid items-start gap-12 lg:grid-cols-[1.15fr_1fr]">
          <div>
            <div className="inline-flex items-center rounded-full border border-border bg-secondary/50 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
              CHEMICAL ENGINEERING · GAS-PHASE VOCs · TiO₂/SiO₂ · RESEARCH CASE STUDY
            </div>
            <h1 className="mt-5 text-4xl font-bold leading-[1.05] tracking-tight text-foreground sm:text-5xl lg:text-6xl">
              High-velocity fluidized-bed
              <br />
              <span
                className="bg-clip-text text-transparent"
                style={{
                  backgroundImage:
                    "linear-gradient(90deg, oklch(0.74 0.16 158), oklch(0.74 0.12 188), oklch(0.78 0.11 210))",
                }}
              >
                photocatalysis
              </span>
            </h1>
            <p className="mt-5 max-w-2xl text-sm leading-relaxed text-muted-foreground sm:text-base">
              An experimental and modelling study of gas-phase n-hexane, n-pentane, benzene, toluene and butanone in a
              circulating annular photoreactor — from supported-catalyst synthesis and GC-PID sampling to
              Langmuir–Hinshelwood parameter estimation.
            </p>
            <p className="mt-3 max-w-2xl text-sm leading-relaxed text-muted-foreground">
              The dataset connects operating conditions, adsorption saturation, inlet/outlet concentration cycles,
              steady-state conversion, catalyst properties, kinetic constants and process limitations in one
              auditable engineering chain.
            </p>
            <div className="mt-6 flex flex-wrap gap-2">
              {CHIPS.map((c) => (
                <Chip key={c}>{c}</Chip>
              ))}
            </div>
            <div className="mt-8 flex flex-wrap gap-3">
              <a
                href="#kpis"
                className="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold text-[oklch(0.16_0.03_250)] shadow-md transition-transform hover:-translate-y-0.5"
                style={{
                  backgroundImage:
                    "linear-gradient(135deg, oklch(0.74 0.16 158), oklch(0.74 0.12 188))",
                }}
              >
                Explore the dataset <ArrowRight className="h-4 w-4" />
              </a>
              <a
                href="#reactor"
                className="inline-flex items-center gap-2 rounded-md border border-border bg-background/40 px-4 py-2 text-sm text-foreground transition-colors hover:border-[color:var(--primary)]/60"
              >
                View reactor architecture
              </a>
              <a
                href={PROJECT.githubUrl}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-2 rounded-md border border-border bg-background/40 px-4 py-2 text-sm text-foreground transition-colors hover:border-[color:var(--primary)]/60"
              >
                <Github className="h-4 w-4" /> Open GitHub
              </a>
              <a
                href={PROJECT.packageUrl}
                download
                className="inline-flex items-center gap-2 rounded-md border border-border bg-background/40 px-4 py-2 text-sm text-foreground transition-colors hover:border-[color:var(--primary)]/60"
              >
                <Download className="h-4 w-4" /> Download project package
              </a>
            </div>
            <p className="mt-8 max-w-2xl text-xs leading-relaxed text-muted-foreground">
              Research dataset from FAPESP project 2020/09004-2, developed in the AdOx-CESQ/PQI-EPUSP research
              environment. Laboratory-scale results; no institutional endorsement or industrial-performance claim is
              implied.
            </p>
          </div>
          <HeroDashboardCard />
        </div>
      </div>
    </section>
  );
}

export function HeroDashboardCard() {
  return (
    <div className="glass-panel rounded-2xl p-6">
      <div className="flex items-center justify-between">
        <div>
          <div className="text-sm font-semibold text-foreground">Kinetic snapshot</div>
          <div className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
            Reconstructed model curves
          </div>
        </div>
        <div className="flex flex-col items-end gap-1">
          <span className="text-[10px] uppercase tracking-[0.15em] text-muted-foreground">RFLF · v1.0</span>
          <StatusBadge tone="emerald">Validated dataset</StatusBadge>
        </div>
      </div>
      <div className="mt-5 grid grid-cols-2 gap-3">
        <MiniKpi value="41" label="Completed matrix experiments" tone="teal" />
        <MiniKpi value="4" label="VOCs with fitted k and Ka" tone="cyan" />
        <MiniKpi value="23.8 L min⁻¹" label="Airflow setpoint" tone="emerald" />
        <MiniKpi value="430 m² g⁻¹" label="Catalyst surface area" tone="amber" />
      </div>
      <div className="mt-5">
        <HeroSnapshotChart />
      </div>
      <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
        <span className="inline-flex items-center gap-1.5">
          <Layers3 className="h-3 w-3" /> C₀ (ppmv) vs X (%)
        </span>
        <LegendDot tone="teal" label="n-hexane" />
        <LegendDot tone="amber" label="n-pentane" />
        <LegendDot tone="cyan" label="benzene" />
        <LegendDot tone="emerald" label="toluene" />
      </div>
    </div>
  );
}
