/* ENKII — cards + fullscreen module experience. window.ENKIICards */
/* global React, Viz, VizCounter */
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

const ICONS = {
  web: <g><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 9h18M7 13h6" /></g>,
  mobile: <g><rect x="7" y="2.5" width="10" height="19" rx="2.5" /><path d="M11 18.5h2" /></g>,
  ai: <g><circle cx="12" cy="12" r="3.2" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" /></g>,
  automation: <g><path d="M4 7h9M4 12h13M4 17h7" /><circle cx="18" cy="7" r="2" /><circle cx="14" cy="17" r="2" /></g>,
  backend: <g><ellipse cx="12" cy="6" rx="7" ry="3" /><path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6" /></g>,
  architecture: <g><rect x="9" y="3" width="6" height="6" rx="1" /><rect x="3" y="15" width="6" height="6" rx="1" /><rect x="15" y="15" width="6" height="6" rx="1" /><path d="M12 9v3M12 12H6v3M12 12h6v3" /></g>,
  cases: <g><path d="M4 19V9M10 19V5M16 19v-7M22 19H2" /></g>,
  process: <g><circle cx="5" cy="12" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="19" cy="12" r="2" /><path d="M7 12h3M14 12h3" /></g>,
  team: <g><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9.5" r="2.3" /><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5M15 19c0-2 .8-3.5 2-4.2" /></g>,
  contact: <g><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M4 7l8 6 8-6" /></g>,
  mvp: <g><path d="M12 2c3 1.5 5 4.8 5 9 0 2.3-.7 4.3-1.6 6H8.6C7.7 15.3 7 13.3 7 11c0-4.2 2-7.5 5-9z" /><circle cx="12" cy="10" r="1.8" /><path d="M8.6 17l-1.8 3M15.4 17l1.8 3M12 17v4" /></g>,
};

function CardIcon({ id }) {
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor"
      strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{ICONS[id]}</svg>
  );
}

