// All other sections, Why, Agenda, Topics, Speakers, Venue, Sponsors, Guest, FAQ, Footer, Confirmation
const { useState: sUseState } = React;

// ===== HOSTED BY band =====
function HostedBy() {
  return (
    <section className="hosted-by" id="hosted-by">
      <div className="wrap hosted-by-inner">
        <Reveal><div className="hosted-by-eyebrow">The Convening</div></Reveal>
        <p className="hosted-by-line">
          <RevealText delay={0.1} stagger={0.08}>Hosted by </RevealText>
          <em><RevealText delay={0.4} stagger={0.08}>Wealth Bridge</RevealText></em>
          <RevealText delay={0.6} stagger={0.05}>, in collaboration with the Tamil Bar Association, Tamils in Finance, and the Tamil Golfers Association.</RevealText>
        </p>
        <Reveal delay={1.2}>
          <div className="hosted-by-logos">
            <span className="hosted-by-logo">Tamil Bar Association</span>
            <span className="hosted-by-logo">Tamils in Finance</span>
            <span className="hosted-by-logo">Tamil Golfers Association</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ===== ABOUT WEALTHBRIDGE =====
function AboutWealthBridge() {
  return (
    <section className="section" id="about-wb" style={{ background: 'var(--parchment)' }}>
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow">The Host</span></div>
          <div>
            <Reveal><h2>About <em>Wealth Bridge.</em></h2></Reveal>
          </div>
        </div>
        <div className="about-wb-grid">
          <div></div>
          <div className="about-wb-body">
            <Reveal delay={0.1}><p>
              Wealth Bridge is an estate and legacy planning firm built around a simple conviction: the work of protecting what families build is too important to be transactional. Led by Chen Ganesarajah, the firm convenes business owners, families, and the professionals who advise around the questions that define generational wealth.
            </p></Reveal>
            <Reveal delay={0.25}><p>
              The Estate Planning Summit &amp; Golf Social is the firm's signature annual gathering: a curated day designed not to sell, but to connect.
            </p></Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== RESERVE (dual CTA) =====
function Reserve({ onAttendeeClick, onSponsorClick }) {
  return (
    <section className="section section-dark reserve-section" id="reserve" style={{ background: 'var(--forest-900)', color: 'var(--cream)' }}>
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow" style={{ color: 'var(--gold-soft)' }}>Registration</span></div>
          <div>
            <Reveal><h2 style={{ color: 'var(--cream)' }}>Reserve <em style={{ color: 'var(--gold-soft)' }}>Your Seat.</em></h2></Reveal>
            <Reveal delay={0.15}><p className="lede" style={{ marginTop: 24, color: 'color-mix(in oklab, var(--cream) 70%, transparent)' }}>
              Two paths into the room. Attendees register for review. Sponsors choose a tier.
            </p></Reveal>
          </div>
        </div>
        <div className="reserve-grid">
          <div className="reserve-card reserve-card--primary">
            <h3>For Attendees</h3>
            <p>Submit your registration for review. Confirmation issued within forty-eight hours.</p>
            <a href="#rsvp-anchor" className="reserve-cta" onClick={(e) => { e.preventDefault(); onAttendeeClick && onAttendeeClick(); }}>
              Reserve your seat <span>→</span>
            </a>
          </div>
          <div className="reserve-card reserve-card--secondary">
            <h3>For Sponsors</h3>
            <p>Nine sponsorships across three tiers. Category exclusivity available at the Powered By level.</p>
            <a href="#sponsors" className="reserve-cta" onClick={(e) => { e.preventDefault(); onSponsorClick && onSponsorClick(); }}>Reserve a hole <span>→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// MapLibre tile — same engine mapcn wraps (MapLibre GL + CARTO basemap), themed forest
function VenueMap({ height = '100%', credit = 'Royal Ashburn · Whitby ON' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || !window.maplibregl) return;
    const map = new window.maplibregl.Map({
      container: ref.current,
      style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
      center: [-78.9706, 43.9706],
      zoom: 13.4,
      attributionControl: false,
      cooperativeGestures: true,
    });
    map.addControl(
      new window.maplibregl.NavigationControl({ showCompass: false, visualizePitch: false }),
      'top-right'
    );

    // Forest palette — applied per-layer after style loads
    const C = {
      paper:    '#F4EFE3', // parchment background
      water:    '#1F3A2E', // deep forest
      green:    '#2C5040', // forest-500 (parks/landcover)
      greenLt:  '#5C7A6B', // forest-300
      moss:     '#8FA08C',
      road:     '#E8DDC4', // creamy roads
      roadHwy:  '#B5915A', // gold for highways
      building: '#E5DDC9',
      label:    '#0E1F18',
      labelLt:  '#5C7A6B',
      halo:     '#F4EFE3',
    };
    const setPaint = (id, prop, val) => {
      try { if (map.getLayer(id)) map.setPaintProperty(id, prop, val); } catch (e) {}
    };
    const recolor = () => {
      const style = map.getStyle();
      if (!style?.layers) return;
      style.layers.forEach((layer) => {
        const id = layer.id || '';
        const t = layer.type;
        const lower = id.toLowerCase();
        if (t === 'background') {
          setPaint(id, 'background-color', C.paper);
        } else if (t === 'fill') {
          if (/water|ocean|sea|river|lake/.test(lower)) {
            setPaint(id, 'fill-color', C.water);
            setPaint(id, 'fill-opacity', 0.92);
          } else if (/park|grass|wood|forest|landcover|nature|green|golf|pitch|cemetery/.test(lower)) {
            setPaint(id, 'fill-color', C.green);
            setPaint(id, 'fill-opacity', 0.55);
          } else if (/sand|beach/.test(lower)) {
            setPaint(id, 'fill-color', C.moss);
          } else if (/building/.test(lower)) {
            setPaint(id, 'fill-color', C.building);
            setPaint(id, 'fill-opacity', 0.85);
          } else if (/landuse|residential|industrial|commercial|urban/.test(lower)) {
            setPaint(id, 'fill-color', C.paper);
          }
        } else if (t === 'line') {
          if (/water|river|stream/.test(lower)) {
            setPaint(id, 'line-color', C.water);
          } else if (/motorway|highway|trunk/.test(lower)) {
            setPaint(id, 'line-color', C.roadHwy);
            setPaint(id, 'line-opacity', 0.9);
          } else if (/road|street|path|tunnel|bridge|rail/.test(lower)) {
            setPaint(id, 'line-color', C.road);
          } else if (/admin|boundary|border/.test(lower)) {
            setPaint(id, 'line-color', C.greenLt);
            setPaint(id, 'line-opacity', 0.5);
          }
        } else if (t === 'symbol') {
          setPaint(id, 'text-color', /road|street/.test(lower) ? C.labelLt : C.label);
          setPaint(id, 'text-halo-color', C.halo);
          setPaint(id, 'text-halo-width', 1.2);
        }
      });
    };

    if (map.isStyleLoaded()) recolor();
    map.on('style.load', recolor);

    const pin = document.createElement('div');
    pin.className = 'venue-map-pin';
    new window.maplibregl.Marker({ element: pin, anchor: 'center' })
      .setLngLat([-78.9706, 43.9706])
      .addTo(map);
    return () => map.remove();
  }, []);
  return (
    <div style={{ position: 'relative', width: '100%', height }}>
      <div ref={ref} style={{ width: '100%', height: '100%' }} />
      {credit && <div className="venue-map-credit">{credit}</div>}
    </div>
  );
}

// ===== WHY SPONSOR =====
function WhyAttend() {
  const items = [
    { title: 'The right room', body: 'Direct access to business owners and accomplished families actively planning their financial and legacy future.' },
    { title: 'Peer-level positioning', body: 'Build relationships with leading legal, tax, and financial planning practitioners who serve the same clients you do.' },
    { title: 'Educational credibility', body: 'Exclusive positioning alongside a curated educational program designed for substantive professional engagement.' },
    { title: 'Time on the course', body: 'Four hours of genuine relationship-building through golf and curated networking.' },
    { title: 'Long horizon', body: 'A platform for client acquisition, referral partnerships, and strategic alliances that extend well beyond the day.' },
  ];
  return (
    <section className="section section-dark" id="why" style={{ background: 'var(--forest-900)', color: 'var(--cream)' }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow" style={{ color: 'var(--gold-soft)' }}>For Sponsors</span>
          </div>
          <div>
            <Reveal><h2 style={{ color: 'var(--cream)' }}>Why sponsor <em style={{ color: 'var(--gold-soft)' }}>this event.</em></h2></Reveal>
            <Reveal delay={0.15}><p className="lede" style={{ marginTop: 24, color: 'color-mix(in oklab, var(--cream) 70%, transparent)' }}>
              Five reasons this room matters.
            </p></Reveal>
          </div>
        </div>
        <div className="why-grid">
          {items.map((item, i) => (
            <Reveal key={i} delay={i * 0.08}>
              <div className="why-cell">
                <div className="why-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="why-text">
                  <div className="why-title">{item.title}</div>
                  <div className="why-body">{item.body}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== AGENDA =====
const AGENDA = [
  { time: '08:00 – 08:45', title: 'Arrival & Continental Breakfast', meta: ['Foyer', 'Open seating'] },
  { time: '08:45 – 09:00', title: 'Opening Remarks', meta: ['Main Hall', 'Wealth Bridge'] },
  { time: '09:00 – 12:00', title: 'Educational Sessions', meta: ['Main Hall'] },
  { time: '12:30 – 13:30', title: 'Lunch on the Terrace', meta: ['Course-side', 'Plated'] },
  { time: '13:30 – 17:00', title: '9-Hole Scramble Tournament', meta: ['Front Nine', '4-person teams'] },
  { time: '17:00 – 18:30', title: 'Networking Reception & Closing Remarks', meta: ['Veranda', 'Cocktails and canapés', 'Closing remarks at 18:15'] },
];

function Agenda() {
  return (
    <section className="section section-dark" id="agenda" style={{ background: 'var(--forest-900)', color: 'var(--cream)' }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow" style={{ color: 'var(--gold-soft)' }}>The Day · Aug 18</span>
          </div>
          <div>
            <Reveal><h2 style={{ color: 'var(--cream)' }}><em style={{ color: 'var(--gold-soft)' }}>Agenda.</em></h2></Reveal>
          </div>
        </div>
        <div className="agenda-grid">
          {AGENDA.map((a, i) => (
            <React.Fragment key={i}>
              <div className="agenda-time">
                <span className="agenda-time-text">{a.time}</span>
              </div>
              <div className="agenda-content">
                <h3 className="agenda-title">{a.title}</h3>
                <div className="agenda-meta">
                  {a.meta.map((m, j) => <span key={j}>{m}</span>)}
                </div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== TOPICS =====
const TOPICS = [
  { t: 'Tax-Efficient Wealth Transfer for Business Owners', led: 'Tax Strategy' },
  { t: 'Legal Essentials in Private Corporation Estate Planning', led: 'Legal' },
  { t: 'Charitable Giving Structures for Family Legacy', led: 'Philanthropy' },
  { t: 'Legacy Planning Strategies', led: 'Financial Planning' },
  { t: 'Preparing the Next Generation: Family Values, Wealth, and Purpose', led: 'Business Succession Planning' },
];
function Topics() {
  return (
    <section className="section" id="topics">
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow">On the Table</span></div>
          <div>
            <Reveal><h2>Five conversations. <em>One legacy.</em></h2></Reveal>
            <Reveal delay={0.15}><p className="lede" style={{ marginTop: 24 }}>
              The questions every business owner eventually has to answer, opened up with practitioners who navigate them every day. Built for working through, not sitting through.
            </p></Reveal>
          </div>
        </div>
        <div className="topics-grid">
          {TOPICS.map((t, i) => (
            <Reveal key={i} delay={i * 0.06}>
              <div className="topic">
                <div className="topic-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="topic-body">
                  <h3 className="topic-title">{t.t}</h3>
                  <div className="topic-led">{t.led}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== VISION =====
function Vision() {
  return (
    <section className="section vision-section" id="vision">
      <div className="wrap">
        <div className="vision-grid">
          <aside className="vision-aside">
            <div className="vision-index">001</div>
            <div className="vision-eyebrow">The Vision</div>
            <div className="vision-rule"></div>
          </aside>
          <div className="vision-body">
            <h2 className="vision-heading">
              The <em>Vision.</em>
            </h2>
            <p className="vision-lede">
              Wealth Bridge convenes the Estate Planning Summit &amp; Golf Social to bring together the people who think about legacy as a generational responsibility: business owners actively planning their financial and family futures, and the legal, tax, and accounting professionals who help them get it right.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== SPEAKERS =====
const SPEAKERS = [
  { name: 'To Be Announced', role: 'Tax Strategy', firm: 'Senior Partner, Tax Advisory' },
  { name: 'To Be Announced', role: 'Legal', firm: 'Estate Planning Counsel' },
  { name: 'To Be Announced', role: 'Succession', firm: 'Family Enterprise Advisor' },
  { name: 'To Be Announced', role: 'Financial Planning', firm: 'Legacy Planning Specialist' },
  { name: 'To Be Announced', role: 'Business Succession Planning', firm: 'Next-Gen Educator' },
  { name: 'To Be Announced', role: 'Moderator', firm: 'Wealth Bridge Advisory' },
  { name: 'To Be Announced', role: 'Closing', firm: 'Industry Voice' },
  { name: 'To Be Announced', role: 'Panel', firm: 'Roundtable Host' },
];
function Speakers() {
  return (
    <section className="section" id="speakers" style={{ background: 'var(--cream)' }}>
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow">Speakers</span></div>
          <div>
            <h2>Practitioners, <em>not panelists.</em></h2>
            <p className="lede" style={{ marginTop: 24 }}>
              Names announced as the program is finalized. Each speaker hosts a breakout for direct conversation.
            </p>
          </div>
        </div>
        <div className="speakers-grid">
          {SPEAKERS.map((s, i) => (
            <Reveal key={i} delay={(i % 4) * 0.08}>
              <Tilt max={4}>
              <div className="speaker">
                <div className="speaker-photo"></div>
                <div className="speaker-info">
                <h3 className="speaker-name">{s.name}</h3>
                <div className="speaker-role">{s.role}</div>
                  <div className="speaker-firm">{s.firm}</div>
                </div>
              </div>
              </Tilt>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== VENUE =====
function Venue() {
  return (
    <section className="section section-dark" id="venue" style={{ background: 'var(--forest-900)', color: 'var(--cream)' }}>
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow" style={{ color: 'var(--gold-soft)' }}>The Venue</span></div>
          <div>
            <Reveal><h2 style={{ color: 'var(--cream)' }}>Royal Ashburn <em style={{ color: 'var(--gold-soft)' }}>Golf Club.</em></h2></Reveal>
            <Reveal delay={0.1}>
              <p className="lede" style={{ marginTop: 24, color: 'color-mix(in oklab, var(--cream) 70%, transparent)' }}>
                A storied club north-east of Toronto, set among mature trees and rolling fairways.
              </p>
            </Reveal>
          </div>
        </div>
        <div className="venue-grid">
          <Reveal>
            <div className="venue-gallery">
              <Tilt max={3}>
                <div className="venue-photo" style={{ height: 380 }}>
                  <img src="assets/clubhouse.webp" alt="Royal Ashburn Clubhouse at dusk" />
                  <div className="label">Clubhouse · Veranda at dusk</div>
                </div>
              </Tilt>
              <div className="venue-photo-bottom">
                <Tilt max={3}>
                  <div className="venue-photo" style={{ height: 200 }}>
                    <img src="assets/fairway.webp" alt="Fairway view" />
                    <div className="label">Front Nine</div>
                  </div>
                </Tilt>
                <div className="venue-photo venue-photo--map" style={{ height: 200 }}>
                  <VenueMap />
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={0.15}>
            <dl className="venue-list">
              <dt>Address</dt>
              <dd>995 Myrtle Road West, Whitby, ON L1P 1R1</dd>
              <dt>Date</dt>
              <dd>Tuesday, August 18, 2026<br /><em>8:00 AM to 6:30 PM</em></dd>
            </dl>
            <a className="map-pill" href="https://maps.app.goo.gl/V2dvhoTfa86rrb3r9" target="_blank" rel="noopener noreferrer">
              <span style={{ fontSize: 14 }}>↗</span> Open in Maps
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ===== SPONSORS =====
const TIERS = [
  {
    name: 'Powered By', limit: 'Limited to 4 sponsors', price: '$7,500', meta: 'Includes Exclusive Hole',
    featured: true,
    items: [
      'Professional category exclusivity',
      'Recognition as Powered By Sponsor',
      'Premium logo placement on all marketing materials',
      'Logo on all summit presentation screens',
      'Verbal recognition during program',
      'Priority booth placement, premium location',
      '5-minute speaking opportunity during summit',
      'Four complimentary summit + golf registrations',
      'Dedicated signage at one golf hole',
      'Inclusion in attendee gift bags',
      'Full-page mention in event program',
      'Post-event attendee list (opted-in)',
      'Social media recognition (5 posts)',
    ],
  },
  {
    name: 'Platinum', limit: 'Limited to 3 sponsors', price: '$5,000', meta: 'Includes Exclusive Hole',
    items: [
      'Logo on all marketing materials',
      'Logo on summit presentation screens',
      'Verbal recognition during program',
      'Dedicated booth at the event',
      'Two complimentary summit + golf registrations',
      'Dedicated signage at one golf hole',
      'Inclusion in attendee gift bags',
      'Half-page mention in event program',
      'Post-event attendee list (opted-in)',
      'Social media recognition (3 posts)',
    ],
  },
  {
    name: 'Gold', limit: 'Limited to 2 sponsors', price: '$2,500', meta: 'Includes Exclusive Hole',
    items: [
      'Logo on all marketing materials',
      'Logo on summit presentation screens',
      'Verbal recognition during program',
      'One complimentary summit + golf registration',
      'Dedicated signage at one golf hole',
      'Inclusion in attendee gift bags',
      'Quarter-page mention in event program',
      'Social media recognition (1 post)',
    ],
  },
];

function Sponsors({ view, onTierSelect, onBack }) {
  const showingForm = view && view.mode === 'form';
  return (
    <section className="section" id="sponsors">
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow">Sponsorship</span></div>
          <div>
            <Reveal><h2>Nine sponsors. <em>Nine holes.</em></h2></Reveal>
            <Reveal delay={0.15}><p className="lede" style={{ marginTop: 24 }}>
              Sponsorship is capped at nine partners. Each sponsor receives meaningful exposure to a curated room of business owners and professionals actively planning their financial and legacy future.
            </p></Reveal>
          </div>
        </div>
        {showingForm ? (
          <div className="sponsor-reserve-wrap">
            <button type="button" className="sponsor-reserve-back" onClick={onBack}>
              <span aria-hidden="true">←</span> Back to tiers
            </button>
            <SponsorReserveCard selectedTier={view.tier} />
          </div>
        ) : (
          <>
            <div className="sponsor-tiers">
              {TIERS.map((t, idx) => (
                <Reveal key={t.name} delay={idx * 0.1}>
                  <Tilt max={5}>
                  <div className={`tier ${t.featured ? 'featured' : ''}`}>
                    <div className="tier-meta">{t.limit}</div>
                    <h3 className="tier-name">{t.name}</h3>
                    <div className="tier-price">{t.price}</div>
                    <div className="tier-price-meta">{t.meta}</div>
                    <ul className="tier-list">
                      {t.items.map((it, i) => <li key={i}>{it}</li>)}
                    </ul>
                    <button
                      type="button"
                      className="tier-cta"
                      onClick={() => onTierSelect && onTierSelect(t.name)}
                    >
                      Reserve a hole →
                    </button>
                  </div>
                  </Tilt>
                </Reveal>
              ))}
            </div>
            <div style={{ marginBottom: 28 }}>
              <span className="eyebrow">Hole Sponsors · 9 of 9</span>
            </div>
            <div className="sponsor-logos">
              {Array.from({ length: 9 }, (_, i) => (
                <div className="sponsor-slot" key={i}>
                  <span className="hole-num">Hole {i + 1}</span>
                  <span>Available</span>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  );
}

// ===== SPONSOR RESERVE FORM =====
const SPONSOR_TIER_OPTIONS = [
  { v: 'Powered By', t: 'Powered By', tag: '$7,500' },
  { v: 'Platinum', t: 'Platinum', tag: '$5,000' },
  { v: 'Gold', t: 'Gold', tag: '$2,500' },
];

function SponsorReserveCard({ selectedTier }) {
  const [data, setData] = sUseState({ name: '', email: '', firm: '', tier: '' });
  const [errors, setErrors] = sUseState({});
  const [submitting, setSubmitting] = sUseState(false);
  const [done, setDone] = sUseState(false);

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));

  React.useEffect(() => {
    if (selectedTier) setData((d) => ({ ...d, tier: selectedTier }));
  }, [selectedTier]);

  const validate = () => {
    const e = {};
    if (!data.tier) e.tier = 'Pick one';
    if (!data.name.trim()) e.name = 'Required';
    if (!data.email.trim()) e.email = 'Required';
    else if (!/^\S+@\S+\.\S+$/.test(data.email)) e.email = 'Invalid email';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    await new Promise((r) => setTimeout(r, 900));
    setSubmitting(false);
    setDone(true);
  };

  if (done) {
    return (
      <div className="rsvp-card sponsor-reserve-card">
        <div className="rsvp-card-head">
          <div>
            <div className="rsvp-card-eyebrow">Submitted</div>
            <h3 className="rsvp-card-title">Thank you, {data.name.split(' ')[0]}.</h3>
          </div>
        </div>
        <p style={{ fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.65, color: 'var(--forest-500)', margin: '6px 0 0' }}>
          Our team will contact you to confirm <b style={{ color: 'var(--forest-900)', fontWeight: 500 }}>{data.tier}</b> availability and walk you through the payment details and next steps.
        </p>
      </div>
    );
  }

  return (
    <div className="rsvp-card sponsor-reserve-card">
      <div className="rsvp-card-head">
        <div>
          <div className="rsvp-card-eyebrow">Sponsorship Inquiry</div>
          <h3 className="rsvp-card-title">Reserve a hole</h3>
        </div>
      </div>
      <form onSubmit={submit} noValidate>
        <div className={`field ${errors.tier ? 'error' : ''}`}>
          <label>Tier</label>
          <div className="choice-grid">
            {SPONSOR_TIER_OPTIONS.map((o) => (
              <button key={o.v} type="button" className="choice"
                aria-pressed={data.tier === o.v}
                onClick={() => update('tier', o.v)}>
                <span className="mono-tag">{o.tag}</span>
                {o.t}
              </button>
            ))}
          </div>
          {errors.tier && <div className="field-error">{errors.tier}</div>}
        </div>
        <div className={`field ${errors.name ? 'error' : ''}`} style={{ marginTop: 18 }}>
          <label htmlFor="sponsor-name">Full name</label>
          <input id="sponsor-name" name="name" type="text" autoComplete="name"
            value={data.name} onChange={(e) => update('name', e.target.value)} placeholder="Full name" />
          {errors.name && <div className="field-error">{errors.name}</div>}
        </div>
        <div className={`field ${errors.email ? 'error' : ''}`}>
          <label htmlFor="sponsor-email">Email</label>
          <input id="sponsor-email" name="email" type="email" autoComplete="email" inputMode="email"
            value={data.email} onChange={(e) => update('email', e.target.value)} placeholder="you@firm.com" />
          {errors.email && <div className="field-error">{errors.email}</div>}
        </div>
        <div className="field">
          <label htmlFor="sponsor-firm">Firm or company</label>
          <input id="sponsor-firm" name="firm" type="text" autoComplete="organization"
            value={data.firm} onChange={(e) => update('firm', e.target.value)} placeholder="Optional" />
        </div>
        <button type="submit" className="btn" disabled={submitting}>
          {submitting ? 'Sending…' : 'Submit inquiry'} {!submitting && <span className="arrow">→</span>}
        </button>
      </form>
    </div>
  );
}

// ===== GUEST / FORWARD =====
const GUEST_MESSAGES = {
  client: `Hi {name},\n\nI've been invited to a small, curated day Wealth Bridge is hosting on August 18, the Estate Planning Summit & Golf Social at Royal Ashburn. It's intentionally capped at 100 attendees: a half-day of focused sessions on succession, tax, and legacy planning, then a 9-hole scramble and reception.\n\nI think it would be worth your while. The link below has the agenda and a registration form, happy to walk you through any of it.`,
  partner: `Hi {name},\n\nI'm attending Wealth Bridge's Estate Planning Summit & Golf Social on August 18 at Royal Ashburn. The room is curated, about 100 business owners and senior advisors across legal, tax, and finance, and the format is built for the kind of relationship development that's hard to engineer at a larger event.\n\nIf you're free, I'd suggest joining. Details and RSVP below.`,
  short: `Wealth Bridge Estate Planning Summit & Golf Social, August 18, 2026 · Royal Ashburn. Curated, 100 attendees, summit + 9-hole scramble + reception. RSVP: wealthbridge.ca/summit`,
};

function GuestModule() {
  const [tab, setTab] = sUseState('client');
  const [copied, setCopied] = sUseState(false);

  const message = GUEST_MESSAGES[tab].replace('{name}', '[Name]');

  const copy = () => {
    navigator.clipboard?.writeText(message);
    setCopied(true);
    setTimeout(() => setCopied(false), 2200);
  };

  return (
    <section className="section guest-section" id="guest">
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow">Bring a Guest</span></div>
          <div>
            <h2 style={{ color: 'var(--cream)' }}>Forward <em>with confidence.</em></h2>
            <p className="lede" style={{ marginTop: 24 }}>
              Tier 2 and Tier 3 invitees may bring qualified guests. Use the language below, or write your own.
            </p>
          </div>
        </div>
        <div className="guest-grid">
          <div>
            <div className="guest-tabs">
              {[
                { v: 'client', t: 'For a Client' },
                { v: 'partner', t: 'For a Partner' },
                { v: 'short', t: 'Short Note' },
              ].map((o) => (
                <button key={o.v} className="guest-tab"
                  aria-selected={tab === o.v}
                  onClick={() => setTab(o.v)}>
                  {o.t}
                </button>
              ))}
            </div>
            <div className="guest-message">
              {message.split('\n').map((p, i) => p ? <p key={i} style={{ margin: i === 0 ? 0 : '14px 0 0' }}>{p}</p> : null)}
              <div className="guest-message-sig">Edit & forward · wealthbridge.ca/summit</div>
            </div>
            <div className="guest-actions">
              <button className={`action-pill ${copied ? 'copied' : ''}`} onClick={copy}>
                {copied ? '✓ Copied to clipboard' : 'Copy invitation'}
              </button>
              <button className="action-pill" onClick={() => {
                const subject = encodeURIComponent('Wealth Bridge Estate Planning Summit · August 18');
                const body = encodeURIComponent(message);
                window.location.href = `mailto:?subject=${subject}&body=${body}`;
              }}>↗ Email</button>
              <button className="action-pill" onClick={() => {
                navigator.clipboard?.writeText('https://wealthbridge.ca/summit');
              }}>⌘ Copy link</button>
            </div>
          </div>
          <div className="guest-stats">
            <div className="guest-stat">
              <div className="guest-stat-num">100</div>
              <div className="guest-stat-label">Total Attendees</div>
              <div className="guest-stat-text">A deliberate ceiling. Every guest you forward to is replacing a generic invitation we'd otherwise send, so your endorsement carries weight in the room.</div>
            </div>
            <div className="guest-stat">
              <div className="guest-stat-num">3</div>
              <div className="guest-stat-label">Guest Maximum</div>
              <div className="guest-stat-text">Each invitee may forward to up to three qualified guests. We review forwards within 48 hours and confirm directly.</div>
            </div>
            <div className="guest-stat">
              <div className="guest-stat-num">48h</div>
              <div className="guest-stat-label">Confirmation Window</div>
              <div className="guest-stat-text">Guests register through the same link. We confirm with you and them within two business days.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== FAQ =====
const FAQS = [
  { q: 'Is there a cost to attend?', a: 'Ticket price is $399 per attendee. Registration is reviewed against the curated guest list.' },
  { q: 'What\'s the dress code?', a: 'Business smart for the morning summit. Golf attire for the round. Business cocktail for the evening reception. Changing facilities are available at the clubhouse.' },
  { q: 'How does registration work?', a: 'Submit your registration through the form on this page. Confirmation is issued within forty-eight hours. If the room is at capacity, you will be added to the waitlist with priority for any released seats.' },
  { q: 'Can I bring a guest?', a: 'Confirmed attendees may register one guest. After confirming your own seat, email admin@wealthbridge.ca with your guest\'s name, firm, and role. Guests are subject to the same review process and we\'ll confirm within two business days.' },
  { q: 'Will sessions be CPD accredited?', a: 'Yes. CPD accreditation is confirmed with the relevant professional bodies.' },
  { q: 'Is the event accessible?', a: 'Royal Ashburn Golf Club is accessible. Indicate any mobility or dietary requirements on your registration; we will follow up directly to confirm arrangements.' },
  { q: 'Is sponsorship still available?', a: 'Sponsorship is capped at nine partners across three tiers. Current availability is shown above. Email admin@wealthbridge.ca to inquire.' },
];
function FAQ() {
  const [openSet, setOpenSet] = sUseState(() => new Set());
  const toggle = (i) => {
    setOpenSet((prev) => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i); else next.add(i);
      return next;
    });
  };
  return (
    <section className="section" id="faq" style={{ background: 'var(--cream)' }}>
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow">Common Questions</span></div>
          <div>
            <Reveal><h2>Practical <em>matters.</em></h2></Reveal>
          </div>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => {
            const isOpen = openSet.has(i);
            const panelId = `faq-panel-${i}`;
            return (
              <div className="faq-item" key={i} data-open={isOpen}>
                <button
                  type="button"
                  className="faq-q"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => toggle(i)}
                >
                  <span>{f.q}</span>
                  <span className="icon" aria-hidden="true">+</span>
                </button>
                <div className="faq-a" id={panelId} role="region">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ===== CONFIRMATION HERO (replaces hero after RSVP) =====
function ConfirmHero({ data, onUndo }) {
  const { days, hours } = useCountdown(EVENT_DATE);

  const calLink = () => {
    const dt = '20260818T120000Z';
    const dtEnd = '20260818T223000Z';
    const url = `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent('Estate Planning Summit & Golf Social')}&dates=${dt}/${dtEnd}&location=${encodeURIComponent('Royal Ashburn Golf Club, Whitby ON')}&details=${encodeURIComponent('Wealth Bridge curated event. Full day program.')}`;
    window.open(url, '_blank');
  };

  return (
    <section className="confirm-hero">
      <div className="confirm-inner">
        <div className="confirm-badge">
          <span className="pulse"></span> RSVP Confirmed
        </div>
        <h1 className="confirm-title">
          Welcome, <em>{(data.name || 'friend').split(' ')[0]}.</em><br />
          We've reserved your seat.
        </h1>
        <p className="hero-sub" style={{ color: 'color-mix(in oklab, var(--cream) 80%, transparent)' }}>
          A confirmation is on its way to <b style={{ color: 'var(--cream)' }}>{data.email}</b>. We'll send venue logistics, parking, and your team pairing the week of the event.
        </p>
        <div className="confirm-actions">
          <button className="action-pill" onClick={calLink}>↗ Add to calendar</button>
          <a className="action-pill" href="#agenda">View agenda</a>
          <a className="action-pill" href="#faq">Bring a guest</a>
          <button className="action-pill" onClick={onUndo} style={{ opacity: 0.6 }}>Edit RSVP</button>
        </div>
        <dl className="confirm-meta">
          <div>
            <dt>Date</dt>
            <dd>Tuesday, Aug 18, 2026</dd>
          </div>
          <div>
            <dt>Venue</dt>
            <dd>Royal Ashburn Golf Club</dd>
          </div>
          <div>
            <dt>Joining for</dt>
            <dd>{({ full: 'Full Day', summit: 'Summit Only', golf: 'Golf + Reception' })[data.tier] || 'Full Day'}</dd>
          </div>
          <div>
            <dt>Countdown</dt>
            <dd>{days} days · {hours} hrs</dd>
          </div>
        </dl>
      </div>
    </section>
  );
}

// ===== DATE STRIP (replaces countdown) =====
function DateStrip() {
  const { days } = useCountdown(EVENT_DATE);
  return (
    <div className="date-strip">
      <div className="date-strip-line">
        Tuesday, August 18, 2026 · 8:00 AM to 6:30 PM · Royal Ashburn Golf Club, Whitby, Ontario
      </div>
      <div className="date-strip-meta">{days} days to event</div>
    </div>
  );
}

// ===== FOOTER =====
function Footer() {
  return (
    <footer className="footer">
      <DateStrip />
      <div className="wrap" style={{ paddingTop: 80 }}>
        <div className="footer-grid">
          <div>
            <h2 className="footer-brand">Wealth Bridge</h2>
            <p className="footer-brand-tag">A curated day of education, golf, and meaningful relationship building for business owners and the professionals who advise them.</p>
            <span className="eyebrow" style={{ color: 'var(--gold-soft)' }}>August 18, 2026 · Royal Ashburn</span>
          </div>
          <div>
            <h4>Event</h4>
            <ul>
              <li><a href="#agenda" style={{ textDecoration: 'none', color: 'inherit' }}>Agenda</a></li>
              <li><a href="#topics" style={{ textDecoration: 'none', color: 'inherit' }}>Topics</a></li>
              <li><a href="#sponsors" style={{ textDecoration: 'none', color: 'inherit' }}>Sponsorship</a></li>
              <li><a href="#venue" style={{ textDecoration: 'none', color: 'inherit' }}>Venue</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li>Achsah Aloysius, Operations Manager<br /><a href="mailto:admin@wealthbridge.ca" style={{ textDecoration: 'none', color: 'inherit' }}>admin@wealthbridge.ca</a></li>
              <li>Toronto · Canada</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Wealth Bridge · Estate Planning Summit</span>
          <span>In collaboration with the Tamil Bar Association · Tamils in Finance · Tamil Golfers Association</span>
        </div>
      </div>
    </footer>
  );
}

function StickyRsvp({ confirmed, onClick }) {
  const [hidden, setHidden] = sUseState(false);
  React.useEffect(() => {
    const onScroll = () => {
      // Hide when at very top (hero RSVP card visible) or near footer
      const y = window.scrollY;
      const max = document.body.scrollHeight - window.innerHeight;
      setHidden(y < 400 || y > max - 200);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button className="sticky-rsvp" data-hidden={hidden} onClick={onClick}>
      <span className="pulse-dot"></span>
      {confirmed ? "✓ You're registered" : 'Reserve your seat'}
      <span style={{ opacity: 0.7 }}>→</span>
    </button>
  );
}

Object.assign(window, { WhyAttend, Agenda, Topics, Speakers, Venue, Sponsors, GuestModule, FAQ, ConfirmHero, Footer, StickyRsvp, HostedBy, AboutWealthBridge, Reserve, Vision });