// Hero, Catálogo, En venta, Nosotros, Contacto, Footer
const Hero = ({ variant, t }) => (
  <section className="hero" data-variant={variant} id="hero">
    <div className="container hero-inner">
      <div className="hero-grid">
        <div className="hero-copy">
          <span className="eyebrow fade-up"><span className="dot"></span>{t.hero.eyebrow}</span>
          <h1 className="h-display fade-up delay-1" dangerouslySetInnerHTML={{ __html: t.hero.title }}></h1>
          <p className="hero-sub fade-up delay-2">{t.hero.sub}</p>
          <div className="hero-ctas fade-up delay-3">
            <a href="#catalogo" className="btn btn-black btn-lg">
              {t.hero.cta1} <IconArrow size={16} />
            </a>
            <WAButton size="btn-lg">{t.hero.cta2}</WAButton>
          </div>
        </div>
        <div className="hero-photo fade-up delay-2">
          <PhotoPH tone="dark" label="Hero · Vehicle hero shot" tag="HERO 4×5" />
        </div>
      </div>
      <div className="hero-ticker">
        <span className="ticker-item"><span className="star">✦</span> {t.hero.diff1}</span>
        <span className="ticker-item"><span className="star">✦</span> {t.hero.diff2}</span>
        <span className="ticker-item"><span className="star">✦</span> {t.hero.diff3}</span>
        <span className="ticker-item"><span className="star">✦</span> {t.hero.diff4}</span>
      </div>
    </div>
  </section>
);

// ─── Mock calendar data ────────────────────────────────────────────────────────
// SWAP for Supabase: replace getBlockedDays(vehicleId) with a fetch to your reservations table
const getBlockedDays = (vehicleId) => {
  // Deterministic pseudo-random blocked days per vehicle
  const seed = vehicleId * 7;
  const today = new Date(); today.setHours(0,0,0,0);
  const blocked = new Set();
  // Block ~30% of days in the next 60 days
  for (let i = 0; i < 60; i++) {
    const d = new Date(today); d.setDate(d.getDate() + i);
    if ((seed + i * 13) % 10 < 3) blocked.add(d.toISOString().slice(0,10));
  }
  // Always block a solid chunk so it's visually obvious
  for (let i = 4; i <= 7; i++) {
    const d = new Date(today); d.setDate(d.getDate() + i);
    blocked.add(d.toISOString().slice(0,10));
  }
  for (let i = 18; i <= 23; i++) {
    const d = new Date(today); d.setDate(d.getDate() + i);
    blocked.add(d.toISOString().slice(0,10));
  }
  return blocked;
};

