const { Button, IconButton, StatusDot, MonoLabel, BrandMark, SectionHead, FeatureItem, StepItem, PriceCard, FaqItem, CompareTable, Atmosphere } = window.MultitabsDesignSystem_8f59a9;

const DOWNLOAD = "/downloads/multitabs-setup.exe";
const PAGE = { width:"100%", maxWidth:"var(--page-max)", margin:"0 auto", padding:"0 24px" };
const SECTION = { padding:"clamp(56px, 9vw, 96px) 0" };

const LANG_STORAGE_KEY = "mt-lang";

function detectLang() {
  try {
    const saved = localStorage.getItem(LANG_STORAGE_KEY);
    if (saved === "pt" || saved === "en") return saved;
  } catch {}
  return (navigator.language || "").toLowerCase().startsWith("pt") ? "pt" : "en";
}

function Nav({ lang, onLangChange, c }) {
  return (
    <header style={{ position:"sticky", top:0, zIndex:20, background:"rgba(10,11,15,0.82)", backdropFilter:"blur(10px)", borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"flex", alignItems:"center", gap:20, minHeight:64, paddingTop:10, paddingBottom:10 }}>
        <BrandMark size={28} fontSize="var(--fs-15)" />
        <nav className="mt-nav" style={{ display:"flex", gap:22, marginLeft:14, minWidth:0 }}>
          {c.nav.links.map(([l,h]) => <a key={h} href={h} style={{ fontSize:"var(--fs-13)", fontWeight:600, color:"var(--ink-2)", textDecoration:"none", whiteSpace:"nowrap" }}>{l}</a>)}
        </nav>
        <span style={{ flex:1 }} />
        <div style={{ display:"flex", gap:2, padding:2, borderRadius:"var(--r-round)", border:"1px solid var(--line-2)" }}>
          {["pt","en"].map(code => (
            <button key={code} type="button" onClick={()=>onLangChange(code)} style={{
              border:"none", cursor:"pointer", padding:"4px 9px", borderRadius:"var(--r-round)",
              fontFamily:"var(--font-mono)", fontSize:"var(--fs-10)", textTransform:"uppercase", letterSpacing:"var(--ls-label)",
              background: lang===code ? "var(--accent-fill)" : "transparent",
              color: lang===code ? "var(--accent)" : "var(--ink-3)"
            }}>{code}</button>
          ))}
        </div>
        <Button variant="secondary" size="sm" onClick={()=>window.open(DOWNLOAD,"_blank")}>{c.nav.download}</Button>
      </div>
    </header>
  );
}

function Hero({ c, price }) {
  return (
    <section style={{ position:"relative", overflow:"hidden", borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ position:"absolute", inset:0, pointerEvents:"none" }}><Atmosphere bloom={false} /></div>
      <div style={{ ...PAGE, position:"relative", paddingTop:"clamp(48px,7vw,84px)", paddingBottom:"clamp(40px,6vw,64px)", display:"flex", flexDirection:"column", gap:28 }}>
        <div style={{ display:"flex", flexDirection:"column", gap:18, maxWidth:780 }}>
          <span style={{ alignSelf:"flex-start", display:"flex", alignItems:"center", gap:8, padding:"5px 11px", borderRadius:"var(--r-pill)", background:"var(--accent-fill)", border:"1px solid var(--red-a35)" }}>
            <StatusDot status="online" size={6} pulse />
            <MonoLabel tone="accent" size="var(--fs-10)">{c.hero.badge}</MonoLabel>
          </span>
          <h1 style={{ margin:0, fontSize:"clamp(34px, 6vw, var(--fs-64))", fontWeight:800, lineHeight:1.04, letterSpacing:"var(--ls-display)", color:"var(--ink-1)", textWrap:"balance" }}>
            {c.hero.title}
          </h1>
          <p style={{ margin:0, maxWidth:640, fontSize:"clamp(15px,1.6vw,18px)", lineHeight:"var(--lh-body)", color:"var(--ink-2)", textWrap:"pretty" }}>
            {c.hero.body}
          </p>
          <div style={{ display:"flex", gap:12, flexWrap:"wrap", alignItems:"center" }}>
            <Button variant="primary" size="lg" onClick={()=>window.open(DOWNLOAD,"_blank")}>{c.hero.download}</Button>
            <Button variant="ghost" size="lg" onClick={()=>window.open(price.buyUrl,"_blank")}>{c.hero.buy(price.text)}</Button>
            <MonoLabel tone="body" size="var(--fs-11)" caps={false}>{c.hero.meta}</MonoLabel>
          </div>
        </div>
        <AppMock height={640} count={4} cols="1fr 1fr" lang={price.lang} />
      </div>
    </section>
  );
}

