// Header, Hero, Pain, Solution, AnyRequest, SystemPillars

// === HEADER ===
const Header = ({ variant, lang, setLang }) => {
  const t = window.useT();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const langs = ['ES', 'CA', 'RU', 'EN'];
  const waHref = 'https://wa.me/' + window.WA_NUMBERS[variant] + '?text=' + encodeURIComponent(t.nav.waText);

  return (
    <header
      className={`fixed top-0 inset-x-0 z-40 transition-all duration-300 ${
      scrolled ? 'bg-bg/90 backdrop-blur-md border-b border-border/70' : 'bg-transparent'}`
      }>

      <div className="max-w-content mx-auto px-5 md:px-8 h-16 md:h-[72px] flex items-center justify-between">
        <a href="#" className="flex items-center gap-2.5 group">
          <img src="/images/logo_2_dark.png" alt="Avero" className="h-9 w-auto" />
          <span className="hidden md:inline text-[12px] text-text-secondary tracking-wide">{t.nav.city}</span>
        </a>

        <nav className="hidden lg:flex items-center gap-8 text-[14px] text-text-secondary">
          <a href="#process" className="hover:text-text-primary transition-colors">{t.nav.h}</a>
          <a href="#cases" className="hover:text-text-primary transition-colors">{t.nav.c}</a>
          <a href="#team" className="hover:text-text-primary transition-colors">{t.nav.m}</a>
          <a href="#final" className="hover:text-text-primary transition-colors">{t.nav.contact}</a>
        </nav>

        <div className="flex items-center gap-3">
          <div className="hidden md:flex items-center gap-1 text-[12px] font-medium text-text-secondary">
            {langs.map((l, i) =>
            <React.Fragment key={l}>
                {i > 0 && <span className="text-text-muted">·</span>}
                <button
                onClick={() => setLang(l.toLowerCase())}
                className={`px-1.5 py-1 rounded transition-colors ${
                lang === l.toLowerCase() ?
                'text-text-primary' :
                'hover:text-text-primary'}`
                }>
                  {l}
                </button>
              </React.Fragment>
            )}
          </div>
          <a
            href={waHref}
            target="_blank"
            rel="noopener"
            onClick={() => window.gtrack('whatsapp_click', { location: 'header' })}
            className="hidden md:inline-flex items-center gap-2 h-10 px-4 rounded-full bg-dark text-white text-[13px] font-semibold hover:bg-dark-soft transition-colors">
            <Icon.Whatsapp size={16} />
            WhatsApp
          </a>
          <button
            className="lg:hidden inline-flex items-center justify-center h-10 w-10 rounded-full border border-border bg-white"
            onClick={() => setOpen(!open)}
            aria-label="menu">
            {open ? <Icon.Close size={18} /> : <Icon.Menu size={18} />}
          </button>
        </div>
      </div>
      {open &&
      <div className="lg:hidden border-t border-border bg-bg">
          <div className="max-w-content mx-auto px-5 py-5 flex flex-col gap-4 text-[15px]">
            <a href="#process" onClick={() => setOpen(false)}>{t.nav.h}</a>
            <a href="#cases" onClick={() => setOpen(false)}>{t.nav.c}</a>
            <a href="#team" onClick={() => setOpen(false)}>{t.nav.m}</a>
            <a href="#final" onClick={() => setOpen(false)}>{t.nav.contact}</a>
            <div className="flex items-center gap-1 text-[13px] text-text-secondary pt-2 border-t border-border">
              {langs.map((l) =>
            <button
              key={l}
              onClick={() => setLang(l.toLowerCase())}
              className={`px-2 py-1 rounded ${
              lang === l.toLowerCase() ? 'text-text-primary font-medium' : ''}`
              }>
                  {l}
                </button>
            )}
            </div>
            <a href={waHref} target="_blank" rel="noopener"
              onClick={() => window.gtrack('whatsapp_click', { location: 'header_mobile' })}
              className="inline-flex items-center justify-center gap-2 h-12 rounded-full bg-dark text-white text-[14px] font-semibold">
              <Icon.Whatsapp size={16} /> {t.nav.waLabel}
            </a>
          </div>
        </div>
      }
    </header>);
};

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

  return (
    <section className="relative pt-24 md:pt-28 pb-16 md:pb-24 overflow-hidden">
      <div className="max-w-content mx-auto px-5 md:px-8">
        <div className="grid grid-cols-12 gap-6 md:gap-8 items-start">
          {/* Copy */}
          <div className="col-span-12 lg:col-span-7 xl:col-span-7">
            <Eyebrow>{t.hero.eyebrow}</Eyebrow>
            <h1 className="font-display text-hero mt-5 max-w-[16ch]">
              {t.hero.h1pre}<em className="not-italic text-highlight">{t.hero.h1hi}</em>{t.hero.h1post}
            </h1>
            <p className="text-body-lg text-text-secondary mt-6 max-w-[52ch]">
              {t.hero.sub}
            </p>

            <div className="mt-8">
              <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}
                size="main"
                className="!h-16 !px-9 !text-[18px] whitespace-nowrap"
                iconRight={<Icon.Arrow size={20} />}>
                {cta.button}
              </Button>
              <p className="text-small text-text-secondary mt-4 max-w-[44ch]">
                {cta.sub}
              </p>
            </div>
          </div>

          {/* Image + trust strip */}
          <div className="col-span-12 lg:col-span-5 xl:col-span-5 relative">
            <div className="relative">
              <Photo
                src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1200&q=80&auto=format&fit=crop"
                alt="Светлый интерьер гостиной"
                className="aspect-[4/5] w-full"
                position="center" />

              {/* floating credential card */}
              <div className="absolute -left-3 md:-left-6 bottom-6 md:bottom-10 bg-white rounded-xl shadow-card p-4 md:p-5 w-[260px] md:w-[280px]">
                <div className="flex items-center gap-3">
                  <div className="h-10 w-10 rounded-full bg-highlight-soft text-highlight flex items-center justify-center">
                    <Icon.Calc size={20} />
                  </div>
                  <div>
                    <div className="text-[12px] uppercase tracking-wider text-text-muted font-semibold">{t.hero.cardProject}</div>
                    <div className="text-[14px] font-semibold">{t.hero.cardArea}</div>
                  </div>
                </div>
                <div className="mt-4 grid grid-cols-2 gap-3 text-[12px]">
                  <div>
                    <div className="text-text-muted">{t.hero.budgetLabel}</div>
                    <div className="font-semibold mt-0.5">{t.hero.budgetVal}</div>
                  </div>
                  <div>
                    <div className="text-text-muted">{t.hero.termLabel}</div>
                    <div className="font-semibold mt-0.5">{t.hero.termVal}</div>
                  </div>
                </div>
                <div className="mt-3 h-1.5 rounded-full bg-[#EDE8E0] overflow-hidden">
                  <div className="h-full bg-accent" style={{ width: '90%' }} />
                </div>
              </div>

              {/* corner pill */}
              <div className="absolute right-4 top-4">
                <Pill>
                  <span className="h-2 w-2 rounded-full bg-success" />
                  {t.hero.pill}
                </Pill>
              </div>
            </div>

            {/* Trust strip */}
            <div
              className="mt-5 rounded-2xl overflow-hidden"
              style={{ backgroundColor: '#F0EBE3' }}
            >
              <div className="grid grid-cols-3 divide-x divide-black/[0.08]">
                {t.hero.trust.map((item, i) => (
                  <div key={i} className="px-3 md:px-4 py-4 md:py-5">
                    <div className="font-display text-[26px] md:text-[32px] leading-none tracking-tight text-text-primary">
                      {item.n}
                    </div>
                    <div className="mt-2 text-[12px] leading-snug text-text-primary font-medium">
                      {item.l}
                    </div>
                    <div className="text-[10px] uppercase tracking-wider text-text-muted mt-0.5">
                      {item.s}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);
};

// === PAIN ===
const Pain = ({ variant, lightCtaA, lightCtaB }) => {
  const t = window.useT();
  const isA = variant === 'A';
  const cta = isA ? lightCtaA : lightCtaB;

  return (
    <Section id="pain">
      <div className="grid grid-cols-12 gap-8 lg:gap-16 items-start">
        <div className="col-span-12 lg:col-span-5">
          <Eyebrow>{t.pain.eyebrow}</Eyebrow>
          <h2 className="font-display text-h1 mt-5">
            {t.pain.h2}
          </h2>
          <p className="text-body-lg text-text-secondary mt-6">
            {t.pain.sub1}
          </p>
          <p className="text-body text-text-primary/80 mt-4">
            {t.pain.sub2}
            <br />
            <span className="font-medium text-text-primary">{t.pain.sub2b}</span>
          </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-8 text-accent font-medium hover:gap-3 transition-all">
            {cta.text} <Icon.ArrowSmall />
          </a>
        </div>

        <div className="col-span-12 lg:col-span-7">
          <ol className="border-t border-border">
            {t.pain.items.map((it, i) => (
              <li
                key={i}
                className="group grid grid-cols-[auto_1fr] gap-x-6 md:gap-x-10 items-baseline border-b border-border py-5 md:py-6"
              >
                <span className="font-mono text-[12px] tracking-[0.18em] text-text-muted tabular-nums pt-1">
                  {String(i + 1).padStart(2, '0')}
                </span>
                <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                  <span className="font-display text-[24px] md:text-[28px] leading-tight tracking-tight text-text-primary">
                    {it.k}
                  </span>
                  <span className="text-[15px] md:text-[17px] text-text-secondary leading-snug relative">
                    <span className="relative">
                      {it.t}
                      <span
                        className="absolute left-0 right-0 top-1/2 h-[1.5px] bg-text-secondary"
                        aria-hidden="true"
                      />
                    </span>
                  </span>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </Section>);
};

// === SOLUTION ===
const Solution = () => {
  const t = window.useT();

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

      <div className="mt-12 relative rounded-2xl overflow-hidden">
        <Photo
          src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=80&auto=format&fit=crop"
          alt="Современная кухня"
          className="aspect-[16/7] w-full !rounded-2xl"
          position="center" />

        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
        <div className="absolute inset-x-0 bottom-0 p-6 md:p-10 lg:p-14">
          <div className="max-w-[58ch] text-white">
            <Icon.Quote size={22} className="opacity-70" />
            <p className="font-display text-[22px] md:text-[28px] lg:text-[32px] mt-3 leading-snug">
              {t.solution.quote}
            </p>
          </div>
        </div>
      </div>

      <div className="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
        {t.solution.cards.map((c, i) =>
        <div key={i} className="bg-bg rounded-lg p-6 border border-border h-full flex flex-col">
            <div className="h-10 w-10 rounded-md bg-highlight-soft text-highlight flex items-center justify-center">
              {[<Icon.Doc/>, <Icon.Tools/>, <Icon.Gear/>, <Icon.ShieldCheck/>][i]}
            </div>
            <h3 className="font-display text-[20px] mt-5 leading-tight tracking-tight">{c.t}</h3>
            <p className="text-[14.5px] text-text-secondary mt-3 leading-relaxed">{c.d}</p>
          </div>
        )}
      </div>
    </Section>);
};

// === ANY REQUEST ===
const AnyRequest = ({ variant = 'A' }) => {
  const t = window.useT();
  const roomIcons = [<Icon.Tools size={18}/>, <Icon.Sparkle size={18}/>, <Icon.Bell size={18}/>, <Icon.Smile size={18}/>, <Icon.Doc size={18}/>, <Icon.Map size={18}/>];
  const roomSrcs = [
    'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=900&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1567767292278-a4f21aa2d36e?w=900&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1617806118233-18e1de247200?w=900&q=80&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1604014237800-1c9102c219da?w=900&q=80&auto=format&fit=crop',
  ];

  const waHref = 'https://wa.me/' + window.WA_NUMBERS[variant] + '?text=' + encodeURIComponent(t.cta.anyReq.wa);
  return (
    <Section id="any-request">
      <div className="text-center max-w-[60ch] mx-auto">
        <Eyebrow className="justify-center">{t.anyReq.eyebrow}</Eyebrow>
        <h2 className="font-display text-h1 mt-5">
          {t.anyReq.h2}
        </h2>
        <p className="text-body-lg text-text-secondary mt-5">
          {t.anyReq.sub}
        </p>
      </div>

      <div className="mt-12 grid grid-cols-2 md:grid-cols-3 gap-4">
        {t.anyReq.rooms.map((label, i) =>
        <a key={i} href="#final" className="group relative aspect-[4/3] overflow-hidden rounded-lg">
            <Photo src={roomSrcs[i]} alt={label} className="absolute inset-0 w-full h-full" />
            <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent group-hover:from-black/70 transition-all" />
            <div className="absolute left-4 bottom-4 right-4 flex items-center gap-2 text-white">
              <span className="h-8 w-8 rounded-full bg-white/20 backdrop-blur flex items-center justify-center">
                {roomIcons[i]}
              </span>
              <span className="font-medium">{label}</span>
            </div>
          </a>
        )}
      </div>

      <div className="mt-12 grid md:grid-cols-2 gap-8 items-center bg-white border border-border rounded-xl p-6 md:p-10">
        <div>
          <p className="text-[15px] uppercase tracking-[0.16em] text-text-secondary font-semibold">{t.anyReq.secLabel}</p>
          <ul className="mt-5 space-y-3 text-[16px]">
            {t.anyReq.items.map((item, i) =>
            <li key={i} className="flex gap-3">
                <Icon.ArrowSmall className="text-highlight shrink-0 mt-1.5" />
                <span>{item}</span>
              </li>
            )}
          </ul>
        </div>
        <div className="flex flex-col items-start md:items-end">
          <div className="flex flex-col items-center gap-3">
            <Button as="a" href={waHref} target="_blank" rel="noopener"
              onClick={() => window.gtrack('whatsapp_click', { location: 'any_request' })}
              iconRight={<Icon.Arrow size={18} />}>
              {t.cta.anyReq.btn}
            </Button>
            <span className="text-small text-text-secondary">{t.cta.anyReq.sub}</span>
          </div>
        </div>
      </div>
    </Section>);
};

// === SYSTEM PILLARS ===
const SystemPillars = () => {
  const t = window.useT();
  const pillarIcons = [<Icon.Doc size={28}/>, <Icon.Calendar size={28}/>, <Icon.Users size={28}/>, <Icon.ShieldCheck size={28}/>, <Icon.Chart size={28}/>];

  return (
    <Section id="pillars" className="bg-dark text-white relative overflow-hidden">
      <div className="absolute inset-0 -z-0">
        <img
          src="/images/block2_backgound_image.jpg"
          alt=""
          aria-hidden="true"
          className="absolute inset-0 w-full h-full object-cover"
          style={{ filter: 'brightness(0.55) saturate(0.85)' }}
        />
        <div
          className="absolute inset-0"
          style={{
            background:
              'radial-gradient(60% 50% at 70% 35%, rgba(196,123,58,0.18) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.78) 60%, rgba(20,16,12,0.92) 100%)',
          }}
        />
      </div>

      <div className="relative z-10">
        <div className="text-center max-w-[60ch] mx-auto">
          <Eyebrow dark className="justify-center !text-white/55">{t.pillars.eyebrow}</Eyebrow>
          <h2 className="font-display text-h1 mt-5 text-white">
            {t.pillars.h2pre}<em className="not-italic text-highlight">{t.pillars.h2hi}</em>
          </h2>
        </div>

        <div className="mt-14 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-white/15 border-y border-white/15 bg-black/20 backdrop-blur-sm rounded-xl">
          {t.pillars.items.map((p, i) => (
            <div key={i} className="px-6 py-9 lg:px-7 lg:py-10 flex flex-col items-center text-center">
              <div className="text-white/40">
                <Icon.ArrowSmall className="rotate-[-45deg]" size={18}/>
              </div>
              <div className="mt-4 text-highlight">
                {pillarIcons[i]}
              </div>
              <h3 className="font-display text-[20px] md:text-[22px] mt-6 leading-tight tracking-tight text-white">
                {p.t}
              </h3>
              <p className="text-[14px] text-white/70 mt-3 leading-relaxed max-w-[26ch]">
                {p.d}
              </p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
};