import React from "react";
import { motion } from "framer-motion";

const ICON_PATHS = {
  arrowRight: "M5 12h14M13 5l7 7-7 7",
  shieldCheck: "M12 3l7 4v5c0 5-3.5 8.5-7 9-3.5-.5-7-4-7-9V7l7-4z M9 12l2 2 4-5",
  zap: "M13 2L4 14h7l-1 8 10-13h-7l0-7z",
  globe: "M12 2a10 10 0 100 20 10 10 0 000-20z M2 12h20 M12 2c3 3 4 6.5 4 10s-1 7-4 10 M12 2c-3 3-4 6.5-4 10s1 7 4 10",
  fileCheck: "M7 3h7l5 5v13H7V3z M14 3v5h5 M9 15l2 2 5-6",
  network: "M6 6h.01 M18 6h.01 M12 18h.01 M6 6l12 0 M6 6l6 12 M18 6l-6 12",
  building: "M4 21V5a2 2 0 012-2h9a2 2 0 012 2v16 M3 21h18 M8 7h2 M8 11h2 M8 15h2 M14 7h2 M14 11h2 M14 15h2",
  chevronRight: "M9 18l6-6-6-6",
};

const TEST_CASES = [
  { name: "hasMinimumProjectSize", value: "50MW+", expected: "50MW+" },
  { name: "hasCoreStructure", value: "PPA", expected: "PPA" },
  { name: "hasEnoughTargetSegments", value: 6, expected: 6 },
  { name: "usesProvidedLogo", value: "/mnt/data/logo.png", expected: "/mnt/data/logo.png" },
  { name: "noPublicEmail", value: false, expected: false },
  { name: "noQuestionnaireDownload", value: false, expected: false },
];

export function runHomepageSanityTests() {
  return TEST_CASES.map((test) => ({
    ...test,
    passed: test.value === test.expected,
  }));
}

const Icon = ({ name, size = 22, className = "", fill = "none" }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 24 24"
    width={size}
    height={size}
    className={className}
    fill={fill}
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d={ICON_PATHS[name]} />
  </svg>
);

const Button = ({ children, variant = "primary", className = "" }) => {
  const base = "inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-semibold transition-all";
  const styles =
    variant === "primary"
      ? "bg-white text-slate-950 hover:bg-slate-200 shadow-lg shadow-black/20"
      : "border border-white/20 text-white hover:bg-white/10";

  return <button className={`${base} ${styles} ${className}`} type="button">{children}</button>;
};

const SectionLabel = ({ children }) => (
  <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-emerald-200">
    <span className="h-1.5 w-1.5 rounded-full bg-emerald-300" />
    {children}
  </div>
);

const Stat = ({ value, label }) => (
  <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 backdrop-blur">
    <div className="text-3xl font-semibold text-white">{value}</div>
    <div className="mt-2 text-sm leading-6 text-slate-300">{label}</div>
  </div>
);

const Card = ({ icon, title, children }) => (
  <div className="group rounded-3xl border border-white/10 bg-white/[0.04] p-6 shadow-2xl shadow-black/10 transition-all hover:-translate-y-1 hover:bg-white/[0.07]">
    <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-300/10 text-emerald-200 ring-1 ring-emerald-300/20">
      <Icon name={icon} size={22} />
    </div>
    <h3 className="text-lg font-semibold text-white">{title}</h3>
    <p className="mt-3 text-sm leading-7 text-slate-300">{children}</p>
  </div>
);

const Step = ({ number, title, children }) => (
  <div className="relative rounded-3xl border border-white/10 bg-slate-950/60 p-6">
    <div className="absolute -top-4 left-6 flex h-8 w-8 items-center justify-center rounded-full bg-emerald-300 text-sm font-black text-slate-950">
      {number}
    </div>
    <h3 className="mt-4 text-lg font-semibold text-white">{title}</h3>
    <p className="mt-3 text-sm leading-7 text-slate-300">{children}</p>
  </div>
);

const readinessItems = [
  ["Demand profile", "50MW industrial load", "92%"],
  ["Commercial frame", "Target price / kWh defined", "78%"],
  ["Site viability", "Location and interconnect review", "64%"],
  ["Decision access", "Buyer-side sponsor identified", "84%"],
];

const targetSegments = [
  "Mining operations",
  "Island and remote grids",
  "Industrial parks",
  "Data and critical infrastructure",
  "Government-backed energy programs",
  "Large private offtakers",
];

