/* global React */
const { useState, useEffect } = React;

const Container = ({ children, max = 1280, style }) => (
  <div style={{ maxWidth: max, margin: "0 auto", paddingLeft: "var(--gutter)", paddingRight: "var(--gutter)", ...style }}>{children}</div>
);

const Eyebrow = ({ children, color = "#B8893E" }) => (
  <div style={{
    fontFamily: "Newsreader, serif", fontWeight: 500,
    fontSize: 12, letterSpacing: "0.26em", textTransform: "uppercase",
    color,
  }}>{children}</div>
);

// ---------- Nav ----------
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    ["About", "#about"],
    ["The model", "#how"],
    ["Partners", "#partners"],
  ];
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: "20px var(--gutter)",
      background: scrolled ? "rgba(15,46,37,0.94)" : "transparent",
      backdropFilter: scrolled ? "blur(10px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(245,239,226,0.08)" : "1px solid transparent",
      transition: "background 220ms ease, border-color 220ms ease",
      color: "#F5EFE2",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="#top" style={{
          fontFamily: "Newsreader, serif", fontWeight: 500, fontSize: 22,
          letterSpacing: "-0.01em", color: "inherit", textDecoration: "none",
        }}>Sower<span style={{ color: "#B8893E" }}>.</span></a>
        <div style={{ display: "flex", alignItems: "center", gap: 36 }}>
          <div className="nav-links" style={{ display: "flex", gap: 32 }}>
            {items.map(([label, href]) => (
              <a key={href} href={href} style={{
                fontFamily: "Newsreader, serif", fontSize: 15, fontWeight: 400,
                color: "rgba(245,239,226,0.78)", textDecoration: "none",
              }}>{label}</a>
            ))}
          </div>
          <a href="#give" style={{
            fontFamily: "Newsreader, serif", fontSize: 13, fontWeight: 500,
            letterSpacing: "0.18em", textTransform: "uppercase",
            color: "#0F2E25", background: "#B8893E",
            padding: "11px 20px", textDecoration: "none",
          }}>Give</a>
        </div>
      </div>
    </nav>
  );
};

// ---------- Hero — typographic anchor ----------
const Hero = () => (
  <section id="top" data-screen-label="01 Hero" style={{
    background: "#0F2E25", color: "#F5EFE2",
    minHeight: "100vh", position: "relative",
    display: "flex", flexDirection: "column",
  }}>
    <Nav />

    <Container max={1400} style={{
      flex: 1, display: "flex", flexDirection: "column",
      justifyContent: "center", paddingTop: 140, paddingBottom: 80,
      position: "relative",
    }}>
      <Eyebrow>The Sower Fund · Public Ancillary · Est. 2024</Eyebrow>

      {/* Giant typographic anchor */}
      <h1 style={{
        fontFamily: "Newsreader, serif", fontWeight: 400,
        fontSize: "clamp(96px, 17vw, 280px)", lineHeight: 0.92,
        letterSpacing: "-0.035em", margin: "32px 0 0",
        textWrap: "balance",
      }}>
        Sower<span style={{ color: "#B8893E" }}>.</span>
      </h1>

      {/* Quiet rule + tagline */}
      <div style={{
        marginTop: 56, marginBottom: 56,
        height: 1, background: "rgba(184,137,62,0.5)",
        maxWidth: "100%",
      }}></div>

      <div className="hero-bottom" style={{
        display: "grid", gridTemplateColumns: "1.4fr 1fr",
        gap: 64, maxWidth: 1280, alignItems: "start",
      }}>
        <div>
          <div style={{
            fontFamily: "Newsreader, serif", fontWeight: 500,
            fontSize: 12, letterSpacing: "0.28em", textTransform: "uppercase",
            color: "rgba(245,239,226,0.6)",
            display: "flex", alignItems: "center", gap: 20, marginBottom: 28,
          }}>
            <span>What we do</span>
            <span style={{ flex: 1, height: 1, background: "rgba(184,137,62,0.5)" }}></span>
          </div>
          <p style={{
            fontFamily: "Newsreader, serif", fontWeight: 400,
            fontSize: "clamp(26px, 3vw, 40px)", lineHeight: 1.2,
            color: "#F5EFE2", margin: 0,
            letterSpacing: "-0.012em", textWrap: "balance",
          }}>
            A philanthropic fund committed to long-term generosity &mdash; <em style={{ color: "#B8893E" }}>stewarding gifts today</em> so they keep giving for years to come.
          </p>
        </div>

        {/* At-a-glance card — three plain-language facts */}
        <div className="hero-glance" style={{
          border: "1px solid rgba(245,239,226,0.18)",
          position: "relative",
        }}>
          <div style={{
            position: "absolute", top: -10, left: 24,
            background: "#0F2E25", padding: "0 14px",
          }}>
            <Eyebrow color="rgba(245,239,226,0.55)">At a glance</Eyebrow>
          </div>
          {[
            ["Your gift is tax-deductible", "Claim it back at tax time."],
            ["Stewarded, then granted", "We invest gifts, then grant yearly."],
            ["Independent oversight", "An independent trustee runs the fund."],
          ].map((row, i) => (
            <div key={row[0]} style={{
              padding: "22px 28px",
              borderTop: i === 0 ? "none" : "1px solid rgba(245,239,226,0.12)",
            }}>
              <div style={{
                fontFamily: "Newsreader, serif", fontWeight: 500,
                fontSize: 17, color: "#F5EFE2",
                letterSpacing: "-0.005em", marginBottom: 4,
              }}>{row[0]}</div>
              <div style={{
                fontFamily: "Newsreader, serif", fontStyle: "italic",
                fontSize: 14, lineHeight: 1.45,
                color: "rgba(245,239,226,0.65)",
              }}>{row[1]}</div>
            </div>
          ))}
        </div>
      </div>
    </Container>

    {/* Bottom strip — just the essentials */}
    <div style={{
      borderTop: "1px solid rgba(245,239,226,0.14)",
      padding: "20px var(--gutter)",
      fontFamily: "Newsreader, serif", fontSize: 12,
      letterSpacing: "0.22em", textTransform: "uppercase",
      color: "rgba(245,239,226,0.55)",
      display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
    }}>
      <span>ABN 51 646 131 217</span>
      <span>DGR1 endorsed</span>
      <span>sower.org.au</span>
    </div>
  </section>
);