function Card({ data, lang, ui, onOpen, registerRef, onDragStart, dragging }) {
  const [hover, setHover] = useStateC(false);
  const a = data.accent, a2 = data.accent2;
  const tag = data.tag[lang];
  const bullets = data.bullets[lang];
  const active = hover || dragging;
  return (
    <div
      ref={(el) => registerRef(data.id, el)}
      className={"card span-" + data.span + (active ? " is-active" : "") + (dragging ? " is-dragging" : "") + (data.promo ? " is-promo" : "")}
      style={{ "--a": a, "--a2": a2 }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onPointerDown={(e) => onDragStart(e, data.id)}
    >
      <div className="card-glow" />
      <div className="card-sheen" />
      <div className="card-head">
        <div className="card-ic"><CardIcon id={data.id} /></div>
        <span className="card-code">{data.code}</span>
        {data.promo && <span className="card-promo"><b>{data.price}</b><span className="card-promo-tag">{({ fr: "PROMO", en: "OFFER", pt: "PROMOÇÃO", es: "PROMOCIÓN" })[lang]}</span></span>}
        <button className="card-open" onClick={(e) => { e.stopPropagation(); onOpen(data.id); }}
          aria-label={ui.open}>
          <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M7 17L17 7M9 7h8v8" /></svg>
        </button>
      </div>
      <div className="card-title">{data.title}</div>
      <div className="card-tag">{tag}</div>
      <div className="card-viz"><Viz type={data.viz} a={a} a2={a2} active={active} lang={lang} /></div>
      {!data.promo && (
        <div className="card-reveal">
          <div className="card-metrics">
            {data.metrics.map((m, i) => (
              <div key={i} className="card-metric">
                <span className="cm-val" style={{ color: a2 }}>{m.value}<i>{typeof m.suffix === "object" ? m.suffix[lang] : m.suffix}</i></span>
                <span className="cm-lbl">{typeof m.label === "object" ? m.label[lang] : m.label}</span>
              </div>
            ))}
          </div>
        </div>
      )}
      {!data.promo && (
        <div className="card-foot">
          <span className="card-chips">{bullets.slice(0, 3).join(" · ")}</span>
        </div>
      )}
    </div>
  );
}

function Fullscreen({ data, lang, ui, onClose }) {
  const a = data.accent, a2 = data.accent2;
  const [show, setShow] = useStateC(false);
  const [showBig, setShowBig] = useStateC(false);
  const [bigStart, setBigStart] = useStateC(0);
  const bigRef = useRefC(false);
  bigRef.current = showBig;
  useEffectC(() => {
    const r = requestAnimationFrame(() => setShow(true));
    const onKey = (e) => { if (e.key === "Escape" && !bigRef.current) onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); cancelAnimationFrame(r); document.body.style.overflow = ""; };
  }, []);
  const bullets = data.bullets[lang];
  const Cw = window.ENKIICarousel || {};
  const openBig = (idx) => { setBigStart(idx || 0); setShowBig(true); };
  return (
    <div className={"fs" + (show ? " show" : "")} style={{ "--a": a, "--a2": a2 }}>
      <div className="fs-ambient" />
      <div className="fs-grid-bg" />
      <div className="fs-inner">
        <div className="fs-top">
          <div className="fs-id">
            <span className="fs-code">{data.code}</span>
            <span className="fs-ic"><CardIcon id={data.id} /></span>
          </div>
          <button className="fs-close" onClick={onClose}>
            <span>{ui.close}</span>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
          </button>
        </div>

        {data.projects ? (
          <div className="fs-body fs-body-cases">
            <div className="fs-left">
              <h1 className="fs-title">{data.title}</h1>
              <p className="fs-tag">{data.tag[lang]}</p>
              <p className="fs-narr fs-narr-sm">{data.body[lang]}</p>
              {Cw.StatusList && <Cw.StatusList lang={lang} ui={ui} />}
              <button className="fs-cta" onClick={() => openBig(0)}>{ui.explore}<span>→</span></button>
            </div>
            <div className="fs-right fs-right-car">
              {Cw.Carousel && <Cw.Carousel lang={lang} ui={ui} onOpenBig={openBig} />}
            </div>
          </div>
        ) : data.form ? (
          <div className="fs-body fs-body-form">
            <div className="fs-left">
              {data.promo && <span className="mvp-badge"><i className="mvp-badge-dot" />{({ fr: "OFFRE LIMITÉE", en: "LIMITED OFFER", pt: "PROMOÇÃO", es: "PROMOCIÓN" })[lang]}</span>}
              <h1 className="fs-title">{data.title}</h1>
              {data.price && (
                <div className="mvp-price">
                  <span className="mvp-price-val">{data.price}</span>
                  <span className="mvp-price-note">{typeof data.priceNote === "object" ? data.priceNote[lang] : data.priceNote}</span>
                </div>
              )}
              {data.headline && <p className="fs-headline">{data.headline[lang]}</p>}
              <p className="fs-narr fs-narr-sm">{data.body[lang]}</p>
              <div className="fs-metrics fs-metrics-inline">
                {data.metrics.map((m, i) => (
                  <div key={i} className="fs-metric">
                    <div className="fsm-val" style={{ color: a2 }}>
                      {m.value}{typeof m.suffix === "object" ? m.suffix[lang] : m.suffix}
                    </div>
                    <div className="fsm-lbl">{typeof m.label === "object" ? m.label[lang] : m.label}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="fs-right fs-right-form">
              {window.ENKIIForm && <window.ENKIIForm.ContactForm lang={lang} ui={ui} accent={a} accent2={a2} />}
            </div>
          </div>
        ) : (
          <div className="fs-body">
            <div className="fs-left">
              <h1 className="fs-title">{data.title}</h1>
              <p className="fs-tag">{data.tag[lang]}</p>
              {data.headline && <p className="fs-headline">{data.headline[lang]}</p>}
              <p className="fs-narr">{data.body[lang]}</p>
              <div className="fs-caps">
                <div className="fs-section-label">{ui.capabilities}</div>
                <ul>
                  {bullets.map((b, i) => (
                    <li key={i} style={{ animationDelay: (0.15 + i * 0.07) + "s" }}>
                      <span className="dot" />{b}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div className="fs-right">
              <div className="fs-vizbox">
                <div className="fs-section-label">{ui.metrics} — {ui.live}</div>
                <div className="fs-viz"><Viz type={data.viz} a={a} a2={a2} active={true} /></div>
              </div>
              <div className="fs-metrics">
                {data.metrics.map((m, i) => (
                  <div key={i} className="fs-metric">
                    <div className="fsm-val" style={{ color: a2 }}>
                      {/^[0-9.]+$/.test(String(m.value))
                        ? <VizCounter to={m.value} suffix={typeof m.suffix === "object" ? m.suffix[lang] : m.suffix} />
                        : <span>{m.value}{typeof m.suffix === "object" ? m.suffix[lang] : m.suffix}</span>}
                    </div>
                    <div className="fsm-lbl">{typeof m.label === "object" ? m.label[lang] : m.label}</div>
                  </div>
                ))}
              </div>
              {data.id === "contact" ? (
                <a className="fs-cta" href="https://www.enkii.fr" target="_blank" rel="noopener">
                  {ui.cta}<span>↗</span>
                </a>
              ) : (
                <button className="fs-cta" onClick={onClose}>{ui.explore}<span>→</span></button>
              )}
            </div>
          </div>
        )}
        {showBig && Cw.BigCarousel && <Cw.BigCarousel lang={lang} ui={ui} startIndex={bigStart} onClose={() => setShowBig(false)} />}
      </div>
    </div>
  );
}

window.ENKIICards = { Card, Fullscreen };