function Features({ c }) {
  return (
    <section id="recursos" style={{ ...SECTION, borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"flex", flexDirection:"column", gap:36 }}>
        <SectionHead eyebrow={c.features.eyebrow} title={c.features.title} lead={c.features.lead} />
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(250px,1fr))", gap:16 }}>
          {c.features.items.map(([t,d],i) => <FeatureItem key={t} glyph={String(i+1).padStart(2,"0")} title={t}>{d}</FeatureItem>)}
        </div>
      </div>
    </section>
  );
}

function Isolation({ c, price }) {
  return (
    <section style={{ ...SECTION, borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"grid", gridTemplateColumns:"minmax(280px,1fr) minmax(0,1.25fr)", gap:"40px 56px", alignItems:"center" }}>
        <div style={{ display:"flex", flexDirection:"column", gap:26 }}>
          <SectionHead eyebrow={c.isolation.eyebrow} title={c.isolation.title} lead={c.isolation.lead} />
          <div style={{ display:"flex", flexDirection:"column", gap:18 }}>
            {c.isolation.items.map(([t,d]) => <FeatureItem key={t} title={t} boxed={false}>{d}</FeatureItem>)}
          </div>
        </div>
        <AppMock height={640} count={4} cols="1fr 1fr" lang={price.lang} />
      </div>
    </section>
  );
}

function Compare({ c }) {
  const rows = c.compare.rows.map(label => ({ label, values:[true,false] }));
  return (
    <section style={{ ...SECTION, borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"flex", flexDirection:"column", gap:28 }}>
        <SectionHead eyebrow={c.compare.eyebrow} title={c.compare.title} />
        <CompareTable columns={c.compare.columns} rows={rows} />
      </div>
    </section>
  );
}

function Steps({ c, price }) {
  return (
    <section id="como-funciona" style={{ ...SECTION, borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"grid", gridTemplateColumns:"minmax(260px,1fr) minmax(0,1.3fr)", gap:"48px 56px", alignItems:"start" }}>
        <SectionHead eyebrow={c.steps.eyebrow} title={c.steps.title} lead={c.steps.lead} />
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(230px,1fr))", gap:"22px 32px" }}>
          {c.steps.items.map(([t,d],i) => <StepItem key={t} n={i+1} title={t}>{typeof d==="function" ? d(price.text) : d}</StepItem>)}
        </div>
      </div>
    </section>
  );
}

function Pricing({ c, price }) {
  return (
    <section id="preco" style={{ ...SECTION, borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"grid", gridTemplateColumns:"minmax(280px,1fr) minmax(300px,360px)", gap:"40px 40px", alignItems:"center" }}>
        <div style={{ display:"flex", flexDirection:"column", gap:26 }}>
          <SectionHead eyebrow={c.pricing.eyebrow} title={c.pricing.title} lead={c.pricing.lead(price.text)} />
          <div style={{ display:"flex", flexDirection:"column", gap:14, padding:"var(--sp-11)", borderRadius:"var(--r-8)", background:"var(--bg-2)", border:"1px solid var(--line-1)" }}>
            <div style={{ display:"flex", alignItems:"baseline", gap:10 }}>
              <span style={{ fontSize:"var(--fs-20)", fontWeight:800 }}>{c.pricing.trialLabel}</span>
              <MonoLabel size="var(--fs-11)">{c.pricing.trialTag}</MonoLabel>
            </div>
            <ul style={{ margin:0, padding:0, listStyle:"none", display:"flex", flexDirection:"column", gap:7 }}>
              {c.pricing.trialBullets.map(b => (
                <li key={b} style={{ display:"flex", gap:9, fontSize:"var(--fs-13)", color:"var(--ink-2)" }}><span style={{ color:"var(--accent)" }}>✓</span>{b}</li>
              ))}
            </ul>
            <Button variant="secondary" full onClick={()=>window.open(DOWNLOAD,"_blank")}>{c.pricing.trialButton}</Button>
          </div>
        </div>
        <PriceCard badge={c.pricing.cardBadge} plan={c.pricing.cardPlan} seats={c.pricing.cardSeats} price={price.text}
          note={c.pricing.cardNote} cta={c.pricing.cardCta} onBuy={()=>window.open(price.buyUrl,"_blank")}
          bullets={c.pricing.cardBullets} />
      </div>
    </section>
  );
}

function Disclaimer({ c }) {
  return (
    <section style={{ ...SECTION, borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"flex", flexDirection:"column", gap:20, maxWidth:820 }}>
        <SectionHead eyebrow={c.disclaimer.eyebrow} title={c.disclaimer.title} />
        <p style={{ margin:0, fontSize:"var(--fs-15)", lineHeight:"var(--lh-body)", color:"var(--ink-2)", textWrap:"pretty" }}>
          {c.disclaimer.body}
        </p>
      </div>
    </section>
  );
}

