/* HTH26 Hi-Fi Home Page — Variant A Civic Poster
   Mobile-first React component, rendered by Home.html */

const SITE = {
  dateFull: "Saturday, July 25, 2026",
  dateShort: "July 25, 2026",
  course: "Ely Park Golf Course",
  courseCity: "Binghamton, NY",
  shotgun: "8:30 AM & 3:00 PM Shotguns",
  format: "4-Person Scramble",
  contact: "marketing@ghsfcu.com",
};

// PLACEHOLDER STATS — confirm real figures with GHSFCU before launch
const STATS = [
  { num: "7", unit: "th", label: "Annual Tournament", ph: false }, // confirmed 2026 = 7th
  { num: "$120", unit: "K+", label: "Raised for Veterans", ph: true },
  { num: "~400", unit: "", label: "Golfers & Supporters", ph: true },
];

const DETAILS = [
  { icon: "◆", label: "Date", value: "Jul 25", sub: "Saturday, 2026" },
  { icon: "◆", label: "Course", value: "Ely Park", sub: "Binghamton, NY" },
  { icon: "◆", label: "Start", value: "8:30 & 3:00", sub: "Two shotgun flights" },
  { icon: "◆", label: "Format", value: "Scramble", sub: "4some captain and crew" },
];

const PRIZES = [
  {
    label: "Hole-in-One",
    title: "$10,000 Cash",
    amount: "Par-3 Contest",
    desc: "Hit the ace on our sponsored par-3 and walk off with a five-figure prize. Insured.",
    hero: true,
  },
  {
    label: "Long Drive",
    title: "Prize Pack",
    amount: "Men's & Women's",
    desc: "Longest ball in the fairway on the designated hole wins a sponsor prize pack.",
  },
  {
    label: "Closest to Pin",
    title: "TBD",
    amount: "4 Par-3 Holes",
    desc: "Closest to the pin on each par-3. Four chances to win during the round.",
  },
  {
    label: "Putting Contest",
    title: "New Putter",
    amount: "Pre-Tournament",
    desc: "Sink the putt during morning warmups for a brand-new putter.",
  },
];

const FEATURED_TIERS = [
  {
    label: "Premium",
    name: "Meal Sponsor",
    price: "$5,000",
    desc: "Headline recognition across the day's biggest moment — post-round meal and awards ceremony.",
    includes: [
      "Presenting recognition at lunch & awards",
      "Foursome (4 golfers) included",
      "Banner at clubhouse + day-of signage",
      "Backlink on event website",
      "Social media feature + thank-you post",
    ],
    featured: true,
    badge: "Flagship",
  },
  {
    label: "Recognition",
    name: "Beverage Sponsor",
    price: "$3,500",
    desc: "Your brand follows every golfer around the course — on the cart that keeps the day moving.",
    includes: [
      "Beverage cart signage all day",
      "Foursome (4 golfers) included",
      "Announcements at morning briefing",
      "Backlink on event website",
    ],
  },
  {
    label: "Hole",
    name: "Premium Hole + Foursome",
    price: "$1,800",
    desc: "Your company's flag on a featured hole, plus four spots in the tournament.",
    includes: [
      "Sponsored flag on your hole",
      "Foursome (4 golfers) included",
      "Recognition at awards ceremony",
      "Backlink on event website",
    ],
  },
];

const FAQS = [
  {
    q: "Who does the tournament benefit?",
    a: "100% of net proceeds go to the Southern Tier Veterans Support Group — funding direct assistance, peer counseling, and community programs for local veterans across the Southern Tier.",
  },
  {
    q: "How do I register to play?",
    a: "Registration is by invitation. If you played last year, led a foursome, or reserved spots through a sponsoring business, you'll receive a magic-link email in spring 2026 to confirm your team. Not on the list and want to play? Email us — we fill open spots as they free up.",
  },
  {
    q: "What's included for players?",
    a: "18 holes at Ely Park, cart, range access, breakfast, post-round lunch, awards ceremony, player gift bag, and entry into all on-course contests. Raffle tickets sold separately.",
  },
  {
    q: "What if I don't golf but want to support?",
    a: "Sponsor a package (options start at $200), donate a raffle prize, or contribute directly. All sponsorship tiers are visible on the Sponsorships page — many don't require you to play.",
  },
  {
    q: "What happens if it rains?",
    a: "The tournament plays in light rain. In the event of unsafe weather, we'll make a weather call by 7:00 AM day-of via email and social media, with a rain date to be announced at that time.",
  },
  {
    q: "Is my sponsorship tax-deductible?",
    a: "Portions of most sponsorship packages are tax-deductible — your receipt will itemize the deductible amount once foursome and goods/services are factored. Consult your tax advisor.",
  },
];

