// App: language detection, A/B, Tweaks panel, render

const meta = (() => {
  try { return JSON.parse(document.getElementById('page-meta').textContent); }
  catch (e) { return { variant: 'A', lang: 'es' }; }
})();

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "A",
  "accent": "#4d98d3",
  "showStickyCTA": true,
  "lang": "es"
}/*EDITMODE-END*/;

const LANGS = ['es', 'ru', 'ca', 'en'];
const WA_NUMBER   = '34641494075'; // variant A: photo estimate
const WA_NUMBER_B = '34641493178'; // variant B: site visit booking
window.WA_NUMBERS = { A: WA_NUMBER, B: WA_NUMBER_B };
const wa = (text) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(text)}`;

// Analytics helper — fires GA4 events (safe if gtag not loaded)
window.gtrack = (eventName, params) => {
  try { if (typeof gtag === 'function') gtag('event', eventName, params || {}); } catch(e) {}
};

// Calendly postMessage events → GA4
window.addEventListener('message', (e) => {
  if (e.data && e.data.event) {
    if (e.data.event === 'calendly.date_and_time_selected') {
      window.gtrack('calendly_date_selected');
    }
    if (e.data.event === 'calendly.event_scheduled') {
      window.gtrack('contact_form_submit'); // Calendly booking = lead, same as form
    }
  }
});

const detectLang = () => {
  // 1. URL path segment: /es/, /ru/, /ca/, /en/
  const seg = location.pathname.split('/').find(s => LANGS.includes(s));
  if (seg) return seg;
  // 2. page-meta JSON
  if (meta.lang && LANGS.includes(meta.lang)) return meta.lang;
  // 3. browser language
  const nav = (navigator.language || 'es').slice(0, 2).toLowerCase();
  return LANGS.includes(nav) ? nav : 'es';
};

const detectVariant = () => {
  // URL path: /es/b/ or /ru/b/ → variant B
  const parts = location.pathname.split('/').filter(Boolean);
  if (parts.includes('b')) return 'B';
  // query param (legacy)
  const urlVariant = new URLSearchParams(location.search).get('variant');
  if (urlVariant === 'B') return 'B';
  return null; // fall through to tweaks/meta
};

// Build CTAS object from translation dict t
const buildCTAS = (t) => ({
  hero: {
    A: { button: t.cta.heroA.btn, sub: t.cta.heroA.sub, action: wa(t.cta.heroA.wa), target: '_blank' },
    B: { button: t.cta.heroB.btn, sub: t.cta.heroB.sub, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
  pain: {
    A: { text: t.cta.painA.txt, action: wa(t.cta.painA.wa), target: '_blank' },
    B: { text: t.cta.painB.txt, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
  process: {
    A: { button: t.cta.procA.btn, sub: t.cta.procA.sub, action: wa(t.cta.procA.wa), target: '_blank' },
    B: { button: t.cta.procB.btn, sub: t.cta.procB.sub, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
  control: {
    A: { button: t.cta.ctrlA.btn, sub: t.cta.ctrlA.sub, action: wa(t.cta.ctrlA.wa), target: '_blank' },
    B: { button: t.cta.ctrlB.btn, sub: t.cta.ctrlB.sub, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
  nostress: {
    A: { button: t.cta.nsA.btn, sub: t.cta.nsA.sub, action: wa(t.cta.nsA.wa), target: '_blank' },
    B: { button: t.cta.nsB.btn, sub: t.cta.nsB.sub, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
  cases: {
    A: { text: t.cta.casA.txt, action: wa(t.cta.casA.wa), target: '_blank' },
    B: { text: t.cta.casB.txt, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
  cleaning: {
    A: { text: t.cta.clnA.txt, action: wa(t.cta.clnA.wa), target: '_blank' },
    B: { text: t.cta.clnB.txt, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
  compare: {
    A: { button: t.cta.cmpA.btn, sub: t.cta.cmpA.sub, action: wa(t.cta.cmpA.wa), target: '_blank' },
    B: { button: t.cta.cmpB.btn, sub: t.cta.cmpB.sub, action: t.finalB.calendlyUrl, target: '_blank', popup: true },
  },
});

// === Sticky bottom CTA on mobile ===
const StickyCTA = ({ variant }) => {
  const t = window.useT();
  const isA = variant === 'A';
  const calendlyUrl = t.finalB.calendlyUrl;
  const cta = isA
    ? { action: wa(t.cta.heroA.wa), label: t.cta.stickyA, icon: <Icon.Whatsapp size={18}/> }
    : { action: calendlyUrl, label: t.cta.stickyB, icon: <Icon.Calendar size={18}/> };
  const handleClick = !isA ? (e) => { e.preventDefault(); window.Calendly && window.Calendly.initPopupWidget({ url: calendlyUrl + '?primary_color=279ad8' }); } : undefined;
  return (
    <div className="md:hidden fixed bottom-3 inset-x-3 z-30">
      <a href={isA ? cta.action : ''} target={isA ? '_blank' : undefined} rel={isA ? 'noopener' : undefined}
        onClick={handleClick}
        className="flex items-center justify-center gap-2 h-14 rounded-full bg-accent text-white font-semibold shadow-button">
        {cta.icon}
        <span>{cta.label}</span>
      </a>
    </div>
  );
};

// === Custom variant control for the Tweaks panel ===
const VariantSwitch = ({ value, onChange }) => (
  <div className="grid grid-cols-2 gap-2">
    {[
      { v:'A', t:'Вариант A', sub:'Смета по фото · WhatsApp' },
      { v:'B', t:'Вариант B', sub:'Запись на замер · Календарь' },
    ].map((o)=>(
      <button key={o.v}
        onClick={()=>onChange(o.v)}
        className={`text-left p-3 rounded-md border transition-colors ${
          value===o.v ? 'bg-accent text-white border-accent' : 'bg-white border-[#E8E3DC] hover:border-accent'
        }`}>
        <div className="text-[13px] font-semibold">{o.t}</div>
        <div className={`text-[11px] mt-0.5 ${value===o.v ? 'text-white/85' : 'text-[#6B6560]'}`}>{o.sub}</div>
      </button>
    ))}
  </div>
);

// === App ===
const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Lang: URL path → page-meta → browser → 'es'
  const [lang, setLangState] = React.useState(detectLang);

  // Variant: URL path /b/ → query ?variant=B → tweaks panel → 'A'
  const urlVariant = detectVariant();
  const variant = urlVariant
    ? urlVariant
    : (tweaks.variant === 'B' ? 'B' : 'A');

  // Build translated CTAs whenever lang changes
  const t = window.T[lang] || window.T.es;
  const CTAS = buildCTAS(t);

  // Language switch: update state + pushState (no reload needed)
  const switchLang = (newLang) => {
    setLangState(newLang);
    try {
      const variantSuffix = variant === 'B' ? 'b/' : '';
      history.pushState(null, '', `/${newLang}/${variantSuffix}`);
    } catch(e) {}
  };

  React.useEffect(() => {
    if (tweaks.accent) document.documentElement.style.setProperty('--tw-accent', tweaks.accent);
  }, [tweaks.accent]);

  return (
    <window.LangContext.Provider value={lang}>
      <div className="relative">
        <Header variant={variant} lang={lang} setLang={switchLang}/>
        <main>
          <Hero variant={variant} ctaA={CTAS.hero.A} ctaB={CTAS.hero.B}/>
          <SystemPillars/>
          <Pain variant={variant} lightCtaA={CTAS.pain.A} lightCtaB={CTAS.pain.B}/>
          <SectionDivider className="max-w-content mx-auto px-5 md:px-8"/>
          <AnyRequest variant={variant}/>
          <HowItWorks variant={variant} ctaA={CTAS.process.A} ctaB={CTAS.process.B}/>
          <Transparency variant={variant} ctaA={CTAS.control.A} ctaB={CTAS.control.B}/>
          <NoStress variant={variant} ctaA={CTAS.nostress.A} ctaB={CTAS.nostress.B}/>
          <Team variant={variant}/>
          <SectionDivider className="max-w-content mx-auto px-5 md:px-8"/>
          <Cases variant={variant} lightCtaA={CTAS.cases.A} lightCtaB={CTAS.cases.B}/>
          <CleaningGift variant={variant} lightCtaA={CTAS.cleaning.A} lightCtaB={CTAS.cleaning.B}/>
          <Comparison variant={variant} ctaA={CTAS.compare.A} ctaB={CTAS.compare.B}/>
          <FinalCTA variant={variant}/>
        </main>
        <Footer variant={variant}/>

        {false && tweaks.showStickyCTA && <StickyCTA variant={variant}/>}

        {/* Tweaks Panel */}
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="A/B вариант лендинга"/>
          <VariantSwitch value={variant} onChange={(v)=>{
            setTweak('variant', v);
            const langSeg = LANGS.find(l => location.pathname.split('/').includes(l)) || lang;
            window.location.href = `/${langSeg}/${v === 'B' ? 'b/' : ''}`;
          }}/>

          <window.TweakSection label="Внешний вид"/>
          <window.TweakColor label="Акцент" value={tweaks.accent} onChange={(v)=>{
            setTweak('accent', v);
            document.documentElement.style.setProperty('--accent', v);
          }}/>
          <window.TweakToggle label="Sticky CTA (mobile)" value={tweaks.showStickyCTA} onChange={(v)=>setTweak('showStickyCTA', v)}/>

          <window.TweakSection label="Язык"/>
          <window.TweakRadio
            label="lang"
            value={lang}
            onChange={(v) => switchLang(v)}
            options={['es','ca','ru','en']}
          />
        </window.TweaksPanel>
      </div>
    </window.LangContext.Provider>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);