import type { Metadata } from "next";
import { FileDown, Search, ArrowRight } from "lucide-react";
import { SectionHeader } from "@/components/ui";
import DemoSection from "@/components/DemoSection";
import NewsletterForm from "@/components/NewsletterForm";
import ResourceGuides from "@/components/ResourceGuides";

export const metadata: Metadata = {
  title: "ERP Guides & Resources",
  description:
    "Practical guides on manufacturing and construction ERP: modules, BOQ/WBS, DPR to RA bill, cloud vs on-premise, brochures and FAQs.",
  alternates: { canonical: "/resources" },
};

const BROCHURES = [
  {
    title: "Manufacturing ERP brochure",
    desc: "Production, inventory, purchase, sales, finance and HR on one integrated platform.",
    meta: "PDF · 0.4 MB",
    href: "/images/brochure/manufacturing.pdf",
    tone: "amber" as const,
  },
  {
    title: "EPC & Construction ERP brochure",
    desc: "Projects, BOQ & WBS, procurement, billing and site execution in one place.",
    meta: "PDF · 0.7 MB",
    href: "/images/brochure/epc_construction.pdf",
    tone: "brand" as const,
  },
];

export default function ResourcesPage() {
  return (
    <>
      <section className="bg-navy py-24 text-white max-md:py-[72px]">
        <div className="mx-container">
          <div className="mx-auto max-w-3xl text-center">
            <span className="inline-flex items-center rounded-full border border-white/40 bg-white/10 px-4 py-2 font-mono text-[11px] font-semibold tracking-[0.14em] text-white">
              RESOURCES
            </span>
            <h1 className="mt-2.5 font-display text-[clamp(30px,3.6vw,44px)] font-bold leading-[1.08] text-white">
              Guides and insights for <span className="text-brand-light">manufacturing &amp; construction ERP</span>
            </h1>
            <p className="mx-auto mt-4 max-w-[560px] text-[17px] leading-relaxed text-white/85">
              Practical articles, brochures and answers to help you plan, choose and get more from your ERP.
            </p>
            <form role="search" action="/resources" method="get" className="mx-auto mt-7 max-w-[560px] text-left">
              <label htmlFor="resource-search" className="sr-only">
                Search articles, guides and brochures
              </label>
              <div className="relative">
                <Search
                  size={18}
                  className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-muted"
                  aria-hidden="true"
                />
                <input
                  id="resource-search"
                  name="q"
                  type="search"
                  placeholder="Search articles, guides and brochures"
                  className="min-h-[52px] w-full rounded-lg border border-white/30 bg-white pl-11 pr-4 text-[15px] text-ink placeholder:text-muted focus:border-white focus:outline-none"
                />
              </div>
            </form>
          </div>
          <div className="mx-auto mt-10 grid max-w-4xl grid-cols-3 gap-3.5 max-sm:grid-cols-1 max-sm:gap-2.5" aria-label="Resource highlights">
            <div className="rounded-lg border border-white/30 bg-white p-5 text-center max-sm:p-4">
              <p className="font-display text-[clamp(22px,2.4vw,30px)] font-bold tracking-tight text-ink">
                Guides
              </p>
              <p className="mt-1 text-xs leading-snug text-muted">Practical ERP articles</p>
            </div>
            <div className="rounded-lg border border-white/30 bg-white p-5 text-center max-sm:p-4">
              <p className="font-display text-[clamp(22px,2.4vw,30px)] font-bold tracking-tight text-ink">
                Brochures
              </p>
              <p className="mt-1 text-xs leading-snug text-muted">Share with your team</p>
            </div>
            <div className="rounded-lg border border-white/30 bg-white p-5 text-center max-sm:p-4">
              <p className="font-display text-[clamp(22px,2.4vw,30px)] font-bold tracking-tight text-ink">
                FAQs
              </p>
              <p className="mt-1 text-xs leading-snug text-muted">Answers, fast</p>
            </div>
          </div>
        </div>
      </section>

      <section id="guides" className="py-24 max-md:py-[72px]" style={{ scrollMarginTop: 84 }}>
        <ResourceGuides />
      </section>

      <section id="brochures" className="bg-canvas py-24 max-md:py-[72px]" style={{ scrollMarginTop: 84 }}>
        <div className="mx-container grid items-start gap-12 lg:grid-cols-[380px_minmax(0,1fr)] lg:gap-16">
          <div>
            <SectionHeader
              align="left"
              eyebrow="Downloads"
              title="Brochures & overviews"
              intro="Share MxERP with your team."
              noMargin
            />
          </div>
          <div className="grid gap-5 sm:grid-cols-2">
            {BROCHURES.map((b) => (
              <a
                key={b.title}
                href={b.href}
                download
                className="group flex flex-col rounded-2xl border border-line bg-white p-7 shadow-soft"
              >
                <span
                  className={
                    b.tone === "brand"
                      ? "grid size-11 place-items-center rounded-xl bg-brand-tint text-brand"
                      : "grid size-11 place-items-center rounded-xl bg-accent-soft text-accent-dark"
                  }
                  aria-hidden="true"
                >
                  <FileDown size={22} />
                </span>
                <h3 className="mt-4 font-display text-[17px] font-bold leading-snug text-ink">{b.title}</h3>
                <p className="mt-1.5 text-[13.5px] leading-relaxed text-muted">{b.desc}</p>
                <span className="mt-auto flex items-center justify-between pt-5">
                  <span className="font-mono text-[11px] tracking-[0.08em] text-muted">{b.meta}</span>
                  <span className="inline-flex items-center gap-1.5 text-[13px] font-semibold text-brand">
                    Download
                    <ArrowRight size={15} aria-hidden="true" className="transition-transform group-hover:translate-x-0.5" />
                  </span>
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-24 max-md:py-[72px]">
        <div className="mx-container">
          <div className="grid items-center gap-10 rounded-2xl bg-navy p-10 max-sm:p-7 lg:grid-cols-[1fr_auto] lg:p-12">
            <div>
              <h2 className="font-display text-[clamp(24px,2.8vw,32px)] font-bold text-white">
                Get new guides in your inbox
              </h2>
              <p className="mt-2.5 text-[15px] leading-relaxed text-footsub">
                One email a month. ERP tips for plants and project teams.
              </p>
            </div>
            <NewsletterForm />
          </div>
        </div>
      </section>

      {/* <DemoSection
        title="Planning your ERP evaluation?"
        text="Talk to a product specialist about your processes — no obligation."
      /> */}
    </>
  );
}