/* ------------------------------------------------------------------ */
const Hero = () => (
  <header className="hero">
    <div
      className="hero-photo"
      style={{ backgroundImage: "url(assets/ely-2.webp)" }}
    />
    <div className="hero-wash" />
    <div className="hero-stars" />
    <div className="hero-inner">
      <img src="assets/logo.png" alt="Hometown Heroes Golf Classic" className="hero-shield" />
      <div className="hero-year">A Day of Golf</div>
      <h1 className="hero-title">
        <span className="gold">A Lifetime of<br />Gratitude</span>
      </h1>
      <div className="hero-meta">
        <div className="hero-meta-row">
          <strong>Jul 25, 2026</strong>
          <span className="hero-meta-dot" />
          <strong>Ely Park</strong>
          <span className="hero-meta-dot" />
          <strong>Binghamton, NY</strong>
        </div>
        <div className="body-sm" style={{ color: "rgba(255,255,255,0.7)" }}>
          8:30 AM & 3:00 PM Shotgun start · 4some Captain and Crew
        </div>
      </div>
      <div className="hero-ctas">
        <a href="/sponsorships" className="btn btn-red btn-lg btn-arrow">
          <span>Become a Sponsor</span>
        </a>
        <a href="#details" className="btn btn-ghost-light btn-lg btn-arrow">
          <span>Event Details</span>
        </a>
      </div>
      <div className="hero-beneficiary">
        Benefiting the <strong>Southern Tier Veterans Support Group</strong>
      </div>
    </div>
    <div className="hero-stripes">
      {Array.from({ length: 9 }).map((_, i) => <span key={i} />)}
    </div>
  </header>
);

const Stats = () => (
  <section className="stats">
    <div className="stats-inner">
      {STATS.map(s => (
        <div key={s.label}>
          <div className="stat-num">
            {s.ph ? <span className="ph">{s.num}<span className="unit">{s.unit}</span></span> : <>{s.num}<span className="unit">{s.unit}</span></>}
          </div>
          <div className="stat-rule" />
          <div className="stat-label">{s.label}</div>
        </div>
      ))}
    </div>
  </section>
);

