import { SEO } from "../lib/seo";
import Container from "../components/Container";
import ImageSlot from "../components/ImageSlot";
import Reveal from "../components/Reveal";
import SectionTitle from "../components/SectionTitle";
import Button from "../components/Button";
import {
  FactoryIcon,
  LeafIcon,
  ShieldIcon,
  TruckIcon,
} from "../components/Icons";
import { miningProjects, services, valueChain, waLink } from "../data/site";

function ServiceCard({ title, desc, IconCmp, ...rest }) {
  return (
    <article {...rest} className="card-premium">
      <div className="mb-4 flex items-center gap-3">
        <div className="inline-flex size-10 items-center justify-center rounded-xl ring-hairline">
          <IconCmp className="size-6 text-[var(--jade)]" />
        </div>
        <h3 className="text-base font-semibold">{title}</h3>
      </div>
      <p className="text-sm text-[var(--muted)]">{desc}</p>
    </article>
  );
}

const serviceIconMap = { FactoryIcon, TruckIcon, ShieldIcon, LeafIcon };
const valueChainIconMap = { FactoryIcon, TruckIcon, LeafIcon };

function ServicesSection({ items }) {
  return (
    <section
      id="services"
      className="py-16 md:py-24"
      data-section
      style={{ background: "var(--surface)" }}
    >
      <Container>
        <SectionTitle
          title="Layanan"
          subtitle="Ringkas, terukur, dan relevan dengan kebutuhan operasional."
        />
        <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
          {items.map((it, idx) => {
            const Icon = serviceIconMap[it.icon] || TruckIcon;
            return (
              <Reveal key={it.title} delay={idx * 80}>
                <ServiceCard
                  title={it.title}
                  desc={it.desc}
                  IconCmp={Icon}
                  data-animate
                />
              </Reveal>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

function StepCard({ name, desc, IconCmp, showArrow }) {
  return (
    <div className="relative card-premium">
      <div
        className="mb-3 inline-flex size-9 items-center justify-center rounded-xl text-white"
        style={{
          background: "linear-gradient(135deg,var(--gold),var(--jade))",
        }}
      >
        <IconCmp className="size-5" />
      </div>
      <p className="text-sm font-semibold">{name}</p>
      <p className="mt-1 text-xs text-[var(--muted)]">{desc}</p>
      {showArrow && (
        <div className="pointer-events-none absolute right-[-12px] top-1/2 hidden h-0.5 w-6 -translate-y-1/2 bg-[var(--hairline)] md:block" />
      )}
    </div>
  );
}

function ValueChainSection({ steps }) {
  return (
    <section id="valuechain" className="py-16 md:py-24" data-section>
      <Container>
        <SectionTitle
          title="Proses Nilai (Value Chain)"
          subtitle="Tahapan end-to-end operasi pertambangan."
        />
        <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-5">
          {steps.map((st, idx) => {
            const Icon = valueChainIconMap[st.icon] || TruckIcon;
            return (
              <Reveal key={st.name} delay={idx * 90}>
                <StepCard
                  name={st.name}
                  desc={st.desc}
                  IconCmp={Icon}
                  showArrow={idx < steps.length - 1}
                />
              </Reveal>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

function ProjectCard({ name, meta, tag, img, ...rest }) {
  return (
    <article {...rest} className="card-premium">
      <div className="relative rounded-xl overflow-hidden ring-hairline">
        <ImageSlot
          slot={`project:${name}`}
          src={img}
          ratio="16/10"
          hint="Ganti foto proyek di sini"
        />
        <span
          className="absolute left-3 top-3 rounded-full px-2.5 py-1 text-xs font-medium text-white"
          style={{
            background: "linear-gradient(90deg,var(--jade),var(--copper))",
          }}
        >
          {tag}
        </span>
      </div>
      <div className="mt-5">
        <h3 className="text-base font-semibold">{name}</h3>
        <p className="mt-1 text-sm text-[var(--muted)]">{meta}</p>
      </div>
    </article>
  );
}

function ProjectsSection({ items }) {
  return (
    <section id="projects" className="py-16 md:py-24" data-section>
      <Container>
        <SectionTitle
          title="Proyek Terpilih"
          subtitle="Sorot proyek kunci dengan metrik dan capaian yang jelas."
        />
        <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-3">
          {items.map((p, idx) => (
            <Reveal key={p.name} delay={idx * 80}>
              <ProjectCard
                name={p.name}
                meta={p.meta}
                tag={p.tag}
                img={p.img}
                data-animate
              />
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

export default function Mining() {
  return (
    <SEO page="mining">
      {/* ── Hero ──────────────────────────────────────────────────── */}
      <section
        className="relative overflow-hidden parallax-y"
        data-speed="0.3"
        data-section
        style={{ background: "linear-gradient(to bottom,#fff,#f3f5f8)" }}
      >
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 md:py-24">
          <Reveal>
            <h1 className="h1-premium text-3xl md:text-5xl">
              Operasi Pertambangan
            </h1>
            <p className="mt-4 max-w-2xl text-[var(--muted)]">
              Eksplorasi hingga pengapalan dengan kontrol kualitas dan efisiensi
              biaya.
            </p>
          </Reveal>
        </div>
      </section>

      {/* ── Hero Image ────────────────────────────────────────────── */}
      <section className="py-10" data-section>
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Reveal>
            <ImageSlot
              slot="mining-hero"
              src="images/mining-hero.webp"
              ratio="16/9"
              hint="Foto pit/UG, alat berat, stockpile/pelabuhan"
              className="ring-hairline"
            />
          </Reveal>
        </div>
      </section>

      <section data-section>
        <ServicesSection items={services} />
      </section>
      <section data-section>
        <ValueChainSection steps={valueChain} />
      </section>
      <section data-section>
        <ProjectsSection items={miningProjects} />
      </section>

      {/* ── CTA ───────────────────────────────────────────────────── */}
      <section className="py-12" data-section>
        <Container>
          <Reveal>
            <div className="premium-border soft-shadow bg-white rounded-3xl p-8 md:p-10">
              <div className="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
                <div>
                  <h3 className="text-xl font-bold md:text-2xl">
                    Butuh detail teknis &amp; penawaran proyek?
                  </h3>
                  <p className="mt-1 text-sm text-[var(--muted)]">
                    Kami siap menyusun rencana kerja dan baseline schedule.
                  </p>
                </div>
                <div className="flex gap-3">
                  <Button href={waLink}>Hubungi Kami</Button>
                  <Button href="/fleet" variant="outline">
                    Kapasitas
                  </Button>
                </div>
              </div>
            </div>
          </Reveal>
        </Container>
      </section>
    </SEO>
  );
}