// Shared helpers for the Bloom Well website kit.
// Icon: builds an SVG from Lucide icon data (loaded via CDN in index.html).
// Building React elements (vs. Lucide's DOM replacement) keeps it re-render safe.
function toPascal(name) {
  return name.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join("");
}
function Icon({ name, size = 22, stroke = 2, color = "currentColor", style }) {
  const lib = window.lucide && (window.lucide.icons || window.lucide);
  const node = lib && (lib[toPascal(name)] || lib[name]);
  // Lucide node shape: [tag, attrs, children[]]; we want the children.
  const kids = Array.isArray(node) && Array.isArray(node[2]) ? node[2] : [];
  const children = kids.map(([tag, attrs], i) =>
    React.createElement(tag, { key: i, ...attrs })
  );
  return React.createElement(
    "svg",
    {
      width: size, height: size, viewBox: "0 0 24 24", fill: "none",
      stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
      style: { display: "inline-block", flex: "none", verticalAlign: "middle", ...style },
      "aria-hidden": "true",
    },
    children
  );
}

// Branded website imagery. These local assets replace the original placeholder blocks.
function PhotoPlaceholder({ label = "Photography", tone = "sky", radius = "var(--radius-xl)", style, children }) {
  const images = {
    "Child at play": "../../assets/photos/hero-play-photo.png",
    "Therapist & child": "../../assets/photos/family-consult-photo.png",
    "Our team & families": "../../assets/photos/team-family-photo.png",
    "Speech session": "../../assets/photos/speech-session-photo.png",
    "OT session": "../../assets/photos/ot-session-photo.png",
    "PT session": "../../assets/photos/pt-session-photo.png",
    "Feeding session": "../../assets/photos/feeding-session-photo.png",
    "Behavioral support": "../../assets/photos/behavioral-support-photo.png",
  };
  const src = images[label];
  const tones = {
    sky:  ["#d7e8f6", "#8ab8df"],
    sage: ["#d8ebdd", "#8dc09c"],
    honey:["#f8e9c4", "#e9bc5a"],
    blush:["#f8dad2", "#e89079"],
    mix:  ["#d8ebdd", "#b3d2ec"],
  };
  const [a, b] = tones[tone] || tones.sky;
  return (
    <div className="bw-photo" style={{
      position: "relative", borderRadius: radius, overflow: "hidden",
      background: `linear-gradient(135deg, ${a}, ${b})`,
      display: "flex", alignItems: "center", justifyContent: "center",
      color: "rgba(31,40,50,0.5)", ...style,
    }}>
      {children || (src ? (
        <img src={src} alt={label} loading={label === "Child at play" ? "eager" : "lazy"} />
      ) : (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
          <Icon name="image" size={28} stroke={2} />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase" }}>{label}</span>
        </div>
      ))}
    </div>
  );
}

// Eyebrow / overline label.
function Eyebrow({ children, color = "var(--sky-600)", style }) {
  return (
    <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13, color, ...style }}>{children}</div>
  );
}

// Compact hero band for inner pages.
function PageHero({ eyebrow, title, lead, tone = "sky" }) {
  const tones = {
    sky:  "linear-gradient(135deg, var(--sky-50), var(--sage-50))",
    sage: "linear-gradient(135deg, var(--sage-50), var(--sky-50))",
    honey:"linear-gradient(135deg, var(--honey-50), var(--blush-50))",
  };
  return (
    <section className="bw-page-hero" style={{ background: tones[tone] || tones.sky, borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "60px 28px 56px", textAlign: "center" }}>
        {eyebrow && <Eyebrow style={{ marginBottom: 12 }}>{eyebrow}</Eyebrow>}
        <h1 style={{ fontSize: "clamp(34px, 4.4vw, 50px)", letterSpacing: "-0.025em", margin: 0, maxWidth: "18ch", marginInline: "auto", lineHeight: 1.08 }}>{title}</h1>
        {lead && <p style={{ fontSize: 19, color: "var(--text-muted)", maxWidth: "54ch", margin: "16px auto 0", lineHeight: 1.6 }}>{lead}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { Icon, PhotoPlaceholder, Eyebrow, PageHero });