// Home page: hero, course overview, modules preview, who-for, about, services, testimonials, FAQ, newsletter.

const { useState, useEffect } = React;

const HOME_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "centered",
  "moduleCardStyle": "icon",
  "themeColor": "navy",
  "density": "comfortable",
  "showTestimonials": true,
  "showFAQ": true,
  "ctaPrimary": "Start learning",
  "ctaSecondary": "Browse modules"
} /*EDITMODE-END*/;

function HomeApp() {
  const [tweaks, setTweak] = useTweaks(HOME_DEFAULTS);
  useLucideIcons([tweaks]);
  useTweakBodyClasses(tweaks);

  const previewModules = SITE.MODULES.slice(0, 6);
  const [openFaq, setOpenFaq] = useState(0);
  const isEN = (window.CURRENT_LANG || "en") === "en";
  const ctaPrimary = isEN ? tweaks.ctaPrimary : t("cta.startLearning");
  const ctaSecondary = isEN ? tweaks.ctaSecondary : t("cta.browseModules");

  return (
    <>
      <SiteNav active="home" />

      {tweaks.heroLayout === "split" ?
      <section className="hero hero--split">
          <div className="hero-inner container">
            <div>
              <div className="hero-image">
                <img src={isEN ? "assets/home-hero.jpg" : "assets/home-hero-de.jpg"} alt="Cross-functional PMO team reviewing a portfolio roadmap on a large screen" />
              </div>
              <span className="eyebrow">{t("home.heroEyebrow")}</span>
              <h1>{t("home.heroTitle")}</h1>
              <p className="hero-sub">{t("home.heroSub")}</p>
              <div className="hero-actions">
                <a href="enroll.html" className="btn btn--primary btn--lg">{ctaPrimary} <i data-lucide="arrow-right"></i></a>
                <a href="courses.html" className="btn btn--ghost btn--lg">{ctaSecondary} <i data-lucide="arrow-right"></i></a>
              </div>
            </div>
            <div className="hero-art">
              <div className="hero-art-grid"></div>
              <div className="hero-art-glyph"><i data-lucide="book-open"></i></div>
              <div className="hero-art-card is-tl"><i data-lucide="check"></i> {t("home.heroBadgeModules")}</div>
              <div className="hero-art-card is-br"><i data-lucide="check"></i> {t("home.heroBadgeTemplates")}</div>
            </div>
          </div>
        </section> :

      <section className="hero">
          <div className="hero-inner container">
            <div className="hero-image hero-image--center">
              <img src={isEN ? "assets/home-hero.jpg" : "assets/home-hero-de.jpg"} alt="Cross-functional PMO team reviewing a portfolio roadmap on a large screen" />
            </div>
            <span className="eyebrow">{t("home.heroEyebrow")}</span>
            <h1 style={{ fontWeight: "600", fontSize: "35px" }}>{t("home.heroTitle")}</h1>
            <p className="hero-sub">{t("home.heroSub")}</p>
            <div className="hero-actions">
              <a href="enroll.html" className="btn btn--primary btn--lg">{ctaPrimary} <i data-lucide="arrow-right"></i></a>
              <a href="courses.html" className="btn btn--outline btn--lg">{ctaSecondary}</a>
            </div>
          </div>
        </section>
      }

      <section className="section--tight">
        <div className="container">
          <div className="overview">
            <h2 style={{ fontSize: "30px" }}>{t("home.overviewTitle")}</h2>
            <div className="overview-sub">{t("home.overviewSub")}</div>
            <p className="overview-body">{t("home.overviewBody")}</p>
            <div className="overview-checks">
              <div className="overview-check"><i data-lucide="check-circle-2"></i> {t("home.overviewCheck1")}</div>
              <div className="overview-check"><i data-lucide="check-circle-2"></i> {t("home.overviewCheck2")}</div>
              <div className="overview-check"><i data-lucide="check-circle-2"></i> {t("home.overviewCheck3")}</div>
              <div className="overview-check"><i data-lucide="check-circle-2"></i> {t("home.overviewCheck4")}</div>
            </div>
            <a href="enroll.html" className="btn btn--primary btn--lg btn--block">{ctaPrimary} <i data-lucide="arrow-right"></i></a>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--color-surface-alt)" }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 40 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("home.audienceEyebrow")}</span>
              <h2 style={{ fontSize: "35px" }}>{t("home.audienceTitle")}</h2>
            </div>
          </div>
          <div className="outcomes">
            <div className="outcome">
              <div className="outcome-icon"><i data-lucide="user-check"></i></div>
              <h3>{t("home.audience1Title")}</h3>
              <p>{t("home.audience1Body")}</p>
            </div>
            <div className="outcome">
              <div className="outcome-icon"><i data-lucide="briefcase"></i></div>
              <h3>{t("home.audience2Title")}</h3>
              <p>{t("home.audience2Body")}</p>
            </div>
            <div className="outcome">
              <div className="outcome-icon"><i data-lucide="building-2"></i></div>
              <h3>{t("home.audience3Title")}</h3>
              <p>{t("home.audience3Body")}</p>
            </div>
            <div className="outcome">
              <div className="outcome-icon"><i data-lucide="award"></i></div>
              <h3>{t("home.audience4Title")}</h3>
              <p>{t("home.audience4Body")}</p>
            </div>
          </div>
        </div>
      </section>

      <section id="about" className="section">
        <div className="container">
          <div className="about about--solo">
            <div className="about-text">
              <span className="eyebrow">{t("home.aboutEyebrow")}</span>
              <h2 style={{ fontSize: "35px", color: "rgb(10, 10, 10)" }}>{t("home.aboutTitle")}</h2>
              <p>{t("home.aboutBody")}</p>
              <a href="about.html" className="btn btn--ghost" style={{ marginTop: 8 }}>
                {t("cta.readMoreAbout")} <i data-lucide="arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
      </section>

      {tweaks.showTestimonials && <section className="section">
          <div className="container">
            <div className="section-head" style={{ marginBottom: 40 }}>
              <div className="section-head-text">
                <span className="eyebrow">{t("home.testimonialsEyebrow")}</span>
                <h2 style={{ fontSize: "35px" }}>{t("home.testimonialsTitle")}</h2>
              </div>
            </div>
            <div className="testimonials">
              {SITE.TESTIMONIALS.map((t2, i) =>
            <div key={i} className="testimonial">
                  <p className="testimonial-quote" style={{ height: "120px" }}>"{tx(t2, "quote")}"</p>
                  <div className="testimonial-author">
                    <span className="t-avatar">{t2.name.split(" ").map((s) => s[0]).join("")}</span>
                    <div>
                      <div className="t-name">{t2.name}</div>
                      <div className="t-role">{tx(t2, "role")}</div>
                    </div>
                  </div>
                </div>
            )}
            </div>
          </div>
        </section>
      }

      {tweaks.showFAQ &&
      <section id="faq" className="section" style={{ background: "var(--color-surface-alt)" }}>
          <div className="container">
            <div className="section-head" style={{ marginBottom: 40, justifyContent: "center", textAlign: "center" }}>
              <div className="section-head-text" style={{ margin: "0 auto" }}>
                <span className="eyebrow">{t("home.faqEyebrow")}</span>
                <h2 style={{ fontSize: "35px" }}>{t("home.faqTitle")}</h2>
              </div>
            </div>
            <div className="faq-list">
              {SITE.FAQS.map((f, i) =>
            <div key={i} className={"faq-item" + (openFaq === i ? " is-open" : "")}>
                  <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <span>{tx(f, "q")}</span>
                    <i data-lucide="plus"></i>
                  </button>
                  <div className="faq-a"><div className="faq-a-inner">
                    {(tx(f, "aHtml"))
                      ? <span dangerouslySetInnerHTML={{ __html: tx(f, "aHtml") }} />
                      : tx(f, "a")}
                  </div></div>
                </div>
            )}
            </div>
          </div>
        </section>
      }

      <section className="section--tight">
        <div className="container">
          <div className="newsletter">
            <div>
              <h2 style={{ fontSize: "35px" }}>{t("home.newsletterTitle")}</h2>
              <p>{t("home.newsletterBody")}</p>
            </div>
            <form className="newsletter-form" onSubmit={(e) => {e.preventDefault();alert(t("home.newsletterThanks"));}}>
              <input type="email" placeholder={t("home.newsletterPlaceholder")} required />
              <button className="btn btn--lg" type="submit">{t("home.newsletterButton")}</button>
            </form>
          </div>
        </div>
      </section>

      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout" />
        <TweakRadio label="Hero layout"
        value={tweaks.heroLayout}
        onChange={(v) => setTweak("heroLayout", v)}
        options={[
        { value: "centered", label: "Centered" },
        { value: "split", label: "Split" }]
        } />
        <TweakRadio label="Module cards"
        value={tweaks.moduleCardStyle}
        onChange={(v) => setTweak("moduleCardStyle", v)}
        options={[
        { value: "icon", label: "Icon-led" },
        { value: "numbered", label: "Numbered" }]
        } />
        <TweakRadio label="Density"
        value={tweaks.density}
        onChange={(v) => setTweak("density", v)}
        options={[
        { value: "comfortable", label: "Comfortable" },
        { value: "compact", label: "Compact" }]
        } />
        <TweakSection label="Theme" />
        <TweakRadio label="Primary color"
        value={tweaks.themeColor}
        onChange={(v) => setTweak("themeColor", v)}
        options={[
        { value: "navy", label: "Navy" },
        { value: "graphite", label: "Graphite" },
        { value: "emerald", label: "Emerald" },
        { value: "gold", label: "Gold" }]
        } />
        <TweakSection label="Sections" />
        <TweakToggle label="Testimonials" value={tweaks.showTestimonials} onChange={(v) => setTweak("showTestimonials", v)} />
        <TweakToggle label="FAQ" value={tweaks.showFAQ} onChange={(v) => setTweak("showFAQ", v)} />
        <TweakSection label="CTA copy" />
        <TweakText label="Primary" value={tweaks.ctaPrimary} onChange={(v) => setTweak("ctaPrimary", v)} />
        <TweakText label="Secondary" value={tweaks.ctaSecondary} onChange={(v) => setTweak("ctaSecondary", v)} />
      </TweaksPanel>
    </>);

}

window.HomeApp = HomeApp;