// HowItWorks (Process), Transparency, NoStress, Team

// === HOW IT WORKS ===
const HowItWorks = ({ variant, ctaA, ctaB }) => {
  const t = window.useT();
  const isA = variant === 'A';
  const steps = isA ? t.process.stepsA : t.process.stepsB;
  const cta = isA ? ctaA : ctaB;

  return (
    <Section id="process" className="bg-white border-y border-border">
      <div className="grid grid-cols-12 gap-8 lg:gap-[72px] items-start">
        <div className="col-span-12 lg:col-span-4 lg:sticky lg:top-28">
          <Eyebrow>{t.process.eyebrow}</Eyebrow>
          <h2 className="font-display text-h1 mt-5">
            {t.process.h2pre}<em className="not-italic text-highlight">{t.process.h2hi}</em>
          </h2>
          <p className="text-body-lg text-text-secondary mt-5">
            {t.process.sub}
          </p>
          <Photo
            src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&q=80&auto=format&fit=crop"
            alt="Interior"
            className="aspect-[4/5] w-full mt-8 hidden lg:block"
          />
        </div>

        <div className="col-span-12 lg:col-span-8">
          <ol className="relative lg:pt-[88px]">
            {steps.map((s, i) => (
              <li key={i} className="relative pl-16 pb-8 last:pb-0">
                <div className="absolute left-0 top-0 flex flex-col items-center h-full">
                  <div className="h-11 w-11 rounded-full bg-highlight text-white flex items-center justify-center font-display text-[18px] font-medium shrink-0">
                    {i + 1}
                  </div>
                  {i < steps.length - 1 && (
                    <div className="flex-1 w-px bg-border mt-1"/>
                  )}
                </div>
                <div className="pt-1.5">
                  <h3 className="text-[20px] md:text-[22px] font-display tracking-tight">{s.t}</h3>
                  <p className="text-[15px] text-text-secondary mt-2 max-w-[58ch] leading-relaxed">{s.d}</p>
                </div>
              </li>
            ))}
          </ol>

          <div className="mt-10 flex flex-col sm:flex-row sm:items-center gap-4">
            <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>
            <span className="text-small text-text-secondary">{cta.sub}</span>
          </div>
        </div>
      </div>
    </Section>
  );
};

