/* Shared helpers — Placeholder, SectionShell, useVariant */

const { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } = React;
const ESTIMATED_PRICE_NOTICE = "Preços estimativos sem IVA, peça um orçamento formal.";

function Placeholder({ ratio = "16/9", label = "image", height, style }) {
  const s = { aspectRatio: ratio, ...style };
  if (height) s.height = height;
  return (
    <div className="ph" style={s}>
      <span className="ph-label">{label}</span>
    </div>
  );
}

function VariantCycler({ count = 4, value, onChange }) {
  return (
    <div className="variant-cycler" role="group" aria-label="Variant">
      {Array.from({ length: count }).map((_, i) => (
        <button
          key={i}
          aria-pressed={value === i}
          onClick={() => onChange(i)}
          title={`Variant ${String(i + 1).padStart(2, "0")}`}
        >
          {String(i + 1).padStart(2, "0")}
        </button>
      ))}
    </div>
  );
}

function PickBox({ picked, onChange, variantIndex }) {
  return (
    <button
      type="button"
      className={"pick-box" + (picked ? " is-picked" : "")}
      onClick={() => onChange(!picked)}
      aria-pressed={picked}
      title={picked ? "Picked — click to unpick" : "Pick this component for step 2"}
    >
      <span className="pick-mark" aria-hidden="true">
        {picked ? (
          <svg viewBox="0 0 12 12" width="12" height="12">
            <path d="M2 6.5 L5 9 L10 3.2" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter" />
          </svg>
        ) : null}
      </span>
      <span className="pick-label">
        {picked ? "PICKED" : "PICK"}
        <span className="pick-variant num">·V{String(variantIndex + 1).padStart(2, "0")}</span>
      </span>
    </button>
  );
}

function SectionShell({ num, total = 12, name, desc, variantIndex, variantCount, onVariantChange, picked, onPickChange, children, dataLabel }) {
  return (
    <section className={"section-shell" + (picked ? " is-picked" : "")} data-screen-label={dataLabel || `${num} ${name}`}>
      <div className="wrap">
        <div className="section-meta">
          <div className="left">
            <span className="num-tag">{String(num).padStart(2, "0")} / {String(total).padStart(2, "0")}</span>
            <span className="title">{name}</span>
            {desc ? <span className="desc">{desc}</span> : null}
          </div>
          <div className="right" style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span className="label num">Variant {String(variantIndex + 1).padStart(2, "0")} / {String(variantCount).padStart(2, "0")}</span>
            <VariantCycler count={variantCount} value={variantIndex} onChange={onVariantChange} />
            {onPickChange ? <PickBox picked={!!picked} onChange={onPickChange} variantIndex={variantIndex} /> : null}
          </div>
        </div>
      </div>
      <div className="section-body">{children}</div>
    </section>
  );
}

Object.assign(window, { Placeholder, VariantCycler, PickBox, SectionShell, ESTIMATED_PRICE_NOTICE });