// Primitives — Wohnung Prags

const Eyebrow = ({ children, tone = "mute", style }) => {
  const colors = { mute: "var(--fg-muted)", muteDark: "rgba(245,241,234,0.62)", gold: "var(--gold)" };
  return (
    <span style={{ ...{
        fontFamily: "var(--font-sans)", fontWeight: 400,
        letterSpacing: "0.28em", textTransform: "uppercase",
        color: colors[tone] || tone, ...style, fontSize: "20px"
      }, color: "rgb(201, 168, 106)", fontSize: "35px" }}>{children}</span>);

};

const Diamond = ({ size = 6, color = "var(--gold)", style }) =>
<span style={{ display: "inline-block", width: size, height: size, background: color, transform: "rotate(45deg)", ...style }} />;


const HairlineGold = ({ width = 56, style }) =>
<span style={{ ...{ display: "block", width, height: 1, background: "var(--gold)", ...style }, width: "58px" }} />;


const RuleDiamond = ({ color = "var(--gold)", maxWidth = 220, style }) =>
<div style={{ display: "flex", alignItems: "center", gap: 12, color, width: "100%", maxWidth, ...style }}>
    <span style={{ flex: 1, height: 1, background: "currentColor", opacity: 0.55 }} />
    <Diamond color="currentColor" />
    <span style={{ flex: 1, height: 1, background: "currentColor", opacity: 0.55 }} />
  </div>;


// Renders an array of strings as stacked headline lines.
// Strings may contain <em>...</em> for italic-gold emphasis.
const Headline = ({ lines, size = 72, light = false, style }) =>
<h2 style={{
  fontFamily: "var(--font-serif)", fontSize: size, fontWeight: 500,
  lineHeight: 1.02, letterSpacing: "-0.018em",
  color: light ? "var(--bone)" : "var(--graphite)",
  margin: 0, textWrap: "balance", ...style
}}>
    {lines.map((ln, i) =>
  <span key={i} style={{ display: "block" }} dangerouslySetInnerHTML={{ __html: ln }} />)}
  </h2>;


// Reveal-on-scroll wrapper. Adds a soft fade+rise as the element enters viewport.
const Reveal = ({ children, delay = 0, y = 24, style }) => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {if (e.isIntersecting) {setSeen(true);obs.disconnect();}}),
      { threshold: 0.18, rootMargin: "0px 0px -10% 0px" }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: seen ? 1 : 0,
      transform: seen ? "translateY(0)" : `translateY(${y}px)`,
      transition: `opacity 900ms cubic-bezier(0.22,0.61,0.36,1) ${delay}ms, transform 900ms cubic-bezier(0.22,0.61,0.36,1) ${delay}ms`,
      ...style
    }}>{children}</div>);

};

// Photo plate with crop motion modes: static / kenburns / parallax.
const Plate = ({ src, mode = "static", position = "center", aspect, height, style, children, overlay = false }) => {
  const ref = React.useRef(null);
  const [parallaxY, setParallaxY] = React.useState(0);
  React.useEffect(() => {
    if (mode !== "parallax") return;
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const winH = window.innerHeight;
      const progress = (rect.top + rect.height / 2 - winH / 2) / winH;
      setParallaxY(-progress * 40);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [mode]);
  return (
    <div ref={ref} style={{
      position: "relative", overflow: "hidden",
      aspectRatio: aspect, height, background: "#1a1f28",
      ...style
    }}>
      <div style={{
        position: "absolute", inset: mode === "parallax" ? "-12% 0" : 0,
        backgroundImage: `url(${src})`, backgroundSize: "cover", backgroundPosition: position,
        transform: mode === "parallax" ? `translateY(${parallaxY}px)` : "none",
        animation: mode === "kenburns" ? "wp-kenburns 18s ease-in-out infinite alternate" : "none"
      }} />
      {overlay &&
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(14,22,32,0.55), rgba(14,22,32,0) 55%)" }} />
      }
      {children}
    </div>);

};

// Monogram SV·31 — typographic mark for St. Veit 31/B.
const Monogram = ({ size = 44, light = false }) => {
  const c = light ? "var(--bone)" : "var(--ink)";
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      width: size, height: size, position: "relative"
    }}>
      <svg viewBox="0 0 60 60" width={size} height={size} aria-hidden="true">
        <circle cx="30" cy="30" r="28" fill="none" stroke={c} strokeOpacity="0.35" strokeWidth="0.6" />
        <text x="30" y="26" fill={c} fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontWeight="500" fontSize="20" textAnchor="middle">SV</text>
        <g transform="translate(30 33)" fill="var(--gold)">
          <rect x="-2" y="-2" width="4" height="4" transform="rotate(45)" />
        </g>
        <text x="30" y="48" fill={c} fontFamily="Montserrat, sans-serif" fontWeight="500" fontSize="9" letterSpacing="2" textAnchor="middle">31/B</text>
      </svg>
    </span>);

};

// CTA button.
const Button = ({ children, onClick, variant = "primary", dark = false, type = "button", as = "button", href }) => {
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 500,
    letterSpacing: "0.22em", textTransform: "uppercase",
    padding: "14px 26px", border: "1px solid", cursor: "pointer",
    background: "transparent", textDecoration: "none",
    transition: "background 280ms, color 280ms, border-color 280ms"
  };
  const styles = {
    primary: dark ?
    { background: "var(--gold)", color: "var(--ink)", borderColor: "var(--gold)" } :
    { background: "var(--ink)", color: "var(--bone)", borderColor: "var(--ink)" },
    ghost: dark ?
    { background: "transparent", color: "var(--bone)", borderColor: "rgba(245,241,234,0.5)" } :
    { background: "transparent", color: "var(--ink)", borderColor: "var(--ink)" }
  };
  const Tag = as === "a" ? "a" : "button";
  return (
    <Tag href={href} type={as === "button" ? type : undefined} onClick={onClick} style={{ ...base, ...styles[variant] }}>{children}</Tag>);

};

Object.assign(window, { Eyebrow, Diamond, HairlineGold, RuleDiamond, Headline, Reveal, Plate, Monogram, Button });