// App.jsx — main page composition
const { useState: useState2, useEffect: useEffect2 } = React;

// Event date: Wednesday, June 24, 2026, 8:30 AM Eastern (8:00 AM VIP)
const EVENT_DATE = new Date('2026-06-24T08:30:00-04:00');
const FUNDRAISING_GOAL = 20000;
const ZOOM_URL = 'https://us02web.zoom.us/webinar/register/WN_2ETtk0RhRXWrdVibq-mMuA';
const GIVELIVELY_URL = 'https://secure.givelively.org/event/neighbors-for-better-neighborhoods/neighborhoods-in-action-breakfast-for-better-neighborhoods';
window.ZOOM_URL = ZOOM_URL;
window.GIVELIVELY_URL = GIVELIVELY_URL;

function useCountdown(target) {
  const [now, setNow] = useState2(new Date());
  useEffect2(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  return { days, hours, mins, secs };
}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-brand" href="#top">
          <span className="mark"><Icon.Logo size={32} /></span>
          <span>NBN <span style={{ color: 'var(--slate-light)', fontWeight: 500 }}>, Neighbors In Action</span></span>
        </a>
        <div className="nav-links">
          <a href="#keynote">Keynote</a>
          <a href="#impact-areas">Where It Goes</a>
          <a href="#agenda">Agenda</a>
          <a href="#faq">FAQ</a>
        </div>
        <a className="nav-cta" href={GIVELIVELY_URL} target="_blank" rel="noopener">Reserve seat</a>
      </div>
    </nav>
  );
}

