/* global React */
const { useEffect, useRef, useState } = React;

/* ------------ Eyebrow (numbered section marker) ------------ */
function Eyebrow({ num, label }) {
  return (
    <div className="pc-eyebrow">
      <span className="pc-eyebrow__num">{num}</span>
      <span className="pc-eyebrow__label">{label}</span>
      <span className="pc-eyebrow__ticks" aria-hidden="true">
        <span /><span /><span />
      </span>
    </div>
  );
}

/* ------------ Section header (eyebrow + headline + lead) ------------ */
function SectionHeader({ num, label, title, lead, align = "split" }) {
  return (
    <header className={`pc-section-head pc-section-head--${align}`}>
      <Eyebrow num={num} label={label} />
      <div className="pc-section-head__body">
        <h2 className="pc-h2">{title}</h2>
        {lead ? <p className="pc-lead pc-section-head__lead">{lead}</p> : null}
      </div>
    </header>
  );
}

/* ------------ Reveal-on-scroll wrapper ------------ */
function Reveal({ as = "div", className = "", children, delay = 0, ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setTimeout(() => setShown(true), delay);
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={`pc-reveal ${shown ? "is-shown" : ""} ${className}`}
      {...rest}
    >
      {children}
    </Tag>
  );
}

/* ------------ Buttons ------------ */
function Button({ children, kind = "primary", as = "button", href, onClick, icon = true, ...rest }) {
  const cls = `pc-btn pc-btn--${kind}`;
  const content = (
    <>
      <span>{children}</span>
      {icon ? (
        <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
        </svg>
      ) : null}
    </>
  );
  if (as === "a" || href) {
    return <a href={href} className={cls} onClick={onClick} {...rest}>{content}</a>;
  }
  return <button className={cls} onClick={onClick} {...rest}>{content}</button>;
}

/* ------------ Hazard beacon (replaces pill availability indicator) ------------ */
function Availability({ label = "Available this week" }) {
  return (
    <span className="pc-hazard">
      <span className="pc-hazard__beacon" aria-hidden="true">
        <span className="pc-hazard__core" />
        <span className="pc-hazard__ring" />
      </span>
      <span className="pc-hazard__text">{label}</span>
    </span>
  );
}

/* ------------ Counter (entrance animation, once) ------------ */
function Counter({ to = 17, suffix = "", duration = 720 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            // ease-out
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(to * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref} className="pc-numeric">{val}{suffix}</span>;
}

/* ------------ Civil icon set (Lucide-compatible, 24px frame, 1.5px stroke) ------------ */
const CIVIL_ICONS = {
  truck: <><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></>,
  pickaxe: <><path d="M14.531 12.469 6.619 20.38a1 1 0 1 1-3-3l7.912-7.912"/><path d="M15.686 4.314A12.5 12.5 0 0 0 5.461 2.958 1 1 0 0 0 5.58 4.71a22 22 0 0 1 6.318 3.393"/><path d="M17.7 3.7a1 1 0 0 1 1.4 0l2.2 2.2a1 1 0 0 1 0 1.4l-5.4 5.4a1 1 0 0 1-1.4 0l-2.2-2.2a1 1 0 0 1 0-1.4z"/><path d="M19.686 8.314a12.501 12.501 0 0 1 1.356 10.225 1 1 0 0 1-1.751-.119 22 22 0 0 0-3.393-6.319"/></>,
  compass: <><circle cx="12" cy="12" r="10"/><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"/></>,
  droplets: <><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"/><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"/></>,
  layers: <><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></>,
  ruler: <><path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.4 2.4 0 0 1 0-3.4l2.6-2.6a2.4 2.4 0 0 1 3.4 0Z"/><path d="m14.5 12.5 2-2"/><path d="m11.5 9.5 2-2"/><path d="m8.5 6.5 2-2"/></>,
  "hard-hat": <><path d="M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z"/><path d="M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"/><path d="M4 15v-3a6 6 0 0 1 6-6h0"/><path d="M14 6h0a6 6 0 0 1 6 6v3"/></>,
  "map-pin": <><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></>,
  "calendar-days": <><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></>,
  clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
  gauge: <><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></>,
  wrench: <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></>,
  "triangle-alert": <><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></>,
  phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 15a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.92 4h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 11a16 16 0 0 0 6.29 6.29l1.14-1.14a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></>,
  "arrow-up-right": <><path d="M7 7h10v10"/><path d="M7 17 17 7"/></>,
};

function CivilIcon({ name, className = "" }) {
  const paths = CIVIL_ICONS[name];
  if (!paths) return null;
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
      strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
      {paths}
    </svg>
  );
}

/* expose */
Object.assign(window, { Eyebrow, SectionHeader, Reveal, Button, Availability, Counter, CivilIcon });