// shared.jsx, SectionEyebrow, PageHero, PageCta, CategoryCard, BrandGrid, FeatureList
const { ImageWithFallback, ChevronRight, ArrowRight, ArrowUpRight, MessageSquare, Award, CheckCircle2, brandLogo } = window;

function SectionEyebrow({ children, centered = false, dark = false }) {
  const color = dark ? "text-emerald-300" : "text-emerald-700";
  const bar = dark ? "bg-emerald-400" : "bg-emerald-600";
  return (
    <div className={`inline-flex items-center gap-2 ${color} text-[13px] tracking-[0.18em] uppercase`}>
      <span className={`w-8 h-px ${bar}`} />
      {children}
      {centered && <span className={`w-8 h-px ${bar}`} />}
    </div>
  );
}

function PageHero({ eyebrow, title, accent, subtitle, image, breadcrumbs = [], breakBeforeAccent = false, ctaLabel = "Get in Touch", ctaHref = "#/contact" }) {
  return (
    <section className="relative w-full overflow-hidden bg-[#0A1628] text-white">
      <div className="absolute inset-0">
        <ImageWithFallback src={image} alt={title} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0A1628] via-[#0A1628]/75 to-transparent" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(16,185,129,0.18),_transparent_55%)]" />
      </div>
      <div className="absolute top-20 left-[8%] w-32 h-32 border border-emerald-500/15 rounded-full" />
      <div className="absolute bottom-10 right-[6%] w-48 h-48 border border-cyan-500/10 rounded-full" />

      <div className="relative mx-auto max-w-[1300px] px-6 pt-20 pb-24 lg:pt-24 lg:pb-28">
        {breadcrumbs.length > 0 && (
          <nav className="flex items-center gap-2 text-[13px] text-slate-400 mb-8">
            <a href="#/" className="hover:text-emerald-300 transition">Home</a>
            {breadcrumbs.map((b, i) => (
              <span key={i} className="flex items-center gap-2">
                <ChevronRight className="w-3.5 h-3.5 opacity-50" />
                {b.href ? (
                  <a href={b.href} className="hover:text-emerald-300 transition">{b.label}</a>
                ) : (
                  <span className="text-slate-300">{b.label}</span>
                )}
              </span>
            ))}
          </nav>
        )}

        <div className="max-w-3xl">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-emerald-400/30 bg-emerald-500/10 backdrop-blur-sm text-emerald-300 text-[13px] tracking-wide">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
            {eyebrow}
          </div>
          <h1 className="mt-6 text-white tracking-tight" style={{ fontSize: "clamp(2.25rem, 4.5vw, 3.75rem)", lineHeight: 1.08, fontWeight: 700 }}>
            {title}
            {accent && (
              <>
                {breakBeforeAccent ? <br /> : " "}
                <span className="bg-gradient-to-r from-emerald-300 via-teal-300 to-cyan-300 bg-clip-text text-transparent">
                  {accent}
                </span>
              </>
            )}
          </h1>
          <p className="mt-6 text-slate-300 max-w-2xl" style={{ fontSize: 17.5, lineHeight: 1.65 }}>
            {subtitle}
          </p>
          {ctaLabel && (
            <div className="mt-9 flex flex-wrap items-center gap-4">
              <a href={ctaHref} className="group inline-flex items-center gap-2 px-7 py-3.5 rounded-full bg-blue-600 hover:bg-blue-500 text-white transition" style={{ fontWeight: 600, fontSize: 15.5 }}>
                {ctaLabel}
                <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
              </a>
            </div>
          )}
        </div>
      </div>
      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-emerald-500/40 to-transparent" />
    </section>
  );
}