function Hero({ stats }) {
  return (
    <header className="hero" id="top">
      <div className="hero-grid-bg" />
      <div className="container hero-inner">
        <div>
          <div className="eyebrow"><span className="dot" /> NBN Community Fundraiser, Summer 2026</div>
          <h1>Neighbors In Action: <em>Breakfast for Better Neighborhoods</em></h1>
          <div className="byob-tag">
            <strong>BYOB</strong> : Bring Your Own Breakfast. We&rsquo;ll bring the block.
          </div>
          <p className="hero-lede">
            A virtual fundraising breakfast with Dr. William T. Lewis, Sr. Invest in community health &amp; leadership, one connection at a time.
          </p>

          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="hero-meta-icon"><Icon.Calendar /></div>
              <div>
                <div className="hero-meta-label">Date</div>
                <div className="hero-meta-value">Wed, Jun 24, 2026</div>
              </div>
            </div>
            <div className="hero-meta-item">
              <div className="hero-meta-icon"><Icon.Clock /></div>
              <div>
                <div className="hero-meta-label">Time</div>
                <div className="hero-meta-value">8:30 &ndash; 9:30 AM ET</div>
              </div>
            </div>
            <div className="hero-meta-item">
              <div className="hero-meta-icon"><Icon.Zoom /></div>
              <div>
                <div className="hero-meta-label">Where</div>
                <div className="hero-meta-value">Zoom Webinar</div>
              </div>
            </div>
          </div>

          <div className="hero-ctas">
            <a className="btn btn-primary" href={GIVELIVELY_URL} target="_blank" rel="noopener">Reserve your seat <Icon.ArrowRight size={16} /></a>
            <a className="btn btn-secondary" href="#keynote">Meet the speaker</a>
            <span className="seats-inline"><span className="live" /> {stats.seatsFilled} of 200 seats filled</span>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div className="block-stack" aria-hidden>
            <div style={{ background: 'var(--gold)' }} />
            <div style={{ background: 'var(--teal)' }} />
            <div style={{ background: 'var(--navy-deep)' }} />
            <div style={{ background: 'var(--teal)' }} />
            <div style={{ background: 'var(--navy-deep)' }} />
            <div style={{ background: 'var(--gold)' }} />
          </div>
          <div className="hero-photo">
            <img src="assets/dr-lewis.jpg" alt="Dr. William T. Lewis, Sr." />
            <div className="hero-photo-caption">
              <div className="name">Dr. William T. Lewis, Sr.</div>
              <div className="title">Keynote Speaker, Board Chair of United Way of Forsyth County</div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function Countdown({ stats }) {
  const { days, hours, mins, secs } = useCountdown(EVENT_DATE);
  const pad = (n) => String(n).padStart(2, '0');
  const pct = Math.min(100, (stats.raised / FUNDRAISING_GOAL) * 100);
  return (
    <section className="countdown-section" id="countdown">
      <div className="container countdown-inner">
        <div className="countdown-head">
          <div className="label">Save the Date</div>
          <h2>The block comes together in</h2>
          <p>Wednesday, June 24, 2026 &middot; 8:30 AM Eastern &middot; Online via Zoom Webinar</p>
          <div style={{ marginTop: 24, maxWidth: 480 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500 }}>
                ${stats.raised.toLocaleString()} <span style={{ color: 'var(--gold-light)', fontSize: 14 }}>of ${FUNDRAISING_GOAL.toLocaleString()} goal</span>
              </span>
              <span style={{ fontSize: 12, color: 'var(--gold-light)', fontFamily: 'var(--font-mono)' }}>{Math.round(pct)}%</span>
            </div>
            <div style={{ height: 10, background: 'rgba(255,255,255,0.12)', borderRadius: 5, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${pct}%`, background: 'linear-gradient(90deg, var(--teal), var(--gold))', transition: 'width .8s' }} />
            </div>
          </div>
        </div>
        <div className="countdown-timer">
          <div className="cd-unit"><div className="num">{pad(days)}</div><div className="lbl">Days</div></div>
          <div className="cd-unit"><div className="num">{pad(hours)}</div><div className="lbl">Hours</div></div>
          <div className="cd-unit"><div className="num">{pad(mins)}</div><div className="lbl">Minutes</div></div>
          <div className="cd-unit"><div className="num">{pad(secs)}</div><div className="lbl">Seconds</div></div>
        </div>
      </div>
    </section>
  );
}

function Incentive({ stats }) {
  const claimed = stats.giftsClaimed;
  const pct = (claimed / 100) * 100;
  return (
    <section className="incentive" id="gift">
      <div className="container incentive-inner">
        <div className="incentive-icon">
          <Icon.Gift size={32} />
        </div>
        <div className="incentive-text">
          <h3>Breakfast&rsquo;s on us for the first 100 registrants.</h3>
          <p>Register early and we&rsquo;ll send you a <strong>$10 Chick&#8209;fil&#8209;A gift card</strong> by email (courtesy of our sponsor, TBD) so you can grab breakfast on the way to the webinar. One card per registrant, while supplies last.</p>
        </div>
        <div className="incentive-meter">
          <div className="lbl">Gift cards claimed</div>
          <div className="count"><em>{claimed}</em> / 100</div>
          <div className="bar"><div className="bar-fill" style={{ width: `${pct}%` }} /></div>
        </div>
      </div>
    </section>
  );
}

function ImpactAreas() {
  const areas = [
    {
      n: '01', cls: 'one', icon: <Icon.Heart />,
      title: 'Resident Health Connectors',
      body: 'Neighbors trained to link residents to the care, benefits, and wellness resources that keep families healthy. Health starts on the block.',
      funds: '$35 = one community health outreach visit',
    },
    {
      n: '02', cls: 'two', icon: <Icon.Users />,
      title: 'Health Disparities Collaborative',
      body: 'A cross-sector table where residents, clinicians, and partners tackle the root causes of health disparities across Forsyth County.',
      funds: '$200 = one resident seat at the table for a year',
    },
    {
      n: '03', cls: 'three', icon: <Icon.Block />,
      title: 'Resident Leadership Initiative',
      body: 'Training, stipends, and project support for Lead Resident Leaders, the frontline project drivers of NBN&rsquo;s Building Blocks work.',
      funds: '$500 = one resident leader cohort session',
    },
  ];
  return (
    <section className="panel impact-areas" id="impact-areas">
      <div className="container">
        <div className="panel-head">
          <div className="label">Where Your Gift Goes</div>
          <h2>Three Building Blocks. One community, built from the block up.</h2>
          <p>Every dollar raised at Neighbors In Action fuels NBN&rsquo;s three Building Blocks, resident&#8209;led, grant&#8209;matched, and rooted where they&rsquo;re needed most. You choose where your gift goes at checkout.</p>
        </div>
        <div className="impact-areas-grid">
          {areas.map((a) => (
            <div className={`impact-card ${a.cls}`} key={a.n}>
              <div className="impact-card-head">
                <div className="impact-card-num">BLOCK &middot; {a.n}</div>
                <div className="impact-card-icon">{a.icon}</div>
                <div className="impact-card-title">{a.title}</div>
              </div>
              <div className="impact-card-body">
                <p>{a.body}</p>
                <span className="funds">{a.funds}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Takeaways() {
  const items = [
    { n: '01', icon: <Icon.Users />, title: 'People First', desc: 'Move beyond programs and invest in the human infrastructure that makes lasting change possible.' },
    { n: '02', icon: <Icon.Megaphone />, title: 'Voice & Agency', desc: 'How resident voice drives self&#8209;determined neighborhoods, not top&#8209;down fixes.' },
    { n: '03', icon: <Icon.Block />, title: 'Resources That Flow', desc: 'A practical block&#8209;level framework for mobilizing what your community already has.' },
    { n: '04', icon: <Icon.Heart />, title: 'Connection as Strategy', desc: 'Why connection, not charity, is the engine of resilient neighborhoods.' },
  ];
  return (
    <section className="panel takeaways" id="takeaways">
      <div className="container">
        <div className="panel-head">
          <div className="label">What You&rsquo;ll Hear</div>
          <h2>A simple, powerful framework for building from the block up.</h2>
          <p>Dr. Lewis walks through four building blocks every resilient neighborhood needs, with stories, practical tools, and a challenge for what each of us can do Monday morning.</p>
        </div>
        <div className="takeaway-grid">
          {items.map((it) => (
            <div className="takeaway" key={it.n}>
              <div className="block-num">BLOCK &middot; {it.n}</div>
              <div className="icon">{it.icon}</div>
              <h4>{it.title}</h4>
              <p dangerouslySetInnerHTML={{ __html: it.desc }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Speaker() {
  return (
    <section className="panel speaker" id="keynote">
      <div className="container speaker-inner">
        <div className="speaker-photo-col">
          <div className="speaker-photo-wrap">
            <img src="assets/dr-lewis.jpg" alt="Dr. William T. Lewis, Sr." />
          </div>
          <div className="speaker-stats">
            <div className="speaker-stat"><div className="big">4</div><div className="lbl">Major institutions</div></div>
            <div className="speaker-stat"><div className="big">1990&ndash;98</div><div className="lbl">U.S. Marine Corps</div></div>
            <div className="speaker-stat"><div className="big">2&times;</div><div className="lbl">Award&#8209;winning author</div></div>
            <div className="speaker-stat"><div className="big">Ph.D.</div><div className="lbl">Higher Ed Administration</div></div>
          </div>
        </div>
        <div className="speaker-body">
          <div className="panel-head" style={{ marginBottom: 24 }}>
            <div className="label">Keynote Speaker</div>
            <h2>Dr. William T. Lewis, Sr.</h2>
            <p>Author, servant leader, and Board Chair of the United Way of Forsyth County.</p>
          </div>

          <p className="lead">
            &ldquo;The Power of the Block: Building Resilient Neighborhoods One Connection at a Time&rdquo; is a powerful framework for how people, voice, resources, and connection come together to transform neighborhoods from the inside out.
          </p>

          <h3>About Dr. Lewis</h3>
          <p>
            Dr. Lewis is a nationally recognized expert in organizational culture, leadership, and change management. He is the founder of WillHouse Global and co&#8209;founder of The Intersection, where he advises institutions and businesses on building cultures rooted in courage, clarity, and belonging.
          </p>
          <p>
            As Chief Executive Gopher of his family&rsquo;s social enterprise, Cam&rsquo;s Coffee Co., Dr. Lewis champions inclusive employment for individuals with disabilities. A former higher&#8209;ed executive at Indiana University, Virginia Tech, Bridgewater State, and Forsyth Tech, he currently serves as Senior Consultant for Inclusion and Belonging at ECU Health.
          </p>

          <h3>Recognition</h3>
          <ul>
            <li>Manage HR&rsquo;s Top Diversity and Inclusion Company award</li>
            <li>Triad Business Journal&rsquo;s Diversity Leadership honor</li>
            <li>Co&#8209;author, NADOHE Standards of Professional Practice (2014)</li>
          </ul>

          <h3>Author</h3>
          <div className="books">
            <div className="book">
              <div className="t-label">Book</div>
              <div className="title">Sweet Potato or Pumpkin Pie: Conversations with My White Friends about Race</div>
            </div>
            <div className="book">
              <div className="t-label">Book</div>
              <div className="title">Perched in the Storm: Brutal Lessons in Resilience Every Leader Can Learn from Entrepreneurs</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Agenda() {
  const rows = [
    { time: '8:00 AM', title: 'VIP Virtual Reception', desc: 'Small&#8209;group Zoom with Dr. Lewis, resident leaders, and NBN leadership. Exclusive to Health Equity Champion, Organizer&rsquo;s Circle, and Community Visionary sponsors.', tag: 'VIP', vip: true },
    { time: '8:30 AM', title: 'Doors Open &amp; Welcome', desc: 'Bring your breakfast. Opening remarks and an introduction to Neighbors for Better Neighborhoods.', tag: 'Opening' },
    { time: '8:35 AM', title: 'Community Impact Story', desc: 'Testimony from a Resident Health Connector or resident leader.', tag: 'Story' },
    { time: '8:40 AM', title: 'Keynote: The Power of the Block', desc: 'Dr. William T. Lewis, Sr. on building resilient neighborhoods, one connection at a time.', tag: 'keynote' },
    { time: '9:00 AM', title: 'Resident Voices', desc: 'Short reflections from residents involved in NBN programs.', tag: 'Voices' },
    { time: '9:10 AM', title: 'Community Impact Overview', desc: 'A look at the three Building Blocks: Resident Health Connectors, Health Disparities Collaborative, Resident Leadership Initiative.', tag: 'Programs' },
    { time: '9:20 AM', title: 'Fundraising Appeal', desc: 'An invitation to support the work and public recognition of our sponsors.', tag: 'Appeal' },
    { time: '9:30 AM', title: 'Closing', desc: 'Thank you and ways to stay involved on the block.', tag: 'Closing' },
  ];
  return (
    <section className="panel agenda" id="agenda">
      <div className="container">
        <div className="panel-head">
          <div className="label">Morning Agenda</div>
          <h2>90 minutes of story, framework, and invitation.</h2>
        </div>
        <div className="agenda-list">
          {rows.map((r) => (
            <div className={'agenda-row' + (r.vip ? ' vip' : '')} key={r.time}>
              <div className="agenda-time">{r.time}</div>
              <div>
                <div className="agenda-title" dangerouslySetInnerHTML={{ __html: r.title }} />
                <div className="agenda-desc" dangerouslySetInnerHTML={{ __html: r.desc }} />
              </div>
              <div className={'agenda-tag' + (r.tag === 'keynote' ? ' keynote' : '') + (r.tag === 'VIP' ? ' keynote' : '')}>{r.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Impact() {
  return (
    <section className="impact" id="impact">
      <div className="container impact-inner">
        <div>
          <h2>Last year, together, we<br/><em>exceeded our $10,000 goal.</em></h2>
        </div>
        <div className="impact-body">
          <p>
            Because of neighbors like you, last year&rsquo;s Building Blocks breakfast blew past its fundraising goal, fueling human infrastructure, resident&#8209;led initiatives, and the connections that hold our neighborhoods together.
          </p>
          <p>
            This year our goal is <strong style={{ color: 'var(--white)' }}>$20,000</strong> to fund NBN&rsquo;s three Building Blocks for the year ahead. Your registration, and every sponsorship level, moves us closer.
          </p>
          <div className="impact-sig">With gratitude, from the NBN team.</div>
        </div>
      </div>
    </section>
  );
}

function FundraisingThermometer({ stats }) {
  const pct = Math.min(100, (stats.raised / FUNDRAISING_GOAL) * 100);
  return (
    <div className="thermometer">
      <div className="thermo-head">
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--slate-light)', fontWeight: 600, marginBottom: 6 }}>Raised so far</div>
          <div className="thermo-raised">$<em>{stats.raised.toLocaleString()}</em></div>
        </div>
        <div className="thermo-goal">
          toward <strong>${FUNDRAISING_GOAL.toLocaleString()}</strong><br/>
          <span style={{ fontSize: 12, color: 'var(--slate-light)' }}>{Math.round(pct)}% of goal</span>
        </div>
      </div>
      <div className="thermo-bar"><div className="thermo-fill" style={{ width: `${pct}%` }} /></div>
      <div className="thermo-stats">
        <div className="thermo-stat"><div className="lbl">Neighbors in</div><div className="val">{stats.donors}</div></div>
        <div className="thermo-stat"><div className="lbl">Ticket goal</div><div className="val">200</div></div>
        <div className="thermo-stat"><div className="lbl">Days left</div><div className="val">{useCountdown(EVENT_DATE).days}</div></div>
      </div>
    </div>
  );
}

function Register({ stats, setStats }) {
  return (
    <section className="register" id="register">
      <div className="container register-inner">
        <div className="register-aside">
          <span className="tag-pill">Register Now</span>
          <h2>Save your seat at the block.</h2>
          <p>A 90&#8209;minute online webinar for anyone who believes neighborhoods are built by the people who live in them.</p>
          <a className="btn btn-primary" href={GIVELIVELY_URL} target="_blank" rel="noopener" style={{ marginTop: 16 }}>Reserve your seat <Icon.ArrowRight size={16} /></a>

          <div style={{ marginTop: 24 }}>
            <FundraisingThermometer stats={stats} />
          </div>

          <ul className="checklist">
            <li><div className="ico"><Icon.Check size={14} /></div><div><strong>Zoom webinar link</strong>, sent with your confirmation and re&#8209;sent 24 hours and 1 hour before the event.</div></li>
            <li><div className="ico"><Icon.Check size={14} /></div><div><strong>$10 Chick&#8209;fil&#8209;A gift card</strong> for the first 100 registrants. Breakfast&rsquo;s on us.</div></li>
            <li><div className="ico"><Icon.Check size={14} /></div><div><strong>Designate your gift</strong> to any of NBN&rsquo;s three Building Blocks, or let us direct it where it&rsquo;s needed most.</div></li>
            <li><div className="ico"><Icon.Check size={14} /></div><div><strong>VIP Reception</strong> at 8:00 AM for Health Equity Champion sponsors and above.</div></li>
            <li><div className="ico"><Icon.Check size={14} /></div><div><strong>Replay access</strong> for 30 days after the event, emailed to all ticket holders.</div></li>
            <li><div className="ico"><Icon.Check size={14} /></div><div><strong>Tax&#8209;deductible</strong>, NBN is a 501(c)(3). Receipt in your inbox.</div></li>
          </ul>
        </div>
        <RegistrationForm stats={stats} setStats={setStats} />
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState2(0);
  const items = [
    { q: 'Is this event online or in person?', a: 'Fully online, via Zoom Webinar. You&rsquo;ll receive the join link by email with your confirmation and again 24 hours before the event.' },
    { q: 'What does BYOB mean here?', a: 'Bring Your Own Breakfast! We&rsquo;re meeting at 8:30 AM, so bring coffee, a bagel, whatever fuels your morning. The first 100 registrants get a $10 Chick&#8209;fil&#8209;A gift card (sponsor TBD) to make it easy.' },
    { q: 'Why is it only one ticket price?', a: 'Because we&rsquo;re fully online, there&rsquo;s no per&#8209;seat cost for food or venue. One simple ticket at $35 keeps it accessible for every neighbor. If you want to go further, our sponsorship levels include additional seats you can share with friends.' },
    { q: 'How do I claim my $10 gift card?', a: 'If you&rsquo;re one of the first 100 registrants, the card is automatically emailed to the address on your registration within 48 hours of the event. Just keep the box checked on the form.' },
    { q: 'What is the VIP Reception?', a: 'A small&#8209;group 20&#8209;minute Zoom conversation at 8:00 AM with Dr. Lewis, Resident Health Connectors, and NBN leadership. It&rsquo;s included for sponsors at the Health Equity Champion ($500) level and above.' },
    { q: 'Can I designate where my gift goes?', a: 'Yes. At checkout you can direct your gift to Resident Health Connectors, the Health Disparities Collaborative, the Resident Leadership Initiative, or let us send it where it&rsquo;s needed most.' },
    { q: 'Will there be a recording?', a: 'Yes. All registered ticket holders get replay access for 30 days, emailed within 48 hours.' },
    { q: 'What if I can&rsquo;t make it?', a: 'Tickets are refundable through Wednesday, June 17, 2026. Or keep it and we&rsquo;ll send you the replay to watch later.' },
    { q: 'Is my ticket tax&#8209;deductible?', a: 'Neighbors for Better Neighborhoods is a 501(c)(3) nonprofit. Check your confirmation email for a deductible&#8209;amount receipt.' },
  ];
  return (
    <section className="faq" id="faq">
      <div className="container faq-grid">
        <div>
          <div className="panel-head" style={{ marginBottom: 0 }}>
            <div className="label">Questions</div>
            <h2>Frequently asked.</h2>
            <p>Can&rsquo;t find your answer? Email <a style={{ color: 'var(--teal)', textDecoration: 'underline' }} href="mailto:events@nbncommunity.org">events@nbncommunity.org</a>.</p>
          </div>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span dangerouslySetInnerHTML={{ __html: it.q }} />
                <span className="ico"><Icon.Plus size={16} /></span>
              </button>
              <div className="faq-a" dangerouslySetInnerHTML={{ __html: it.a }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-inner">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <Icon.Logo size={36} />
              <span className="brand">Neighbors for Better Neighborhoods</span>
            </div>
            <p className="brand-tag">
              Building the human infrastructure of resilient, self&#8209;determined neighborhoods, block by block, in Forsyth County and beyond.
            </p>
          </div>
          <div>
            <h5>Event</h5>
            <a href={GIVELIVELY_URL} target="_blank" rel="noopener">Reserve your seat</a>
            <a href="#keynote">Keynote Speaker</a>
            <a href="#impact-areas">Where It Goes</a>
            <a href="#agenda">Agenda</a>
            <a href="#faq">FAQ</a>
          </div>
          <div>
            <h5>NBN</h5>
            <a href="https://www.nbncommunity.org/" target="_blank" rel="noopener">nbncommunity.org</a>
            <a href="mailto:events@nbncommunity.org">events@nbncommunity.org</a>
            <a href="#">Donate</a>
            <a href="#">Volunteer</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>&copy; 2026 Neighbors for Better Neighborhoods &middot; 501(c)(3)</div>
          <div>Winston&#8209;Salem, North Carolina</div>
        </div>
      </div>
    </footer>
  );
}

/* -------------------- TWEAKS PANEL -------------------- */
function TweaksPanel({ settings, setSettings, visible }) {
  useEffect2(() => {
    document.body.setAttribute('data-accent', settings.accent);
    document.body.setAttribute('data-hero-layout', settings.heroLayout);
    document.body.setAttribute('data-countdown-style', settings.countdownStyle);
  }, [settings]);

  function update(key, val) {
    const next = { ...settings, [key]: val };
    setSettings(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
  }

  if (!visible) return null;
  return (
    <div className="tweaks-panel open">
      <h4>Tweaks</h4>
      <div className="sub">Live&#8209;preview different takes on the page.</div>

      <div className="tweak-group">
        <label>Accent color</label>
        <div className="tweak-swatches">
          {[
            { k: 'gold', c: '#C89630' },
            { k: 'teal', c: '#1A7A6E' },
            { k: 'navy', c: '#1B3D73' },
          ].map((s) => (
            <button
              key={s.k}
              className={'tweak-swatch' + (settings.accent === s.k ? ' active' : '')}
              style={{ background: s.c }}
              onClick={() => update('accent', s.k)}
              aria-label={s.k}
            />
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <label>Hero layout</label>
        <div className="tweak-opts">
          <button className={settings.heroLayout === 'photo-right' ? 'active' : ''} onClick={() => update('heroLayout', 'photo-right')}>Photo right</button>
          <button className={settings.heroLayout === 'photo-left' ? 'active' : ''} onClick={() => update('heroLayout', 'photo-left')}>Photo left</button>
        </div>
      </div>

      <div className="tweak-group">
        <label>Countdown style</label>
        <div className="tweak-opts">
          <button className={settings.countdownStyle === 'card' ? 'active' : ''} onClick={() => update('countdownStyle', 'card')}>Card</button>
          <button className={settings.countdownStyle === 'minimal' ? 'active' : ''} onClick={() => update('countdownStyle', 'minimal')}>Minimal</button>
        </div>
      </div>

      <div className="tweak-group">
        <label>BYOB tagline</label>
        <div className="tweak-opts" style={{ gridTemplateColumns: '1fr' }}>
          <button className={settings.byobTag === 'breakfast' ? 'active' : ''} onClick={() => update('byobTag', 'breakfast')}>Bring Your Own Breakfast</button>
          <button className={settings.byobTag === 'block' ? 'active' : ''} onClick={() => update('byobTag', 'block')}>Build Your Own Block</button>
          <button className={settings.byobTag === 'both' ? 'active' : ''} onClick={() => update('byobTag', 'both')}>Both, breakfast + block</button>
        </div>
      </div>
    </div>
  );
}

/* -------------------- APP ROOT -------------------- */
function App() {
  const defaults = window.__TWEAKS__ || {};
  const [settings, setSettings] = useState2({
    accent: defaults.accent || 'gold',
    heroLayout: defaults.heroLayout || 'photo-right',
    countdownStyle: defaults.countdownStyle || 'card',
    byobTag: defaults.byobTag || 'breakfast',
  });
  const [tweaksVisible, setTweaksVisible] = useState2(false);
  // Fallback values used if /stats.json can't be fetched. Edit /stats.json to update what's shown.
  const [stats, setStats] = useState2({
    raised: 2500,
    seatsFilled: 0,
    donors: 3,
    giftsClaimed: 0,
  });

  useEffect2(() => {
    fetch('/stats.json', { cache: 'no-store' })
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (!data || typeof data !== 'object') return;
        setStats((prev) => ({
          raised: typeof data.raised === 'number' ? data.raised : prev.raised,
          seatsFilled: typeof data.seatsFilled === 'number' ? data.seatsFilled : prev.seatsFilled,
          donors: typeof data.donors === 'number' ? data.donors : prev.donors,
          giftsClaimed: typeof data.giftsClaimed === 'number' ? data.giftsClaimed : prev.giftsClaimed,
        }));
      })
      .catch(() => {});
  }, []);

  // Tweaks protocol
  useEffect2(() => {
    const handler = (ev) => {
      if (ev.data?.type === '__activate_edit_mode') setTweaksVisible(true);
      else if (ev.data?.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply BYOB tag variant to DOM
  useEffect2(() => {
    const tag = document.querySelector('.byob-tag');
    if (!tag) return;
    const variants = {
      breakfast: '<strong>BYOB</strong> : Bring Your Own Breakfast. We&rsquo;ll bring the block.',
      block: '<strong>BYOB</strong> : Build Your Own Block. Connection by connection.',
      both: '<strong>BYOB</strong> : Bring Your Own Breakfast. <em style="color:var(--teal)">Build Your Own Block.</em>',
    };
    tag.innerHTML = variants[settings.byobTag];
  }, [settings.byobTag]);

  return (
    <>
      <Nav />
      <Hero stats={stats} />
      <Countdown stats={stats} />
      <Incentive stats={stats} />
      <ImpactAreas />
      <Takeaways />
      <Speaker />
      <Agenda />
      <Impact />
      <Register stats={stats} setStats={setStats} />
      <FAQ />
      <Footer />
      <TweaksPanel settings={settings} setSettings={setSettings} visible={tweaksVisible} />
    </>
  );
}

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