/* Home page. Exports window.Pages.home */
const homeDS = window.WKYHBHutchinsonBellDesignSystem_7985db || {};

function HomeHero({ variant }) {
  const { Button } = homeDS; const U = window.U; const data = window.WKYHB;
  // variant: 'gradient' | 'faceted' | 'photo'
  const bg = variant === 'photo'
    ? 'linear-gradient(180deg, rgba(20,20,20,0.55), rgba(20,20,20,0.78)), var(--ink)'
    : variant === 'faceted'
      ? 'var(--ink)'
      : 'linear-gradient(135deg, #7E1626 0%, #C4122E 55%, #9E1B2F 100%)';
  const texOpacity = variant === 'faceted' ? 0.5 : variant === 'photo' ? 0.16 : 0.22;
  const texBlend = variant === 'photo' ? 'normal' : 'overlay';

  return (
    <header style={{ position: 'relative', overflow: 'hidden', background: bg, color: '#fff', padding: '92px 0 100px' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${U.texSrc})`, backgroundSize: 'cover', backgroundPosition: 'center', opacity: texOpacity, mixBlendMode: texBlend, pointerEvents: 'none' }} />
      <U.Container style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 22 }}>
        <img src={U.bellSrc} alt="WKYHB bell mark" style={{ width: 100, height: 100, borderRadius: '50%', objectFit: 'cover', boxShadow: '0 0 0 4px rgba(255,255,255,0.9), 0 14px 34px rgba(0,0,0,0.35)' }} />
        <span style={{ fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.2em', fontSize: 14, fontWeight: 500, color: 'rgba(255,255,255,0.9)' }}>WKYHB · Florida College Alumni &amp; Friends</span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(40px,6.4vw,76px)', lineHeight: 1.02, letterSpacing: '-0.03em', margin: 0, maxWidth: 940 }}>
          Connect, Communicate, <span style={{ fontFamily: 'var(--font-script)', fontWeight: 400 }}>Cultivate</span>
        </h1>
        <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(17px,2vw,22px)', lineHeight: 1.6, color: 'rgba(255,255,255,0.93)', maxWidth: 680, margin: 0 }}>
          A vibrant community advancing the mission of Florida College and fostering lasting connections among alumni and friends across Western Kentucky.
        </p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 6 }}>
          <Button size="lg" style={{ background: '#fff', color: 'var(--bell-crimson)', borderColor: '#fff', boxShadow: '0 12px 30px rgba(0,0,0,0.30)' }} onClick={() => U.goTo('give')}>Donate</Button>
          <Button size="lg" {...U.darkOutlineBtn()} onClick={() => window.open(data.links.join, '_blank')}>Join the Chapter</Button>
          <Button size="lg" {...U.darkOutlineBtn()} onClick={() => U.goTo('events')}>Upcoming Events</Button>
        </div>
      </U.Container>
    </header>
  );
}

function MissionStrip({ accent = true }) {
  const { SectionHeading } = homeDS; const U = window.U; const data = window.WKYHB;
  const card = { background: 'var(--surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', padding: 'var(--space-6)', borderTop: `4px solid ${accent ? 'var(--bell-crimson)' : 'transparent'}` };
  return (
    <U.Section bg="paper">
      <U.Container>
        {SectionHeading && <SectionHeading align="center" eyebrow="Our Mission" title="Three commitments that keep the bell ringing" lead="Through events, volunteer opportunities, and support initiatives, we work together to keep the spirit of Florida College alive and growing." />}
        <div className="wk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)', marginTop: 'var(--space-7)' }}>
          {data.pillars.map((p) => (
            <article key={p.t} style={card}>
              <div style={{ fontFamily: 'var(--font-condensed)', fontSize: 13, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--bell-crimson)', textTransform: 'uppercase' }}>{p.n}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-xl)', color: 'var(--text-strong)', margin: '8px 0 10px', letterSpacing: '-0.02em' }}>{p.t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{p.d}</p>
            </article>
          ))}
        </div>
      </U.Container>
    </U.Section>
  );
}

function EventsPreview({ onRSVP }) {
  const { SectionHeading, Button } = homeDS; const U = window.U; const data = window.WKYHB;
  const hasEvents = data.events.length > 0;
  return (
    <U.Section bg="surface">
      <U.Container>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          {SectionHeading && <SectionHeading eyebrow="What's Happening" title="Upcoming chapter events" lead="Gather, serve, and celebrate with the WKYHB community." />}
          {hasEvents && <Button variant="outline" onClick={() => U.goTo('events')}>View all events</Button>}
        </div>
        {hasEvents ? (
          <div className="wk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)', marginTop: 'var(--space-7)' }}>
            {data.events.map((e) => <window.EventCard key={e.id} e={e} onRSVP={onRSVP} />)}
          </div>
        ) : (
          <div style={{ marginTop: 'var(--space-7)', background: 'var(--surface-paper)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-xl)', color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.02em' }}>No events on the calendar right now</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0, maxWidth: 520 }}>We're planning what's next. Subscribe to the chapter newsletter and we'll let you know as soon as the next gathering is on the books.</p>
            <div style={{ marginTop: 4 }}><window.NewsletterForm size="md" /></div>
          </div>
        )}
      </U.Container>
    </U.Section>
  );
}

function InvolvedTeaser({ accent = true }) {
  const { Button } = homeDS; const U = window.U; const data = window.WKYHB;
  const tiles = [
    { eyebrow: 'Become a Member', title: 'Join the Hutchinson Bell', body: 'Membership connects you to the national alumni association and supports students from our area.', action: () => window.open(data.links.join, '_blank'), label: 'Join the Bell', external: true },
    { eyebrow: 'Support', title: 'Give to the chapter', body: 'Your gift funds scholarships and care for Florida College students from Western Kentucky.', action: () => U.goTo('give'), label: 'Donate' },
    { eyebrow: 'Students', title: 'Chapter scholarships', body: 'Accepted to Florida College from our area? We award scholarships each year — subscribe to hear when the next application opens.', action: () => U.goTo('involved'), label: 'Learn more' },
  ];
  return (
    <U.Section bg="paper">
      <U.Container>
        <div className="wk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {tiles.map((t) => (
            <article key={t.title} style={{ background: 'var(--surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-sm)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 10, borderTop: `4px solid ${accent ? 'var(--bell-crimson)' : 'transparent'}` }}>
              <U.Eyebrow>{t.eyebrow}</U.Eyebrow>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-lg)', color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.01em' }}>{t.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 6px', flex: 1 }}>{t.body}</p>
              <Button variant="outline" size="sm" onClick={t.action} iconRight={t.external ? <U.IconExternal /> : undefined}>{t.label}</Button>
            </article>
          ))}
        </div>
      </U.Container>
    </U.Section>
  );
}

function NewsletterBanner() {
  const U = window.U;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink)', color: '#fff' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${U.texSrc})`, backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.16, mixBlendMode: 'overlay', pointerEvents: 'none' }} />
      <U.Container style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', paddingBlock: 56 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 620 }}>
          <U.Eyebrow onDark>Chapter Newsletter</U.Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-2xl)', color: '#fff', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>News, events, and milestones — straight to your inbox</h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'var(--gray-300)', margin: 0 }}>Subscribe for chapter updates, new event dates, and ways to support our Florida College family. No spam — just the good stuff.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
          <window.NewsletterForm onDark />
          <span style={{ fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 11, color: 'var(--gray-400)' }}>Powered by Kit</span>
        </div>
      </U.Container>
    </section>
  );
}

