/* Give / Donate — amount selection + mock Givebutter checkout. Exports window.Pages.give */
const giveDS = window.WKYHBHutchinsonBellDesignSystem_7985db || {};

function DonateCard() {
  const { Button } = giveDS; const U = window.U; const data = window.WKYHB;
  const ref = React.useRef(null);
  const [fallback, setFallback] = React.useState(false);
  React.useEffect(() => {
    let tries = 0;
    const loaded = (w) => !!w && ((w.shadowRoot && w.shadowRoot.childElementCount > 0) || w.offsetHeight > 20);
    const iv = setInterval(() => {
      tries += 1;
      const w = ref.current && ref.current.querySelector('givebutter-widget');
      if (loaded(w)) { setFallback(false); clearInterval(iv); }
      else if (tries >= 8) { setFallback(true); clearInterval(iv); }
    }, 500);
    return () => clearInterval(iv);
  }, []);
  const card = { background: 'var(--surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', borderTop: '4px solid var(--bell-crimson)', padding: 'var(--space-7)' };
  return (
    <div style={card}>
      <U.Eyebrow>Make a Gift</U.Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-xl)', color: 'var(--text-strong)', margin: '8px 0 6px', letterSpacing: '-0.02em' }}>Support the chapter</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-muted)', margin: '0 0 18px' }}>
        Choose an amount and give securely below — donations are processed by Givebutter and are tax-deductible.
      </p>
      {/* Live Givebutter donation widget (loader script is in index.html head). */}
      <div ref={ref}>
        <givebutter-widget id="gO8Mrp"></givebutter-widget>
      </div>
      {fallback && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Button size="lg" fullWidth onClick={() => window.open(data.links.donate, '_blank')} iconLeft={<U.IconExternal style={{ visibility: 'hidden' }} />} iconRight={<U.IconExternal />}>Donate on Givebutter</Button>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', margin: 0, textAlign: 'center', lineHeight: 1.5 }}>
            The embedded donation form will appear here once the Givebutter account is connected.
          </p>
        </div>
      )}
    </div>
  );
}

function GivePage() {
  const { Button } = giveDS; const U = window.U; const data = window.WKYHB;
  const where = [
    { t: 'Fundraising events', d: 'Powering the dinners, tournaments, and gatherings that bring our chapter together.' },
    { t: 'Student scholarships', d: 'Going directly to local students headed to Florida College from our area.' },
  ];
  return (
    <React.Fragment>
      <U.PageHeader eyebrow="Give" title="Your gift keeps the spirit growing" lead="Every dollar supports scholarships, student care, and fellowship for our Florida College family in Western Kentucky." />
      <U.Section bg="surface">
        <U.Container>
          <div className="wk-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 0.9fr', gap: 'var(--space-8)', alignItems: 'start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <U.Eyebrow>Your Impact</U.Eyebrow>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>Direct support, close to home</h2>
                <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>
                  We're a 501(c)(3) associated organization under The Hutchinson Bell. Gifts are tax-deductible and stay focused on students and families from our area.
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {where.map((i) => (
                  <div key={i.t} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', background: 'var(--surface-paper)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', borderTop: '4px solid var(--bell-crimson)', padding: 'var(--space-5)' }}>
                    <span style={{ flex: 'none', width: 30, height: 30, borderRadius: '50%', background: 'rgba(196,18,46,0.10)', color: 'var(--bell-crimson)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 15, marginTop: 2 }}>✓</span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-md)', color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>{i.t}</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55, color: 'var(--text-body)', marginTop: 2 }}>{i.d}</div>
                    </div>
                  </div>
                ))}
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', margin: 0, lineHeight: 1.6 }}>
                  Every gift — large or small — goes straight to one of these. We're an all-volunteer chapter.
                </p>
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', margin: 0, lineHeight: 1.6 }}>
                Prefer to mail a check? Make it payable to WKYHB and send to {data.org.address}.
              </p>
            </div>
            <DonateCard />
          </div>
        </U.Container>
      </U.Section>
    </React.Fragment>
  );
}

window.Pages = window.Pages || {};
window.Pages.give = GivePage;