/* global React */
// Pixel Floors — Products section (alternating L/R)


function PFProductBlock({ data, flip, lang, big }) {
  return (
    <div className={"pf-product" + (flip ? " flip" : "")}>
      <div className="visual-col">
        <div className="label-chip">
          <span className="dot" />
          {data.tag}
        </div>
        <image-slot
          id={`product-${flip ? "full" : "mini"}-${lang}`}
          shape="rounded"
          radius="18"
          placeholder={`${data.name} — vizualizace / video`}
        ></image-slot>
        <div className="spec-stack">
          <div className="spec"><span className="k">{lang === "cs" ? "Plocha" : "Area"}</span> {data.features[0]}</div>
          <div className="spec"><span className="k">{lang === "cs" ? "Hráči" : "Players"}</span> {data.features[1]}</div>
        </div>
      </div>
      <div className="text-col">
        <div className="product-eyebrow">{data.chip}</div>
        <h3>{data.name}</h3>
        <p>{data.lead}</p>
        <ul className="feature-list">
          {data.features.map((f, i) => <li key={i}>{f}</li>)}
        </ul>
        <div className="cta-row">
          <a className="pf-btn primary" href="#contact">{data.primary} →</a>
          <a className="pf-btn ghost" href="#comparison">{data.secondary}</a>
        </div>
      </div>
    </div>
  );
}

function PFProducts({ content, products, lang }) {
  return (
    <section className="pf-section" id="products">
      <div className="pf-shell">
        <div className="pf-section-head">
          <span className="eyebrow">{content.eyebrow}</span>
          <h2 className="pf-h2">{content.title}</h2>
          <p className="lead">{content.lead}</p>
        </div>
        <PFProductBlock data={products[0]} flip={false} lang={lang} big={false} />
        <PFProductBlock data={products[1]} flip={true}  lang={lang} big={true} />
      </div>
    </section>
  );
}

// ----- COMPARISON -----
function PFComparisonCard({ data, variant }) {
  // scale rooms so MINI = small inside the frame, FULL = nearly fills
  const isFull = variant === "full";
  const scale = isFull ? { width: "82%", height: "78%" } : { width: "44%", height: "58%" };
  return (
    <div className={"pf-compare-card" + (isFull ? " full" : "")}>
      <div className="head">
        <h3>{data.name}</h3>
        <div className="tag">{data.tag}</div>
      </div>
      <p className="subhead">{data.sub}</p>

      <div className="schema" aria-hidden="true">
        <div className="room" style={scale}>{data.name}</div>
        <div className="dim h">{data.specs[1].v}</div>
        <div className="dim v">{data.specs[1].v}</div>
      </div>

      <div className="specs">
        {data.specs.map((s, i) => (
          <div className="row" key={i}>
            <span className="k">{s.k}</span>
            <span className="v">{s.v}</span>
          </div>
        ))}
      </div>

      <div className="ideal">
        <span className="k">{data.idealLabel}</span>
        <span>{data.ideal}</span>
      </div>

      <div className="foot">
        <a className="pf-btn primary" href="#contact">{data.primary} →</a>
        <a className="pf-btn ghost" href="#products">{data.secondary}</a>
      </div>
    </div>
  );
}

function PFComparison({ content }) {
  return (
    <section className="pf-section" id="comparison">
      <div className="pf-shell">
        <div className="pf-section-head">
          <span className="eyebrow">{content.eyebrow}</span>
          <h2 className="pf-h2">{content.title}</h2>
          <p className="lead">{content.lead}</p>
        </div>
        <div className="pf-comparison-grid">
          <PFComparisonCard data={content.mini} variant="mini" />
          <PFComparisonCard data={content.full} variant="full" />
        </div>
      </div>
    </section>
  );
}

window.PFProducts = PFProducts;
window.PFComparison = PFComparison;