// Shared atoms and small components — exported to window so other Babel scripts can use them.

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// SVG logo mark — a stylized "N" / converging-line mark that echoes the Designsmith N glyph.
// Originally drawn — not lifted from the source logo.
function LogoMark({ size = 24, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M5 26 L5 6 L13.5 21 L18.5 11 L27 26" stroke={color} strokeWidth="2.2" strokeLinejoin="miter" fill="none" />
    </svg>
  );
}

function Wordmark({ onClick }) {
  return (
    <button onClick={onClick} className="wordmark" aria-label="Designsmith — home" style={{ display: "inline-flex", gap: 10, alignItems: "center" }}>
      <LogoMark size={22} color="var(--accent)" />
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, letterSpacing: "0.04em", fontSize: 16 }}>
        DESIGNSMITH<span style={{ color: "var(--accent)" }}>.</span>
      </span>
    </button>
  );
}

function Eyebrow({ children, light = false }) {
  return (
    <div className="section-header-eyebrow">
      <span className="bar" style={light ? { background: "rgba(244,241,234,0.7)" } : null}></span>
      <span className="label" style={light ? { color: "rgba(244,241,234,0.85)" } : null}>{children}</span>
    </div>
  );
}

function SectionHeader({ eyebrow, title, action, light = false }) {
  return (
    <div className="section-header">
      <div>
        {eyebrow ? <Eyebrow light={light}>{eyebrow}</Eyebrow> : null}
        <h2 className="section-header-title" style={light ? { color: "#F4F1EA" } : null}>{title}</h2>
      </div>
      {action ? <div className="section-header-link">{action}</div> : null}
    </div>
  );
}

function Button({ children, onClick, variant = "primary", arrow = true, href }) {
  const className = "btn " + (variant === "ghost" ? "btn-ghost" : "");
  const inner = (
    <>
      <span>{children}</span>
      {arrow ? <span className="arrow">→</span> : null}
    </>
  );
  if (href) return <a href={href} className={className}>{inner}</a>;
  return <button className={className} onClick={onClick}>{inner}</button>;
}

function BtnLink({ children, onClick, arrow = true }) {
  return (
    <button className="btn-link" onClick={onClick}>
      <span>{children}</span>
      {arrow ? <span aria-hidden="true">→</span> : null}
    </button>
  );
}

// Stats strip — uses the reconciled set.
function StatsStrip({ inverted = false }) {
  const { brand } = window.DS_DATA;
  const items = [
    { num: brand.years, label: "Years building", sup: "" },
    { num: brand.projects, label: "Projects delivered" },
    { num: brand.factorySqft, label: "sq ft Al Quoz factory" },
    { num: brand.headcount, label: "In-house team" },
    { num: brand.licence, label: "Licensed contractor" },
  ];
  return (
    <div className="stats" style={inverted ? { borderColor: "rgba(244,241,234,0.18)" } : null}>
      {items.map((s, i) => (
        <div key={i} className="stat" style={inverted ? { borderColor: "rgba(244,241,234,0.18)", color: "#F4F1EA" } : null}>
          <div className="stat-num">{s.num}</div>
          <div className="stat-label" style={inverted ? { color: "rgba(244,241,234,0.6)" } : null}>{s.label}</div>
        </div>
      ))}
    </div>
  );
}

// A small "ledger" sub-component (used in hero) — minimal mono-typed numeric strip
function LedgerStat({ num, label }) {
  return (
    <div className="hero-ledger-item">
      <span className="hero-ledger-num numerals">{num}</span>
      <span>{label}</span>
    </div>
  );
}

// Sector tile
function SectorTile({ sector, onClick }) {
  return (
    <div className="sector-tile" onClick={onClick} role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter") onClick(); }}>
      <div className="sector-tile-img">
        <img src={sector.image} alt={sector.label} loading="lazy" />
      </div>
      <div className="sector-tile-content">
        <div className="sector-tile-top">
          <span className="sector-count">{String(sector.count).padStart(2, "0")} projects</span>
          <span className="sector-count">/{sector.id.slice(0, 3).toUpperCase()}</span>
        </div>
        <div>
          <div className="sector-tile-title">{sector.label}</div>
          <div className="sector-tile-cta">
            <span>View sector</span>
            <span aria-hidden="true">→</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// Project card
function ProjectCard({ project, onClick }) {
  return (
    <div className="project-card" onClick={onClick} role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter") onClick(); }}>
      <div className="project-card-image">
        <img src={project.heroImage} alt={project.name} loading="lazy" />
      </div>
      <div>
        <div className="project-meta">
          <span className="label sector-tag">{project.sectorLabel}</span>
          <span className="label numerals">{project.year}</span>
        </div>
        <div className="project-card-title" style={{ marginTop: 6 }}>{project.name}</div>
        <div className="project-card-sub">{project.subtitle} · {project.scope}</div>
      </div>
    </div>
  );
}

// Lightbox
function Lightbox({ images, startIndex = 0, onClose }) {
  const [idx, setIdx] = useState(startIndex);
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIdx((i) => (i + 1) % images.length);
      if (e.key === "ArrowLeft") setIdx((i) => (i - 1 + images.length) % images.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [images.length, onClose]);
  return (
    <div className="lightbox-shade" role="dialog" aria-modal="true">
      <div className="lightbox-bar">
        <span>{String(idx + 1).padStart(2, "0")} / {String(images.length).padStart(2, "0")}</span>
        <div style={{ display: "flex", gap: 12 }}>
          <button onClick={() => setIdx((i) => (i - 1 + images.length) % images.length)}>← Prev</button>
          <button onClick={() => setIdx((i) => (i + 1) % images.length)}>Next →</button>
          <button onClick={onClose} aria-label="Close">✕ Close</button>
        </div>
      </div>
      <div className="lightbox-body">
        <img src={images[idx]} alt="" />
      </div>
    </div>
  );
}

// Reveal — fades-in on mount; cheap and used everywhere
function Reveal({ children, delay = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    el.style.opacity = "0";
    el.style.transform = "translateY(10px)";
    el.style.transition = `opacity 0.6s ease ${delay}ms, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) ${delay}ms`;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.style.opacity = "1";
        el.style.transform = "none";
        io.disconnect();
      }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref}>{children}</div>;
}

Object.assign(window, { LogoMark, Wordmark, Eyebrow, SectionHeader, Button, BtnLink, StatsStrip, LedgerStat, SectorTile, ProjectCard, Lightbox, Reveal });