// Atoms shared across the site.

const Button = ({ variant = "primary", children, onClick, style, ...rest }) => {
  const base = {
    font: "600 13px/1 var(--font-body)",
    padding: "13px 22px",
    borderRadius: "6px",
    border: "none",
    cursor: "pointer",
    transition: "all 150ms cubic-bezier(.2,.8,.2,1)",
    letterSpacing: ".02em",
    display: "inline-flex", alignItems: "center", gap: 8,
  };
  const variants = {
    primary: { background: "var(--hunter-red)", color: "var(--fg-on-red)" },
    secondary: { background: "transparent", color: "var(--ink)", border: "1px solid var(--ink)" },
    ghost: { background: "transparent", color: "var(--ink)" },
    onDark: { background: "transparent", color: "var(--bone)", border: "1px solid var(--bone)" },
    cta: {
      fontFamily: "var(--font-display)", fontWeight: 600,
      textTransform: "uppercase", letterSpacing: ".08em",
      padding: "16px 28px",
      background: "var(--hunter-red)", color: "var(--fg-on-red)",
      borderRadius: "6px", border: "none",
      fontSize: 14,
    },
  };
  return <button onClick={onClick} style={{ ...base, ...variants[variant], ...style }} {...rest}>{children}</button>;
};

const BrandBar = () => (
  <div style={{ height: 6, background: "var(--hunter-red)", width: "100%" }} />
);

const Overline = ({ children, color }) => (
  <span style={{
    font: "600 11px/1 var(--font-mono)",
    letterSpacing: ".22em", textTransform: "uppercase",
    color: color || "var(--claw-red)",
  }}>{children}</span>
);

// Inject shimmer keyframe once
(() => {
  const id = "hunter-skeleton-style";
  if (!document.getElementById(id)) {
    const s = document.createElement("style");
    s.id = id;
    s.textContent = `
      @keyframes shimmer {
        0%   { background-position: -600px 0; }
        100% { background-position:  600px 0; }
      }
      .skeleton-shimmer {
        background: linear-gradient(90deg, #e4e0d8 25%, #f0ede6 50%, #e4e0d8 75%);
        background-size: 1200px 100%;
        animation: shimmer 1.4s infinite linear;
      }
    `;
    document.head.appendChild(s);
  }
})();

const ProjectImage = ({ src, alt, aspectRatio = "4/3" }) => {
  const [loaded, setLoaded] = React.useState(false);
  return (
    <div style={{ position: "relative", aspectRatio, overflow: "hidden" }}>
      {!loaded && (
        <div className="skeleton-shimmer" style={{ position: "absolute", inset: 0 }} />
      )}
      <img
        src={src}
        alt={alt}
        onLoad={() => setLoaded(true)}
        style={{
          width: "100%", height: "100%", objectFit: "cover", objectPosition: "center",
          display: "block",
          opacity: loaded ? 1 : 0,
          transition: "opacity 0.3s ease",
        }}
      />
    </div>
  );
};

// Inject responsive layout CSS once
(() => {
  const id = "hunter-responsive-style";
  if (!document.getElementById(id)) {
    const s = document.createElement("style");
    s.id = id;
    s.textContent = `
      /* Layout utility classes (desktop values set via inline styles — these only override at breakpoints) */
      .services-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .projects-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
      .projects-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 32px; }
      .contact-grid    { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
      .about-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
      .footer-grid     { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
      .footer-bottom   { display: flex; justify-content: space-between; }
      .projects-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
      .cta-row         { display: flex; justify-content: space-between; align-items: center; gap: 32px; }

      /* Tablet (≤1024px) */
      @media (max-width: 1024px) {
        .section-pad       { padding-left: 32px !important; padding-right: 32px !important; }
        .footer-grid       { grid-template-columns: 1fr 1fr; gap: 32px; }
        .projects-grid-3   { grid-template-columns: repeat(2,1fr); }
      }

      /* Mobile (≤640px) */
      @media (max-width: 640px) {
        .section-pad       { padding-left: 20px !important; padding-right: 20px !important; }
        .hero-section      { padding-top: 72px !important; padding-bottom: 48px !important; }
        .page-header       { padding-top: 64px !important; padding-bottom: 44px !important; }
        .hero-claw         { display: none !important; }
        .services-grid     { grid-template-columns: 1fr; }
        .projects-grid-3   { grid-template-columns: 1fr; }
        .projects-grid-2   { grid-template-columns: 1fr; }
        .contact-grid      { grid-template-columns: 1fr; }
        .about-grid        { grid-template-columns: 1fr; }
        .footer-grid       { grid-template-columns: 1fr; gap: 28px; }
        .footer-bottom     { flex-direction: column; gap: 8px; }
        .projects-header   { flex-direction: column; align-items: flex-start; gap: 16px; }
        .cta-row           { flex-direction: column; align-items: flex-start; }
      }
    `;
    document.head.appendChild(s);
  }
})();

const useIsMobile = (bp = 640) => {
  const [mobile, setMobile] = React.useState(() => window.innerWidth <= bp);
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${bp}px)`);
    const h = e => setMobile(e.matches);
    mq.addEventListener("change", h);
    return () => mq.removeEventListener("change", h);
  }, [bp]);
  return mobile;
};

Object.assign(window, { Button, BrandBar, Overline, ProjectImage, useIsMobile });