/* Maitha Tech — shared primitives for the home page.
   Pulls the design-system components off the bundle namespace and
   adds a few layout/scroll helpers used across sections. */

const DS = window.MaithaTechDesignSystem_b10928 || {};
const { Button, IconButton, Eyebrow, Badge, Input, Card, Avatar } = DS;

/* Reveal-on-scroll: adds .in when the element enters the viewport. */
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const show = () => el.classList.add("in");
    if (typeof IntersectionObserver === "undefined") { show(); return; }
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }),
      { threshold: 0.16, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    // Safety net: if the observer never fires in this embedding context,
    // force-reveal so content is never stranded invisible.
    const fallback = setTimeout(show, 700);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
  return ref;
}

/* A revealing block. delay in ms staggers children entrances. */
function Reveal({ children, delay = 0, as = "div", className = "", style = {}, ...rest }) {
  const ref = useReveal();
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${className}`} style={{ transitionDelay: `${delay}ms`, ...style }} {...rest}>
      {children}
    </Tag>
  );
}

/* Playfair-italic accent word, with a hand-drawn brand scribble behind it.
   Scribbles are recolored on the fly via CSS mask + brand accent (blue/orange).
   s2 & s3 wrap around the word; the rest underline it. */
const SCRIBBLES = {
  s1: { aspect: 22.28, kind: "under" },
  s2: { aspect: 4.32, kind: "around" },
  s3: { aspect: 3.39, kind: "around" },
  s4: { aspect: 13.74, kind: "under" },
  s5: { aspect: 13.35, kind: "under" },
  s6: { aspect: 17.47, kind: "under" },
  s7: { aspect: 17.45, kind: "under" },
};

function Accent({ children, scribble = "s5", tone = "blue", width, draw = true, behind = false }) {
  const cfg = SCRIBBLES[scribble] || SCRIBBLES.s5;
  const around = cfg.kind === "around";
  const color = tone === "orange" ? "var(--mt-orange)" : "var(--mt-blue)";
  const w = width != null ? width : (around ? 1.26 : 1.05);
  const url = `url("assets/scribbles/${scribble}.svg")`;
  const mark = {
    position: "absolute", left: "50%", background: color, pointerEvents: "none", zIndex: behind ? -1 : 0,
    width: `${w * 100}%`, aspectRatio: String(cfg.aspect),
    WebkitMaskImage: url, maskImage: url,
    WebkitMaskSize: "100% 100%", maskSize: "100% 100%",
    WebkitMaskRepeat: "no-repeat", maskRepeat: "no-repeat",
    ...(around
      ? { top: "52%", transform: "translate(-50%, -50%)" }
      : { top: "94%", transform: "translate(-50%, -50%)" }),
  };
  return (
    <span style={{ position: "relative", display: "inline-block", whiteSpace: "nowrap" }}>
      {draw ? <span aria-hidden="true" className="mt-scribble" style={mark} /> : null}
      <span className="mt-accent" style={{ position: "relative", zIndex: 1 }}>{children}</span>
    </span>
  );
}

/* Section wrapper with the brand's generous vertical rhythm + a top hairline. */
function Section({ id, children, divider = true, style = {} }) {
  return (
    <section
      id={id}
      className="mt-container"
      style={{ paddingTop: "clamp(72px, 9vw, 124px)", paddingBottom: "clamp(72px, 9vw, 124px)", borderTop: divider ? "1px solid var(--border-faint)" : "0", ...style }}
    >
      {children}
    </section>
  );
}

/* Eyebrow + heading + optional lead, the standard section opener. */
function SectionHead({ eyebrow, marker = "rule", title, lead, align = "left", max = 760 }) {
  return (
    <div style={{ maxWidth: max, marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0, textAlign: align }}>
      {eyebrow ? <Eyebrow marker={marker}>{eyebrow}</Eyebrow> : null}
      <h2 style={{ fontSize: "clamp(2rem, 3.6vw, 3rem)", lineHeight: 1.1, letterSpacing: "var(--ls-h1)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: eyebrow ? "20px 0 0" : "0", textWrap: "balance" }}>
        {title}
      </h2>
      {lead ? <p style={{ marginTop: 22, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 600 }}>{lead}</p> : null}
    </div>
  );
}

/* Decorative brand glyph (star / flower / circle) — a small monochrome accent.
   star & flower ship black, so invert to white on the dark canvas; circle is
   already a white stroke. Purely decorative — hidden from assistive tech. */
function Glyph({ name, size = 40, className = "", style = {} }) {
  const invert = name !== "circle";
  return (
    <img src={`assets/icons/${name}.svg`} alt="" aria-hidden="true" className={`mt-glyph ${className}`}
      style={{ width: size, height: "auto", display: "block", filter: invert ? "invert(1)" : "none", ...style }} />
  );
}

/* Small circular arrow affordance used on cards & links. */
function ArrowDot({ size = 42 }) {
  return (
    <span style={{ width: size, height: size, flex: "none", borderRadius: "50%", border: "1px solid var(--border-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "background var(--dur-base) var(--ease-out), border-color var(--dur-base)" }}>
      <img src="assets/icons/arrow-white.svg" alt="" style={{ width: size * 0.36 }} />
    </span>
  );
}

Object.assign(window, { DS, Button, IconButton, Eyebrow, Badge, Input, Card, Avatar, useReveal, Reveal, Accent, Section, SectionHead, ArrowDot, Glyph });