// LUXOMES — Home page

function HostawaySearchWidget({ lang }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    ref.current.innerHTML = '<div id="hostaway-booking-widget"></div>';
    const init = () => {
      if (window.searchBar) {
        try {
          window.searchBar({
            baseUrl: 'https://luxomes.holidayfuture.com/',
            showLocation: true,
            color: '#6b7f5c',
            rounded: true,
            openInNewTab: true,
            font: 'Inter',
          });
        } catch (e) { console.warn('searchBar init failed', e); }
      }
    };
    if (window.searchBar) { init(); return; }
    const existing = document.querySelector('script[data-hostaway-search]');
    if (existing) { existing.addEventListener('load', init); return; }
    const s = document.createElement('script');
    s.src = 'https://d2q3n06xhbi0am.cloudfront.net/widget.js?1640277196';
    s.async = true;
    s.setAttribute('data-hostaway-search', '1');
    s.addEventListener('load', init);
    document.body.appendChild(s);
  }, []);
  return <div ref={ref} style={{ width: '100%' }}/>;
}

function HomeHero({ t, tweaks, lang }) {
  // Compact 3-row layout — fits above the fold on standard laptops.
  //   ROW 1 — text (left) + apartment photo with accent overlay (right) — landscape 4:3 frame
  //   ROW 2 — booking widget (full-width, prominent — visible above the fold)
  //   ROW 3 — trust stats (under widget)
  return (
    <section style={{ paddingTop: 36, paddingBottom: 48 }}>
      <div className="container">
        {/* ROW 1: text + image — compact, image is landscape 4:3 (shorter than portrait) */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center", marginBottom: 32 }}>
          <div>
            <div className="eyebrow">{t.home.heroEyebrow}</div>
            <h1 className="h-display" style={{ marginTop: 18, marginBottom: 24, whiteSpace: "pre-line", fontSize: "clamp(36px, 4.6vw, 64px)", lineHeight: 1.05 }}>{t.home.heroTitle}</h1>
            <p className="body-lg" style={{ maxWidth: 500, marginBottom: 0 }}>{t.home.heroLead}</p>
          </div>
          <div style={{ position: "relative" }}>
            <div className="ph" style={{ aspectRatio: "4/3", backgroundImage: `url(${IMG.heroMain})`, borderRadius: 6 }}>
              <SEOImg src={IMG.heroMain} alt={lang === "de" ? "LUXOMES Serviced Apartment Wohnbereich mit Designermöbeln" : "LUXOMES serviced apartment living area with designer furniture"}/>
            </div>
          </div>
        </div>

        {/* ROW 2: booking widget — slightly more compact */}
        <div style={{ background: "var(--bg)", border: "1px solid var(--line-strong)", boxShadow: "var(--shadow-lift)", padding: "16px 24px", borderRadius: 10, marginBottom: 28 }}>
          <div style={{ marginBottom: 10, display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }}>
            <div className="eyebrow" style={{ margin: 0 }}>{t.home.widgetHeadline}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 16, lineHeight: 1.25, color: "var(--ink-soft)" }}>
              · {t.home.widgetSub}
            </div>
          </div>
          <HostawaySearchWidget lang={lang}/>
        </div>

        {/* ROW 3: trust stats — compact, under widget */}
        <div style={{ display: "flex", gap: 48, paddingTop: 24, borderTop: "1px solid var(--line)", flexWrap: "wrap" }}>
          <div><div style={{ fontFamily: "var(--font-display)", fontSize: 30, lineHeight: 1 }}>40+</div><div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.15em", marginTop: 6 }}>Apartments</div></div>
          <div><div style={{ fontFamily: "var(--font-display)", fontSize: 30, lineHeight: 1 }}>24/7</div><div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.15em", marginTop: 6 }}>Support</div></div>
          <div><div style={{ fontFamily: "var(--font-display)", fontSize: 30, lineHeight: 1 }}>{lang === "de" ? "4,8★" : "4.8★"}</div><div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.15em", marginTop: 6 }}>{lang === "de" ? "Gästebewertung" : "Guest rating"}</div></div>
          <div><div style={{ fontFamily: "var(--font-display)", fontSize: 30, lineHeight: 1 }}>4</div><div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.15em", marginTop: 6 }}>{lang === "de" ? "Standorte" : "Locations"}</div></div>
        </div>
      </div>
    </section>
  );
}