function Faq({ c, price }) {
  return (
    <section id="faq" style={{ ...SECTION, borderBottom:"1px solid var(--line-1)" }}>
      <div style={{ ...PAGE, display:"grid", gridTemplateColumns:"minmax(240px,1fr) minmax(0,1.6fr)", gap:"32px 56px", alignItems:"start" }}>
        <SectionHead eyebrow={c.faq.eyebrow} title={c.faq.title} />
        <div>{c.faq.items.map(([q,a],i) => <FaqItem key={q} q={q} a={typeof a==="function" ? a(price.text) : a} defaultOpen={i===0} />)}</div>
      </div>
    </section>
  );
}

function CTA({ c, price }) {
  return (
    <section style={{ ...SECTION }}>
      <div style={{ ...PAGE }}>
        <div style={{ position:"relative", overflow:"hidden", borderRadius:"var(--r-8)", border:"1px solid var(--red-a22)", background:"var(--bg-1)", padding:"clamp(28px,5vw,52px)", display:"flex", flexWrap:"wrap", gap:24, alignItems:"center", justifyContent:"space-between" }}>
          <Atmosphere />
          <div style={{ position:"relative", display:"flex", flexDirection:"column", gap:10, maxWidth:540 }}>
            <h2 style={{ margin:0, fontSize:"clamp(24px,3vw,var(--fs-32))", fontWeight:800, letterSpacing:"var(--ls-display)" }}>{c.cta.title}</h2>
            <p style={{ margin:0, fontSize:"var(--fs-15)", lineHeight:"var(--lh-body)", color:"var(--ink-2)" }}>{c.cta.body(price.text)}</p>
          </div>
          <div style={{ position:"relative", display:"flex", flexDirection:"column", gap:8, alignItems:"flex-start" }}>
            <Button variant="primary" size="lg" onClick={()=>window.open(DOWNLOAD,"_blank")}>{c.cta.button}</Button>
            <a href="mailto:contato@multitabs.site" style={{ fontFamily:"var(--font-mono)", fontSize:"var(--fs-11)" }}>contato@multitabs.site</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ c, price }) {
  return (
    <footer style={{ borderTop:"1px solid var(--line-1)", background:"var(--bg-2)", padding:"36px 0" }}>
      <div style={{ ...PAGE, display:"flex", flexWrap:"wrap", gap:20, alignItems:"center" }}>
        <BrandMark size={28} />
        <nav style={{ display:"flex", flexWrap:"wrap", gap:18, flex:1 }}>
          <a href={DOWNLOAD} style={{ fontSize:"var(--fs-13)", color:"var(--ink-3)" }}>{c.footer.links.download}</a>
          <a href={price.buyUrl} style={{ fontSize:"var(--fs-13)", color:"var(--ink-3)" }}>{c.footer.links.buy}</a>
          <a href="#recursos" style={{ fontSize:"var(--fs-13)", color:"var(--ink-3)" }}>{c.footer.links.features}</a>
          <a href="#preco" style={{ fontSize:"var(--fs-13)", color:"var(--ink-3)" }}>{c.footer.links.pricing}</a>
          <a href="#faq" style={{ fontSize:"var(--fs-13)", color:"var(--ink-3)" }}>{c.footer.links.faq}</a>
          <a href="/changelog.html" style={{ fontSize:"var(--fs-13)", color:"var(--ink-3)" }}>{c.footer.links.changelog}</a>
          <a href="mailto:contato@multitabs.site" style={{ fontSize:"var(--fs-13)", color:"var(--ink-3)" }}>{c.footer.links.contact}</a>
        </nav>
        <MonoLabel tone="meta" size="var(--fs-10)" caps={false}>{c.footer.copyright}</MonoLabel>
      </div>
    </footer>
  );
}

function Site() {
  const [lang, setLang] = React.useState(detectLang);

  function handleLangChange(next) {
    setLang(next);
    try { localStorage.setItem(LANG_STORAGE_KEY, next); } catch {}
  }

  React.useEffect(() => { document.documentElement.lang = lang === "pt" ? "pt-BR" : "en"; }, [lang]);

  const c = window.MultitabsCopy[lang];
  const price = { text: window.MultitabsCopy.PRICE[lang], buyUrl: window.MultitabsCopy.BUY[lang], lang };

  return (
    <div style={{ background:"var(--bg-0)", minHeight:"100vh" }}>
      <Nav lang={lang} onLangChange={handleLangChange} c={c} />
      <Hero c={c} price={price} />
      <Features c={c} />
      <Isolation c={c} price={price} />
      <Compare c={c} />
      <Steps c={c} price={price} />
      <Pricing c={c} price={price} />
      <Disclaimer c={c} />
      <Faq c={c} price={price} />
      <CTA c={c} price={price} />
      <Footer c={c} price={price} />
    </div>
  );
}

Object.assign(window, { Site, Nav, Hero, Features, Isolation, Compare, Steps, Pricing, Disclaimer, Faq, CTA, Footer });