export default function AgeraEnergyGroupHome() {
  return (
    <main className="min-h-screen bg-slate-950 text-white">
      <div className="pointer-events-none fixed inset-0 overflow-hidden">
        <div className="absolute -left-24 top-0 h-96 w-96 rounded-full bg-emerald-500/20 blur-3xl" />
        <div className="absolute right-0 top-40 h-[28rem] w-[28rem] rounded-full bg-cyan-500/10 blur-3xl" />
        <div className="absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-lime-400/10 blur-3xl" />
      </div>

      <header className="relative z-10 mx-auto flex max-w-7xl items-center justify-between px-6 py-6 lg:px-8">
        <a href="#" className="flex items-center" aria-label="Agera Energy Group home">
          <img
            src="logo.png"
            alt="Agera Energy Group"
            className="h-12 w-auto max-w-[230px] object-contain md:h-14"
          />
        </a>
        <nav className="hidden items-center gap-8 text-sm text-slate-300 md:flex">
          <a href="#model" className="hover:text-white">Model</a>
          <a href="#projects" className="hover:text-white">Projects</a>
          <a href="#process" className="hover:text-white">Process</a>
          <a href="#contact" className="hover:text-white">Contact</a>
        </nav>
        <a href="#contact" className="hidden md:block">
          <Button variant="secondary">Start a project</Button>
        </a>
      </header>

      <section className="relative z-10 mx-auto grid max-w-7xl items-center gap-12 px-6 pb-20 pt-10 lg:grid-cols-[1.05fr_0.95fr] lg:px-8 lg:pb-28 lg:pt-20">
        <motion.div initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
          <SectionLabel>Power projects without the procurement fog</SectionLabel>
          <h1 className="max-w-4xl text-5xl font-semibold tracking-tight text-white md:text-7xl">
            Structured access to next-generation baseload energy.
          </h1>
          <p className="mt-7 max-w-2xl text-lg leading-8 text-slate-300">
            Agera Energy Group originates, qualifies and coordinates large-scale energy opportunities for industrial, mining and infrastructure customers seeking long-term power purchase solutions.
          </p>
          <div className="mt-9 flex flex-col gap-3 sm:flex-row">
            <a href="#contact">
              <Button>
                Discuss a PPA opportunity <Icon name="arrowRight" className="ml-2" size={17} />
              </Button>
            </a>
            <a href="#process"><Button variant="secondary">See the process</Button></a>
          </div>
          <div className="mt-10 grid max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
            <Stat value="50MW+" label="Suitable starting size for major industrial opportunities" />
            <Stat value="PPA" label="Commercial structure centered on long-term power delivery" />
            <Stat value="Global" label="Project origination across high-need energy markets" />
          </div>
        </motion.div>

        <motion.div initial={{ opacity: 0, scale: 0.97 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.8, delay: 0.1 }} className="relative">
          <div className="absolute inset-0 rounded-[2rem] bg-gradient-to-br from-emerald-300/30 to-cyan-400/10 blur-2xl" />
          <div className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.05] p-4 shadow-2xl shadow-black/40 backdrop-blur-xl">
            <div className="rounded-[1.5rem] bg-slate-950/80 p-6">
              <div className="mb-6 flex items-center justify-between">
                <div>
                  <div className="text-sm font-semibold text-slate-300">Project readiness</div>
                  <div className="text-xs text-slate-500">Indicative qualification dashboard</div>
                </div>
                <div className="rounded-full bg-emerald-300/10 px-3 py-1 text-xs font-semibold text-emerald-200 ring-1 ring-emerald-300/20">Active review</div>
              </div>

              <div className="space-y-4">
                {readinessItems.map(([title, detail, pct]) => (
                  <div key={title} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
                    <div className="mb-2 flex items-center justify-between text-sm">
                      <span className="font-medium text-white">{title}</span>
                      <span className="text-slate-400">{pct}</span>
                    </div>
                    <div className="mb-3 text-xs text-slate-400">{detail}</div>
                    <div className="h-2 overflow-hidden rounded-full bg-white/10">
                      <div className="h-full rounded-full bg-gradient-to-r from-emerald-300 to-cyan-300" style={{ width: pct }} />
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-6 rounded-2xl border border-emerald-300/20 bg-emerald-300/10 p-4">
                <div className="flex items-start gap-3">
                  <Icon name="shieldCheck" className="mt-1 text-emerald-200" size={20} />
                  <p className="text-sm leading-6 text-emerald-50">
                    Agera keeps origination, qualification and vendor-side coordination aligned so serious buyers can move from indication to direct technical and commercial discussions.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </section>

      <section id="model" className="relative z-10 border-y border-white/10 bg-white/[0.03] py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="max-w-3xl">
            <SectionLabel>What Agera does</SectionLabel>
            <h2 className="text-3xl font-semibold tracking-tight md:text-5xl">We turn early interest into bankable project conversations.</h2>
            <p className="mt-5 text-base leading-8 text-slate-300">
              The hardest part of emerging energy deployment is not only the technology. It is filtering real demand, documenting the commercial frame and keeping the right parties aligned before engineering resources are consumed.
            </p>
          </div>

          <div className="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
            <Card icon="network" title="Origination">
              We identify industrial users, mines, infrastructure owners and government-linked opportunities with material power demand.
            </Card>
            <Card icon="fileCheck" title="Qualification">
              We capture the indicative load, location, current power cost, target tariff and decision structure before deeper engagement.
            </Card>
            <Card icon="building" title="Project framing">
              We help translate early buyer intent into a practical starting scope for technical and commercial evaluation.
            </Card>
            <Card icon="globe" title="Coordination">
              We keep buyer, license holder and technology provider aligned through the transition from opportunity to PPA discussion.
            </Card>
          </div>
        </div>
      </section>

      <section id="projects" className="relative z-10 py-20">
        <div className="mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-[0.8fr_1.2fr] lg:px-8">
          <div>
            <SectionLabel>Target opportunities</SectionLabel>
            <h2 className="text-3xl font-semibold tracking-tight md:text-5xl">Best suited for power-intensive sites.</h2>
            <p className="mt-5 text-base leading-8 text-slate-300">
              Agera focuses on situations where electricity is strategic: high-cost grids, remote assets, constrained infrastructure or large users seeking long-term certainty.
            </p>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            {targetSegments.map((item) => (
              <div key={item} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] p-5 text-slate-100">
                <Icon name="chevronRight" className="text-emerald-200" size={18} />
                <span className="font-medium">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="process" className="relative z-10 bg-slate-900/50 py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <SectionLabel>Engagement path</SectionLabel>
            <h2 className="text-3xl font-semibold tracking-tight md:text-5xl">Simple enough to start. Serious enough to matter.</h2>
          </div>
          <div className="mt-14 grid gap-5 md:grid-cols-3">
            <Step number="1" title="Document initial intent">
              The customer defines the indicative project size, current power situation, target commercial metrics and location-specific constraints.
            </Step>
            <Step number="2" title="Validate the starting scope">
              Agera reviews the opportunity for seriousness, decision access and fit before deeper technical resources are engaged.
            </Step>
            <Step number="3" title="Move into direct PPA discussions">
              Qualified opportunities transition into structured discussions with the relevant technology and delivery parties, with Agera remaining copied and aligned.
            </Step>
          </div>
        </div>
      </section>

      <section id="contact" className="relative z-10 py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-br from-emerald-300/15 via-white/[0.06] to-cyan-300/10 p-8 md:p-12">
            <div className="grid gap-10 lg:grid-cols-[1fr_0.8fr] lg:items-center">
              <div>
                <SectionLabel>Start here</SectionLabel>
                <h2 className="max-w-3xl text-3xl font-semibold tracking-tight md:text-5xl">Have a serious power demand or project lead?</h2>
                <p className="mt-5 max-w-2xl text-base leading-8 text-slate-300">
                  Share the location, expected load, current cost of power, preferred PPA structure and decision timeline. Agera will determine whether the opportunity is ready for a structured review.
                </p>
              </div>
              <div className="rounded-3xl border border-white/10 bg-slate-950/70 p-6">
                <div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">Next step</div>
                <h3 className="mt-4 text-2xl font-semibold text-white">Prepare the opportunity profile</h3>
                <p className="mt-4 text-sm leading-7 text-slate-300">
                  The strongest first submission includes location, expected load, current energy cost, target tariff range, preferred PPA term and the buyer-side decision process.
                </p>
                <div className="mt-6 rounded-2xl border border-emerald-300/20 bg-emerald-300/10 p-4 text-sm leading-6 text-emerald-50">
                  Agera will route qualified opportunities through the appropriate commercial review path.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="relative z-10 border-t border-white/10 px-6 py-8 lg:px-8">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 text-sm text-slate-500 md:flex-row md:items-center md:justify-between">
          <div>© {new Date().getFullYear()} Agera Energy Group. All rights reserved.</div>
          <div className="flex gap-5">
            <a href="#model" className="hover:text-slate-300">Model</a>
            <a href="#process" className="hover:text-slate-300">Process</a>
            <a href="#contact" className="hover:text-slate-300">Contact</a>
          </div>
        </div>
      </footer>
    </main>
  );
}