// =============================================
// Flacenter v3 — Sections (inventory, why, finance, testimonials, lead form, visit)
// =============================================

const { useState: useStateS, useMemo: useMemoS, useEffect: useEffectS, useRef: useRefS } = React;

// Real-time open/closed badge based on hours table (Mon..Sun, 09-18, Sat 09-16, Sun closed)
function HoursStatusBadge({ t }) {
  const [now, setNow] = useStateS(new Date());
  useEffectS(() => {
    const id = setInterval(() => setNow(new Date()), 60000);
    return () => clearInterval(id);
  }, []);
  const day = now.getDay(); // 0=Sun..6=Sat
  const hour = now.getHours() + now.getMinutes() / 60;
  let open = false;
  let nextOpen = '';
  if (day === 0) {
    // Sunday closed
    open = false;
    nextOpen = (t.visit.opensMon || 'Opens Mon 9:00 AM');
  } else if (day === 6) {
    // Saturday 9-16
    open = hour >= 9 && hour < 16;
    nextOpen = hour < 9 ? (t.visit.opensToday || 'Opens today 9:00 AM') : (t.visit.opensMon || 'Opens Mon 9:00 AM');
  } else {
    // Mon-Fri 9-18
    open = hour >= 9 && hour < 18;
    nextOpen = hour < 9 ? (t.visit.opensToday || 'Opens today 9:00 AM') : (t.visit.opensTomorrow || 'Opens tomorrow 9:00 AM');
  }
  return (
    <div className={'status-pill ' + (open ? 'open' : 'closed')}>
      <span className="dot"></span>
      <span className="lbl">{open ? (t.visit.openNow || 'Open now') : (t.visit.closedNow || 'Closed')}</span>
      {!open && <span className="next">· {nextOpen}</span>}
    </div>
  );
}

