/* Grow in Uganda — Forside (home) with tweakable hero variants */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "foto",
  "accent": "#2E8A1E",
  "showScript": true
}/*EDITMODE-END*/;

/* ---- Hero variants ---- */
function HeroFoto({ accent, showScript }) {
  return (
    <div style={{ position: "relative", minHeight: 580, display: "flex", alignItems: "center", overflow: "hidden" }}>
      <img src={PHOTOS.group} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(105deg,rgba(46,24,9,.86) 36%,rgba(46,24,9,.2) 100%)" }}></div>
      <div className="gu-container" style={{ position: "relative" }}>
        <div style={{ maxWidth: 600, color: "var(--fg-on-dark)" }}>
          <Eyebrow light>Dansk forening · børn i Uganda</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(2.6rem,5.4vw,4.2rem)",
            lineHeight: 1.04, letterSpacing: "-.01em", margin: "16px 0 18px", textWrap: "balance", color: "var(--fg-on-dark)" }}>
            Giv et barn en {showScript ? <span className="gu-script" style={{ color: "var(--yellow-400)", fontSize: "1.15em" }}>fremtid</span> : "fremtid"} — donér i dag
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: "var(--fg-on-dark-mut)", maxWidth: 500, marginBottom: 30 }}>
            Din donation giver børn i Uganda skolegang, mad og tryghed — og hele bidraget går direkte til børnene.
          </p>
          <div className="hero-actions">
            <Button variant="primary" size="lg" icon="hand-coins" onClick={() => window.GU.openDonate()}>Donér nu</Button>
            <Button variant="light" size="lg" iconRight="arrow-right" href="om.html">Læs vores historie</Button>
          </div>
          <div style={{ display: "flex", gap: 22, marginTop: 30, color: "var(--fg-on-dark-mut)", fontSize: 14, flexWrap: "wrap" }}>
            <span style={{ display: "flex", gap: 7, alignItems: "center" }}><Icon name="shield-check" size={17} color="var(--yellow-400)" /> Hele bidraget går til børnene</span>
            <span style={{ display: "flex", gap: 7, alignItems: "center" }}><Icon name="badge-check" size={17} color="var(--yellow-400)" /> §8A fradragsberettiget</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroSplit({ accent, showScript }) {
  return (
    <div style={{ background: "var(--bg)" }}>
      <div className="gu-container" style={{ padding: "var(--space-8) 28px" }}>
        <div className="split">
          <div>
            <Eyebrow style={{ color: accent }}>Dansk forening · børn i Uganda</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(2.4rem,4.6vw,3.6rem)",
              lineHeight: 1.05, letterSpacing: "-.01em", margin: "14px 0 18px", color: "var(--brown-800)", textWrap: "balance" }}>
              Giv et barn en {showScript ? <span className="gu-script" style={{ color: accent, fontSize: "1.1em" }}>fremtid</span> : "fremtid"} — donér i dag
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg-muted)", maxWidth: 480, marginBottom: 28 }}>
              Din donation giver børn i Uganda skolegang, mad og tryghed — og hele bidraget går direkte til børnene.
            </p>
            <div className="hero-actions">
              <Button variant="primary" size="lg" icon="hand-coins" onClick={() => window.GU.openDonate()}>Donér nu</Button>
              <Button variant="outline" size="lg" iconRight="arrow-right" href="om.html">Læs vores historie</Button>
            </div>
            <div style={{ display: "flex", gap: 22, marginTop: 26, color: "var(--fg-muted)", fontSize: 14, flexWrap: "wrap" }}>
              <span style={{ display: "flex", gap: 7, alignItems: "center" }}><Icon name="shield-check" size={17} color={accent} /> Hele bidraget går til børnene</span>
              <span style={{ display: "flex", gap: 7, alignItems: "center" }}><Icon name="badge-check" size={17} color={accent} /> §8A fradragsberettiget</span>
            </div>
          </div>
          <div className="split-media" style={{ position: "relative" }}>
            <Photo kind="portrait" src={PHOTOS.group} pos="center 35%" h={480} />
            <div style={{ position: "absolute", left: -18, bottom: 28, background: "var(--white)", borderRadius: "var(--r-lg)",
              boxShadow: "var(--shadow-md)", padding: "16px 20px", display: "flex", alignItems: "center", gap: 14, maxWidth: 270 }}>
              <div style={{ width: 46, height: 46, borderRadius: "var(--r-pill)", background: "var(--green-100)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                <Icon name="graduation-cap" size={24} color="var(--green-700)" />
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "var(--brown-800)", lineHeight: 1 }}>1.250 børn</div>
                <div style={{ fontSize: 13, color: "var(--fg-subtle)", fontWeight: 600 }}>i skole lige nu</div>
              </div>
            </div>
            <div style={{ position: "absolute", right: -14, top: 24 }}><FlagRule w={84} h={7} /></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroCentreret({ accent, showScript }) {
  return (
    <div style={{ position: "relative", minHeight: 600, display: "flex", alignItems: "center", overflow: "hidden", textAlign: "center" }}>
      <img src={PHOTOS.group} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom,rgba(46,24,9,.62),rgba(46,24,9,.82))" }}></div>
      <div className="gu-container" style={{ position: "relative" }}>
        <div style={{ maxWidth: 760, margin: "0 auto", color: "var(--fg-on-dark)" }}>
          <FlagRule w={72} style={{ margin: "0 auto 22px" }} />
          <Eyebrow light style={{ marginBottom: 8 }}>Dansk forening · børn i Uganda</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(2.6rem,5.6vw,4.4rem)",
            lineHeight: 1.04, letterSpacing: "-.01em", margin: "10px 0 18px", textWrap: "balance", color: "var(--fg-on-dark)" }}>
            Giv et barn en {showScript ? <span className="gu-script" style={{ color: "var(--yellow-400)", fontSize: "1.15em" }}>fremtid</span> : "fremtid"}
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: "var(--fg-on-dark-mut)", maxWidth: 540, margin: "0 auto 30px" }}>
            Din donation giver børn i Uganda skolegang, mad og tryghed — og hele bidraget går direkte til børnene.
          </p>
          <div className="hero-actions" style={{ justifyContent: "center" }}>
            <Button variant="primary" size="lg" icon="hand-coins" onClick={() => window.GU.openDonate()}>Donér nu</Button>
            <Button variant="light" size="lg" iconRight="arrow-right" href="om.html">Læs vores historie</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatRow({ accent }) {
  const stats = [["1.250", "børn i skole", "graduation-cap"], ["18", "år i Uganda", "calendar-heart"], ["2", "egne skoler", "school"], ["100%", "går til børnene", "heart"]];
  return (
    <Section pad="var(--space-7)">
      <div className="grid-4">
        {stats.map(([n, l, ic]) => (
          <div key={l} style={{ textAlign: "center" }}>
            <Icon name={ic} size={28} color={accent} />
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 40, color: "var(--brown-800)", lineHeight: 1.1, marginTop: 6 }}>{n}</div>
            <div style={{ color: "var(--fg-muted)", fontSize: 15, fontWeight: 600 }}>{l}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function HomeContent({ t }) {
  const accent = t.accent;
  const Hero = t.heroLayout === "split" ? HeroSplit : t.heroLayout === "centreret" ? HeroCentreret : HeroFoto;
  return (
    <div>
      <Hero accent={accent} showScript={t.showScript} />
      <StatRow accent={accent} />

      {/* How it works */}
      <Section alt>
        <SectionHead center eyebrow="Sådan virker det" title="Tre skridt til at ændre et liv" />
        <div className="grid-3">
          {[["1", "Vælg et beløb", "Giv en engangsdonation eller et fast månedligt bidrag — du bestemmer selv størrelsen.", "hand-coins"],
            ["2", "Donér trygt", "Betal sikkert med kort eller MobilePay. Det tager under to minutter.", "shield-check"],
            ["3", "Se din effekt", "Følg projekterne og se, hvordan dit bidrag bliver til skolegang og tryghed.", "sprout"]].map(([n, ti, d, ic]) => (
            <div key={n} style={{ background: "var(--white)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", padding: "30px 26px", boxShadow: "var(--shadow-sm)" }}>
              <div style={{ width: 52, height: 52, borderRadius: "var(--r-md)", background: "var(--red-50)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18, position: "relative" }}>
                <Icon name={ic} size={26} color="var(--red-600)" />
                <span style={{ position: "absolute", top: -8, right: -8, width: 26, height: 26, borderRadius: "var(--r-pill)", background: "var(--green-600)", color: "#fff", fontWeight: 800, fontSize: 13, display: "flex", alignItems: "center", justifyContent: "center" }}>{n}</span>
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 21, color: "var(--brown-800)", marginBottom: 8 }}>{ti}</div>
              <p style={{ color: "var(--fg-muted)", fontSize: 15, lineHeight: 1.65, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* Children we help */}
      <Section>
        <SectionHead eyebrow="Børnene i Masaka" title="Mød nogle af de børn, du er med til at hjælpe"
          action={<Button variant="ghost" icon="hand-coins" onClick={() => window.GU.openDonate()}>Støt børnene</Button>} />
        <div className="grid-3">{CHILDREN.slice(0, 3).map(c => <SponsorCard key={c.name} child={c} showcase />)}</div>
      </Section>

      {/* Ways to donate */}
      <Section alt>
        <SectionHead center eyebrow="Sådan kan du hjælpe" title="Vælg den måde der passer dig" />
        <div className="grid-3">
          {[["hand-coins", "Engangsdonation", "Giv et beløb én gang — stort eller småt, alt hjælper børnene.", "Donér", null, "primary"],
            ["repeat", "Fast giver", "Støt med et fast månedligt bidrag og giv tryghed året rundt.", "Bliv fast giver", null, "accent"],
            ["target", "Støt et projekt", "Øremærk din donation til et konkret projekt i Uganda.", "Se projekter", "projekter.html", "outline"]].map(([ic, ti, d, cta, href, variant]) => (
            <div key={ti} style={{ background: "var(--white)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", padding: "30px 26px", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column" }}>
              <div style={{ width: 52, height: 52, borderRadius: "var(--r-md)", background: "var(--green-50)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <Icon name={ic} size={26} color="var(--green-700)" />
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 21, color: "var(--brown-800)", marginBottom: 8 }}>{ti}</div>
              <p style={{ color: "var(--fg-muted)", fontSize: 15, lineHeight: 1.65, margin: "0 0 20px", flex: 1 }}>{d}</p>
              {href ? <Button variant={variant} icon={ic} href={href} style={{ width: "100%" }}>{cta}</Button>
                    : <Button variant={variant} icon={ic} style={{ width: "100%" }} onClick={() => window.GU.openDonate()}>{cta}</Button>}
            </div>
          ))}
        </div>
      </Section>

      {/* Projects preview */}
      <Section>
        <SectionHead eyebrow="Løbende projekter" title="Det bygger vi lige nu"
          action={<Button variant="ghost" iconRight="arrow-right" href="projekter.html">Alle projekter</Button>} />
        <div className="grid-3">{PROJECTS.slice(0, 3).map(p => <ProjectCard key={p.title} p={p} />)}</div>
      </Section>

      {/* Testimonial */}
      <Section dark>
        <div className="split">
          <Photo kind="portrait" src={PHOTOS.family} pos="center 30%" h={300} className="split-media" />
          <div>
            <Icon name="quote" size={40} color="var(--yellow-400)" />
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(1.4rem,2.6vw,1.75rem)", lineHeight: 1.3, color: "var(--fg-on-dark)", margin: "12px 0 22px", textWrap: "balance" }}>
              "Vi kunne godt lide, at hele bidraget gik direkte til børnene. Vi følger projekterne tæt — det er blevet en del af familien."
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{ width: 48, height: 48, borderRadius: "var(--r-pill)", background: "var(--yellow-500)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 800, color: "var(--brown-900)" }}>AH</div>
              <div>
                <div style={{ fontWeight: 800, color: "var(--fg-on-dark)" }}>Anna &amp; Henrik</div>
                <div style={{ color: "var(--fg-on-dark-mut)", fontSize: 14 }}>Støtter siden 2019</div>
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* Final CTA */}
      <Section>
        <div style={{ background: "linear-gradient(120deg,var(--red-600),var(--red-500))", borderRadius: "var(--r-xl)", padding: "54px 40px", textAlign: "center", boxShadow: "var(--shadow-lg)" }}>
          <FlagRule w={72} style={{ margin: "0 auto 20px" }} />
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(1.9rem,4vw,2.4rem)", color: "#fff", margin: "0 0 12px", textWrap: "balance" }}>Et barn venter på dig</h2>
          <p style={{ color: "rgba(255,255,255,.92)", fontSize: 18, maxWidth: 460, margin: "0 auto 28px", lineHeight: 1.6 }}>
            Giv en donation i dag og vær med til at give børn i Uganda skolegang og en tryg fremtid.
          </p>
          <Button variant="light" size="lg" icon="hand-coins" onClick={() => window.GU.openDonate()}>Donér nu</Button>
        </div>
      </Section>
    </div>
  );
}

/* ---- Home App (owns tweaks) ---- */
function HomeApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { refreshIcons(); });
  return (
    <React.Fragment>
      <Header page="index.html" />
      <main><HomeContent t={t} /></main>
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.heroLayout} options={["foto", "split", "centreret"]} onChange={(v) => setTweak("heroLayout", v)} />
        <TweakToggle label="Script-ord 'fremtid'" value={t.showScript} onChange={(v) => setTweak("showScript", v)} />
        <TweakSection label="Farve" />
        <TweakColor label="Accent" value={t.accent} options={["#2E8A1E", "#C81414", "#E6A700"]} onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomeApp />);
ReactDOM.createRoot(document.getElementById("modal-root")).render(<ModalHost />);
refreshIcons();