// ─── Availability Calendar ─────────────────────────────────────────────────────
const AvailCalendar = ({ vehicle, onClose, t }) => {
  const today = React.useMemo(() => { const d = new Date(); d.setHours(0,0,0,0); return d; }, []);
  const [year, setYear] = React.useState(today.getFullYear());
  const [month, setMonth] = React.useState(today.getMonth());
  const [rangeStart, setRangeStart] = React.useState(null);
  const [rangeEnd, setRangeEnd] = React.useState(null);
  const [hovered, setHovered] = React.useState(null);

  const blocked = React.useMemo(() => getBlockedDays(vehicle.id), [vehicle.id]);

  // Scroll lock — no scrollTo, modal is fixed so viewport stays put
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  const prevMonth = () => { if (month === 0) { setMonth(11); setYear(y => y-1); } else setMonth(m => m-1); };
  const nextMonth = () => { if (month === 11) { setMonth(0); setYear(y => y+1); } else setMonth(m => m+1); };

  // Build grid: days of current month + padding
  const firstDay = new Date(year, month, 1).getDay(); // 0=Sun
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const toISO = (d) => `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
  const isBlocked = (d) => blocked.has(toISO(d));
  const isPast = (d) => new Date(year, month, d) < today;

  const isInRange = (d) => {
    if (!rangeStart) return false;
    const end = rangeEnd || hovered;
    if (!end) return false;
    const iso = toISO(d);
    const [lo, hi] = rangeStart < end ? [rangeStart, end] : [end, rangeStart];
    return iso > lo && iso < hi;
  };
  const isStart = (d) => rangeStart === toISO(d);
  const isEnd = (d) => rangeEnd === toISO(d);

  const handleDay = (d) => {
    if (isBlocked(d) || isPast(d)) return;
    const iso = toISO(d);
    if (!rangeStart || rangeEnd) {
      setRangeStart(iso); setRangeEnd(null); setHovered(null);
    } else {
      if (iso < rangeStart) { setRangeStart(iso); return; }
      // Check no blocked days in between
      const [lo, hi] = [rangeStart, iso];
      let hasBlock = false;
      for (let dd = new Date(lo); dd <= new Date(hi); dd.setDate(dd.getDate()+1)) {
        if (blocked.has(dd.toISOString().slice(0,10))) { hasBlock = true; break; }
      }
      if (hasBlock) { setRangeStart(iso); setRangeEnd(null); }
      else { setRangeEnd(iso); }
    }
  };

  const MONTH_NAMES_ES = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
  const MONTH_NAMES_EN = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  const monthName = (t.cat.calendarTitle === "Availability" ? MONTH_NAMES_EN : MONTH_NAMES_ES)[month];
  const DOW_ES = ["D","L","M","M","J","V","S"];
  const DOW_EN = ["S","M","T","W","T","F","S"];
  const dow = t.cat.calendarTitle === "Availability" ? DOW_EN : DOW_ES;

  const waMsg = rangeStart && rangeEnd
    ? `${WA_LINK}?text=${encodeURIComponent(`Hola! Me interesa rentar el ${vehicle.name} '${String(vehicle.year).slice(2)} del ${rangeStart} al ${rangeEnd}.`)}`
    : WA_LINK;

  return (
    <div className="cal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="cal-modal">
        <div className="cal-header">
          <div className="cal-vehicle-name">
            <span>{vehicle.name}</span>
            <span className="cal-year">'{String(vehicle.year).slice(2)}</span>
          </div>
          <button className="cal-close" onClick={onClose} aria-label="Cerrar">
            <IconX size={18} />
          </button>
        </div>

        <div className="cal-nav">
          <button className="cal-nav-btn" onClick={prevMonth}><IconChevL size={16}/></button>
          <span className="cal-month-label">{monthName} {year}</span>
          <button className="cal-nav-btn" onClick={nextMonth}><IconChevR size={16}/></button>
        </div>

        <div className="cal-grid">
          {dow.map((d, i) => <div key={i} className="cal-dow">{d}</div>)}
          {cells.map((d, i) => {
            if (!d) return <div key={`e${i}`} className="cal-cell empty"></div>;
            const blk = isBlocked(d), past = isPast(d);
            const start = isStart(d), end = isEnd(d);
            const inRange = isInRange(d);
            const cls = [
              "cal-cell",
              blk ? "blocked" : past ? "past" : "open",
              start ? "sel-start" : "",
              end ? "sel-end" : "",
              inRange ? "in-range" : "",
            ].filter(Boolean).join(" ");
            return (
              <div
                key={d}
                className={cls}
                onClick={() => handleDay(d)}
                onMouseEnter={() => rangeStart && !rangeEnd && setHovered(toISO(d))}
                onMouseLeave={() => setHovered(null)}
              >
                {d}
              </div>
            );
          })}
        </div>

        <div className="cal-legend">
          <span className="leg-item"><span className="leg-dot open"></span>{t.cat.available}</span>
          <span className="leg-item"><span className="leg-dot blocked"></span>{t.cat.blocked}</span>
          <span className="leg-item"><span className="leg-dot selected"></span>{t.cat.selected}</span>
        </div>

        {rangeStart ? (
          <div className="cal-range-display">
            <span className="cal-range-dates">
              {rangeStart}{rangeEnd ? ` → ${rangeEnd}` : ` → ?`}
            </span>
            <a href={waMsg} target="_blank" rel="noopener" className="btn btn-red btn-sm cal-confirm">
              <IconWA size={14} /> {t.cat.confirmWA}
            </a>
          </div>
        ) : (
          <div className="cal-hint">{t.cat.selectRange}</div>
        )}
      </div>
    </div>
  );
};

const IconX = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true">
    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
  </svg>
);

// ─── Shared mini-calendar used inside popover ──────────────────────────────────
const MiniCalendar = ({ year, month, rangeStart, rangeEnd, hovered, onDay, onHover, onPrev, onNext, isES }) => {
  const today = React.useMemo(() => { const d = new Date(); d.setHours(0,0,0,0); return d; }, []);
  const MONTHS_ES = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
  const MONTHS_EN = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  const MONTHS = isES ? MONTHS_ES : MONTHS_EN;
  const DOW = isES ? ["D","L","M","M","J","V","S"] : ["S","M","T","W","T","F","S"];
  const toISO = (d) => `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
  const isPast = (d) => new Date(year, month, d) < today;

  const isInRange = (iso) => {
    if (!rangeStart) return false;
    const end = rangeEnd || hovered;
    if (!end) return false;
    const [lo, hi] = rangeStart <= end ? [rangeStart, end] : [end, rangeStart];
    return iso > lo && iso < hi;
  };

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  return (
    <div className="drp-month">
      <div className="drp-nav">
        <button className="drp-nav-btn" onClick={onPrev}><IconChevL size={13}/></button>
        <span className="drp-month-label">{MONTHS[month]} {year}</span>
        <button className="drp-nav-btn" onClick={onNext}><IconChevR size={13}/></button>
      </div>
      <div className="drp-grid">
        {DOW.map((d, i) => <div key={i} className="drp-dow">{d}</div>)}
        {cells.map((d, i) => {
          if (!d) return <div key={`e${i}`} className="drp-cell empty"></div>;
          const iso = toISO(d);
          const past = isPast(d);
          const cls = [
            "drp-cell",
            past ? "past" : "open",
            rangeStart === iso ? "sel-start" : "",
            rangeEnd   === iso ? "sel-end"   : "",
            isInRange(iso)     ? "in-range"  : "",
          ].filter(Boolean).join(" ");
          return (
            <div key={d} className={cls}
              onClick={() => !past && onDay(iso)}
              onMouseEnter={() => onHover && onHover(iso)}
              onMouseLeave={() => onHover && onHover(null)}
            >{d}</div>
          );
        })}
      </div>
    </div>
  );
};

