// Cases, CleaningGift, Comparison, FinalCTA, Footer

// === CASES ===
const Cases = ({ variant, lightCtaA, lightCtaB }) => {
  const t = window.useT();
  const cta = variant === 'A' ? lightCtaA : lightCtaB;
  const caseImgs = [
    'https://images.unsplash.com/photo-1600210491892-03d54c0aaf87?w=1200&q=80&auto=format&fit=crop',
    '/images/real_projects_2.jpg',
    'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=1200&q=80&auto=format&fit=crop',
  ];

  return (
    <Section id="cases">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
        <div>
          <Eyebrow>{t.cases.eyebrow}</Eyebrow>
          <h2 className="font-display text-h1 mt-5 max-w-[18ch]">
            {t.cases.h2pre}<em className="not-italic text-highlight">{t.cases.h2hi}</em>
          </h2>
        </div>
        <p className="text-body text-text-secondary max-w-[40ch]">
          {t.cases.sub}
        </p>
      </div>

      <div className="mt-10 grid md:grid-cols-3 gap-5">
        {t.cases.items.map((c, i) => (
          <article key={i} className="bg-white rounded-xl border border-border overflow-hidden flex flex-col">
            <div className="relative overflow-hidden" style={{aspectRatio:'4/3'}}>
              <img src={caseImgs[i]} alt={c.loc} loading="lazy" className="absolute inset-0 w-full h-full object-cover"/>
              <div className="absolute top-3 left-3 flex gap-2">
                <Pill className="!bg-white !text-text-primary"><Icon.Pin size={12}/>{c.loc}</Pill>
                <Pill className="!bg-white !text-text-primary">{c.area}</Pill>
              </div>
            </div>
            <div className="p-5 md:p-6 flex flex-col flex-1">
              <div className="text-[11px] uppercase tracking-wider text-highlight font-semibold">{c.tag}</div>
              <h3 className="font-display text-[22px] mt-2 leading-tight">{c.who}</h3>

              <div className="mt-5 grid grid-cols-2 gap-4">
                <div>
                  <div className="text-[11px] uppercase tracking-wider text-text-muted">{t.cases.budgetLabel}</div>
                  <div className="text-[15px] font-semibold mt-1">{c.budget}</div>
                </div>
                <div>
                  <div className="text-[11px] uppercase tracking-wider text-text-muted">{t.cases.termLabel}</div>
                  <div className="text-[15px] font-semibold mt-1">{c.term}</div>
                </div>
              </div>

              <blockquote className="mt-auto pt-5 border-t border-border text-[14px] italic text-text-primary/85">
                «{c.quote}»
              </blockquote>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-10 flex justify-center">
        <a
          href={cta.popup ? '' : cta.action}
          target={cta.popup ? undefined : cta.target}
          rel={!cta.popup && cta.target === '_blank' ? 'noopener' : undefined}
          onClick={cta.popup ? (e) => { e.preventDefault(); window.gtrack('calendly_open'); window.Calendly && window.Calendly.initPopupWidget({ url: cta.action + '?primary_color=279ad8' }); } : undefined}
          className="inline-flex items-center gap-2 text-accent font-medium hover:gap-3 transition-all">
          {cta.text} <Icon.ArrowSmall/>
        </a>
      </div>
    </Section>
  );
};

// === CLEANING GIFT BANNER ===
const CleaningGift = ({ variant, lightCtaA, lightCtaB }) => {
  const t = window.useT();
  const cta = variant === 'A' ? lightCtaA : lightCtaB;

  return (
    <Section className="!py-0">
      <div className="bg-dark text-white rounded-2xl overflow-hidden relative">
        <div className="grid lg:grid-cols-12 gap-0">
          <div className="lg:col-span-7 p-8 md:p-12 lg:p-14">
            <Eyebrow dark className="!text-highlight">{t.cleaning.eyebrow}</Eyebrow>
            <h2 className="font-display text-[clamp(28px,3.6vw,46px)] leading-[1.05] mt-5 tracking-tight">
              {t.cleaning.h2pre}<em className="not-italic text-highlight">{t.cleaning.h2hi}</em>{t.cleaning.h2post}
            </h2>
            <p className="text-body-lg text-white/70 mt-5 max-w-[52ch]">
              {t.cleaning.sub}
            </p>

            <ul className="mt-7 grid sm:grid-cols-2 gap-3">
              {t.cleaning.items.map((item,i)=>(
                <li key={i} className="flex gap-3 text-[14px] text-white/85">
                  <span className="shrink-0 mt-0.5 inline-flex items-center justify-center h-[20px] w-[20px] rounded-full bg-accent/20">
                    <Icon.Check size={12} className="text-accent" strokeWidth={2.5}/>
                  </span>
                  {item}
                </li>
              ))}
            </ul>

            <p className="font-display text-[20px] md:text-[22px] mt-8 leading-snug max-w-[44ch]">
              {t.cleaning.closing}
            </p>

            <a
              href={cta.popup ? '' : cta.action}
              target={cta.popup ? undefined : cta.target}
              rel={!cta.popup && cta.target === '_blank' ? 'noopener' : undefined}
              onClick={cta.popup ? (e) => { e.preventDefault(); window.gtrack('calendly_open'); window.Calendly && window.Calendly.initPopupWidget({ url: cta.action + '?primary_color=279ad8' }); } : undefined}
              className="inline-flex items-center gap-2 mt-7 text-accent font-medium hover:gap-3 transition-all">
              {cta.text} <Icon.ArrowSmall/>
            </a>
          </div>
          <div className="lg:col-span-5 relative min-h-[260px]">
            <Photo
              src="https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1200&q=80&auto=format&fit=crop"
              alt="Clean apartment"
              className="absolute inset-0 w-full h-full !rounded-none"
              tone="dark"
            />
            <div className="absolute left-5 bottom-5 right-5 flex items-center gap-3 bg-black/40 backdrop-blur rounded-xl p-3 border border-white/10">
              <div className="h-10 w-10 rounded-full bg-accent text-white flex items-center justify-center">
                <Icon.Sparkle size={18}/>
              </div>
              <div className="text-[13px]">
                <div className="font-semibold">{t.cleaning.badgeTitle}</div>
                <div className="text-white/65 text-[12px]">{t.cleaning.badgeSub}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

// === COMPARISON ===
const Comparison = ({ variant, ctaA, ctaB }) => {
  const t = window.useT();
  const cta = variant === 'A' ? ctaA : ctaB;

  return (
    <Section id="compare">
      <div className="text-center mx-auto">
        <Eyebrow className="justify-center">{t.compare.eyebrow}</Eyebrow>
        <h2 className="font-display text-h1 mt-5">
          {t.compare.h2pre}<em className="not-italic text-highlight">{t.compare.h2hi}</em>
        </h2>
        <p className="text-body-lg text-text-secondary mt-5">
          {t.compare.sub}
        </p>
      </div>

      <div className="mt-12 bg-white border border-border rounded-xl overflow-hidden">
        <div className="grid grid-cols-12 px-5 md:px-8 py-4 bg-bg border-b border-border text-[12px] uppercase tracking-wider text-text-muted font-semibold">
          <div className="col-span-12 md:col-span-3">{t.compare.col1}</div>
          <div className="col-span-12 md:col-span-4 mt-2 md:mt-0">{t.compare.col2}</div>
          <div className="col-span-12 md:col-span-5 mt-2 md:mt-0 text-highlight">{t.compare.col3}</div>
        </div>
        {t.compare.rows.map((r, i) => (
          <div key={i} className="grid grid-cols-12 px-5 md:px-8 py-5 border-b border-border last:border-0 gap-y-3 md:gap-y-0">
            <div className="col-span-12 md:col-span-3 font-semibold text-[15px]">{r.p}</div>
            <div className="col-span-12 md:col-span-4 flex gap-3 items-start text-[14px] text-text-secondary">
              <span className="shrink-0 mt-0.5 inline-flex items-center justify-center h-[20px] w-[20px] rounded-full bg-[#fde6e1]">
                <Icon.X size={14} className="text-[#c0392b]" strokeWidth={2.5}/>
              </span>
              <span>{r.a}</span>
            </div>
            <div className="col-span-12 md:col-span-5 flex gap-3 items-start text-[14px] text-text-primary">
              <span className="shrink-0 mt-0.5 inline-flex items-center justify-center h-[20px] w-[20px] rounded-full bg-accent-soft">
                <Icon.Check size={14} className="text-accent" strokeWidth={2.5}/>
              </span>
              <span>{r.b}</span>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-10 flex flex-col items-center gap-3">
        <Button as="a"
          href={cta.popup ? '' : cta.action}
          target={cta.popup ? undefined : cta.target}
          rel={!cta.popup && cta.target === '_blank' ? 'noopener' : undefined}
          onClick={cta.popup ? (e) => { e.preventDefault(); window.gtrack('calendly_open'); window.Calendly && window.Calendly.initPopupWidget({ url: cta.action + '?primary_color=279ad8' }); } : undefined}
          iconRight={<Icon.Arrow size={18}/>}>{cta.button}</Button>
        {cta.sub && <span className="text-small text-text-secondary">{cta.sub}</span>}
      </div>
    </Section>
  );
};

// === FINAL CTA — Variant A: form, Variant B: calendar ===
const FinalCTA = ({ variant }) => {
  return (
    <section id="final" className="bg-white border-y border-border py-16 md:py-24">
      <div className="max-w-content mx-auto px-5 md:px-8">
        {variant === 'A' ? <FinalFormA/> : <FinalCalendarB/>}
      </div>
    </section>
  );
};

const UPLOAD_URL = 'https://avero.expert/api/upload';

const FinalFormA = () => {
  const t = window.useT();
  const [files, setFiles] = React.useState([]);
  const [submitted, setSubmitted] = React.useState(false);
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  const [serverError, setServerError] = React.useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    const fd = new FormData(form);

    const errs = {};
    if (!fd.get('name') || fd.get('name').trim().length < 2) errs.name = t.finalA.errName;
    if (!fd.get('phone') || fd.get('phone').trim().length < 7) errs.phone = t.finalA.errPhone;
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    files.forEach(f => fd.append('files', f));

    setLoading(true);
    setServerError('');
    try {
      const res = await fetch(UPLOAD_URL, { method: 'POST', body: fd });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || t.finalA.errDefault);
      setSubmitted(true);
      window.gtrack('contact_form_submit');
    } catch (err) {
      setServerError(err.message || t.finalA.errDefault);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start">
      <div className="lg:col-span-5">
        <Eyebrow>{t.finalA.eyebrow}</Eyebrow>
        <h2 className="font-display text-h1 mt-5">
          {t.finalA.h2pre}<em className="not-italic text-highlight">{t.finalA.h2hi}</em>
        </h2>
        <p className="text-body-lg text-text-secondary mt-5 max-w-[44ch]">
          {t.finalA.sub}
        </p>
        <ul className="mt-8 space-y-3 text-[15px]">
          {t.finalA.bullets.map((item,i)=>(
            <li key={i} className="flex gap-3 items-start">
              <span className="shrink-0 mt-0.5 inline-flex items-center justify-center h-[20px] w-[20px] rounded-full bg-accent-soft">
                <Icon.Check size={12} className="text-accent" strokeWidth={2.5}/>
              </span>
              {item}
            </li>
          ))}
        </ul>
      </div>

      <div className="lg:col-span-7">
        <div className="bg-bg border border-border rounded-2xl p-6 md:p-8">
          {submitted ? (
            <div className="text-center py-10">
              <div className="mx-auto h-14 w-14 rounded-full bg-success/15 text-success flex items-center justify-center">
                <Icon.Check size={28}/>
              </div>
              <h3 className="font-display text-[28px] mt-5">{t.finalA.okTitle}</h3>
              <p className="text-text-secondary mt-2 max-w-[40ch] mx-auto">
                {t.finalA.okSub}
              </p>
            </div>
          ) : (
            <form onSubmit={onSubmit} className="space-y-4">
              <div>
                <label className="block text-[13px] font-medium text-text-secondary mb-1.5">{t.finalA.lName}</label>
                <input
                  name="name" type="text"
                  className={`w-full h-12 px-4 rounded-md bg-white border ${errors.name?'border-error':'border-border'} text-[15px] focus:outline-none focus:border-accent transition-colors`}
                  placeholder={t.finalA.phName}
                />
                {errors.name && <p className="text-[12px] text-error mt-1">{errors.name}</p>}
              </div>
              <div>
                <label className="block text-[13px] font-medium text-text-secondary mb-1.5">{t.finalA.lPhone}</label>
                <input
                  name="phone" type="tel"
                  className={`w-full h-12 px-4 rounded-md bg-white border ${errors.phone?'border-error':'border-border'} text-[15px] focus:outline-none focus:border-accent transition-colors`}
                  placeholder={t.finalA.phPhone}
                />
                {errors.phone && <p className="text-[12px] text-error mt-1">{errors.phone}</p>}
              </div>
              <div>
                <label className="block text-[13px] font-medium text-text-secondary mb-1.5">{t.finalA.lFiles}</label>
                <label className="flex items-center justify-center gap-3 h-28 border-2 border-dashed border-border rounded-md bg-white cursor-pointer hover:border-accent transition-colors">
                  <Icon.Upload size={20} className="text-text-secondary"/>
                  <span className="text-[14px] text-text-secondary">
                    {files.length ? t.finalA.dropzoneN(files.length) : t.finalA.dropzone}
                  </span>
                  <input type="file" multiple accept="image/*,video/*" className="hidden"
                    onChange={(e)=>setFiles(Array.from(e.target.files))}/>
                </label>
              </div>
              {serverError && (
                <p className="text-[13px] text-error bg-error/8 rounded-md px-4 py-3">{serverError}</p>
              )}
              <div className="flex justify-center">
                <Button size="main" intent="primary" className="!h-14"
                  iconRight={loading ? null : <Icon.Arrow size={18}/>}
                  disabled={loading}
                  style={loading ? { opacity: 0.7, cursor: 'not-allowed' } : undefined}>
                  {loading ? t.finalA.submitting : t.finalA.submit}
                </Button>
              </div>
              <p className="text-[12px] text-text-muted text-center">
                {t.finalA.privacy}
              </p>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};

const FinalCalendarB = () => {
  const t = window.useT();
  const calendlyUrl = t.finalB.calendlyUrl;

  return (
    <div id="calendar" className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start scroll-mt-24">
      <div className="lg:col-span-5">
        <Eyebrow>{t.finalB.eyebrow}</Eyebrow>
        <h2 className="font-display text-h1 mt-5">
          {t.finalB.h2pre}<em className="not-italic text-highlight">{t.finalB.h2hi}</em>
        </h2>
        <p className="text-body-lg text-text-secondary mt-5 max-w-[44ch]">
          {t.finalB.sub}
        </p>
        <ul className="mt-8 space-y-3 text-[15px]">
          {t.finalB.bullets.map((item,i)=>(
            <li key={i} className="flex gap-3 items-start">
              <span className="shrink-0 mt-0.5 inline-flex items-center justify-center h-[20px] w-[20px] rounded-full bg-accent-soft">
                <Icon.Check size={12} className="text-accent" strokeWidth={2.5}/>
              </span>
              {item}
            </li>
          ))}
        </ul>
        <div className="mt-8 flex items-center gap-3 text-[13px] text-text-secondary">
          <Icon.Clock size={16}/> {t.finalB.hours}
        </div>
      </div>

      <div className="lg:col-span-7">
        <div className="bg-bg border border-border rounded-2xl p-7 md:p-10 relative overflow-hidden">
          <div className="flex items-start gap-4">
            <div className="h-12 w-12 rounded-xl bg-highlight-soft text-highlight flex items-center justify-center shrink-0">
              <Icon.Calendar size={22}/>
            </div>
            <div className="flex-1">
              <div className="text-[12px] uppercase tracking-[0.16em] text-text-muted font-semibold">
                {t.finalB.calEyebrow}
              </div>
              <h3 className="font-display text-[26px] md:text-[30px] mt-2 leading-tight">
                {t.finalB.calH3}
              </h3>
              <p className="text-[14px] text-text-secondary mt-3 max-w-[48ch]">
                {t.finalB.calSub}
              </p>
            </div>
          </div>

          <div className="mt-7 grid sm:grid-cols-3 gap-2 text-[13px]">
            {[
              { i: <Icon.Clock size={14}/>,  t: t.finalB.b1 },
              { i: <Icon.Pin size={14}/>,    t: t.finalB.b2 },
              { i: <Icon.ShieldCheck size={14}/>, t: t.finalB.b3 },
            ].map((b,i)=>(
              <div key={i} className="flex items-center gap-2 bg-highlight/10 rounded-md px-3 py-2.5 text-text-primary font-medium text-[13px]">
                <span className="text-highlight">{b.i}</span>{b.t}
              </div>
            ))}
          </div>

          <div className="mt-7 flex flex-col sm:flex-row sm:items-center gap-3">
            <Button
              as="a"
              href=""
              size="main"
              className="!h-14 sm:flex-1"
              iconLeft={<Icon.Calendar size={18}/>}
              iconRight={<Icon.Arrow size={18}/>}
              onClick={(e) => {
                e.preventDefault();
                window.gtrack('calendly_open', { location: 'final_b' });
                window.Calendly && window.Calendly.initPopupWidget({ url: calendlyUrl + '?primary_color=279ad8' });
              }}
            >
              {t.finalB.calBtn}
            </Button>
            <a
              href={'https://wa.me/' + window.WA_NUMBERS.B + '?text=Hola'}
              target="_blank" rel="noopener"
              aria-label={t.finalB.waLabel}
              title={t.finalB.waLabel}
              onClick={() => window.gtrack('whatsapp_click', { location: 'final_b' })}
              className="inline-flex items-center justify-center h-14 w-14 shrink-0 rounded-full bg-[#25D366] text-white hover:bg-[#1eb858] transition-colors"
            >
              <Icon.Whatsapp size={20}/>
            </a>
          </div>

          <p className="text-[12px] text-text-muted mt-5">
            {t.finalB.calNote}
          </p>
        </div>
      </div>
    </div>
  );
};

// === FOOTER ===
const Footer = ({ variant = 'A' }) => {
  const t = window.useT();
  const navAnchors = ['#solution', '#process', '#cases', '#team'];

  return (
    <footer className="bg-dark text-white">
      <div className="max-w-content mx-auto px-5 md:px-8 py-14 md:py-20">
        <div className="grid md:grid-cols-12 gap-10">
          <div className="md:col-span-5">
            <img src="/images/logo_2_light.png" alt="Avero" className="h-10 w-auto" />
            <p className="mt-4 text-white/65 text-[15px] max-w-[36ch]">
              {t.footer.tagline}
            </p>
            <a href={'https://wa.me/' + window.WA_NUMBERS[variant]} target="_blank" rel="noopener"
              onClick={() => window.gtrack('whatsapp_click', { location: 'footer' })}
              className="mt-6 inline-flex items-center gap-2 h-12 px-5 rounded-full bg-accent text-white text-[14px] font-semibold hover:bg-accent-hover transition-colors">
              <Icon.Whatsapp size={16}/> WhatsApp
            </a>
          </div>
          <div className="md:col-span-3">
            <div className="text-[12px] uppercase tracking-wider text-white/50 font-semibold">{t.footer.navTitle}</div>
            <ul className="mt-4 space-y-2.5 text-[14px] text-white/80">
              {t.footer.navLinks.map((label, i) => (
                <li key={i}><a href={navAnchors[i]} className="hover:text-accent">{label}</a></li>
              ))}
            </ul>
          </div>
          <div className="md:col-span-4">
            <div className="text-[12px] uppercase tracking-wider text-white/50 font-semibold">{t.footer.contactsTitle}</div>
            <ul className="mt-4 space-y-2.5 text-[14px] text-white/80">
              <li className="flex gap-2 items-center"><Icon.Pin size={14}/> {t.footer.address}</li>
              <li className="flex gap-2 items-center"><Icon.Phone size={14}/>
                <a href={'tel:' + (variant === 'B' ? t.footer.phoneB : t.footer.phone).replace(/\s/g,'')}
                  className="hover:text-accent transition-colors"
                  onClick={() => window.gtrack('phone_click')}
                >{variant === 'B' ? t.footer.phoneB : t.footer.phone}</a>
              </li>
              <li className="flex gap-2 items-center"><Icon.Clock size={14}/> {t.footer.hours}</li>
            </ul>
          </div>
        </div>

        <div className="mt-14 pt-6 border-t border-white/10 flex flex-col md:flex-row md:items-center md:justify-between gap-4 text-[12px] text-white/55">
          <div>{t.footer.copy(new Date().getFullYear())}</div>
          <div className="flex gap-5">
            <a href="#" className="hover:text-white">{t.footer.privacy}</a>
            <a href="#" className="hover:text-white">{t.footer.cookies}</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Cases, CleaningGift, Comparison, FinalCTA, Footer });