function AudienceCTAs({ t, lang, setPage }) {
  // Two-card audience routing directly under the hero (guests already have the
  // booking widget visible at the top of the page).
  // Mirrors the Arbio approach: clear paths for owners/investors and for hosts.
  const cards = [
    {
      key: "owner",
      eyebrow: t.home.audienceOwnerEyebrow,
      title: t.home.audienceOwnerTitle,
      body: t.home.audienceOwnerBody,
      cta: t.home.audienceOwnerCta,
      onClick: () => { setPage("realestate"); window.scrollTo(0, 0); },
      tone: "dark",
    },
    {
      key: "host",
      eyebrow: t.home.audienceHostEyebrow,
      title: t.home.audienceHostTitle,
      body: t.home.audienceHostBody,
      cta: t.home.audienceHostCta,
      onClick: () => { setPage("management"); window.scrollTo(0, 0); },
      tone: "soft",
    },
  ];

  return (
    <section style={{ paddingTop: 24, paddingBottom: 72 }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 32 }}>
          <div className="section-head-text">
            <div className="eyebrow">{t.home.audienceEyebrow}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 18 }}>{t.home.audienceTitle}</h2>
            <p className="body-lg" style={{ maxWidth: 720 }}>{t.home.audienceLead}</p>
          </div>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {cards.map(c => (
            <button
              key={c.key}
              onClick={c.onClick}
              style={{
                textAlign: "left", display: "flex", flexDirection: "column", gap: 12,
                padding: "32px 30px 28px",
                background: c.tone === "dark" ? "var(--ink)" : "var(--surface)",
                color: c.tone === "dark" ? "oklch(0.94 0 0)" : "var(--ink)",
                border: "1px solid " + (c.tone === "dark" ? "var(--ink)" : "var(--line)"),
                borderRadius: 8,
                cursor: "pointer",
                transition: "transform .25s ease, box-shadow .25s ease",
                minHeight: 280,
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "var(--shadow-lift)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
            >
              <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: c.tone === "dark" ? "var(--accent)" : "var(--accent)", fontWeight: 600 }}>
                {c.eyebrow}
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 1.8vw, 26px)", lineHeight: 1.25, color: c.tone === "dark" ? "#fff" : "var(--ink)", margin: 0 }}>
                {c.title}
              </h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: c.tone === "dark" ? "oklch(0.85 0 0)" : "var(--ink-soft)", flex: 1, margin: 0 }}>
                {c.body}
              </p>
              <div style={{ marginTop: 4, display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, color: c.tone === "dark" ? "var(--accent)" : "var(--accent)" }}>
                {c.cta} <Icon name="arrow" size={14}/>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function PopularSection({ t, lang, tweaks }) {
  const featured = HOME_FEATURED_IDS.map(id => APARTMENTS.find(a => a.id === id)).filter(Boolean);
  const cols = tweaks.cards === "magazine" ? "1fr" : "repeat(4, 1fr)";
  return (
    <section style={{ background: "var(--surface)" }}>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <Reveal>
              <div className="eyebrow">{t.home.popularEyebrow}</div>
              <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 22 }}>{t.home.popularTitle}</h2>
              <p className="body-lg">{t.home.popularLead}</p>
            </Reveal>
          </div>
        </div>
        <Reveal>
          <div className="grid" style={{ gridTemplateColumns: cols, gap: tweaks.cards === "magazine" ? 0 : 28 }}>
            {featured.map(a => <ApartmentCard key={a.id} apt={a} lang={lang} variant={tweaks.cards} t={t}/>)}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BenefitsSection({ t, lang }) {
  return (
    <section>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 72 }}>
          <div className="section-head-text">
            <Reveal>
              <div className="eyebrow">{t.home.benefitsEyebrow}</div>
              <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 22 }}>{t.home.benefitsTitle}</h2>
              <p className="body-lg">{t.home.benefitsLead}</p>
            </Reveal>
          </div>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)", borderLeft: "1px solid var(--line)" }}>
          {BENEFITS.map((b, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{ padding: "48px 40px", borderRight: "1px solid var(--line)", borderBottom: "1px solid var(--line)", minHeight: 320, display: "flex", flexDirection: "column", gap: 20 }}>
                <div style={{ width: 48, height: 48, borderRadius: "50%", border: "1px solid var(--line-strong)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--accent)" }}>
                  <Icon name={b.icon} size={22}/>
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1.1 }}>{b.title[lang]}</h3>
                <p className="body-md">{b.body[lang]}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PremiumSection({ t, lang }) {
  return (
    <section style={{ background: "var(--ink)", color: "oklch(0.95 0.005 110)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ position: "relative" }}>
            <div className="ph" style={{ aspectRatio: "4/5", backgroundImage: `url(${IMG.bed})` }}/>
            <div style={{ position: "absolute", top: -24, right: -24, background: "var(--accent)", color: "var(--accent-ink)", padding: "24px 28px", fontFamily: "var(--font-display)", fontSize: 20, maxWidth: 220 }}>
              {lang === "de" ? "Entworfen, um zu bleiben." : "Designed to stay."}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ color: "var(--accent)" }}>{t.home.premiumEyebrow}</div>
            <h2 className="h-xl" style={{ color: "#fff", marginTop: 18, marginBottom: 28, whiteSpace: "pre-line" }}>{t.home.premiumTitle}</h2>
            <p className="body-lg" style={{ color: "oklch(0.82 0.005 110)", marginBottom: 20 }}>{t.home.premiumLead}</p>
            <p className="body-lg" style={{ color: "oklch(0.82 0.005 110)", marginBottom: 36 }}>{t.home.premiumLead2}</p>
            <a href="https://luxomes.holidayfuture.com/" target="_blank" rel="noreferrer" className="btn btn-primary">{t.common.bookNow} <Icon name="arrow" size={16}/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessSection({ t, lang }) {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <Reveal>
              <div className="eyebrow">{t.home.processEyebrow}</div>
              <h2 className="h-xl" style={{ marginTop: 18 }}>{t.home.processTitle}</h2>
            </Reveal>
          </div>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {PROCESS_STEPS.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{ padding: "40px 32px", background: "var(--surface)", minHeight: 320, position: "relative", borderRadius: 4 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 72, color: "var(--accent)", lineHeight: 1, marginBottom: 24 }}>{s.n}</div>
                <h3 className="h-md" style={{ marginBottom: 14 }}>{s.title[lang]}</h3>
                <p className="body-md">{s.body[lang]}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection({ t, lang }) {
  return (
    <section style={{ background: "var(--surface)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
          <div className="mobile-static-aside" style={{ position: "sticky", top: 120, alignSelf: "start" }}>
            <div className="eyebrow">{t.home.faqEyebrow}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 24 }}>{t.home.faqTitle}</h2>
            <p className="body-md" style={{ marginBottom: 32 }}>
              {lang === "de" ? "Keine passende Antwort gefunden? Schreib uns direkt – wir antworten meist innerhalb eines Tages." : "Didn't find what you need? Drop us a line — we usually reply within a day."}
            </p>
            <button onClick={() => { window.__setPage?.("contact"); window.scrollTo(0,0); }} className="btn-link">{t.common.contact} <Icon name="arrow" size={14}/></button>
          </div>
          <div>
            <Accordion items={FAQS} lang={lang}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactInlineSection({ t, lang }) {
  return (
    <section>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow">{t.home.contactEyebrow}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 24, whiteSpace: "pre-line" }}>{t.home.contactTitle}</h2>
            <p className="body-lg" style={{ marginBottom: 36 }}>{t.home.contactLead}</p>
            <div style={{ display: "grid", gap: 16, fontSize: 15 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="pin" size={16}/></div>
                <span>An der Burg 5, 85716 Unterschleißheim</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="phone" size={16}/></div>
                <a href="tel:+498969337893" style={{ color: "inherit" }}>+49 89 693378930</a>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="mail" size={16}/></div>
                <a href="mailto:info@luxomes.com" style={{ color: "inherit" }}>info@luxomes.com</a>
              </div>
            </div>
          </div>
          <div style={{ background: "var(--surface)", padding: 40, borderRadius: 8, border: "1px solid var(--line)" }}>
            <MiniContactForm t={t} lang={lang}/>
          </div>
        </div>
      </div>
    </section>
  );
}

// Shared submission helper — posts the form to the configured backend.
//
// Preferred backend: Google Apps Script Web App (CONFIG.appsScriptEndpoint).
// Fallback: Formspree (CONFIG.formspreeEndpoint).
//
// Apps Script endpoints expect application/json bodies; Formspree accepts
// multipart/form-data. The helper picks the right format for each.
//
// Exposed on window so all contact forms (home + contact page + mgmt lead) share one path.
async function submitContact(form, extra = {}) {
  // Collect form fields into a plain object
  const fd = new FormData(form);
  const payload = {};
  fd.forEach((v, k) => { payload[k] = v; });
  Object.assign(payload, extra);
  // Honeypot — bots fill this, humans don't. Reject if present.
  if (payload._gotcha) return { ok: false, reason: "spam" };

  const cfg = window.CONFIG || {};
  const appsScript = cfg.appsScriptEndpoint || "";
  const formspree = cfg.formspreeEndpoint || "";

  // Prefer Apps Script (LUXOMES Google account, our own backend)
  if (appsScript && !appsScript.includes("PASTE_") && !appsScript.includes("YOUR_")) {
    try {
      const res = await fetch(appsScript, {
        method: "POST",
        // Avoid preflight CORS — use text/plain content type with JSON body
        headers: { "Content-Type": "text/plain;charset=utf-8" },
        body: JSON.stringify(payload),
      });
      if (res.ok) return { ok: true };
      return { ok: false, reason: "server" };
    } catch (e) {
      return { ok: false, reason: "network" };
    }
  }

  // Fallback to Formspree
  if (formspree && !formspree.includes("YOUR_FORM_ID")) {
    try {
      const res = await fetch(formspree, {
        method: "POST",
        body: fd,
        headers: { Accept: "application/json" },
      });
      return { ok: res.ok, reason: res.ok ? "" : "server" };
    } catch (e) {
      return { ok: false, reason: "network" };
    }
  }

  // Neither configured — fail loudly in console, gracefully in UI
  console.warn("No form endpoint configured. Set CONFIG.appsScriptEndpoint (preferred) or CONFIG.formspreeEndpoint in src/data.jsx");
  return { ok: false, reason: "unconfigured" };
}
window.submitContact = submitContact;

function MiniContactForm({ t, lang }) {
  const [state, setState] = useState("idle"); // idle | sending | sent | error
  const onSubmit = async (e) => {
    e.preventDefault();
    setState("sending");
    const result = await submitContact(e.target, { _subject: "LUXOMES Kontaktanfrage (Home)", source: "home-mini-form" });
    if (result.ok) {
      setState("sent");
      e.target.reset();
    } else {
      setState("error");
    }
  };
  return (
    <form onSubmit={onSubmit} style={{ display: "grid", gap: 16 }}>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginBottom: 8 }}>
        {lang === "de" ? "Schreib uns" : "Write to us"}
      </div>
      <Input label={lang === "de" ? "Name" : "Name"} name="name" required/>
      <Input label="Email" name="email" type="email" required/>
      <Input label={lang === "de" ? "Telefon" : "Phone"} name="phone" type="tel" required/>
      <Textarea label={lang === "de" ? "Nachricht" : "Message"} name="message" required/>
      {/* Honeypot — invisible to humans, irresistible to bots */}
      <input type="text" name="_gotcha" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", opacity: 0 }}/>
      <button type="submit" className="btn btn-primary" style={{ justifyContent: "center" }} disabled={state === "sending"}>
        {state === "sent" ? <><Icon name="check" size={16}/> {lang === "de" ? "Gesendet" : "Sent"}</>
          : state === "sending" ? (lang === "de" ? "Wird gesendet…" : "Sending…")
          : state === "error" ? (lang === "de" ? "Fehler — bitte erneut" : "Error — try again")
          : <>{lang === "de" ? "Nachricht senden" : "Send message"} <Icon name="arrow" size={16}/></>}
      </button>
      {state === "sent" && (
        <div style={{ fontSize: 13, color: "var(--accent)", textAlign: "center" }}>
          {lang === "de" ? "Danke — wir melden uns innerhalb von 24 Stunden." : "Thanks — we'll get back to you within 24 hours."}
        </div>
      )}
    </form>
  );
}

function Input({ label, ...props }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{label}</div>
      <input {...props} style={{ width: "100%", padding: "12px 14px", border: "1px solid var(--line)", borderRadius: 4, background: "var(--bg)", color: "var(--ink)", fontFamily: "inherit", fontSize: 15 }}/>
    </label>
  );
}
function Textarea({ label, ...props }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{label}</div>
      <textarea {...props} rows={4} style={{ width: "100%", padding: "12px 14px", border: "1px solid var(--line)", borderRadius: 4, background: "var(--bg)", color: "var(--ink)", fontFamily: "inherit", fontSize: 15, resize: "vertical" }}/>
    </label>
  );
}
function Select({ label, options, ...props }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{label}</div>
      <select {...props} style={{ width: "100%", padding: "12px 14px", border: "1px solid var(--line)", borderRadius: 4, background: "var(--bg)", color: "var(--ink)", fontFamily: "inherit", fontSize: 15 }}>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}

function CTABanner({ t, lang, setPage }) {
  return (
    <section style={{ padding: 0 }}>
      <div className="container">
        <div style={{ background: "var(--accent)", color: "var(--accent-ink)", padding: "80px 64px", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center", borderRadius: 4 }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--accent-ink)", opacity: 0.7 }}>{lang === "de" ? "Für Eigentümer & Investoren" : "For owners & investors"}</div>
            <h2 className="h-xl" style={{ color: "var(--accent-ink)", marginTop: 18, marginBottom: 20, whiteSpace: "pre-line" }}>{t.home.ctaBannerTitle}</h2>
            <p style={{ fontSize: 17, opacity: 0.85, maxWidth: 560 }}>{t.home.ctaBannerText}</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start", justifySelf: "end" }}>
            <button onClick={() => { setPage("management"); window.scrollTo(0,0); }} className="btn" style={{ background: "var(--accent-ink)", color: "var(--accent)" }}>
              {lang === "de" ? "Verwaltungsservices ansehen" : "View management services"} <Icon name="arrow" size={16}/>
            </button>
            <button onClick={() => { setPage("realestate"); window.scrollTo(0,0); }} className="btn-link" style={{ color: "var(--accent-ink)", borderColor: "var(--accent-ink)" }}>
              {lang === "de" ? "Real Estate ansehen" : "View real estate"} <Icon name="arrow" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ t, lang, tweaks, setPage }) {
  return (
    <>
      <HomeHero t={t} tweaks={tweaks} lang={lang}/>
      <AudienceCTAs t={t} lang={lang} setPage={setPage}/>
      <PopularSection t={t} lang={lang} tweaks={tweaks}/>
      <BenefitsSection t={t} lang={lang}/>
      <PremiumSection t={t} lang={lang}/>
      <ProcessSection t={t} lang={lang}/>
      <FAQSection t={t} lang={lang}/>
      <ContactInlineSection t={t} lang={lang}/>
      <CTABanner t={t} lang={lang} setPage={setPage}/>
    </>
  );
}

Object.assign(window, { HomePage, Input, Textarea, Select });