// Shared brand primitives — glyph, wordmark, layout helpers
// All components attached to window for cross-script access.

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

/* ---------- Glyph ---------- */
// A small botanical mark: a vertical stem with 12 needles arranged in
// 6 pairs that fan upward (top needles more vertical, bottom more horizontal —
// the way a real yew sprig sits), and one Heartwood berry suspended on a
// tiny offshoot near the apex. The berry is the brand's quiet signature.
function YewGlyph({ size = 32, berry = true, color, accent }) {
  const stroke = color || "currentColor";
  const dot = accent || "var(--accent)";

  // 6 nodes along the stem, fanning upward.
  // y: top-down position. angle: degrees from vertical. len: needle length.
  const nodes = [
    { y: 25.5, angle: 78, len: 7.6 }, // bottom — long, near-horizontal
    { y: 22.0, angle: 72, len: 7.3 },
    { y: 18.5, angle: 64, len: 6.9 },
    { y: 15.0, angle: 56, len: 6.4 },
    { y: 11.5, angle: 46, len: 5.8 },
    { y:  8.5, angle: 34, len: 5.0 }, // top — short, near-vertical
  ];

  const cx = 16;

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      role="img"
      aria-label="Yew glyph — a yew sprig with one berry"
      style={{ flex: "none" }}
    >
      {/* stem */}
      <line
        x1={cx} y1="5.5" x2={cx} y2="28"
        stroke={stroke} strokeWidth="1" strokeLinecap="round"
      />

      {/* needles — pairs fan upward, more vertical near the apex */}
      {nodes.map((n, i) => {
        const rad = (n.angle * Math.PI) / 180;
        const dx = Math.sin(rad) * n.len;
        const dy = Math.cos(rad) * n.len;
        return (
          <g key={i}>
            <line
              x1={cx} y1={n.y}
              x2={cx - dx} y2={n.y - dy}
              stroke={stroke} strokeWidth="0.85" strokeLinecap="round"
            />
            <line
              x1={cx} y1={n.y}
              x2={cx + dx} y2={n.y - dy}
              stroke={stroke} strokeWidth="0.85" strokeLinecap="round"
            />
          </g>
        );
      })}

      {/* berry — on a tiny offshoot stem at the top */}
      {berry && (
        <g>
          <path
            d={`M ${cx} 6.5 Q ${cx + 1.1} 5.4 ${cx + 2.0} 4.2`}
            stroke={dot}
            strokeWidth="0.7"
            strokeLinecap="round"
            fill="none"
          />
          <circle cx={cx + 2.2} cy="3.4" r="1.55" fill={dot} />
        </g>
      )}
    </svg>
  );
}

/* ---------- Wordmark ---------- */
function YewWordmark({ size = 26, withGlyph = true, glyphSize = 22 }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        color: "var(--brand)",
      }}
    >
      {withGlyph && <YewGlyph size={glyphSize} />}
      <span
        className="serif"
        style={{
          fontSize: size,
          letterSpacing: "-0.025em",
          fontWeight: 500,
          lineHeight: 1,
          fontFamily: "var(--serif)",
        }}
      >
        yew
      </span>
    </span>
  );
}

/* ---------- Container ---------- */
function Container({ children, max = 1200, pad = 32, style = {}, ...rest }) {
  return (
    <div
      style={{
        maxWidth: max,
        margin: "0 auto",
        paddingLeft: pad,
        paddingRight: pad,
        ...style,
      }}
      {...rest}
    >
      {children}
    </div>
  );
}

/* ---------- Eyebrow label ---------- */
function Eyebrow({ children, accent }) {
  return (
    <div
      className="eyebrow"
      style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
    >
      {accent && (
        <span
          style={{
            width: 6, height: 6, borderRadius: "50%",
            background: "var(--accent)",
            display: "inline-block",
          }}
        />
      )}
      {children}
    </div>
  );
}

/* ---------- Section header (eyebrow · title · lede) ---------- */
function SectionHead({ eyebrow, title, lede, align = "left", max }) {
  return (
    <div style={{ textAlign: align, maxWidth: max }}>
      {eyebrow && <Eyebrow accent>{eyebrow}</Eyebrow>}
      <h2
        className="serif"
        style={{
          fontFamily: "var(--serif)",
          fontWeight: 500,
          fontSize: "clamp(36px, 4.6vw, 56px)",
          lineHeight: 1.05,
          letterSpacing: "-0.018em",
          margin: "16px 0 0 0",
          color: "var(--fg)",
          textWrap: "balance",
        }}
      >
        {title}
      </h2>
      {lede && (
        <p
          style={{
            marginTop: 18,
            fontSize: 17,
            color: "var(--muted)",
            lineHeight: 1.55,
            maxWidth: 620,
            textWrap: "pretty",
            ...(align === "center" ? { marginLeft: "auto", marginRight: "auto" } : null),
          }}
        >
          {lede}
        </p>
      )}
    </div>
  );
}

/* ---------- Quiet stat ---------- */
function Stat({ value, label, suffix }) {
  return (
    <div>
      <div
        className="serif num"
        style={{
          fontFamily: "var(--serif)",
          fontSize: 64,
          lineHeight: 1,
          letterSpacing: "-0.02em",
          color: "var(--brand)",
        }}
      >
        {value}
        {suffix && (
          <span style={{ color: "var(--accent)", fontSize: 28, verticalAlign: "top", marginLeft: 4 }}>
            {suffix}
          </span>
        )}
      </div>
      <div
        className="eyebrow"
        style={{ marginTop: 12, color: "var(--muted)" }}
      >
        {label}
      </div>
    </div>
  );
}

/* ---------- Tagline pool (Tweaks: cycle) ---------- */
const TAGLINES = [
  { primary: "Reclaim what's yours.", sub: "Yew removes your personal data from the open web — and keeps it removed." },
  { primary: "The privacy of being yourself.", sub: "Yew is the quiet, autonomous removal of your name, address, and family from data brokers." },
  { primary: "Out of the open.", sub: "Yew submits, verifies, and re-runs your removal across 95+ brokers — every quarter, forever." },
  { primary: "Privacy by design.", sub: "An autonomous agent built for people who would prefer not to be findable." },
  { primary: "Be unfindable.", sub: "Yew is a privacy service for high-net-worth individuals, executives, and families." },
];

Object.assign(window, {
  YewGlyph,
  YewWordmark,
  Container,
  Eyebrow,
  SectionHead,
  Stat,
  TAGLINES,
});