/* Shared landing-page bits: section header, buttons, scroll-reveal wrapper. */

function SectionHead({ eyebrow, title, sub, center, maxw }) {
  return (
    <div style={{ textAlign: center ? "center" : "left", maxWidth: maxw || (center ? 720 : 640), margin: center ? "0 auto" : 0 }}>
      <div className="cn-eyebrow">{eyebrow}</div>
      <h2 style={{
        fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: "clamp(30px, 4vw, 44px)",
        color: "var(--fg)", margin: "16px 0 0", lineHeight: 1.12, textWrap: "balance"
      }}>{title}</h2>
      {sub && <p style={{
        fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 17, color: "var(--fg-muted)",
        lineHeight: 1.7, margin: center ? "18px auto 0" : "18px 0 0", maxWidth: 620, textWrap: "pretty"
      }}>{sub}</p>}
    </div>
  );
}

/* Gold-filled primary action. Renders as <a> when href given, else <button>. */
function PrimaryCTA({ label, href, onClick, block, small, className = "", style = {} }) {
  const cls = ["cn-primary-cta", block && "cn-primary-cta--block", small && "cn-primary-cta--sm", className]
    .filter(Boolean).join(" ");
  const inner = <span className="cn-primary-cta__label">{label}</span>;
  const isExternal = href && /^https?:\/\//i.test(href);
  return href
    ? <a href={href} onClick={onClick} target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener" : undefined} className={cls} style={style}>{inner}</a>
    : <button type="button" onClick={onClick} className={cls} style={style}>{inner}</button>;
}

/* Outlined gold action. */
function GhostCTA({ label, icon, href, onClick, style = {} }) {
  const base = {
    fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500,
    letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--accent)",
    background: "transparent", border: "1px solid var(--border-gold-strong)",
    borderRadius: "var(--r-sm)", padding: "15px 28px", cursor: "pointer",
    transition: "border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease)", display: "inline-flex",
    alignItems: "center", gap: 11, textDecoration: "none", ...style
  };
  const hov = e => { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.background = "rgba(209,169,90,0.08)"; };
  const out = e => { e.currentTarget.style.borderColor = "var(--border-gold-strong)"; e.currentTarget.style.background = "transparent"; };
  const inner = <React.Fragment>{icon && <Icon name={icon} size={16} color="var(--accent)" />}{label}</React.Fragment>;
  const isExternal = href && /^https?:\/\//i.test(href);
  return href
    ? <a href={href} onClick={onClick} target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener" : undefined} style={base} onMouseEnter={hov} onMouseLeave={out}>{inner}</a>
    : <button onClick={onClick} style={base} onMouseEnter={hov} onMouseLeave={out}>{inner}</button>;
}

/* Fades + rises children into view once on scroll. */
function Reveal({ children, delay = 0, style = {} }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVis(true); return; }
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { setVis(true); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: vis ? 1 : 0,
      transform: vis ? "none" : "translateY(26px)",
      transition: `opacity var(--dur-slow) var(--ease) ${delay}ms, transform var(--dur-slow) var(--ease) ${delay}ms`,
      ...style
    }}>{children}</div>
  );
}

/* Thin gold flourish — — used as a small divider ornament. */
function Flourish({ style = {} }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, ...style }}>
      <span style={{ width: 28, height: 1, background: "var(--border-gold-strong)" }}></span>
      <img src="assets/icon-gold.png" alt="" style={{ height: 18, opacity: 0.85 }} />
      <span style={{ width: 28, height: 1, background: "var(--border-gold-strong)" }}></span>
    </div>
  );
}

Object.assign(window, { SectionHead, PrimaryCTA, GhostCTA, Reveal, Flourish });