// Home page
const { useState: uS, useEffect: uE } = React;

const HomePage = ({ navigate }) => {
  return (
    <div className="page">
      <HeroSection navigate={navigate} />
      <MissionPreview navigate={navigate} />
      <PillarsSection />
      <FeaturedInitiatives navigate={navigate} />
      <LeadershipPreview navigate={navigate} />
      <WhyJoin navigate={navigate} />
      <NewsPreview navigate={navigate} />
      <DonationCallout navigate={navigate} />
    </div>
  );
};

const HeroSection = ({ navigate }) => {
  return (
    <section style={{
      background: "var(--ink)",
      color: "var(--paper)",
      padding: "clamp(72px,12vw,144px) 0 clamp(80px,12vw,160px)",
      position: "relative",
      overflow: "hidden",
      borderBottom: "1px solid var(--rule-dark)"
    }}>
      {/* Subtle decorative mark in background */}
      <div style={{
        position: "absolute",
        right: "clamp(24px, 5vw, 72px)",
        top: "50%",
        transform: "translateY(-50%)",
        opacity: 0.08,
        pointerEvents: "none",
        mixBlendMode: "screen",
      }}>
        <img src="/assets/caaba-logo.png" alt="" style={{width: "min(62vw, 560px)", height: "auto", display: "block"}}/>
      </div>
      <div className="wrap" style={{position: "relative"}}>
        <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 32}}>
          <span style={{width: 40, height: 1, background: "var(--gold)"}}/>
          <span className="eyebrow light">Est. 2026 · Richmond, Texas</span>
        </div>
        <h1 className="display" style={{
          fontSize: "clamp(44px, 7vw, 104px)",
          lineHeight: 0.98,
          maxWidth: "18ch",
          fontWeight: 400,
          marginBottom: 36,
        }}>
          Connecting <em style={{color: "var(--gold-soft)", fontStyle: "italic"}}>Central Asian</em> legal professionals in the United States
        </h1>
        <p style={{
          fontSize: "clamp(17px, 1.4vw, 20px)",
          lineHeight: 1.55,
          maxWidth: "58ch",
          color: "#C9D2DC",
          marginBottom: 48,
        }}>
          CAABA advances the professional and business interests of lawyers connected to Central Asia in the United States — fostering collaboration, mentorship, and enduring cross-border relationships across the legal profession.
        </p>
        <div style={{display: "flex", gap: 14, flexWrap: "wrap"}}>
          <button className="btn btn-primary on-dark" onClick={() => navigate("membership")}>
            Join the Network <Arrow />
          </button>
          <button className="btn btn-ghost on-dark" onClick={() => navigate("donate")}>
            Support Our Mission
          </button>
        </div>

        {/* meta stripe */}
        <div style={{
          marginTop: "clamp(64px, 10vw, 120px)",
          paddingTop: 28,
          borderTop: "1px solid var(--rule-dark)",
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
        }} className="hero-meta-grid">
          {[
            ["Founded", "2026"],
            ["Headquarters", "Richmond, Texas"],
            ["Membership", "Legal Professionals"],
            ["Scope", "U.S. · Central Asia"],
          ].map(([k,v]) => (
            <div key={k}>
              <div className="eyebrow" style={{color: "var(--gold-soft)", marginBottom: 6}}>{k}</div>
              <div className="display" style={{fontSize: 22, color: "var(--paper)"}}>{v}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .hero-meta-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          .hero-meta-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const MissionPreview = ({ navigate }) => (
  <section style={{background: "var(--paper)"}}>
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(200px, 320px) 1fr",
        gap: "clamp(32px, 6vw, 96px)",
        alignItems: "start",
      }} className="mission-grid">
        <div style={{display: "flex", flexDirection: "column", gap: 16}}>
          <span className="eyebrow">§ 01 — Mission</span>
          <span className="section-num">Who We Are</span>
          <div style={{marginTop: 12, width: 48, height: 1, background: "var(--gold)"}}/>
        </div>
        <div>
          <p className="display" style={{
            fontSize: "clamp(26px, 3vw, 40px)",
            lineHeight: 1.25,
            marginBottom: 36,
            textWrap: "pretty",
          }}>
            To advance the common professional and business interests of our members by fostering a strong network of legal professionals connected to Central Asia in the United States — promoting development, facilitating collaboration, and supporting mentorship and trusted referrals.
          </p>
          <p style={{fontSize: 17, lineHeight: 1.65, color: "var(--muted)", maxWidth: "62ch", marginBottom: 32}}>
            We enhance the visibility of our members across domestic and international legal and business environments, and we welcome attorneys, law students, foreign-trained lawyers, and mission-aligned supporters who value professional growth, cross-border dialogue, and community building.
          </p>
          <button className="btn btn-link" onClick={() => navigate("about")}>
            Read Our Full Charter <Arrow/>
          </button>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 820px) { .mission-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

const PillarsSection = () => (
  <section style={{background: "var(--paper-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)"}}>
    <div className="wrap">
      <div className="section-head">
        <div className="section-head-left">
          <span className="eyebrow">§ 02 — What We Do</span>
          <span className="section-num">Our Eight Pillars</span>
        </div>
        <div>
          <h2 className="display">The work of a modern bar association, carried with care</h2>
          <p className="lead" style={{marginTop: 20}}>
            Eight enduring commitments structure everything CAABA does — from day-to-day mentorship to cross-border institutional work.
          </p>
        </div>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
        gap: 0,
        border: "1px solid var(--rule)",
        background: "var(--paper-3)"
      }}>
        {PILLARS.map((p, i) => (
          <div key={p.title} style={{
            padding: "36px 32px",
            borderRight: "1px solid var(--rule)",
            borderBottom: "1px solid var(--rule)",
            display: "flex",
            flexDirection: "column",
            gap: 14,
            minHeight: 240,
            transition: "background .3s",
          }}
          onMouseEnter={e => e.currentTarget.style.background = "var(--paper-2)"}
          onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
            <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6}}>
              <PillarIcon name={p.icon} size={30}/>
              <span className="section-num" style={{fontSize: 10}}>{String(i+1).padStart(2,"0")}</span>
            </div>
            <h3 className="display" style={{fontSize: 24, lineHeight: 1.15, marginTop: 8}}>{p.title}</h3>
            <p style={{fontSize: 14.5, lineHeight: 1.6, color: "var(--muted)"}}>{p.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FeaturedInitiatives = ({ navigate }) => (
  <section style={{background: "var(--paper)"}}>
    <div className="wrap">
      <div className="section-head">
        <div className="section-head-left">
          <span className="eyebrow">§ 03 — Featured Initiatives</span>
          <span className="section-num">Four Active Projects</span>
        </div>
        <div>
          <h2 className="display">Programs that turn our mission into practice</h2>
        </div>
      </div>
      <div style={{display: "flex", flexDirection: "column"}}>
        {PROJECTS.map((p, i) => (
          <div key={p.id} style={{
            display: "grid",
            gridTemplateColumns: "80px 1fr 2fr auto",
            gap: "clamp(16px, 4vw, 56px)",
            alignItems: "start",
            padding: "40px 0",
            borderTop: "1px solid var(--rule)",
            borderBottom: i === PROJECTS.length - 1 ? "1px solid var(--rule)" : "none",
            cursor: "pointer",
            transition: "all .3s",
          }}
          onClick={() => navigate("projects")}
          onMouseEnter={e => { e.currentTarget.style.paddingLeft = "12px"; e.currentTarget.style.background = "var(--paper-2)"; }}
          onMouseLeave={e => { e.currentTarget.style.paddingLeft = "0"; e.currentTarget.style.background = "transparent"; }}
          className="init-row">
            <div>
              <div className="serif-num" style={{fontSize: 48, lineHeight: 1, color: "var(--gold-2)"}}>
                {String(p.id).padStart(2,"0")}
              </div>
            </div>
            <div>
              <span className="eyebrow">{p.label}</span>
              <h3 className="display" style={{fontSize: 30, lineHeight: 1.1, marginTop: 10, marginBottom: 6}}>{p.title}</h3>
              <p style={{fontSize: 13, color: "var(--muted)", fontStyle: "italic", fontFamily: "var(--serif)"}}>{p.subtitle}</p>
            </div>
            <div>
              <p style={{fontSize: 16, lineHeight: 1.6, color: "var(--ink-3)", maxWidth: "55ch"}}>{p.body}</p>
            </div>
            <div style={{display: "flex", alignItems: "center", alignSelf: "center"}}>
              <Arrow size={20} />
            </div>
          </div>
        ))}
      </div>
    </div>
    <style>{`
      @media (max-width: 960px) {
        .init-row { grid-template-columns: auto 1fr !important; }
        .init-row > div:nth-child(3), .init-row > div:nth-child(4) { grid-column: 1 / -1; }
      }
    `}</style>
  </section>
);

const LeadershipPreview = ({ navigate }) => (
  <section style={{background: "var(--ink)", color: "var(--paper)"}}>
    <div className="wrap">
      <div className="section-head on-dark">
        <div className="section-head-left">
          <span className="eyebrow light">§ 04 — Leadership</span>
          <span className="section-num" style={{color: "#A9B3BF"}}>Officers & Committee Leads</span>
        </div>
        <div>
          <h2 className="display" style={{color: "var(--paper)"}}>Stewarded by practicing attorneys and experienced professionals</h2>
        </div>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 0,
        border: "1px solid var(--rule-dark)",
      }} className="leadership-preview-grid">
        {LEADERSHIP.officers.map(o => (
          <div key={o.name} style={{
            padding: 36,
            borderRight: "1px solid var(--rule-dark)",
            display: "flex",
            flexDirection: "column",
            gap: 20,
          }}>
            <Headshot name={o.name} size={72}/>
            <div>
              <div className="eyebrow light" style={{marginBottom: 8}}>{o.title}</div>
              <h3 className="display" style={{fontSize: 28, color: "var(--paper)", lineHeight: 1.1}}>{o.name}</h3>
            </div>
            <p style={{fontSize: 14.5, lineHeight: 1.6, color: "#A9B3BF", marginTop: "auto"}}>{o.bio}</p>
          </div>
        ))}
      </div>
      <div style={{marginTop: 48, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16}}>
        <p style={{color: "#A9B3BF", fontSize: 14}}>
          Plus four Vice Presidents leading Education, PR, Marketing & Operations, and Membership.
        </p>
        <button className="btn btn-link on-dark" onClick={() => navigate("leadership")}>
          View Full Leadership <Arrow/>
        </button>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .leadership-preview-grid { grid-template-columns: 1fr !important; }
        .leadership-preview-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--rule-dark); }
      }
    `}</style>
  </section>
);

const WhyJoin = ({ navigate }) => (
  <section style={{background: "var(--paper)"}}>
    <div className="wrap">
      <div className="section-head">
        <div className="section-head-left">
          <span className="eyebrow">§ 05 — Why Join</span>
          <span className="section-num">Four Audiences, One Community</span>
        </div>
        <div>
          <h2 className="display">Membership is meaningful because the community is carefully stewarded.</h2>
        </div>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, 1fr)",
        gap: "1px",
        background: "var(--rule)",
        border: "1px solid var(--rule)",
      }} className="audience-grid">
        {AUDIENCES.map((a, i) => (
          <div key={a.tag} style={{
            background: "var(--paper-3)",
            padding: "clamp(28px, 4vw, 48px)",
            display: "flex",
            flexDirection: "column",
            gap: 16,
            minHeight: 280,
            position: "relative",
          }}>
            <div style={{
              position: "absolute", top: "clamp(24px, 3vw, 40px)", right: "clamp(24px, 3vw, 40px)",
              fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, color: "var(--gold-2)"
            }}>
              {String(i+1).padStart(2,"0")}
            </div>
            <span className="eyebrow">{a.tag}</span>
            <h3 className="display" style={{fontSize: "clamp(22px, 2.2vw, 30px)", lineHeight: 1.15, maxWidth: "18ch"}}>{a.title}</h3>
            <p style={{fontSize: 15.5, lineHeight: 1.6, color: "var(--muted)", maxWidth: "44ch"}}>{a.body}</p>
          </div>
        ))}
      </div>
      <div style={{marginTop: 48, textAlign: "center"}}>
        <button className="btn btn-primary" onClick={() => navigate("membership")}>
          Explore Membership <Arrow/>
        </button>
      </div>
    </div>
    <style>{`@media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

