/* Custom primitives for the Nubel landing page.
   Extends the shared primitives with marks, marquees, etc. */

const NubelWordmark = ({ color = "currentColor", size = 28 }) => (
  // Recreating the "nubel" wordmark in SVG so we can recolor it for dark mode.
  // Based on the Figtree-like rounded sans wordmark.
  <svg height={size} viewBox="0 0 220 60" fill={color} xmlns="http://www.w3.org/2000/svg" aria-label="nubel">
    <text x="0" y="46" fontFamily="Figtree, sans-serif" fontWeight="800" fontSize="56" letterSpacing="-2.5">nubel</text>
  </svg>
);

const NMark = ({ color = "var(--nubel-orange)", size = 28 }) => (
  <svg width={size} height={size * 1.12} viewBox="0 0 40 46" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 42 V 14 Q 4 6 12 6 Q 20 6 20 14 V 42" stroke={color} strokeWidth="6" strokeLinecap="round" fill="none"/>
    <circle cx="32" cy="30" r="8" fill={color}/>
  </svg>
);

// Kinetic vertical word flipper (for hero variant C)
const WordFlip = ({ words = [], interval = 2400, style = {} }) => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(v => (v + 1) % words.length), interval);
    return () => clearInterval(id);
  }, [words, interval]);
  const longest = words.reduce((a, b) => (a.length > b.length ? a : b), "");
  return (
    <span style={{
      display:"inline-block", position:"relative", verticalAlign:"baseline",
      ...style,
    }}>
      {/* Invisible sizer */}
      <span style={{visibility:"hidden", whiteSpace:"nowrap"}}>{longest}</span>
      {words.map((w, idx) => (
        <span key={w} style={{
          position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"flex-start",
          whiteSpace:"nowrap",
          color:"var(--nubel-orange)",
          transform: idx === i ? "translateY(0)" : "translateY(18%)",
          opacity: idx === i ? 1 : 0,
          transition:"all 420ms var(--ease-std)",
        }}>{w}</span>
      ))}
    </span>
  );
};

// Subtle text underline (hand-drawn feel with SVG)
const SquiggleUnder = ({ color = "var(--nubel-orange)" }) => (
  <svg viewBox="0 0 200 12" preserveAspectRatio="none" style={{
    position:"absolute", left:0, right:0, bottom:"-0.08em", width:"100%", height:"0.28em"
  }}>
    <path d="M2 8 Q 30 2, 60 7 T 120 7 T 198 6" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round"/>
  </svg>
);

// Marquee (used for the "we believe" strip)
const Marquee = ({ items, speed = 40, separator = "•", color = "var(--ink)" }) => {
  const content = [...items, ...items, ...items];
  return (
    <div style={{overflow:"hidden", width:"100%", maskImage:"linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)"}}>
      <div style={{
        display:"inline-flex", gap:48, whiteSpace:"nowrap", alignItems:"center",
        animation: `nb-marquee ${speed}s linear infinite`,
        color,
      }}>
        {content.map((t, i) => (
          <React.Fragment key={i}>
            <span style={{fontFamily:"var(--font-sans)", fontWeight:700, fontSize:"clamp(36px, 6vw, 72px)", letterSpacing:"-0.02em"}}>{t}</span>
            <span style={{color:"var(--nubel-orange)", fontSize:"clamp(24px, 4vw, 48px)"}}>{separator}</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

// Diagonal ticker (slower, subtle)
const TickerLine = ({ text, speed = 60, color = "var(--fg-3)" }) => {
  return (
    <div style={{overflow:"hidden"}}>
      <div style={{
        display:"inline-flex", gap:32, whiteSpace:"nowrap",
        animation:`nb-marquee ${speed}s linear infinite`,
        fontFamily:"var(--font-mono)", fontSize:12, color,
        textTransform:"uppercase", letterSpacing:"0.12em"
      }}>
        {Array.from({length:12}).map((_,i) => (
          <span key={i}>{text}</span>
        ))}
      </div>
    </div>
  );
};

window.NubelWordmark = NubelWordmark;
window.NMark = NMark;
window.WordFlip = WordFlip;
window.SquiggleUnder = SquiggleUnder;
window.Marquee = Marquee;
window.TickerLine = TickerLine;