/* Seasonal banner — only renders while scholarship applications are open
   (data.scholarship.open). Lets students apply straight from the home page. */
function ScholarshipBanner() {
  const { Button } = homeDS; const U = window.U; const data = window.WKYHB;
  const s = data.scholarship;
  if (!s || !s.open) return null;
  return (
    <section style={{ background: 'var(--bell-crimson)', color: '#fff' }}>
      <U.Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', paddingBlock: 18 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <span style={{ fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.16em', fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.9)' }}>Scholarships Open</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-md)', lineHeight: 1.2 }}>
            Applications for the {s.year} school year are open{s.deadline ? ` — apply by ${s.deadline}` : ''}.
          </span>
        </div>
        <Button size="md" style={{ background: '#fff', color: 'var(--bell-crimson)', borderColor: '#fff', flex: 'none' }} onClick={() => window.open(s.applyUrl, '_blank')} iconRight={<U.IconExternal />}>Apply now</Button>
      </U.Container>
    </section>
  );
}

function Home({ t, onRSVP }) {
  return (
    <React.Fragment>
      <HomeHero variant={t.hero} />
      <ScholarshipBanner />
      <MissionStrip accent={t.accent} />
      <EventsPreview onRSVP={onRSVP} />
      <NewsletterBanner />
      <InvolvedTeaser accent={t.accent} />
    </React.Fragment>
  );
}

window.Pages = window.Pages || {};
window.Pages.home = Home;