const DonationCallout = ({ navigate }) => (
  <section style={{
    background: "var(--ink)",
    color: "var(--paper)",
    padding: "clamp(72px, 10vw, 128px) 0",
  }}>
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.2fr 1fr",
        gap: "clamp(32px, 6vw, 96px)",
        alignItems: "end",
      }} className="donate-callout-grid">
        <div>
          <span className="eyebrow light">§ 07 — Support CAABA</span>
          <h2 className="display" style={{
            color: "var(--paper)",
            fontSize: "clamp(36px, 5vw, 64px)",
            lineHeight: 1.04,
            marginTop: 20,
            marginBottom: 32,
            maxWidth: "20ch",
          }}>
            Your support builds the <em style={{color: "var(--gold-soft)", fontStyle: "italic"}}>next generation</em> of Central Asian American legal professionals.
          </h2>
          <p style={{color: "#C9D2DC", fontSize: 17, lineHeight: 1.65, maxWidth: "54ch"}}>
            Contributions fund student support, mentorship programming, cross-border dialogue, and the community-building that sustains a durable professional community.
          </p>
        </div>
        <div style={{display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start"}}>
          <button className="btn btn-primary on-dark" onClick={() => navigate("donate")}>
            Make a Contribution <Arrow/>
          </button>
          <button className="btn btn-ghost on-dark" onClick={() => navigate("donate")}>
            Sponsorship Opportunities
          </button>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 820px) { .donate-callout-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

const NewsPreview = ({ navigate }) => {
  const allNews = useNewsItems();
  const previewItems = allNews.slice(0, 3);
  return (
  <section style={{background: "var(--paper-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)"}}>
    <div className="wrap">
      <div className="section-head">
        <div className="section-head-left">
          <span className="eyebrow">§ 06 — News</span>
          <span className="section-num">Latest Updates</span>
        </div>
        <div>
          <h2 className="display">Announcements and program notes from CAABA</h2>
        </div>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 0,
        border: "1px solid var(--rule)",
        background: "var(--paper-3)",
      }} className="home-news-grid">
        {previewItems.map((item, i) => (
          <article
            key={item.id}
            onClick={() => openNewsItem(navigate, item)}
            role="link"
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                openNewsItem(navigate, item);
              }
            }}
            style={{
              padding: "clamp(28px, 3.5vw, 44px)",
              borderRight: i < 2 ? "1px solid var(--rule)" : 0,
              display: "flex",
              flexDirection: "column",
              minHeight: 360,
              gap: 18,
              cursor: "pointer",
              transition: "background .15s",
            }}
            className="home-news-card"
          >
            <div>
              <div className="eyebrow" style={{marginBottom: 8}}>{item.type}</div>
              <div className="section-num">{item.date}</div>
            </div>
            <h3 className="display" style={{fontSize: "clamp(24px, 2.5vw, 34px)", lineHeight: 1.1}}>
              {item.title}
            </h3>
            <p style={{fontSize: 15.5, lineHeight: 1.65, color: "var(--muted)"}}>
              {truncateText(item.dek || item.body, 140)}
            </p>
            <div style={{marginTop: "auto", paddingTop: 18, borderTop: "1px solid var(--rule)", pointerEvents: "none"}}>
              <span className="btn btn-link" style={{display: "inline-flex", alignItems: "center", gap: 8}}>
                Read More <Arrow/>
              </span>
            </div>
          </article>
        ))}
      </div>
      <div style={{marginTop: 44, textAlign: "center"}}>
        <button className="btn btn-primary" onClick={() => navigate("news")}>
          View All News <Arrow/>
        </button>
      </div>
    </div>
    <style>{`
      .home-news-card:hover { background: var(--paper-2); }
      .home-news-card:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -4px; }
      @media (max-width: 960px) {
        .home-news-grid { grid-template-columns: 1fr !important; }
        .home-news-grid > article { border-right: 0 !important; border-bottom: 1px solid var(--rule); }
      }
    `}</style>
  </section>
  );
};

Object.assign(window, { HomePage });