// ---------- Inventory ----------
function InventorySection({ t, lang, inventory, filter, setFilter, compared, toggleCompare, openCar, openApplyForCar, scrollRef, inventoryState, isDedicated = false }) {
  const bodies = ['', 'sedan', 'suv', 'truck', 'coupe', 'van'];
  const pageSize = 16;
  const [page, setPage] = useStateS(1);

  // Dynamically extract makes from inventory, sorted
  const availableMakes = useMemoS(() => {
    return [...new Set(inventory.map(c => c.make))].sort();
  }, [inventory]);

  const filtered = useMemoS(() => {
    let result = inventory.filter(c => {
      if (filter.body && c.body !== filter.body) return false;
      if (filter.make && c.make !== filter.make) return false;
      if (filter.maxPrice && c.price > filter.maxPrice) return false;
      return true;
    });
    // Sort
    const sort = filter.sort || 'featured';
    if (sort === 'priceAsc') result.sort((a, b) => a.price - b.price);
    else if (sort === 'priceDesc') result.sort((a, b) => b.price - a.price);
    else if (sort === 'yearDesc') result.sort((a, b) => b.year - a.year);
    else if (sort === 'yearAsc') result.sort((a, b) => a.year - b.year);
    else if (sort === 'milesAsc') result.sort((a, b) => a.miles - b.miles);
    else if (sort === 'milesDesc') result.sort((a, b) => b.miles - a.miles);
    else result.sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
    return result;
  }, [inventory, filter]);

  const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));

  useEffectS(() => {
    setPage(1);
  }, [filter.body, filter.make, filter.maxPrice, filter.sort, inventory.length]);

  useEffectS(() => {
    setPage(current => Math.min(current, pageCount));
  }, [pageCount]);

  const activePage = Math.min(page, pageCount);

  const pagedVehicles = useMemoS(() => {
    const start = (activePage - 1) * pageSize;
    return filtered.slice(start, start + pageSize);
  }, [filtered, activePage]);

  const pageNumbers = useMemoS(() => {
    const maxVisible = 5;
    const start = Math.max(1, Math.min(activePage - 2, pageCount - maxVisible + 1));
    const end = Math.min(pageCount, start + maxVisible - 1);
    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
  }, [activePage, pageCount]);

  const goToPage = (nextPage) => {
    const clamped = Math.max(1, Math.min(pageCount, nextPage));
    setPage(clamped);
    requestAnimationFrame(() => {
      scrollRef?.current?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
    });
  };

  const pageStart = filtered.length === 0 ? 0 : ((activePage - 1) * pageSize) + 1;
  const pageEnd = Math.min(activePage * pageSize, filtered.length);
  const lbl = (b) => b === '' ? t.inv.all : t.inv[b];

  return (
    <section className={('section inventory-section' + (isDedicated ? ' inventory-page-section' : ''))} id="inventory" data-inventory-source={inventoryState?.source || 'mock'} ref={scrollRef}>
      <div className="wrap">
        <div className="section-head">
          <span className="tag">{t.inv.eyebrow}</span>
          <h2>{t.inv.title1} <span style={{color:'var(--blue)'}}>{t.inv.title2}</span></h2>
          <p>{t.inv.sub}</p>
        </div>
        <div className="inv-filter">
          {bodies.map(b => (
            <button
              key={b || 'all'}
              className={'chip' + (filter.body === b ? ' active' : '')}
              onClick={() => setFilter(f => ({ ...f, body: b }))}
            >
              {lbl(b)}
            </button>
          ))}
        </div>
        <div className="inv-controls">
          <div className="inv-control">
            <label className="lbl">{t.inv.filterByMake}</label>
            <select className="select" value={filter.make || ''} onChange={e => setFilter(f => ({ ...f, make: e.target.value }))}>
              <option value="">{t.inv.makeAll}</option>
              {availableMakes.map(m => <option key={m} value={m}>{m}</option>)}
            </select>
          </div>
          <div className="inv-control inv-control-price">
            <label className="lbl">{t.inv.maxPrice} <span className="v-inline">${fmt(filter.maxPrice || 30000)}</span></label>
            <input type="range" min="5000" max="50000" step="1000"
              value={filter.maxPrice || 30000}
              onChange={e => setFilter(f => ({ ...f, maxPrice: Number(e.target.value) }))} />
          </div>
          <div className="inv-control">
            <label className="lbl">{t.inv.sortBy}</label>
            <select className="select" value={filter.sort || 'featured'} onChange={e => setFilter(f => ({ ...f, sort: e.target.value }))}>
              <option value="featured">{t.inv.sortFeatured}</option>
              <option value="priceAsc">{t.inv.sortPriceAsc}</option>
              <option value="priceDesc">{t.inv.sortPriceDesc}</option>
              <option value="yearDesc">{t.inv.sortYearDesc}</option>
              <option value="yearAsc">{t.inv.sortYearAsc}</option>
              <option value="milesAsc">{t.inv.sortMilesAsc}</option>
              <option value="milesDesc">{t.inv.sortMilesDesc}</option>
            </select>
          </div>
        </div>
        <div className="inv-count">
          {filtered.length} {filtered.length === 1 ? 'vehicle' : 'vehicles'}
        </div>
        <div className="inv-grid">
          {filtered.length === 0
            ? <div className="empty">{t.inv.empty}</div>
            : pagedVehicles.map(car => (
                <CarCard
                  key={car.id}
                  car={car}
                  t={t}
                  onOpen={openCar}
                  onCompare={toggleCompare}
                  isCompared={compared.some(c => c.id === car.id)}
                  openApply={openApplyForCar}
                />
              ))
          }
        </div>
        {filtered.length > pageSize && (
          <div className="inv-pagination" aria-label={t.inv.paginationLabel || 'Inventory pagination'}>
            <div className="inv-page-summary">
              {t.inv.showing || 'Showing'} {pageStart}-{pageEnd} {t.inv.of || 'of'} {filtered.length}
            </div>
            <div className="inv-page-controls">
              <button className="inv-page-btn" type="button" disabled={activePage === 1} onClick={() => goToPage(activePage - 1)}>
                {t.inv.previous || 'Previous'}
              </button>
              {pageNumbers.map(n => (
                <button
                  key={n}
                  className={'inv-page-btn inv-page-number' + (n === activePage ? ' active' : '')}
                  type="button"
                  aria-current={n === activePage ? 'page' : undefined}
                  onClick={() => goToPage(n)}
                >
                  {n}
                </button>
              ))}
              <button className="inv-page-btn" type="button" disabled={activePage === pageCount} onClick={() => goToPage(activePage + 1)}>
                {t.inv.next || 'Next'}
              </button>
            </div>
          </div>
        )}
        {!isDedicated && (
          <div className="inv-foot">
            <a href="/inventory/" className="btn btn-ghost btn-lg">{t.inv.viewAll} <Icon.Arrow /></a>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- Why ----------
function WhySection({ t }) {
  const icons = [Icon.Shield, Icon.Heart, Icon.Globe];
  return (
    <section className="section alt" id="why">
      <div className="wrap">
        <div className="section-head">
          <span className="tag">{t.why.eyebrow}</span>
          <h2>{t.why.title1} <span style={{color:'var(--blue)'}}>{t.why.title2}</span></h2>
          <p>{t.why.sub}</p>
        </div>
        <div className="why-grid">
          {t.why.items.map((it, i) => {
            const IconC = icons[i] || Icon.Shield;
            return (
              <div className="why-card" key={i}>
                <div className="why-icon"><IconC /></div>
                <h3>{it.t}</h3>
                <p>{it.d}</p>
                <div className="accent-check"><Icon.Check /> {t.why.guarantees ? t.why.guarantees[i] : 'Guaranteed'}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- Finance ----------
function FinanceSection({ t, lang, openApply }) {
  const [price, setPrice] = useStateS(18000);
  const [down, setDown] = useStateS(2500);
  const [apr, setApr] = useStateS(8.9);
  const [term, setTerm] = useStateS(60);

  const monthly = useMemoS(() => {
    const p = Math.max(0, price - down);
    const r = apr / 100 / 12;
    const n = term;
    if (r === 0) return p / n;
    return (p * r * Math.pow(1+r, n)) / (Math.pow(1+r, n) - 1);
  }, [price, down, apr, term]);

  return (
    <section className="section" id="financing">
      <div className="wrap">
        <div className="finance-grid">
          <div className="finance-copy">
            <span className="tag">{t.finance.eyebrow}</span>
            <h2 style={{marginTop:14}}>{t.finance.title1} <span className="accent">{t.finance.title2}</span></h2>
            <p>{t.finance.sub}</p>
            <div className="finance-bullets">
              {t.finance.bullets.map((b, i) => (
                <div className="b" key={i}>
                  <div className="check"><Icon.Check /></div>
                  <div>
                    <strong>{b.t}</strong>
                    <span>{b.d}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="calc">
            <h3>{t.finance.eyebrow}</h3>
            <div className="calc-row">
              <div className="row">
                <span className="lbl">{t.finance.price}</span>
                <span className="v">${fmt(price)}</span>
              </div>
              <input type="range" min="5000" max="50000" step="500" value={price} onChange={e=>setPrice(+e.target.value)} />
            </div>
            <div className="calc-row">
              <div className="row">
                <span className="lbl">{t.finance.down}</span>
                <span className="v">${fmt(down)}</span>
              </div>
              <input type="range" min="0" max={Math.min(price, 20000)} step="250" value={down} onChange={e=>setDown(+e.target.value)} />
            </div>
            <div className="calc-row">
              <div className="row">
                <span className="lbl">{t.finance.apr}</span>
                <span className="v">{apr.toFixed(1)}%</span>
              </div>
              <input type="range" min="3.9" max="19.9" step="0.1" value={apr} onChange={e=>setApr(+e.target.value)} />
            </div>
            <div className="calc-row">
              <div className="row">
                <span className="lbl">{t.finance.term}</span>
                <span className="v">{term} {t.finance.months}</span>
              </div>
              <input type="range" min="24" max="84" step="12" value={term} onChange={e=>setTerm(+e.target.value)} />
            </div>
            <div className="calc-result">
              <div className="lbl">{t.finance.monthly}</div>
              <div className="amount">${Math.round(monthly).toLocaleString('en-US')}<small>/{t.finance.months}</small></div>
            </div>
            <p className="calc-disclaimer">{t.finance.disclaimer}</p>
            <div className="cta">
              <button className="btn btn-green btn-lg btn-block" onClick={openApply}>
                {t.finance.cta} <Icon.Arrow />
              </button>
              <div className="finance-contact-actions">
                <a className="btn btn-sms btn-lg" href={smsHref('Hi Florida Auto Center, I would like to start my pre approval.')}>
                  <Icon.Message /> {t.leadBanner?.sms || 'Text us'}
                </a>
                <a className="btn btn-green btn-lg" href="https://w.app/flawebsite" target="_blank" rel="noopener noreferrer">
                  <Icon.Wa /> {t.wa || 'WhatsApp'}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Testimonials ----------
function TestimonialsSection({ t }) {
  return (
    <section className="section alt" id="testimonials">
      <div className="wrap">
        <div className="section-head">
          <span className="tag">{t.testi.eyebrow}</span>
          <h2>{t.testi.title1} <span style={{color:'var(--blue)'}}>{t.testi.title2}</span></h2>
        </div>
        <div className="google-block">
          <div className="g-logo">
            <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
          </div>
          <span className="rating">4.8 / 5</span>
          <span className="stars">
            {[...Array(5)].map((_, i) => <Icon.Star key={i} />)}
          </span>
          <span style={{color:'var(--muted)', fontSize:14}}>· 600+ reviews</span>
        </div>
        <div className="testi-grid">
          {t.testi.items.map((it, i) => (
            <div className="testi" key={i}>
              <div className="stars">
                {[...Array(5)].map((_, j) => <Icon.Star key={j} />)}
              </div>
              <div className="testi-text">"{it.text}"</div>
              <div className="testi-author">
                <div className="testi-avatar">{it.name[0]}</div>
                <div>
                  <div className="testi-name">{it.name}</div>
                  <div className="testi-meta">{it.meta}</div>
                </div>
                <span className="testi-g-tag">via Google</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Inline Lead Form (the conversion) ----------
function LeadSection({ t, leadRef, inventory = [] }) {
  const [sent, setSent] = useStateS(false);
  const [sending, setSending] = useStateS(false);
  const [error, setError] = useStateS('');
  const [data, setData] = useStateS({ name: '', phone: '', email: '', preferred: 'SMS', time: 'Anytime', msg: '' });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const [vehicleMenuOpen, setVehicleMenuOpen] = useStateS(false);
  const inventoryOptions = useMemoS(() => (inventory || [])
    .filter(car => car && (car.fullName || car.name || car.year || car.make || car.model))
    .map(car => {
      const name = car.fullName || [car.year, car.make, car.model, car.trim || car.version].filter(Boolean).join(' ') || car.name;
      const stock = car.stock ? ` · Stock ${car.stock}` : '';
      const price = car.cashPrice || car.price ? ` · $${fmt(car.cashPrice || car.price)}` : '';
      return `${name}${stock}${price}`;
    })
    .filter(Boolean), [inventory]);
  const vehicleMatches = useMemoS(() => {
    const query = (data.msg || '').trim().toLowerCase();
    const matches = query
      ? inventoryOptions.filter(option => option.toLowerCase().includes(query))
      : inventoryOptions;
    return matches.slice(0, 8);
  }, [data.msg, inventoryOptions]);

  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    if (!data.name || (data.preferred === 'Email' ? !data.email : !data.phone)) {
      setError(data.preferred === 'Email'
        ? (t.leadForm.emailRequired || 'Please add your name and email.')
        : (t.leadForm.errorRequired || 'Please add your name and phone.'));
      return;
    }
    setError('');
    setSending(true);

    try {
      if (!window.FlacenterApi?.submitLead) throw new Error('Lead API client unavailable');
      await window.FlacenterApi.submitLead({ ...data, lang: document.documentElement.lang, source: 'website-v3-lead-section', formId: 'lead_section', conversionEvent: 'generate_lead' });
      setSent(true);
    } catch (err) {
      setError(err.message || t.leadForm.error || 'Could not send your request. Please call or WhatsApp us.');
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section lead-section" id="lead" ref={leadRef}>
      <div className="wrap">
        <div className="lead-grid">
          <div className="lead-left">
            <span className="tag" style={{color:'#fdd835'}}>{t.finance.eyebrow}</span>
            <h2 style={{marginTop:14}}>
              {t.leadForm.headline1}<br/>
              <span className="yellow">
                {t.leadForm.headline2}
                {t.leadForm.headlineGlow ? <> <span className="approved-glow">{t.leadForm.headlineGlow}</span></> : null}
              </span>
            </h2>
            <p>{t.leadForm.sub}</p>
            <div className="promises">
              {t.leadForm.promises.map((p, i) => (
                <div className="item" key={i}>
                  <span className="check"><Icon.Check style={{width:14, height:14}} /></span>
                  {p}
                </div>
              ))}
            </div>
            <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
              <a href={smsHref('Hi Florida Auto Center, I would like to start my pre approval.')} className="btn btn-white btn-lg">
                <Icon.Message /> SMS
              </a>
              <a href="tel:4078024670" className="btn btn-white btn-lg">
                <Icon.Phone /> (407) 802 4670
              </a>
              <a href="https://w.app/flawebsite" target="_blank" className="btn btn-green btn-lg">
                <Icon.Wa /> WhatsApp
              </a>
            </div>
          </div>
          <form className="lead-form" onSubmit={submit}>
            {sent ? (
              <div className="lead-form-sent">
                <div className="ok"><Icon.Check style={{width:32, height:32}} /></div>
                <h3 style={{fontSize:22}}>{t.leadForm.sentTitle}</h3>
                <p style={{marginTop:10, color:'var(--ink-soft)'}}>{t.leadForm.sentSub}</p>
                <div style={{display:'flex', gap:10, justifyContent:'center', marginTop:20, flexWrap:'wrap'}}>
                  <a href={smsHref('Hi Florida Auto Center, I just sent my financing request.')} className="btn btn-sms"><Icon.Message /> SMS</a>
                  <a href="tel:4078024670" className="btn btn-primary"><Icon.Phone /> (407) 802 4670</a>
                  <a href="https://w.app/flawebsite" target="_blank" className="btn btn-green"><Icon.Wa /> WhatsApp</a>
                </div>
              </div>
            ) : (
              <>
                <div className="h">
                  <h3>{t.leadForm.title}</h3>
                  <div className="sub">{t.leadForm.subTitle}</div>
                </div>
                <div className="fields">
                  <div>
                    <label className="lbl">{t.apply.fields.fullName} *</label>
                    <input className="input" required value={data.name} onChange={e=>set('name', e.target.value)} placeholder="Emily Johnson" />
                  </div>
                  <div className="row-2">
                    <div>
                      <label className="lbl">{t.apply.fields.phone}{data.preferred === 'Email' ? '' : ' *'}</label>
                      <input className="input" required={data.preferred !== 'Email'} value={data.phone} onChange={e=>set('phone', e.target.value)} placeholder="(407) 555 1234" />
                    </div>
                    <div>
                      <label className="lbl">{t.apply.fields.email}{data.preferred === 'Email' ? ' *' : ''}</label>
                      <input className="input" type="email" required={data.preferred === 'Email'} value={data.email} onChange={e=>set('email', e.target.value)} placeholder="you@email.com" />
                    </div>
                  </div>
                  <div className="row-2">
                    <div>
                      <label className="lbl">{t.leadForm.preferred}</label>
                      <select className="select" value={data.preferred} onChange={e=>set('preferred', e.target.value)}>
                        <option value="SMS">{t.contactOptions?.sms || 'SMS'}</option>
                        <option value="Email">{t.contactOptions?.email || t.apply.fields.email}</option>
                        <option value="WhatsApp">{t.contactOptions?.whatsapp || 'WhatsApp'}</option>
                        <option value="Phone call">{t.contactOptions?.phone || t.apply.fields.phone}</option>
                      </select>
                    </div>
                    <div>
                      <label className="lbl">{t.leadForm.time}</label>
                      <select className="select" value={data.time} onChange={e=>set('time', e.target.value)}>
                        <option>Anytime</option>
                        <option>Morning</option>
                        <option>Afternoon</option>
                        <option>Evening</option>
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="lbl">{t.leadForm.msg}</label>
                    <div className="vehicle-combobox">
                      <input
                        className="input"
                        value={data.msg}
                        onChange={e=>{ set('msg', e.target.value); setVehicleMenuOpen(true); }}
                        onFocus={()=>setVehicleMenuOpen(true)}
                        onBlur={()=>setTimeout(() => setVehicleMenuOpen(false), 120)}
                        onKeyDown={e=>{
                          if (e.key === 'Enter' && vehicleMenuOpen && vehicleMatches[0]) {
                            e.preventDefault();
                            set('msg', vehicleMatches[0]);
                            setVehicleMenuOpen(false);
                          }
                        }}
                        placeholder={t.leadForm.msgPlaceholder || 'Type or choose a vehicle from inventory'}
                        autoComplete="off"
                        role="combobox"
                        aria-expanded={vehicleMenuOpen}
                        aria-autocomplete="list"
                      />
                      {vehicleMenuOpen && vehicleMatches.length > 0 && (
                        <div className="vehicle-combobox-menu" role="listbox">
                          {vehicleMatches.map(option => (
                            <button
                              key={option}
                              type="button"
                              className="vehicle-combobox-option"
                              onMouseDown={e=>e.preventDefault()}
                              onClick={()=>{ set('msg', option); setVehicleMenuOpen(false); }}
                              role="option"
                            >
                              {option}
                            </button>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                {error && <div className="form-error">{error}</div>}
                <div className="submit-row">
                  <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={sending}>
                    {sending ? (t.leadForm.sending || 'Sending...') : t.leadForm.send} {!sending && <Icon.Arrow />}
                  </button>
                  <div className="or-row">{t.leadForm.or}</div>
                  <div className="lead-contact-buttons">
                    <a href={smsHref('Hi Florida Auto Center, I would like to start my pre approval.')} className="btn btn-sms btn-block">
                      <Icon.Message /> {t.leadForm.sms || 'Prefer SMS? Text us'}
                    </a>
                    <a href="https://w.app/flawebsite" target="_blank" className="btn btn-green btn-block">
                      <Icon.Wa /> {t.leadForm.wa}
                    </a>
                  </div>
                </div>
                <div className="privacy">{t.leadForm.privacy}</div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

// ---------- Visit ----------
function VisitSection({ t }) {
  return (
    <section className="section" id="visit">
      <div className="wrap">
        <div className="section-head">
          <span className="tag">{t.visit.eyebrow}</span>
          <h2>{t.visit.title1} <span style={{color:'var(--blue)'}}>{t.visit.title2}</span></h2>
          <p>{t.visit.sub}</p>
        </div>
        <div className="visit-grid">
          <div className="visit-info">
            <h3>Florida Auto Center</h3>
            <div className="item">
              <div className="ico"><Icon.Pin /></div>
              <div>
                <div className="l">Address</div>
                <div className="v">{t.visit.address}</div>
              </div>
            </div>
            <div className="item">
              <div className="ico"><Icon.Phone /></div>
              <div>
                <div className="l">Phone</div>
                <div className="v">(407) 802 4670</div>
              </div>
            </div>
            <div className="item">
              <div className="ico"><Icon.Mail /></div>
              <div>
                <div className="l">Email</div>
                <div className="v">sales@flacenter.com</div>
              </div>
            </div>
            <div className="item" style={{flexDirection:'column', alignItems:'stretch'}}>
              <div style={{display:'flex', gap:12, marginBottom:14, alignItems:'center'}}>
                <div className="ico"><Icon.Clock /></div>
                <div style={{flex:1}}>
                  <div className="l">{t.visit.hours}</div>
                </div>
                <HoursStatusBadge t={t} />
              </div>
              <div className="visit-hours-card">
                {t.visit.days.map((d, i) => {
                  const closed = /clos|fech|cerr/i.test(t.visit.hoursVal[i]);
                  // JS getDay(): 0=Sun, 1=Mon, ..., 6=Sat
                  // Our array is Mon..Sun, so index i corresponds to ((i+1) % 7)
                  const jsDay = (i + 1) % 7;
                  const isToday = new Date().getDay() === jsDay;
                  return (
                    <div key={i} className={'hr-row' + (isToday ? ' today' : '') + (closed ? ' closed' : '')}>
                      <span className="d">{d}{isToday ? <span className="today-mark">{t.visit.todayShort || 'TODAY'}</span> : ''}</span>
                      <span className="h">{t.visit.hoursVal[i]}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="actions">
              <a className="btn btn-primary" href="https://maps.google.com/?q=4509+Old+Winter+Garden+RD+Orlando+FL+32811" target="_blank" rel="noopener noreferrer">
                {t.visit.directions} <Icon.Arrow />
              </a>
              <div className="visit-contact-actions">
                <a className="btn btn-sms" href={smsHref('Hi Florida Auto Center, I would like directions to the showroom.')}>
                  <Icon.Message /> SMS
                </a>
                <a className="btn btn-green" href="https://w.app/flawebsite" target="_blank" rel="noopener noreferrer">
                  <Icon.Wa /> {t.wa || 'WhatsApp'}
                </a>
              </div>
            </div>
          </div>
          <div className="visit-map">
            <iframe
              title="Florida Auto Center location on Google Maps"
              src="https://maps.google.com/maps?q=4509%20Old%20Winter%20Garden%20RD%2C%20Orlando%2C%20FL%2032811&t=&z=15&ie=UTF8&iwloc=B&output=embed"
              loading="lazy"
              allowFullScreen
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t }) {
  const footerLang = document.documentElement.lang || 'en';
  const staticLangQuery = `?lang=${footerLang}`;
  const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html';
  const homeHref = (id) => isHomePage ? `#${id}` : `/#${id}`;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="top">
          <div>
            <div className="brand">
              <img src="https://flacenter.com/wp-content/uploads/2025/09/Logo-Florida-Branco-Transparente-165x26.png" alt="Florida Auto Center" className="brand-logo brand-logo-white" />
            </div>
            <p className="tagline">{t.footer.tagline}</p>
            <div className="socials">
              <a href="https://www.instagram.com/floridautocenter/" target="_blank"><Icon.Ig /></a>
              <a href="https://www.facebook.com/floridaautocenter" target="_blank"><Icon.Fb /></a>
              <a className="wa-social" href="https://w.app/flawebsite" target="_blank"><Icon.Wa /></a>
            </div>
          </div>
          <div>
            <h5>{t.footer.explore}</h5>
            <ul>
              <li><a href="/inventory/">{t.footer.links.inv}</a></li>
              <li><a href={homeHref('financing')}>{t.footer.links.apply}</a></li>
              <li><a href={`/rental/${staticLangQuery}`}>{t.footer.links.rental || t.nav.rental || 'Rental'}</a></li>
              <li><a href={`/consignment/${staticLangQuery}`}>{t.footer.links.consignment || t.nav.consignment || 'Consign'}</a></li>
              <li><a href={`/investors/${staticLangQuery}`}>{t.footer.links.investors || t.nav.investors || 'Investors'}</a></li>
              <li><a href={homeHref('why')}>{t.footer.links.about}</a></li>
              <li><a href={homeHref('testimonials')}>{t.nav.testimonials}</a></li>
              <li><a href={`/${footerLang}/blog`}>{t.footer.links.blog}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footer.shop}</h5>
            <ul>
              <li><a href="/inventory/">{t.inv.sedan}</a></li>
              <li><a href="/inventory/">{t.inv.suv}</a></li>
              <li><a href="/inventory/">{t.inv.truck}</a></li>
              <li><a href="/inventory/">{t.inv.coupe}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footer.contact}</h5>
            <ul>
              <li><a href="tel:4078024670">(407) 802 4670</a></li>
              <li><a href="mailto:sales@flacenter.com">sales@flacenter.com</a></li>
              <li style={{color:'rgba(255,255,255,0.5)', fontSize:13, marginTop:8}}>4509 Old Winter Garden Rd<br/>Orlando, FL 32811</li>
            </ul>
          </div>
        </div>
        <div className="bottom">
          <span>{t.footer.copyright}</span>
          <span><a href="/privacy/">Privacy & Cookies</a></span>
          <span>{t.footer.built}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { InventorySection, WhySection, FinanceSection, TestimonialsSection, LeadSection, VisitSection, Footer });