// === TRANSPARENCY ===
const Transparency = ({ variant, ctaA, ctaB }) => {
  const t = window.useT();
  const cta = variant === 'A' ? ctaA : ctaB;
  const cardIcons = [<Icon.Wallet/>, <Icon.Clock/>, <Icon.Chart/>, <Icon.ShieldCheck/>];

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

      <div className="mt-12 grid grid-cols-2 lg:grid-cols-4 gap-4">
        {t.transp.cards.map((c, i) => (
          <div key={i} className="bg-white rounded-lg p-6 border border-border h-full">
            <div className="h-10 w-10 rounded-md bg-highlight-soft text-highlight flex items-center justify-center">{cardIcons[i]}</div>
            <h3 className="text-[17px] font-semibold mt-4">{c.t}</h3>
            <p className="text-[14px] text-text-secondary mt-2 leading-relaxed">{c.d}</p>
          </div>
        ))}
      </div>

      {/* Chat mock on phone */}
      <div className="mt-12 bg-[#f3ede4] rounded-2xl p-5 md:p-10 relative overflow-hidden border border-border">
        <div className="grid lg:grid-cols-12 gap-6 lg:gap-10 items-start">
          <div className="lg:col-span-6 lg:pt-2">
            <Eyebrow>{t.transp.appEyebrow}</Eyebrow>
            <h3 className="font-display text-[28px] md:text-[34px] mt-4 leading-tight">
              {t.transp.appH3}
            </h3>
            <p className="text-[15px] text-text-secondary mt-4 max-w-[44ch]">
              {t.transp.appSub}
            </p>
            <ul className="mt-6 space-y-2.5 max-w-[420px]">
              {t.transp.pills.map((p, i) => (
                <li key={i} className="text-[14px] text-text-secondary flex items-start gap-2.5">
                  <span className="shrink-0 mt-0.5 inline-flex items-center justify-center h-[20px] w-[20px] rounded-full bg-highlight-soft">
                    <Icon.Check size={12} className="text-highlight" strokeWidth={2.5}/>
                  </span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>

            <div className="mt-7 flex flex-col items-start 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>
              <span className="text-small text-text-secondary">{cta.sub}</span>
            </div>
          </div>

          <div className="lg:col-span-6 flex justify-center">
            <PhoneChatMock/>
          </div>
        </div>
      </div>
    </Section>
  );
};

const PhoneChatMock = () => {
  const t = window.useT();
  const photos = [
    '/images/chat_photo_1.jpg',
    '/images/chat_photo_2.jpg',
    '/images/chat_photo_3.jpg',
    '/images/chat_photo_4.jpg',
    '/images/chat_photo_5.jpg',
    '/images/chat_photo_6.jpg',
    '/images/chat_photo_7.jpg',
    '/images/chat_photo_8.jpg',
    '/images/chat_photo_9.jpg',
  ];
  return (
    <div className="relative w-[300px] md:w-[340px] aspect-[9/19] rounded-[42px] bg-black p-[10px] shadow-2xl">
      <div className="relative w-full h-full rounded-[34px] bg-[#f7f4ee] overflow-hidden flex flex-col">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[110px] h-[26px] bg-black rounded-b-[16px] z-20"/>
        <div className="flex items-center justify-between px-6 pt-2.5 pb-1 text-[11px] font-semibold text-black z-10">
          <span>9:41</span>
          <span className="flex items-center gap-1">
            <span className="inline-block w-3.5 h-2 border border-black rounded-[2px] relative">
              <span className="absolute inset-0.5 bg-black rounded-[1px]"/>
            </span>
          </span>
        </div>

        <div className="px-4 pt-2 pb-3 border-b border-black/5 bg-white/60 backdrop-blur flex items-center gap-3">
          <div className="h-9 w-9 rounded-full overflow-hidden bg-highlight-soft text-highlight flex items-center justify-center text-[12px] font-semibold">
            <img src="/images/photos_m_ru_2.jpg" alt="Олег" className="w-full h-full object-cover object-top"/>
          </div>
          <div className="min-w-0">
            <div className="text-[13px] font-semibold leading-tight">Олег · Avero</div>
            <div className="text-[11px] text-text-secondary leading-tight">Eixample 82 m² · {t.mock.online}</div>
          </div>
          <div className="ml-auto text-text-secondary">
            <Icon.Phone size={16}/>
          </div>
        </div>

        <div className="mx-3 mt-3 rounded-xl bg-white border border-border shadow-sm overflow-hidden">
          <div className="px-3 py-2 flex items-center gap-2 border-b border-border bg-highlight-soft/50">
            <Icon.Pin size={12} className="text-highlight"/>
            <span className="text-[11px] uppercase tracking-wider text-text-secondary font-semibold">{t.mock.pinned}</span>
            <span className="ml-auto text-[10px] text-text-secondary">v3</span>
            <button
              type="button"
              aria-label="Download budget"
              className="ml-1 inline-flex items-center justify-center h-6 w-6 rounded-md bg-white border border-border text-[#1f7a4d] hover:bg-[#1f7a4d] hover:text-white transition-colors"
            >
              <Icon.Excel size={12}/>
            </button>
          </div>
          <div className="px-3 py-2.5">
            <div className="flex items-baseline justify-between">
              <span className="text-[12px] text-text-secondary">{t.mock.budgetProject}</span>
              <span className="font-display text-[18px]">28 400 €</span>
            </div>
            <div className="mt-2 h-1.5 rounded-full bg-black/[0.06]">
              <div className="h-full rounded-full bg-accent" style={{ width: '64%' }}/>
            </div>
            <div className="mt-1.5 flex justify-between text-[10px] text-text-secondary">
              <span>{t.mock.spent}</span><span>64%</span>
            </div>
          </div>
        </div>

        <div className="flex-1 overflow-hidden px-3 pt-3 pb-2 space-y-2.5">
          <div className="flex justify-center">
            <span className="text-[10px] text-text-secondary bg-black/[0.04] px-2 py-0.5 rounded-full">{t.mock.today}</span>
          </div>

          <div className="flex justify-start">
            <div className="max-w-[85%] bg-white rounded-2xl rounded-tl-md border border-border shadow-sm px-3 py-2.5">
              <div className="flex items-center gap-1.5 text-[10px] text-highlight font-semibold uppercase tracking-wider">
                <Icon.Doc size={11}/> {t.mock.report}
              </div>
              <div className="mt-1.5 text-[12.5px] leading-snug text-text-primary">
                {t.mock.reportText}
              </div>
              <div className="mt-2.5 grid grid-cols-3 gap-1 rounded-lg overflow-hidden">
                {photos.map((p, i) => (
                  <div key={i} className="aspect-square bg-bg-soft overflow-hidden">
                    <img src={p} alt="" aria-hidden="true" loading="lazy" className="w-full h-full object-cover"/>
                  </div>
                ))}
              </div>
              <div className="mt-1.5 flex items-center justify-between">
                <span className="text-[10px] text-text-secondary">{t.mock.photos}</span>
                <span className="text-[10px] text-accent font-medium">{t.mock.openAll}</span>
              </div>
            </div>
          </div>

          <div className="flex justify-end">
            <div className="bg-accent text-white text-[12.5px] rounded-2xl rounded-tr-md px-3 py-1.5 shadow-sm">
              {t.mock.reaction}
            </div>
          </div>
        </div>

        <div className="px-3 pb-3 pt-2 border-t border-black/5 bg-white/70 backdrop-blur">
          <div className="flex items-center gap-2 bg-white rounded-full border border-border px-3 py-1.5">
            <span className="text-[12px] text-text-muted flex-1">{t.mock.inputPlaceholder}</span>
            <span className="h-6 w-6 rounded-full bg-accent text-white flex items-center justify-center">
              <Icon.Arrow size={11}/>
            </span>
          </div>
        </div>

        <div className="absolute bottom-1.5 left-1/2 -translate-x-1/2 w-[100px] h-[4px] rounded-full bg-black/40"/>
      </div>
    </div>
  );
};

const DashboardMock = () => {
  const t = window.useT();
  return (
    <div className="bg-[#1f1c19] rounded-xl border border-white/10 overflow-hidden shadow-card">
      <div className="flex items-center justify-between px-4 md:px-5 h-12 border-b border-white/10">
        <div className="flex items-center gap-2">
          <span className="h-2.5 w-2.5 rounded-full bg-[#FF5F57]"/>
          <span className="h-2.5 w-2.5 rounded-full bg-[#FEBC2E]"/>
          <span className="h-2.5 w-2.5 rounded-full bg-[#28C840]"/>
        </div>
        <div className="text-[12px] text-white/50">avero · Eixample 82 m²</div>
        <div className="text-[12px] text-white/50 hidden md:block">{t.mock.dashUpdated}</div>
      </div>
      <div className="p-4 md:p-6 grid md:grid-cols-3 gap-4">
        <div className="md:col-span-2 space-y-4">
          <div className="bg-white/[0.03] border border-white/10 rounded-lg p-4">
            <div className="flex items-center justify-between text-[12px] text-white/55 uppercase tracking-wider">
              <span>{t.mock.dashProgress}</span><span>78%</span>
            </div>
            <div className="mt-3 h-2 rounded-full bg-white/10">
              <div className="h-full rounded-full bg-accent" style={{ width: '78%' }}/>
            </div>
            <div className="mt-4 grid grid-cols-5 gap-2 text-[10px] text-white/55">
              {t.mock.dashStages.map((s,i)=>(
                <div key={i} className="text-center">
                  <div className={`h-1.5 rounded ${i<3?'bg-accent':i===3?'bg-accent/60':'bg-white/15'}`}/>
                  <div className="mt-1.5 truncate">{s}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-white/[0.03] border border-white/10 rounded-lg p-4">
            <div className="text-[12px] text-white/55 uppercase tracking-wider mb-3">{t.mock.dashStagesLabel}</div>
            {t.mock.dashRows.map((row,i)=>(
              <div key={i} className="flex items-center justify-between py-2 border-t border-white/5 first:border-0 first:pt-0">
                <div>
                  <div className="text-[14px]">{row.n}</div>
                  <div className="text-[11px] text-white/50">{row.d}</div>
                </div>
                <span className={`text-[11px] px-2 py-0.5 rounded-full ${
                  row.t==='progress' ? 'bg-accent/20 text-accent' :
                  row.t==='done' ? 'bg-success/15 text-success' :
                  'bg-white/10 text-white/60'
                }`}>{row.s}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-4">
          <div className="bg-white/[0.03] border border-white/10 rounded-lg p-4">
            <div className="text-[12px] text-white/55 uppercase tracking-wider">{t.mock.dashBudgetLabel}</div>
            <div className="mt-2 font-display text-[26px]">28 400 €</div>
            <div className="text-[12px] text-success mt-1">{t.mock.dashBudgetChange}</div>
            <div className="mt-3 grid grid-cols-3 gap-1 h-1.5">
              <div className="bg-accent rounded-full"/>
              <div className="bg-accent/70 rounded-full"/>
              <div className="bg-white/15 rounded-full"/>
            </div>
          </div>
          <div className="bg-white/[0.03] border border-white/10 rounded-lg p-4">
            <div className="text-[12px] text-white/55 uppercase tracking-wider">{t.mock.dashManagerLabel}</div>
            <div className="mt-3 flex items-center gap-3">
              <div className="h-9 w-9 rounded-full overflow-hidden bg-highlight-soft text-highlight flex items-center justify-center text-[13px] font-semibold">
                <img src="/images/photos_m_ru_2.jpg" alt="Олег" className="w-full h-full object-cover object-top"/>
              </div>
              <div>
                <div className="text-[14px]">Олег</div>
                <div className="text-[11px] text-white/55">{t.mock.dashOnline}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

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

  return (
    <Section id="nostress" className="bg-white border-y border-border">
      <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">
        <div className="lg:col-span-6">
          <Eyebrow>{t.nostress.eyebrow}</Eyebrow>
          <h2 className="font-display text-h1 mt-5">
            {t.nostress.h2pre}<em className="not-italic text-highlight">{t.nostress.h2hi}</em>
          </h2>
          <p className="text-body-lg text-text-secondary mt-5 max-w-[52ch]">
            {t.nostress.sub}
          </p>

          <div className="mt-8">
            <p className="text-[14px] uppercase tracking-[0.16em] text-text-secondary font-semibold">{t.nostress.notNeeded}</p>
            <ul className="mt-4 space-y-2.5">
              {t.nostress.items.map((item,i)=>(
                <li key={i} className="flex gap-3 text-[15px]">
                  <Icon.X size={18} className="text-text-muted shrink-0 mt-1"/>
                  <span className="text-text-primary/85">{item}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="mt-8 bg-bg border border-border rounded-lg p-5 md:p-6">
            <p className="font-display text-[20px] md:text-[22px] leading-snug">
              {t.nostress.callout}<span className="text-accent">{t.nostress.calloutHi}</span>
            </p>
          </div>

          <div className="mt-8 flex flex-col items-start 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>
            <span className="text-small text-text-secondary">{cta.sub}</span>
          </div>
        </div>

        <div className="lg:col-span-6 relative">
          <Photo
            src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=1200&q=80&auto=format&fit=crop"
            alt="Interior"
            className="aspect-[4/5] w-full"
          />
          <div className="absolute -bottom-4 left-4 right-4 md:left-auto md:right-6 md:bottom-6 md:w-[300px] bg-white rounded-xl shadow-card p-4">
            <div className="flex items-center gap-2 text-[12px] text-text-secondary">
              <span className="h-2 w-2 rounded-full bg-success"/> {t.nostress.notifLabel}
            </div>
            <div className="text-[14px] mt-2">
              {t.nostress.notifText}
            </div>
          </div>

          <div className="hidden md:grid grid-cols-2 gap-3 mt-6">
            {t.nostress.pills.map((p,i)=>(
              <div key={i} className="bg-bg rounded-md px-4 py-3 text-[13px] text-text-secondary flex items-center gap-2">
                <Icon.Check size={14} className="text-highlight shrink-0"/>{p}
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
};

// === TEAM ===
const Team = ({ variant }) => {
  const t = window.useT();
  const waHref = 'https://wa.me/' + window.WA_NUMBERS[variant] + '?text=' + encodeURIComponent(t.nav.waText);
  const calendlyUrl = t.finalB.calendlyUrl;
  const ctaHref = variant === 'B' ? calendlyUrl : waHref;
  const ctaTarget = '_blank';
  const ctaIsPopup = variant === 'B';

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

      <div className="mt-10 -mx-5 md:mx-0 px-5 md:px-0 overflow-x-auto no-scrollbar">
        <div className="flex md:grid md:grid-cols-2 lg:grid-cols-3 gap-4 min-w-max md:min-w-0">
          {t.team.managers.map((m, i) => (
            <article key={i} className="w-[280px] md:w-auto shrink-0 bg-white border border-border rounded-xl p-5 flex flex-col">
              <div className="flex items-center gap-4">
                <div className="h-14 w-14 rounded-full overflow-hidden bg-highlight-soft text-highlight flex items-center justify-center font-display text-[24px] shrink-0">
                  {m.photo
                    ? <img src={m.photo} alt={m.name} className="w-full h-full object-cover object-top"/>
                    : m.initial}
                </div>
                <div>
                  <div className="font-display text-[20px] leading-tight">{m.name}</div>
                  <div className="text-[12px] text-text-secondary">{t.team.mgrTitle} · {m.years} {t.team.yearsExp}</div>
                </div>
              </div>
              <dl className="mt-5 space-y-3 text-[14px]">
                <div>
                  <dt className="text-[11px] uppercase tracking-wider text-text-muted">{t.team.sitLabel}</dt>
                  <dd className="mt-1 text-text-primary/85">{m.sit}</dd>
                </div>
                <div>
                  <dt className="text-[11px] uppercase tracking-wider text-text-muted">{t.team.actLabel}</dt>
                  <dd className="mt-1 text-text-primary/85">{m.act}</dd>
                </div>
              </dl>
              <div className="mt-auto pt-5">
                <div className="-mx-5 -mb-5 px-5 py-4 bg-highlight-soft border-t border-highlight/20 rounded-b-xl">
                  <div className="text-[11px] uppercase tracking-wider text-highlight/80 font-semibold flex items-center gap-1.5">
                    <Icon.Check size={12} className="text-highlight"/> {t.team.resLabel}
                  </div>
                  <div className="mt-1.5 text-[15px] font-semibold text-text-primary leading-snug">{m.res}</div>
                </div>
              </div>
            </article>
          ))}

          {/* CTA tile */}
          <article className="w-[280px] md:w-auto shrink-0 bg-bg border border-dashed border-border rounded-xl p-5 flex flex-col">
            <div className="flex items-center gap-4">
              <div className="h-14 w-14 rounded-full bg-white border border-border text-text-secondary flex items-center justify-center">
                <Icon.Users size={22}/>
              </div>
              <div>
                <div className="font-display text-[20px] leading-tight">{t.team.cta.name}</div>
                <div className="text-[12px] text-text-secondary">{t.team.cta.sub}</div>
              </div>
            </div>

            <p className="mt-5 text-[14px] text-text-secondary leading-relaxed">
              {t.team.cta.desc}
            </p>

            <a
              href={ctaIsPopup ? '' : ctaHref}
              target={ctaIsPopup ? undefined : ctaTarget}
              rel={!ctaIsPopup ? 'noopener' : undefined}
              onClick={ctaIsPopup
                ? (e) => { e.preventDefault(); window.gtrack('calendly_open'); window.Calendly && window.Calendly.initPopupWidget({ url: calendlyUrl + '?primary_color=279ad8' }); }
                : () => window.gtrack('whatsapp_click', { location: 'team' })}
              className="mt-auto pt-5 inline-flex items-center gap-2 text-[14px] font-medium text-accent hover:gap-3 transition-all"
            >
              {variant === 'B' ? t.team.cta.linkB : t.team.cta.link} <Icon.ArrowSmall/>
            </a>
          </article>
        </div>
      </div>

      <div className="mt-10 grid md:grid-cols-3 gap-5 text-[14px] text-text-secondary border-t border-border pt-8">
        {t.team.footer.map((p, i) => <p key={i}>{p}</p>)}
      </div>
    </Section>
  );
};

Object.assign(window, { HowItWorks, Transparency, NoStress, Team });