/* Recare — Stats strip, How it works, Quote, Specialties, Insurance, Footer (bilingual) */

function StatsStrip({ lang = "EN" }) {
  const stats = T(lang).statsStrip;
  return (
    <div className="stats-strip">
      {stats.map((s, i) => (
        <div key={i} className="stat-cell">
          <div className="stat-cell__num">{s.num}<small>{s.suffix}</small></div>
          <div className="stat-cell__lbl">{s.lbl}</div>
        </div>
      ))}
    </div>
  );
}

function Steps({ lang = "EN" }) {
  const steps = T(lang).how.steps;
  return (
    <div className="steps">
      {steps.map((s, i) => (
        <div key={i} className="step">
          <div className="step__num">0{i+1}</div>
          <div className="step__title">{s.title}</div>
          <div className="step__desc">{s.desc}</div>
        </div>
      ))}
    </div>
  );
}

function Quote({ lang = "EN" }) {
  const t = T(lang).quote;
  return (
    <div className="quote">
      <div className="quote__mark">"</div>
      <div className="quote__body">{t.body}</div>
      <div className="quote__cite">
        <div className="quote__cite-avatar">{t.initials}</div>
        <div>
          <div style={{ fontWeight: 700, color: 'var(--fg-strong)' }}>{t.name}</div>
          <div className="rc-caption">{t.role}</div>
        </div>
      </div>
    </div>
  );
}

function SpecialtyRow({ active = 0, onPick = () => {}, lang = "EN" }) {
  const specs = T(lang).doctors.specs;
  return (
    <div className="spec-row">
      {specs.map((s, i) => (
        <button key={i} className={`spec-pill ${i === active ? "is-active" : ""}`} onClick={() => onPick(i)}>
          {s}
        </button>
      ))}
    </div>
  );
}

function InsuranceStrip({ lang = "EN" }) {
  const t = T(lang).insure;
  return (
    <div className="insure">
      <div className="insure__label">{t.label}</div>
      <div className="insure__logos">
        {t.logos.map(i => <div key={i} className="insure__logo">{i}</div>)}
      </div>
    </div>
  );
}

function Footer({ lang = "EN" }) {
  const t = T(lang).footer;
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot__grid">
          <div className="foot__brand">
            <Logo variant="light" height={44} />
            <p className="foot__about">{t.about}</p>
            <div className="foot__social" style={{ marginTop: 22 }}>
              <a href="#" className="foot__social-btn" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
              <a href="#" className="foot__social-btn" aria-label="Twitter"><Icon name="twitter" size={16} /></a>
              <a href="#" className="foot__social-btn" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
              <a href="#" className="foot__social-btn" aria-label="WhatsApp"><Icon name="whatsapp" size={16} /></a>
            </div>
          </div>
          {t.cols.map(col => (
            <div key={col.title}>
              <div className="foot__col-title">{col.title}</div>
              <div className="foot__col-list">
                {col.links.map(l => <a key={l} href="#">{l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="foot__bottom">
          <div>{t.copyright}</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ color: 'rgba(255,255,255,0.6)' }}>{t.phone}</a>
            <a href="#" style={{ color: 'rgba(255,255,255,0.6)' }}>{t.email}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { StatsStrip, Steps, Quote, SpecialtyRow, InsuranceStrip, Footer });