// ─── Compact filter bar + popover calendar ─────────────────────────────────────
const DateRangePicker = ({ activeCat, setActiveCat, t }) => {
  const today = React.useMemo(() => { const d = new Date(); d.setHours(0,0,0,0); return d; }, []);
  const [year,  setYear]  = React.useState(today.getFullYear());
  const [month, setMonth] = React.useState(today.getMonth());
  const [rangeStart, setRangeStart] = React.useState(null);
  const [rangeEnd,   setRangeEnd]   = React.useState(null);
  const [hovered,    setHovered]    = React.useState(null);
  const [open, setOpen] = React.useState(false); // 'from' | 'to' | false

  const prevMonth = () => { if (month === 0) { setMonth(11); setYear(y => y-1); } else setMonth(m => m-1); };
  const nextMonth = () => { if (month === 11) { setMonth(0); setYear(y => y+1); } else setMonth(m => m+1); };

  const handleDay = (iso) => {
    if (open === "from") {
      setRangeStart(iso); setRangeEnd(null);
      setOpen("to");
    } else {
      if (iso < rangeStart) { setRangeStart(iso); setRangeEnd(null); setOpen("to"); }
      else { setRangeEnd(iso); setOpen(false); }
    }
  };

  const isES = t.cat.calendarTitle !== "Availability";
  const fmt = (iso) => { if (!iso) return ""; const [y, m, d] = iso.split("-"); return `${d}/${m}/${y}`; };

  // Scroll lock — no scrollTo, fixed overlay stays in current viewport
  React.useEffect(() => {
    if (!open) return;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const closeModal = () => setOpen(false);

  return (
    <div className="drp-bar-wrap">
      {/* Compact filter bar — always visible */}
      <div className="filter-bar by-date">
        <div
          className={`filter-field drp-trigger ${open === "from" ? "drp-active" : ""}`}
          onClick={() => setOpen(open === "from" ? false : "from")}
          style={{ cursor: "pointer" }}
        >
          <label style={{ pointerEvents: "none" }}>{t.filter.from}</label>
          <span className="drp-value">{rangeStart ? fmt(rangeStart) : <span className="drp-ph">dd/mm/aaaa</span>}</span>
        </div>
        <div
          className={`filter-field drp-trigger ${open === "to" ? "drp-active" : ""}`}
          onClick={() => setOpen(open === "to" ? false : "to")}
          style={{ cursor: "pointer" }}
        >
          <label style={{ pointerEvents: "none" }}>{t.filter.to}</label>
          <span className="drp-value">{rangeEnd ? fmt(rangeEnd) : <span className="drp-ph">dd/mm/aaaa</span>}</span>
        </div>
        <div className="filter-field cat-field" style={{ gap: 6 }}>
          <label>{t.filter.cat}</label>
          <div className="category-chips">
            {CATEGORIES.map((c) => (
              <button key={c} className={`chip ${activeCat === c ? "active" : ""}`} onClick={() => setActiveCat(c)}>{c}</button>
            ))}
          </div>
        </div>
        <button className="filter-cta">{t.filter.search} <IconArrow size={14} /></button>
      </div>

      {/* Modal overlay — same pattern as AvailCalendar */}
      {open ? (
        <div className="cal-overlay" onClick={(e) => e.target === e.currentTarget && closeModal()}>
          <div className="cal-modal">
            <div className="cal-header">
              <div className="cal-vehicle-name" style={{ fontSize: "clamp(16px,3vw,20px)" }}>
                <span>{open === "from"
                  ? (isES ? "Fecha de inicio" : "Start date")
                  : (isES ? "Fecha de fin" : "End date")}</span>
              </div>
              <button className="cal-close" onClick={closeModal} aria-label="Cerrar">
                <IconX size={18} />
              </button>
            </div>
            <div className="drp-popover-hint" style={{ marginBottom: 0 }}>
              {open === "from"
                ? (isES ? "Selecciona fecha de inicio" : "Select start date")
                : (isES ? "Selecciona fecha de fin" : "Select end date")}
            </div>
            <MiniCalendar
              year={year} month={month}
              rangeStart={rangeStart} rangeEnd={rangeEnd} hovered={hovered}
              onDay={handleDay}
              onHover={setHovered}
              onPrev={prevMonth} onNext={nextMonth}
              isES={isES}
            />
            {rangeStart && rangeEnd && (
              <div className="cal-range-display">
                <span className="cal-range-dates">{fmt(rangeStart)} → {fmt(rangeEnd)}</span>
                <button className="btn btn-red btn-sm" onClick={closeModal}>
                  {isES ? "Confirmar" : "Confirm"}
                </button>
              </div>
            )}
          </div>
        </div>
      ) : null}
    </div>
  );
};

// ─── Filter bar — vehicle mode ─────────────────────────────────────────────────
const FilterByVehicle = ({ activeBrand, setActiveBrand, activeCat, setActiveCat, t }) => {
  // Derive categories actually present in the fleet (no hardcode)
  const fleetCats = React.useMemo(
    () => ["Todas", ...Array.from(new Set(VEHICLES.flatMap(v => v.cats))).sort()],
    []
  );
  return (
    <div className="vfilter-wrap">
      <div className="vfilter-row">
        <span className="vfilter-label">{t.cat.filterMarca}</span>
        <div className="category-chips">
          {BRANDS.map((b) => (
            <button key={b} className={`chip ${activeBrand === b ? "active" : ""}`} onClick={() => setActiveBrand(b)}>
              {b}
            </button>
          ))}
        </div>
      </div>
      <div className="vfilter-row">
        <span className="vfilter-label">{t.cat.filterCat}</span>
        <div className="category-chips">
          {fleetCats.map((c) => (
            <button key={c} className={`chip ${activeCat === c ? "active" : ""}`} onClick={() => setActiveCat(c)}>
              {c}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── Search mode toggle ────────────────────────────────────────────────────────
const SearchModeToggle = ({ mode, setMode, t }) => (
  <div className="search-mode" role="tablist">
    <button role="tab" className={mode === "date" ? "active" : ""} onClick={() => setMode("date")}>
      {t.cat.modeDate}
    </button>
    <button role="tab" className={mode === "vehicle" ? "active" : ""} onClick={() => setMode("vehicle")}>
      {t.cat.modeVehicle}
    </button>
  </div>
);

// Slideshow-aware photo area for vehicle cards
const VCardPhotos = ({ photos = [], tag, withPrice, t }) => {
  const [idx, setIdx] = React.useState(0);
  const total = photos.length || 1;
  const safeIdx = Math.min(idx, total - 1);
  const go = (delta) => (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIdx((i) => (i + delta + total) % total);
  };
  return (
    <div className="vcard-photo">
      <div className="vcard-slides" style={{ transform: `translateX(-${safeIdx * 100}%)` }}>
        {(photos.length ? photos : [{ tone: "cream", label: "photo" }]).map((p, i) => (
          <div className="vcard-slide" key={i}>
            <PhotoPH tone={p.tone} label={p.label} />
          </div>
        ))}
      </div>
      {tag && !withPrice ? <span className="vcard-tag red">{tag}</span> : null}
      {withPrice ? <span className="vcard-tag">{t.card.saleTag}</span> : null}
      {total > 1 ? (
        <React.Fragment>
          <button className="vcard-arrow left" aria-label="Anterior" onClick={go(-1)}>
            <IconChevL size={16} />
          </button>
          <button className="vcard-arrow right" aria-label="Siguiente" onClick={go(1)}>
            <IconChevR size={16} />
          </button>
          <div className="vcard-dots" aria-hidden="true">
            {photos.map((_, i) => (
              <span key={i} className={i === safeIdx ? "active" : ""}></span>
            ))}
          </div>
        </React.Fragment>
      ) : null}
    </div>
  );
};

const VehicleCard = ({ v, withPrice, onCalendar, t }) => (
  <article className="vcard">
    <VCardPhotos photos={v.photos} tag={v.tag} withPrice={withPrice} t={t} />
    <div className="vcard-body">
      <div className="vcard-head">
        <h3 className="vcard-name">{v.name}</h3>
        <span className="vcard-year">'{String(v.year).slice(2)}</span>
      </div>
      <div className="vcard-cats">
        {v.cats.map((c) => <span key={c}>{c}</span>)}
      </div>
      <div className="vcard-specs">
        {v.passengers ? <span><IconUsers /> {v.passengers} {t.card.pax}</span> : null}
        {v.transmission ? <span><IconCog /> {v.transmission}</span> : null}
        {v.km ? <span><IconClock /> {v.km}</span> : null}
      </div>
      {withPrice ? (
        <div className="vcard-price">{v.price}<small>{t.card.priceNote}</small></div>
      ) : null}
      {onCalendar ? (
        <button
          className="vcard-cta"
          onClick={() => onCalendar(v)}
        >
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <IconCalendar size={14} /> {t.cat.seeAvailability}
          </span>
          <IconArrow size={14} />
        </button>
      ) : (
        <a
          href={WA_LINK}
          target="_blank"
          rel="noopener"
          className={`vcard-cta ${withPrice ? "red" : ""}`}
        >
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <IconWA size={14} /> {withPrice ? t.card.ctaSale : t.card.cta}
          </span>
          <IconArrow size={14} />
        </a>
      )}
    </div>
  </article>
);

const Catalogo = ({ t }) => {
  const isDesktop = () => typeof window !== "undefined" && window.innerWidth >= 880;
  const rentPageSize = () => isDesktop() ? 6 : 4;

  const [activeCat, setActiveCat] = React.useState("Todos");
  const [visible, setVisible] = React.useState(rentPageSize);
  const [mode, setMode] = React.useState("date"); // 'date' | 'vehicle'
  // vehicle-mode filters
  const [vBrand, setVBrand] = React.useState("Todas");
  const [vCat, setVCat] = React.useState("Todas");
  // calendar
  const [calVehicle, setCalVehicle] = React.useState(null);

  React.useEffect(() => {
    const onResize = () => {
      const ps = rentPageSize();
      setVisible(v => v < ps ? ps : v);
    };
    window.addEventListener("resize", onResize, { passive: true });
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // date-mode filtered list
  const dateFiltered = activeCat === "Todos"
    ? VEHICLES
    : VEHICLES.filter((v) => v.cats.includes(activeCat));

  // vehicle-mode filtered list
  const vehicleFiltered = VEHICLES.filter((v) => {
    const brandOk = vBrand === "Todas" || v.brand === vBrand;
    const catOk   = vCat === "Todas"   || v.cats.includes(vCat);
    return brandOk && catOk;
  });

  React.useEffect(() => { setVisible(rentPageSize()); }, [activeCat]);
  React.useEffect(() => { setVisible(rentPageSize()); }, [vBrand, vCat]);

  const shown = (mode === "date" ? dateFiltered : vehicleFiltered).slice(0, visible);
  const total = mode === "date" ? dateFiltered.length : vehicleFiltered.length;
  const hasMore = visible < total;

  // Scroll lock when calendar is open
  React.useEffect(() => {
    document.body.style.overflow = calVehicle ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [calVehicle]);

  return (
    <React.Fragment>
      <section id="catalogo">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><span className="dot"></span>{t.cat.eyebrow}</span>
            <div className="row">
              <h2 className="h-section" dangerouslySetInnerHTML={{ __html: t.cat.title }}></h2>
              <p>{t.cat.sub}</p>
            </div>
          </div>
          <SearchModeToggle mode={mode} setMode={setMode} t={t} />
          {mode === "date" ? (
            <DateRangePicker activeCat={activeCat} setActiveCat={setActiveCat} t={t} />
          ) : (
            <FilterByVehicle
              activeBrand={vBrand} setActiveBrand={setVBrand}
              activeCat={vCat}     setActiveCat={setVCat}
              t={t}
            />
          )}
          {shown.length === 0 ? (
            <p style={{ color: "var(--text-soft)", fontFamily: "var(--f-mono)", fontSize: 13, marginBottom: 24 }}>
              {t.cat.noResults}
            </p>
          ) : null}
          <div className="vehicle-grid">
            {shown.map((v) => (
              <VehicleCard
                key={v.id}
                v={v}
                t={t}
                onCalendar={mode === "vehicle" ? setCalVehicle : null}
              />
            ))}
          </div>
          {hasMore ? (
            <div className="load-more-row">
              <button
                className="btn btn-black btn-lg"
                onClick={() => setVisible((n) => n + rentPageSize())}
              >
                {t.cat.more} <IconArrow size={16} />
              </button>
            </div>
          ) : null}
        </div>
      </section>
      {calVehicle ? (
        <AvailCalendar vehicle={calVehicle} onClose={() => setCalVehicle(null)} t={t} />
      ) : null}
    </React.Fragment>
  );
};

const Venta = ({ t }) => {
  // Show 2 on mobile (< 880px), 3 on desktop
  const isDesktop = () => typeof window !== "undefined" && window.innerWidth >= 880;
  const initSize = () => isDesktop() ? 3 : 2;
  const [visible, setVisible] = React.useState(initSize);
  React.useEffect(() => {
    const onResize = () => {
      const pageSize = isDesktop() ? 3 : 2;
      setVisible(v => v < pageSize ? pageSize : v);
    };
    window.addEventListener("resize", onResize, { passive: true });
    return () => window.removeEventListener("resize", onResize);
  }, []);
  const pageSize = isDesktop() ? 3 : 2;
  const shown = SALE_VEHICLES.slice(0, visible);
  const hasMore = visible < SALE_VEHICLES.length;
  return (
    <section id="venta" className="sale-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>{t.sale.eyebrow}</span>
          <div className="row">
            <h2 className="h-section" dangerouslySetInnerHTML={{ __html: t.sale.title }}></h2>
          </div>
        </div>
        <div className="vehicle-grid">
          {shown.map((v) => <VehicleCard key={v.id} v={v} withPrice t={t} />)}
        </div>
        {hasMore ? (
          <div className="load-more-row">
            <button
              className="btn btn-black btn-lg"
              onClick={() => setVisible((v) => v + (isDesktop() ? 3 : 2))}
            >
              {t.sale.more} <IconArrow size={16} />
            </button>
          </div>
        ) : null}
      </div>
    </section>
  );
};

const Nosotros = ({ t }) => (
  <section id="nosotros">
    <div className="container">
      <div className="about-grid">
        <div className="about-photo">
          <PhotoPH tone="warm" label="Nosotros · Team / showroom" tag="ABOUT 4×3" />
        </div>
        <div className="about-copy">
          <span className="eyebrow"><span className="dot"></span>{t.about.eyebrow}</span>
          <h2 className="h-section" dangerouslySetInnerHTML={{ __html: t.about.title }}></h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--text)" }}>
            {t.about.body}
          </p>
          <div className="about-stats">
            <div>
              <div className="stat-num">7<em>.</em></div>
              <div className="stat-label">{t.about.s1}</div>
            </div>
            <div>
              <div className="stat-num">40<em>+</em></div>
              <div className="stat-label">{t.about.s2}</div>
            </div>
            <div>
              <div className="stat-num">24<em>/</em>7</div>
              <div className="stat-label">{t.about.s3}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Contacto = ({ t }) => (
  <section id="contacto" className="contact-section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span>{t.contact.eyebrow}</span>
        <div className="row">
          <h2 className="h-section" dangerouslySetInnerHTML={{ __html: t.contact.title }}></h2>
          <p>{t.contact.sub}</p>
        </div>
      </div>
      <div className="contact-grid">
        <a href={WA_LINK} target="_blank" rel="noopener" className="contact-card">
          <span className="ctype"><IconWA size={14} /> WhatsApp</span>
          <span className="cval">{WA_NUMBER}</span>
          <span className="csub">{t.contact.waSub}</span>
          <span className="arrow"><IconArrowUR size={14} /></span>
        </a>
        <a href={IG_LINK} target="_blank" rel="noopener" className="contact-card">
          <span className="ctype"><IconIG size={14} /> Instagram</span>
          <span className="cval">{IG_HANDLE}</span>
          <span className="csub">{t.contact.igSub}</span>
          <span className="arrow"><IconArrowUR size={14} /></span>
        </a>
        <div className="contact-card">
          <span className="ctype"><IconPin size={14} /> {t.contact.locLabel}</span>
          <span className="cval">{t.contact.locValue}</span>
          <span className="csub">{t.contact.locSub}</span>
          <span className="arrow"><IconArrowUR size={14} /></span>
        </div>
      </div>
    </div>
  </section>
);

const Footer = ({ t }) => (
  <footer className="footer">
    <div className="container">
      <Logo className="footer-logo-wrap" />
      <div className="footer-links">
        <a href="#catalogo">{t.nav.catalog}</a>
        <a href="#venta">{t.nav.sale}</a>
        <a href="#nosotros">{t.nav.about}</a>
        <a href="#contacto">{t.nav.contact}</a>
      </div>
      <div>© 2026 · MCHECO RENT CAR · RD</div>
    </div>
  </footer>
);

Object.assign(window, { Hero, Catalogo, Venta, Nosotros, Contacto, Footer });