/* Shared components: HouseSymbol, Logo, Placeholder, Reveal, Marquee */

// House symbol — single chevron-arch derived from the Myfab logomark
// Per brand: "The house symbol is our unique graphic device... versatile, can be rotated and scaled"
function HouseSymbol({ size = 24, color = "currentColor", style = {}, className = "", rotation = 0 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      style={{ transform: `rotate(${rotation}deg)`, ...style }}
      className={className}
      aria-hidden="true"
    >
      {/* Chevron-arch: peaked roof + vertical sides extending to baseline — matches the arch motif in the Myfab logomark */}
      <path
        d="M50 4 L94 48 L94 100 L74 100 L74 64 L50 40 L26 64 L26 100 L6 100 L6 48 Z"
        fill={color}
      />
    </svg>
  );
}

// Solid filled chevron (one arch as a single solid shape)
function HouseSymbolSolid({ size = 24, color = "currentColor", style = {}, className = "" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style} className={className} aria-hidden="true">
      <path d="M50 6 L94 50 L94 100 L6 100 L6 50 Z" fill={color} />
    </svg>
  );
}

// Logomark — the official square mark with nested arches (recreated as SVG so it can be recolored)
function LogoMark({ size = 28, color = "var(--cobalt)", style = {}, className = "" }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      style={style}
      className={className}
      aria-hidden="true"
    >
      {/* Filled cobalt square */}
      <rect width="100" height="100" fill={color} />
      {/* Three nested chevron-arches drawn as white outlines (negative space) */}
      {/* Outer arch */}
      <path
        d="M9 100 V40 L50 5 L91 40 V100 H79 V47 L50 22 L21 47 V100 Z"
        fill="white"
      />
      {/* Middle arch */}
      <path
        d="M28 100 V54 L50 35 L72 54 V100 H62 V59 L50 49 L38 59 V100 Z"
        fill="white"
      />
      {/* Inner arch */}
      <path
        d="M42 100 V70 L50 63 L58 70 V100 H53 V73 L50 70 L47 73 V100 Z"
        fill="white"
      />
    </svg>
  );
}

// Logo — uses the actual brand asset (PNG)
function Logo({ height = 28, variant = "blue", style = {}, className = "" }) {
  const src = variant === "white" ? "assets/logo-full-white.png" : "assets/logo-full-blue.png";
  return (
    <img
      src={src}
      alt="Myfab"
      style={{ height, width: 'auto', display: 'block', ...style }}
      className={className}
    />
  );
}

// Placeholder image slot
function Placeholder({ label, ratio = "16/9", cobalt = false, style = {}, children, className = "" }) {
  return (
    <div
      className={`ph ${cobalt ? 'ph-cobalt' : ''} ${className}`}
      style={{ aspectRatio: ratio, ...style }}
    >
      {children || <span className="ph-label">{label}</span>}
    </div>
  );
}

// Intersection-observer reveal wrapper
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {} }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setShown(true);
          obs.disconnect();
        }
      },
      { threshold: 0.12, rootMargin: '0px 0px -10% 0px' }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${shown ? 'in' : ''} ${className}`}
      style={{ transitionDelay: `${delay}ms`, ...style }}
    >
      {children}
    </Tag>
  );
}

// Animated counter
function Counter({ to, suffix = '', duration = 1600, className = '' }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  const [started, setStarted] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        setStarted(true);
        const start = performance.now();
        const tick = (t) => {
          const p = Math.min(1, (t - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(Math.round(to * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.5 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [to, duration, started]);
  return <span ref={ref} className={className}>{val}{suffix}</span>;
}

// Decorative scattered house symbols — disabled per design request.
function HouseDeco() {
  return null;
}

// Marquee row
function Marquee({ items, sep = '·' }) {
  const seq = [...items, ...items];
  return (
    <div className="marquee-wrap">
      <div className="marquee">
        {seq.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 64 }}>
            <span style={{ fontSize: 'clamp(28px, 4vw, 56px)', fontWeight: 500, letterSpacing: '-0.035em' }}>{it}</span>
            <HouseSymbol size={24} color="currentColor" style={{ opacity: 0.4 }} />
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HouseSymbol, HouseSymbolSolid, LogoMark, Logo, Placeholder, Reveal, Counter, HouseDeco, Marquee });