// POVSwathy UI primitives — buttons, eyebrow, headline. All shared globally.
const { useState } = React;

const CALENDLY_URL = "https://calendly.com/hello-povswathy/30min";
function openCalendly() { window.open(CALENDLY_URL, "_blank", "noopener,noreferrer"); }
function scrollToId(id) { document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" }); }

function PillButton({ children, variant = "yellow", onClick, style }) {
  const styles = {
    yellow: { background: "#F4E36A", color: "#1A1714" },
    white:  { background: "#FBF6EF", color: "#6F7FB3" },
    outline:{ background: "transparent", color: "#6F7FB3", border: "2px solid #6F7FB3" },
  }[variant];
  return (
    <button onClick={onClick} className="pov-btn pov-btn-pill" style={{
      ...styles,
      border: styles.border || 0,
      borderRadius: 999,
      padding: "16px 28px",
      fontFamily: "var(--font-label)",
      fontWeight: 700,
      fontSize: 13,
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      cursor: "pointer",
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      transition: "opacity .15s, background .15s",
      ...style,
    }}>{children}</button>
  );
}

function BlockButton({ children, onClick, style, bg = "#DD6B3A", fg = "#FBF6EF" }) {
  return (
    <button onClick={onClick} className="pov-btn pov-btn-block" style={{
      background: bg, color: fg, border: 0, borderRadius: 0,
      padding: "20px 28px",
      fontFamily: "var(--font-label)", fontWeight: 700,
      fontSize: 14, letterSpacing: "0.16em", textTransform: "uppercase",
      cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 12,
      transition: "background .15s",
      ...style,
    }}>{children} <span style={{fontFamily:"var(--font-mono)"}}>›</span></button>
  );
}

function Eyebrow({ children, color = "var(--pov-terracotta)", style }) {
  return <div style={{
    fontFamily: "var(--font-mono)",
    fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase",
    color, ...style,
  }}>{children}</div>;
}

function Headline({ children, size = 72, color = "var(--pov-ink)", style, className }) {
  return <h1 className={className} style={{
    fontFamily: "var(--font-display)", fontWeight: 700,
    fontSize: size, lineHeight: 1.02, letterSpacing: "-0.015em",
    color, margin: 0, textWrap: "balance",
    ...style,
  }}>{children}</h1>;
}

// Hand-drawn squiggle underline that adapts to inline text width
function Squiggle({ children, color = "#DD6B3A" }) {
  return (
    <span style={{ position: "relative", display: "inline-block", whiteSpace: "nowrap" }}>
      {children}
      <svg viewBox="0 0 220 14" preserveAspectRatio="none"
        style={{ position: "absolute", left: 0, bottom: -8, width: "100%", height: 10 }}
        fill="none" aria-hidden>
        <path d="M 4 9 C 40 2, 120 14, 216 6" stroke={color} strokeWidth="3.5" strokeLinecap="round"/>
      </svg>
    </span>
  );
}

// Color block — a paper-like surface with optional grain
function ColorBlock({ bg, children, style, grain = true, id }) {
  return (
    <section id={id} style={{
      background: bg,
      position: "relative",
      ...style,
    }}>
      {grain && (
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.06,
          backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>\")",
          mixBlendMode: "multiply",
        }}/>
      )}
      <div style={{ position: "relative", zIndex: 1 }}>{children}</div>
    </section>
  );
}

Object.assign(window, { PillButton, BlockButton, Eyebrow, Headline, Squiggle, ColorBlock, CALENDLY_URL, openCalendly, scrollToId });