const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ProductFamily section + ModelCard
function ModelCard({ model, family, cardStyle = "classic" }) {
  const tbd = model.range == null && model.speed == null;
  const hero = model.speed != null
    ? { k: "TOP SPEED", v: model.speed, u: "კმ/სთ" }
    : model.power
    ? { k: "PEAK POWER", v: model.power, u: "" }
    : { k: "STATUS", v: "TBD", u: "" };

  return (
    <article
      className="model-card"
      data-style={cardStyle}
      data-tbd={tbd ? "true" : "false"}
    >
      <div className="model-image">
        {model.img
          ? <img src={model.img} alt={`RFN ${model.name}`} className="model-photo" loading="lazy" decoding="async" />
          : <ProductSlot label={`product shot — ${model.name}`} aspect="5 / 4" variant="card" />
        }
        <div className="model-family-tag">{family.name}</div>
        <div className="model-hero-spec">
          <div className="mhs-k">{hero.k}</div>
          <div className="mhs-v">
            {typeof hero.v === "number" ? <strong>{hero.v}</strong> : <strong>{hero.v}</strong>}
            {hero.u ? <span className="mhs-u">{hero.u}</span> : null}
          </div>
        </div>
      </div>

      <div className="model-body">
        <div className="model-head">
          <div className="model-head-left">
            <h4 className="model-name">{model.name}</h4>
            <div className="model-fit">{family.taglineKa} · {family.heightKa}</div>
          </div>
          <div className="model-level">{family.levelKa}</div>
        </div>

        <div className="model-specs">
          <div className="spec">
            <div className="spec-k">RANGE</div>
            <div className="spec-v">
              {model.range != null ? <><strong>{model.range}</strong><span className="spec-u"> კმ</span></> : <em>—</em>}
            </div>
          </div>
          <div className="spec">
            <div className="spec-k">PEAK POWER</div>
            <div className="spec-v">
              {model.power ? <strong>{model.power}</strong> : <em>—</em>}
            </div>
          </div>
          <div className="spec">
            <div className="spec-k">TOP SPEED</div>
            <div className="spec-v">
              {model.speed != null ? <><strong>{model.speed}</strong><span className="spec-u"> კმ/სთ</span></> : <em>—</em>}
            </div>
          </div>
          <div className="spec">
            <div className="spec-k">SEAT HEIGHT</div>
            <div className="spec-v">
              {model.seat != null ? <><strong>{model.seat}</strong><span className="spec-u"> სმ</span></> : <em>—</em>}
            </div>
          </div>
        </div>

        {model.note ? <div className="model-note">{model.note}</div> : null}

        <a href={model.url || "#contact"} target={model.url ? "_blank" : undefined} rel={model.url ? "noopener" : undefined} className="model-cta">
          <span>ნახე პროდუქტი</span>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7h10m0 0L8 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/>
          </svg>
        </a>
      </div>
    </article>
  );
}

function ProductFamily({ family, index, cardStyle }) {
  return (
    <Reveal as="section" className="family" delay={0}>
      <div className="family-head" id={family.id}>
        <div className="family-meta">
          <div className="family-num">0{index + 1} / 05</div>
          <div className="family-tagline">{family.tagline}</div>
        </div>
        <h3 className="family-name">{family.name}</h3>
        <div className="family-pills">
          <span className="pill">ასაკი — {family.ageKa}</span>
          <span className="pill">სიმაღლე — {family.heightKa}</span>
          <span className="pill pill-accent">{family.levelKa}</span>
        </div>
        <p className="family-desc">{family.desc}</p>
      </div>

      <div className="model-grid" data-count={family.models.length}>
        {family.models.map((m) => (
          <ModelCard key={m.name} model={m} family={family} cardStyle={cardStyle} />
        ))}
      </div>
    </Reveal>
  );
}

window.ProductFamily = ProductFamily;
window.ModelCard = ModelCard;