/* global React */
const { useState, useEffect, useRef, useCallback } = React;

/* ----------------------------------------------------------------
   Social glyphs (clean monoline)
-----------------------------------------------------------------*/
const Glyph = {
  instagram: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/>
    </svg>
  ),
  tiktok: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M16.5 3c.3 2 1.6 3.6 3.5 3.9v2.5c-1.3.05-2.6-.3-3.7-1V15a5.4 5.4 0 1 1-5.4-5.4c.2 0 .4 0 .6.03v2.6a2.8 2.8 0 1 0 2 2.7V3h3z"/>
    </svg>
  ),
  youtube: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="2.5" y="6" width="19" height="12" rx="4"/>
      <path d="M10.3 9.4v5.2l4.6-2.6z" fill="currentColor" stroke="none"/>
    </svg>
  ),
  mail: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="5" width="18" height="14" rx="2.5"/>
      <path d="M4 7.5l8 5.2 8-5.2"/>
    </svg>
  ),
};

function Socials({ items = ["instagram", "tiktok"], theme = "light", links }) {
  return (
    <div className="cw-socials">
      {items.map((k) => {
        const url = links && links[k];
        return url
          ? <a key={k} href={url} target="_blank" rel="noopener noreferrer" className={"cw-social is-" + theme} aria-label={k}>{Glyph[k]}</a>
          : <a key={k} href="#" className={"cw-social is-" + theme} aria-label={k} onClick={(e) => e.preventDefault()}>{Glyph[k]}</a>;
      })}
    </div>
  );
}

/* ----------------------------------------------------------------
   Carousel
-----------------------------------------------------------------*/
function Carousel({ slides, theme = "light", arrows = true, dots = true, rail = false, auto = true, interval = 3800 }) {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const n = slides.length;
  const go = useCallback((d) => setI((p) => (p + d + n) % n), [n]);

  useEffect(() => {
    if (!auto || paused) return;
    const t = setInterval(() => setI((p) => (p + 1) % n), interval);
    return () => clearInterval(t);
  }, [auto, paused, n, interval]);

  const slideStyle = (s) => s.img
    ? {}
    : { background: s.bg || "linear-gradient(135deg, var(--panel), var(--panel-2))", color: s.fg || "var(--mid)" };

  return (
    <div className="cw-carousel" style={{ height: "100%" }}
         onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="cw-stage" style={{ display: "flex" }}>
        <div style={{ position: "relative", flex: 1 }}>
          {slides.map((s, k) => (
            <div key={k} className={"cw-slide" + (k === i ? " is-active" : "") + (s.img ? "" : " cw-ph")}
                 style={slideStyle(s)}>
              {s.img ? <img src={s.img} alt="" /> : (
                <>
                  <span className="cw-ph-num">{s.num}</span>
                  <span className="cw-ph-cap">{s.cap}</span>
                </>
              )}
            </div>
          ))}
          {arrows && (
            <>
              <button className="cw-arrow prev" onClick={() => go(-1)} aria-label="Previous">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M15 5l-7 7 7 7"/></svg>
              </button>
              <button className="cw-arrow next" onClick={() => go(1)} aria-label="Next">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M9 5l7 7-7 7"/></svg>
              </button>
            </>
          )}
        </div>
        {rail && (
          <div className="cw-rail" style={{ marginLeft: 14, justifyContent: "center" }}>
            {slides.map((s, k) => (
              <button key={k} className={"cw-thumb" + (k === i ? " is-active" : "")}
                      onClick={() => setI(k)}
                      style={s.img ? { backgroundImage: `url(${s.img})` } : { background: s.bg || "var(--panel)" }} />
            ))}
          </div>
        )}
      </div>
      {dots && (
        <div className="cw-dots" style={{ position: "absolute", bottom: 16, left: 0, right: 0, justifyContent: "center", color: theme === "dark" ? "var(--white)" : "var(--ink)" }}>
          {slides.map((_, k) => (
            <button key={k} className={"cw-dot" + (k === i ? " is-active" : "")} onClick={() => setI(k)} aria-label={"Slide " + (k + 1)} />
          ))}
        </div>
      )}
    </div>
  );
}

/* ----------------------------------------------------------------
   Press card  — raised by default, presses DOWN on pointer
-----------------------------------------------------------------*/
function PressCard({ kicker, title, cta = "Inquire", lift = "lift-light", bg, veil, color = "#fff", titleSize = 40, children, onClick }) {
  const [pressed, setPressed] = useState(false);
  const down = () => setPressed(true);
  const up = () => setPressed(false);
  return (
    <div className={"cw-card " + lift + (pressed ? " is-pressed" : "")} onClick={onClick}
         onPointerDown={down} onPointerUp={up} onPointerLeave={up} onPointerCancel={up}>
      {bg && <div className="cw-card-img" style={{ background: bg }} />}
      {veil && <div className="cw-card-veil" style={{ background: veil }} />}
      <div className="cw-card-body" style={{ color }}>
        {children || (
          <>
            <span className="cw-kicker">{kicker}</span>
            <h3 className="cw-title" style={{ fontSize: titleSize }}>{title}</h3>
            <span className="cw-cta">{cta} <span className="cw-ar">→</span></span>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Socials, Carousel, SlideCarousel, PressCard, Glyph });

/* ----------------------------------------------------------------
   SlideCarousel — vertical 9:16, right-to-left slide, triangle controls
-----------------------------------------------------------------*/
function SlideCarousel({ slides, interval = 4200, auto = true }) {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const n = slides.length;
  const go = useCallback((d) => setI((p) => (p + d + n) % n), [n]);

  useEffect(() => {
    if (!auto || paused) return;
    const t = setInterval(() => setI((p) => (p + 1) % n), interval);
    return () => clearInterval(t);
  }, [auto, paused, n, interval]);

  return (
    <div className="cw-vcar" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="cw-vtrack" style={{ width: `${n * 100}%`, transform: `translateX(-${i * (100 / n)}%)` }}>
        {slides.map((s, k) => (
          <div key={k} className={"cw-vslide" + (s.img ? "" : " cw-ph")}
               style={{ width: `${100 / n}%`, ...(s.img ? {} : { background: s.bg || "linear-gradient(150deg,var(--panel),var(--panel-2))", color: s.fg || "var(--mid)" }) }}>
            {s.img ? <img src={s.img} alt="" /> : (
              <>
                <span className="cw-ph-num">{s.num}</span>
                <span className="cw-ph-cap">{s.cap}</span>
              </>
            )}
          </div>
        ))}
      </div>

      <div className="cw-vveil" />

      <button className="cw-tri left" onClick={() => go(-1)} aria-label="Previous">
        <svg viewBox="0 0 22 30" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"><path d="M16 3 L6 15 L16 27" /></svg>
      </button>
      <button className="cw-tri right" onClick={() => go(1)} aria-label="Next">
        <svg viewBox="0 0 22 30" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"><path d="M6 3 L16 15 L6 27" /></svg>
      </button>

      <div className="cw-vmeta">
        <span className="cw-vcount"><b>{String(i + 1).padStart(2, "0")}</b> &nbsp;/&nbsp; {String(n).padStart(2, "0")}</span>
        <span className="cw-vbars">
          {slides.map((_, k) => (
            <button key={k} className={"cw-dot" + (k === i ? " is-active" : "")} onClick={() => setI(k)} aria-label={"Slide " + (k + 1)} />
          ))}
        </span>
      </div>
    </div>
  );
}