const Details = () => (
  <section className="section details">
    <div
      className="details-photo"
      style={{ backgroundImage: "url(assets/ely-1.webp)" }}
    />
    <div className="details-wash" />
    <div className="section-inner">
      <div className="section-head">
        <div className="eyebrow on-navy">Tournament Details</div>
        <h2 className="display-xl">Saturday, July 25 · 2026</h2>
      </div>
      <div className="details-grid">
        {DETAILS.map(d => (
          <div key={d.label} className="details-cell">
            <div className="details-icon">{d.icon}</div>
            <div className="details-label">{d.label}</div>
            <div className="details-value">
              {d.value}
              <small>{d.sub}</small>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Prizes = () => (
  <section className="prizes">
    <div className="section-inner">
      <div className="section-head">
        <div className="eyebrow">Play For</div>
        <h2 className="display-xl">Prizes Worth<br/>Swinging For</h2>
        <p className="lead" style={{ maxWidth: 560, margin: "16px auto 0" }}>
          On-course contests, a $10,000 hole-in-one prize, and team trophies — plus a raffle packed with prizes from across the Southern Tier.
        </p>
      </div>
      <div className="prizes-grid">
        {PRIZES.map((p, i) => (
          <div key={p.label} className={`prize-card ${p.hero ? "hero-prize" : ""}`}>
            <div className="label-hdr">{p.label}</div>
            <h3>{p.title}</h3>
            <div className="prize-amount">{p.amount}</div>
            <p>{p.desc}</p>
          </div>
        ))}
      </div>
      <p className="body-sm text-center" style={{ marginTop: 24, color: "var(--ink-3)" }}>
        Team trophies awarded to 1st, 2nd, and 3rd place foursomes. Raffle prizes announced at awards ceremony.
      </p>
    </div>
  </section>
);

const Sponsors = () => (
  <section className="sponsors">
    <div className="section-inner">
      <div className="section-head">
        <div className="eyebrow">Become a Sponsor</div>
        <h2 className="display-xl">Put Your Name<br/>Behind the Mission</h2>
        <p className="lead" style={{ maxWidth: 620, margin: "16px auto 0" }}>
          Sponsorship dollars stay local — funding direct assistance and peer counseling through the Southern Tier Veterans Support Group.
        </p>
      </div>
      <div className="sponsors-grid">
        {FEATURED_TIERS.map(t => (
          <div key={t.name} className={`sponsor-card ${t.featured ? "featured" : ""}`}>
            {t.badge && <div className="sponsor-badge">{t.badge}</div>}
            <div className="tier-label">{t.label}</div>
            <h3>{t.name}</h3>
            <div className="price">{t.price}</div>
            <p className="desc">{t.desc}</p>
            <ul>
              {t.includes.map((inc, i) => (
                <li key={i}>
                  <span className="inc-check">✓</span>
                  <span>{inc}</span>
                </li>
              ))}
            </ul>
            <div className="sponsor-cta-row">
              <a href="/sponsorships" className={`btn ${t.featured ? "btn-red" : "btn-ghost"}`}>
                Sponsor This →
              </a>
            </div>
          </div>
        ))}
      </div>
      <div className="text-center">
        <a href="/sponsorships" className="btn btn-navy btn-arrow">
          <span>See all 13 packages</span>
        </a>
      </div>
    </div>
  </section>
);

const Course = () => (
  <section className="course">
    <div className="course-inner">
      <div
        className="course-photo"
        style={{ backgroundImage: "url(assets/ely-4.webp)" }}
        role="img"
        aria-label="View from Ely Park Golf Course overlooking Binghamton"
      />
      <div className="course-copy">
        <div className="eyebrow">The Course</div>
        <h2 className="display-lg" style={{ marginTop: 12 }}>
          Ely Park<br />Golf Course
        </h2>
        <div className="divider-red" />
        <div>
          <p style={{margin: 0}}>Established 1930 and set high above the Southern Tier, Ely Park is an 18-hole municipal course known for dramatic mountain views and a layout that rewards smart shot-making over raw distance.</p>
          <p style={{margin: "12px 0 0"}}>It's a fitting backdrop for a day spent honoring service — wide, walkable fairways, the Catskills in the distance, and the kind of hometown hospitality that makes this tournament feel less like a fundraiser and more like a reunion.</p>
        </div>
        <div className="course-facts">
          <div className="course-fact">
            <div className="label">Holes</div>
            <div className="value">18 · Par 71</div>
          </div>
          <div className="course-fact">
            <div className="label">Length</div>
            <div className="value">6,401 yds</div>
          </div>
          <div className="course-fact">
            <div className="label">Established</div>
            <div className="value">1930</div>
          </div>
          <div className="course-fact">
            <div className="label">Location</div>
            <div className="value">Binghamton, NY</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Faq = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq">
      <div className="faq-inner">
        <div className="section-head">
          <div className="eyebrow">Frequently Asked</div>
          <h2 className="display-lg">Good Questions,<br/>Straight Answers</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle">+</span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCta = () => (
  <section className="final-cta">
    <div className="section-inner">
      <div className="eyebrow on-navy">Saturday, July 25 · 2026</div>
      <h2>
        Tee it up for a<br />
        <span className="red">Hometown Hero</span>
      </h2>
      <p>
        Whether you're bringing a foursome, sponsoring a hole, or donating a raffle prize — every commitment moves the needle for local veterans.
      </p>
      <div className="cta-row">
        <a href="/sponsorships" className="btn btn-red btn-lg btn-arrow">
          <span>Become a Sponsor</span>
        </a>
        <a href={`mailto:${SITE.contact}`} className="btn btn-ghost-light btn-lg btn-arrow">
          <span>Contact the Committee</span>
        </a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-brand">
        <img src="assets/logo.png" alt="HTH26" />
        <p>
          The Hometown Heroes Golf Classic is presented by GHS Federal Credit Union, benefiting the Southern Tier Veterans Support Group. 100% of net proceeds stay local.
        </p>
      </div>
      <div className="footer-col">
        <h4>Event</h4>
        <ul>
          <li><a href="#details">Details</a></li>
          <li><a href="#prizes">Contests & Prizes</a></li>
          <li><a href="/sponsorships">Sponsorships</a></li>
          <li><a href={`mailto:${SITE.contact}`}>Contact</a></li>
        </ul>
      </div>
      <div className="footer-col">
        <h4>Contact</h4>
        <ul>
          <li><a href={`mailto:${SITE.contact}`}>{SITE.contact}</a></li>
          <li><a href="#">Download sponsor packet (PDF)</a></li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <div>© 2026 GHS Federal Credit Union · All rights reserved</div>
      <div>
        <a href="#" style={{ marginRight: 16 }}>Privacy</a>
        <a href="#">Terms</a>
      </div>
    </div>
  </footer>
);

const Topbar = () => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const close = () => setMenuOpen(false);
  return (
    <nav className="topbar">
      <div className="topbar-inner">
        <a href="/" className="topbar-logo" onClick={close}>
          <img src="assets/logo.png" alt="HTH26" />
          <div className="wordmark">
            Hometown Heroes
            <small>Golf Classic · 2026</small>
          </div>
        </a>
        <div className={`topbar-nav ${menuOpen ? "open" : ""}`}>
          <a href="#details" onClick={close}>Details</a>
          <a href="#prizes" onClick={close}>Contests</a>
          <a href="/register" onClick={close}>Register Team</a>
          <a href="/sponsorships" className="btn btn-red btn-sm" onClick={close}>Sponsor →</a>
        </div>
        <button
          className={`topbar-menu ${menuOpen ? "open" : ""}`}
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(v => !v)}
        ><span /></button>
      </div>
    </nav>
  );
};

const App = () => (
  <>
    <Topbar />
    <main>
      <Hero />
      <div id="details"><Details /></div>
      <div id="prizes"><Prizes /></div>
      <Sponsors />
      <Course />
      <FinalCta />
    </main>
    <Footer />
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<App />);