function PageCta({
  title = "Ready to find the right",
  accent = "solution for your operation?",
  description = "Speak with a Leeden engineer about your safety, welding or fabrication project. Most enquiries receive a technical response within one business day.",
  image = "https://images.unsplash.com/photo-1507497806295-753c4108560c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=85",
  primaryLabel = "Get a Quote",
  primaryHref = "#/contact",
  secondaryLabel = "Contact Us",
  secondaryHref = "#/contact",
}) {
  return (
    <section className="relative overflow-hidden bg-[#0A1628] text-white">
      <div className="absolute inset-0">
        <ImageWithFallback src={image} alt="" className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0A1628] via-[#0A1628]/92 to-[#0A1628]/55" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(16,185,129,0.22),_transparent_60%)]" />
      </div>
      <div className="relative mx-auto max-w-[1300px] px-6 py-24">
        <div className="max-w-3xl">
          <div className="inline-flex items-center gap-2 text-emerald-300 text-[13px] tracking-[0.18em] uppercase">
            <span className="w-8 h-px bg-emerald-400" />
            Start the conversation
          </div>
          <h2 className="mt-5 tracking-tight" style={{ fontSize: "clamp(2rem, 4vw, 3.25rem)", lineHeight: 1.08, fontWeight: 700 }}>
            {title}{" "}
            <span className="bg-gradient-to-r from-emerald-300 to-cyan-300 bg-clip-text text-transparent">
              {accent}
            </span>
          </h2>
          <p className="mt-5 text-slate-300 max-w-2xl" style={{ fontSize: 17, lineHeight: 1.65 }}>
            {description}
          </p>
          <div className="mt-9 flex flex-wrap gap-4">
            <a href={primaryHref} className="group inline-flex items-center gap-2.5 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-white px-8 py-4 rounded-full transition shadow-xl shadow-emerald-900/40">
              {primaryLabel}
              <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
            </a>
            <a href={secondaryHref} className="inline-flex items-center gap-2.5 bg-white text-[#0A1628] hover:bg-slate-100 px-8 py-4 rounded-full transition">
              <MessageSquare className="w-4.5 h-4.5" />
              {secondaryLabel}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CategoryCard({ code, title, description, image, href, tags = [] }) {
  return (
    <a href={href} className="group relative overflow-hidden rounded-2xl bg-[#0A1628] aspect-[4/5] block">
      <ImageWithFallback src={image} alt={title} className="absolute inset-0 w-full h-full object-cover opacity-55 group-hover:opacity-75 group-hover:scale-110 transition-all duration-700" />
      <div className="absolute inset-0 bg-gradient-to-t from-[#0A1628] via-[#0A1628]/45 to-transparent" />
      <div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-2xl" />
      <div className="relative h-full p-7 flex flex-col justify-between text-white">
        <div className="flex items-start justify-between">
          <span className="text-[12px] tracking-[0.2em] uppercase text-emerald-300">{code}</span>
          <div className="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center group-hover:bg-emerald-500 transition">
            <ArrowUpRight className="w-4 h-4" />
          </div>
        </div>
        <div>
          <h3 className="tracking-tight" style={{ fontSize: 24, fontWeight: 700, lineHeight: 1.18 }}>
            {title}
          </h3>
          {description && (
            <p className="mt-2 text-slate-300 text-[14px]" style={{ lineHeight: 1.55 }}>{description}</p>
          )}
          {tags.length > 0 && (
            <div className="mt-4 flex flex-wrap gap-2">
              {tags.map((t) => (
                <span key={t} className="text-[12px] px-2.5 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/15">{t}</span>
              ))}
            </div>
          )}
        </div>
      </div>
    </a>
  );
}

function BrandGrid({ eyebrow = "Brand Partners", title, brands }) {
  return (
    <section className="bg-white py-24">
      <div className="mx-auto max-w-[1300px] px-6">
        <div className="max-w-3xl mx-auto mb-12 text-center">
          <h2 className="text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
            {title}
          </h2>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-px bg-slate-200 border border-slate-200 rounded-2xl overflow-hidden">
          {brands.map((b) => (
            <div key={b.name} className="group bg-white p-8 flex flex-col justify-between gap-6 hover:bg-emerald-50/30 transition relative min-h-[172px]">
              <div className="h-14 flex items-center">
                <img src={brandLogo(b.name)} alt={b.name} className="max-h-14 max-w-[170px] w-auto object-contain rounded-md" loading="lazy" />
              </div>
              <div>
                <div className="text-[#0A1628] tracking-tight" style={{ fontSize: 17, fontWeight: 700 }}>{b.name}</div>
                <div className="mt-1 text-slate-500 text-[14px]">{b.tag}</div>
                <a
                  href={b.brochure || "#"}
                  className="mt-3 inline-flex items-center gap-1.5 text-emerald-700 hover:text-emerald-600 text-[13.5px] transition"
                  style={{ fontWeight: 600 }}
                >
                  Download brochure
                  <ArrowUpRight className="w-3.5 h-3.5" />
                </a>
              </div>
              <div className="absolute bottom-0 left-0 h-0.5 w-0 bg-gradient-to-r from-emerald-500 to-teal-500 group-hover:w-full transition-all duration-500" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureList({ eyebrow, title, intro, image, features }) {
  return (
    <section className="bg-slate-50 py-28">
      <div className="mx-auto max-w-[1300px] px-6 grid lg:grid-cols-2 gap-14 items-center">
        <div className="rounded-2xl overflow-hidden border border-slate-200 shadow-lg order-2 lg:order-1">
          <ImageWithFallback src={image} alt={title} className="w-full h-[560px] object-cover" />
        </div>
        <div className="order-1 lg:order-2">
          <SectionEyebrow>{eyebrow}</SectionEyebrow>
          <h2 className="mt-4 text-[#0A1628] tracking-tight" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", lineHeight: 1.12, fontWeight: 700 }}>
            {title}
          </h2>
          <p className="mt-5 text-slate-600" style={{ fontSize: 16.5, lineHeight: 1.7 }}>{intro}</p>
          <ul className="mt-8 space-y-5">
            {features.map((f) => (
              <li key={f.title} className="flex gap-4">
                <div className="shrink-0 w-9 h-9 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
                  <CheckCircle2 className="w-5 h-5 text-white" />
                </div>
                <div>
                  <div className="text-[#0A1628]" style={{ fontWeight: 700, fontSize: 16 }}>{f.title}</div>
                  <p className="mt-1 text-slate-600 text-[14.5px]" style={{ lineHeight: 1.65 }}>{f.desc}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionEyebrow, PageHero, PageCta, CategoryCard, BrandGrid, FeatureList });