/* global React, Icon */
const { useState: useStateUI, useEffect: useEffectUI } = React;

const PhotoSlot = ({ id, label, shape = "rounded", radius = 14, style, placeholder, src }) => {
  // Drag-and-drop image-slot wrapper
  return (
    <image-slot
      id={id}
      shape={shape}
      radius={radius}
      placeholder={placeholder || label}
      src={src}
      style={{ width: "100%", height: "100%", display: "block", ...style }}
    ></image-slot>
  );
};

const PhotoPlaceholder = ({ label, hint, className = "", style, ratio }) => {
  const aspectStyle = ratio ? { aspectRatio: ratio } : null;
  return (
    <div className={`photo-placeholder ${className}`} style={{ ...aspectStyle, ...style }}>
      <div>
        <div className="ph-label">{label}</div>
        {hint ? <div style={{ marginTop: 8, fontSize: 12, color: "var(--ink-mute)", maxWidth: 280 }}>{hint}</div> : null}
      </div>
    </div>
  );
};

const Stat = ({ value, label }) => (
  <div className="stat">
    <div className="stat-value">{value}</div>
    <div className="stat-label">{label}</div>
  </div>
);

const Pill = ({ children, accent }) => (
  <span className={`tag ${accent ? "accent" : ""}`}>{children}</span>
);

const FAQItem = ({ q, a, defaultOpen = false }) => {
  const [open, setOpen] = useStateUI(defaultOpen);
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <button className="faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span>{q}</span>
        <span className="faq-icon"><Icon name={open ? "minus" : "plus"} size={18} /></span>
      </button>
      <div className="faq-a" style={{ maxHeight: open ? 400 : 0 }}>
        <div className="faq-a-inner">{a}</div>
      </div>
    </div>
  );
};

const Marquee = ({ items, accent }) => (
  <div className="marquee">
    <div className="marquee-track">
      {[...items, ...items, ...items].map((t, i) => (
        <span key={i} className="marquee-item">
          <span className="dot" />
          {t}
        </span>
      ))}
    </div>
  </div>
);

window.PhotoSlot = PhotoSlot;
window.PhotoPlaceholder = PhotoPlaceholder;
window.Stat = Stat;
window.Pill = Pill;
window.FAQItem = FAQItem;
window.Marquee = Marquee;