// ---------- About — one sentence, oversized ----------
const About = () => (
  <section id="about" data-screen-label="02 About" style={{
    background: "#F5EFE2", color: "#0F2620",
    padding: "var(--pad-y) 0", position: "relative",
  }}>
    <Container max={1280}>
      <div style={{ maxWidth: 1100, marginLeft: "auto", marginRight: "auto" }}>
        <Eyebrow>About the fund</Eyebrow>

        <h2 style={{
          fontFamily: "Newsreader, serif", fontWeight: 400,
          fontSize: "clamp(40px, 5.4vw, 84px)", lineHeight: 1.1,
          letterSpacing: "-0.02em", color: "#0F2E25",
          margin: "40px 0 0", textWrap: "balance",
        }}>
          A philanthropic trust strengthening charitable work <em style={{ color: "#8A6F3A" }}>in Australia and abroad</em> &mdash; receiving tax-deductible gifts, stewarding capital, and granting annually to selected charities.
        </h2>

        {/* Plain-language DGR1 explainer */}
        <div style={{
          marginTop: 64, padding: "28px 32px",
          background: "rgba(15,46,37,0.05)",
          borderLeft: "3px solid #B8893E",
          maxWidth: 920,
        }}>
          <div style={{
            display: "flex", alignItems: "baseline", gap: 16, flexWrap: "wrap",
          }}>
            <div style={{
              fontFamily: "Newsreader, serif", fontWeight: 500,
              fontSize: 20, color: "#0F2E25", letterSpacing: "-0.005em",
            }}>What is DGR1?</div>
            <div style={{
              fontFamily: "Newsreader, serif", fontSize: 12,
              letterSpacing: "0.22em", textTransform: "uppercase",
              color: "#B8893E",
            }}>Plain English</div>
          </div>
          <p style={{
            fontFamily: "Newsreader, serif", fontSize: 17, lineHeight: 1.55,
            color: "#3B3328", margin: "12px 0 0",
          }}>
            DGR1 stands for <em>Deductible Gift Recipient (Item 1)</em> &mdash; an Australian Tax Office endorsement. It simply means <strong style={{ fontWeight: 600, color: "#0F2E25" }}>your gift is tax-deductible</strong>, and Sower can only pass funds on to other charities the ATO recognises the same way.
          </p>
        </div>

        {/* Three small facts under the headline */}
        <div className="grid-3col-gap" style={{
          marginTop: 64, paddingTop: 32,
          borderTop: "1px solid rgba(15,46,37,0.18)",
        }}>
          {[
            ["Tax-deductible", "Every gift qualifies for a deduction at tax time."],
            ["Stewarded capital", "Gifts are pooled and carefully invested."],
            ["Independent trustee", "An independent board oversees the fund."],
          ].map(([h, b]) => (
            <div key={h}>
              <Eyebrow color="#0F2E25">{h}</Eyebrow>
              <div style={{
                fontFamily: "Newsreader, serif", fontSize: 17, lineHeight: 1.5,
                color: "#5C5246", marginTop: 10,
              }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// ---------- The model — typographic flow ----------
const HowItWorks = () => {
  const steps = [
    { n: "01", word: "Give", caption: "You make a direct deposit.", sub: "Sower receives it as a tax-deductible gift." },
    { n: "02", word: "Grow", caption: "Gifts are pooled and invested.", sub: "Capital is stewarded with care, year on year." },
    { n: "03", word: "Grant", caption: "We grant to charities annually.", sub: "Selected partners doing humanitarian work." },
  ];
  return (
    <section id="how" data-screen-label="03 Model" style={{
      background: "#0F2E25", color: "#F5EFE2",
      padding: "var(--pad-y) 0", position: "relative",
      overflow: "hidden",
    }}>
      <Container max={1400}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          marginBottom: 72, flexWrap: "wrap", gap: 16,
        }}>
          <Eyebrow>The model</Eyebrow>
          <div style={{
            fontFamily: "Newsreader, serif", fontStyle: "italic",
            fontSize: 18, color: "rgba(245,239,226,0.6)",
          }}>Pooled. Patient. Fruitful.</div>
        </div>

        {/* Big typographic stack */}
        <div style={{ display: "grid", gap: 0 }}>
          {steps.map((s, i) => (
            <div key={s.n} className="model-row" style={{
              display: "grid",
              gridTemplateColumns: "120px 1fr auto",
              gap: 48, alignItems: "baseline",
              padding: "48px 0",
              borderTop: "1px solid rgba(245,239,226,0.18)",
              borderBottom: i === steps.length - 1 ? "1px solid rgba(245,239,226,0.18)" : "none",
            }}>
              <div style={{
                fontFamily: "Newsreader, serif", fontStyle: "italic",
                fontSize: 22, color: "#B8893E", letterSpacing: "0.04em",
              }}>{s.n}</div>
              <div style={{
                fontFamily: "Newsreader, serif", fontWeight: 400,
                fontSize: "clamp(80px, 13vw, 200px)", lineHeight: 0.9,
                letterSpacing: "-0.03em", color: "#F5EFE2",
              }}>
                {s.word}<span style={{ color: "#B8893E" }}>.</span>
              </div>
              <div style={{
                maxWidth: 300, textAlign: "right",
                paddingBottom: 16,
              }}>
                <div style={{
                  fontFamily: "Newsreader, serif", fontStyle: "italic", fontWeight: 400,
                  fontSize: "clamp(20px, 1.8vw, 26px)",
                  color: "rgba(245,239,226,0.85)", lineHeight: 1.3,
                }}>{s.caption}</div>
                <div style={{
                  marginTop: 10,
                  fontFamily: "Newsreader, serif", fontSize: 14, lineHeight: 1.5,
                  color: "rgba(245,239,226,0.55)",
                }}>{s.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// ---------- Partners — name + tag, one line each ----------
const Partners = () => {
  const partners = [
    { name: "Multibridge (PMMT)", region: "Philippines", focus: "Medical & humanitarian relief", blurb: "Medical mission trips bringing healthcare to underserved communities." },
    { name: "Entrust Foundation", region: "Global", focus: "Community development", blurb: "Long-term community projects supporting the world's most vulnerable." },
    { name: "Southern Cross Kids Camp", region: "Australia", focus: "Healing & resilience for children", blurb: "Camps that bring healing to children who have experienced abuse or neglect." },
    { name: "Operation Stitches", region: "Australia", focus: "At-risk youth & families", blurb: "Programs supporting at-risk young people and families in need." },
    { name: "Whitehorse Churches Care", region: "Australia", focus: "Local community development", blurb: "A coalition of local churches providing practical care to people in need across Whitehorse." },
    { name: "Compassion Australia", region: "Global", focus: "Child development & poverty relief", blurb: "Releasing children from poverty through holistic child development programs." },
  ];
  return (
    <section id="partners" data-screen-label="04 Partners" style={{
      background: "#F5EFE2", color: "#0F2620",
      padding: "var(--pad-y) 0",
    }}>
      <Container max={1280}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          marginBottom: 64, flexWrap: "wrap", gap: 16,
        }}>
          <Eyebrow>Partner organisations</Eyebrow>
          <div style={{
            fontFamily: "Newsreader, serif", fontStyle: "italic",
            fontSize: 17, color: "#5C5246",
          }}>Reviewed annually by the trustee board.</div>
        </div>

        <h2 style={{
          fontFamily: "Newsreader, serif", fontWeight: 400,
          fontSize: "clamp(36px, 4.6vw, 64px)", lineHeight: 1.1,
          letterSpacing: "-0.02em", color: "#0F2E25",
          margin: "0 0 80px", textWrap: "balance", maxWidth: 920,
        }}>
          Eligible DGR1 organisations doing <em style={{ color: "#8A6F3A" }}>benevolent and humanitarian work</em>.
        </h2>

        <div style={{ borderTop: "1px solid rgba(15,46,37,0.2)" }}>
          {partners.map((p, i) => (
            <div key={p.name} className="partner-row" style={{
              display: "grid",
              gridTemplateColumns: "60px 1fr 260px 160px",
              gap: 32, alignItems: "start",
              padding: "44px 0",
              borderBottom: "1px solid rgba(15,46,37,0.2)",
            }}>
              <div style={{
                fontFamily: "Newsreader, serif", fontStyle: "italic",
                fontSize: 17, color: "#B8893E", paddingTop: 8,
              }}>0{i + 1}</div>
              <div>
                <div style={{
                  fontFamily: "Newsreader, serif", fontWeight: 500,
                  fontSize: "clamp(28px, 3vw, 40px)", letterSpacing: "-0.015em",
                  color: "#0F2E25", lineHeight: 1.1,
                }}>{p.name}</div>
                <div style={{
                  fontFamily: "Newsreader, serif", fontSize: 16, lineHeight: 1.55,
                  color: "#5C5246", marginTop: 12, maxWidth: 480,
                }}>{p.blurb}</div>
              </div>
              <div style={{
                fontFamily: "Newsreader, serif", fontStyle: "italic",
                fontSize: 17, color: "#5C5246", paddingTop: 8,
              }}>{p.focus}</div>
              <div style={{
                fontFamily: "Newsreader, serif", fontSize: 11,
                letterSpacing: "0.24em", textTransform: "uppercase",
                color: "#0F2E25", textAlign: "right", paddingTop: 12,
              }}>{p.region}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// ---------- Give — bank panel as the visual centerpiece ----------
const Give = () => (
  <section id="give" data-screen-label="05 Give" style={{
    background: "#0F2E25", color: "#F5EFE2",
    padding: "var(--pad-y) 0", position: "relative",
  }}>
    <Container max={1100}>
      <Eyebrow>Give</Eyebrow>

      <h2 style={{
        fontFamily: "Newsreader, serif", fontWeight: 400,
        fontSize: "clamp(48px, 6.4vw, 96px)", lineHeight: 1.0,
        letterSpacing: "-0.025em", margin: "32px 0 64px",
        textWrap: "balance",
      }}>
        Direct deposit, <em style={{ color: "#B8893E" }}>tax-deductible</em>.
      </h2>

      {/* Bank details — big and architectural */}
      <div style={{
        border: "1px solid rgba(245,239,226,0.22)",
        position: "relative",
      }}>
        <div style={{
          position: "absolute", top: -10, left: 32,
          background: "#0F2E25", padding: "0 16px",
        }}>
          <Eyebrow color="#B8893E">Bank deposit</Eyebrow>
        </div>
        {[
          ["Account name", "Sower Pty Ltd"],
          ["BSB", "063 105"],
          ["Account number", "1074 9605"],
          ["Reference", "Your full name"],
        ].map((row, i) => (
          <div key={row[0]} className="grid-bank" style={{
            padding: "28px 36px",
            borderTop: i === 0 ? "none" : "1px solid rgba(245,239,226,0.12)",
          }}>
            <div style={{
              fontFamily: "Newsreader, serif", fontSize: 11,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "rgba(245,239,226,0.55)",
            }}>{row[0]}</div>
            <div style={{
              fontFamily: "Newsreader, serif", fontWeight: 500,
              fontSize: "clamp(18px, 2vw, 26px)", color: "#F5EFE2", letterSpacing: "-0.005em",
            }}>{row[1]}</div>
          </div>
        ))}
      </div>

      {/* Three-step receipt flow */}
      <div style={{
        marginTop: 56,
        fontFamily: "Newsreader, serif", fontSize: 12,
        letterSpacing: "0.24em", textTransform: "uppercase",
        color: "rgba(245,239,226,0.55)", marginBottom: 20,
      }}>How the tax receipt works</div>
      <div className="receipt-steps" style={{
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
        gap: 0, marginBottom: 40,
      }}>
        {[
          ["Make a deposit", "Use the details above. Reference your full name."],
          ["Fill out the form", "Tell us your name, email, and gift amount."],
          ["Receive your receipt", "The trustee verifies and emails it to you."],
        ].map(([h, b], i) => (
          <div key={h} style={{
            paddingLeft: i === 0 ? 0 : 28, paddingRight: 28,
            borderRight: i < 2 ? "1px solid rgba(245,239,226,0.18)" : "none",
          }}>
            <div style={{
              fontFamily: "Newsreader, serif", fontStyle: "italic",
              fontSize: 14, color: "#B8893E", marginBottom: 12,
            }}>Step 0{i + 1}</div>
            <div style={{
              fontFamily: "Newsreader, serif", fontWeight: 500,
              fontSize: 22, color: "#F5EFE2", letterSpacing: "-0.005em",
              marginBottom: 8,
            }}>{h}</div>
            <div style={{
              fontFamily: "Newsreader, serif", fontSize: 15, lineHeight: 1.5,
              color: "rgba(245,239,226,0.72)",
            }}>{b}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
        <a href="https://forms.gle/f451GtQvNY6L4uBt5" target="_blank" rel="noopener noreferrer" style={{
          fontFamily: "Newsreader, serif", fontWeight: 500, fontSize: 14,
          letterSpacing: "0.2em", textTransform: "uppercase",
          color: "#0F2E25", background: "#B8893E",
          padding: "18px 32px", textDecoration: "none",
          display: "inline-block",
        }}>Request tax receipt →</a>
        <span style={{
          fontFamily: "Newsreader, serif", fontStyle: "italic",
          fontSize: 15, color: "rgba(245,239,226,0.6)",
        }}>Takes about 60 seconds.</span>
      </div>

      <p style={{
        fontFamily: "Newsreader, serif", fontStyle: "italic",
        fontSize: 15, lineHeight: 1.55,
        color: "rgba(245,239,226,0.55)",
        margin: "40px 0 0",
      }}>
        Other questions? Contact <span style={{ color: "#F5EFE2", fontStyle: "normal", borderBottom: "1px solid rgba(245,239,226,0.4)" }}>info@sower.org.au</span>.
      </p>
    </Container>
  </section>
);

// ---------- Footer ----------
const Footer = () => (
  <footer style={{
    background: "#0B231C", color: "rgba(245,239,226,0.72)",
    padding: "72px 0 36px",
  }}>
    <Container max={1280}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-start",
        gap: 48, flexWrap: "wrap", paddingBottom: 48,
        borderBottom: "1px solid rgba(245,239,226,0.12)",
      }}>
        <div style={{
          fontFamily: "Newsreader, serif", fontWeight: 500,
          fontSize: 36, letterSpacing: "-0.02em", color: "#F5EFE2",
        }}>Sower<span style={{ color: "#B8893E" }}>.</span></div>
        <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
          {[["About", "#about"], ["The model", "#how"], ["Partners", "#partners"], ["Give", "#give"]].map(([l, h]) => (
            <a key={h} href={h} style={{
              fontFamily: "Newsreader, serif", fontSize: 15,
              color: "rgba(245,239,226,0.78)", textDecoration: "none",
            }}>{l}</a>
          ))}
        </div>
        <div style={{
          fontFamily: "Newsreader, serif", fontSize: 15,
          color: "rgba(245,239,226,0.78)",
        }}>info@sower.org.au</div>
      </div>
      <div style={{
        marginTop: 28,
        fontFamily: "Newsreader, serif", fontSize: 12,
        letterSpacing: "0.18em", textTransform: "uppercase",
        color: "rgba(245,239,226,0.5)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
      }}>
        <span>© 2026 Sower Public Ancillary Fund</span>
        <span>ABN 51 646 131 217 · DGR1 endorsed</span>
      </div>
      <div style={{
        marginTop: 20, fontFamily: "Newsreader, serif",
        fontStyle: "italic", fontSize: 14, lineHeight: 1.6,
        color: "rgba(245,239,226,0.5)", maxWidth: 880,
      }}>
        All distributions are made to eligible DGR1 charities in accordance with Public Ancillary Fund Guidelines.
      </div>
    </Container>
  </footer>
);

Object.assign(window, { Hero, About, HowItWorks, Partners, Give, Footer });
