// Page modules — render shared content for both Base and Base+
// Pass `plus` to enable ghosted add-on modules.
const {} = window;

// ============== HOME ==============
function HomePage({ plus }) {
  return (
    <Fragment>
      <Hero />
      <QuickInfoBand />

      {/* Newsletter add-on — relocated up between This Week and the Tap list (was bottom of page) */}
      {plus &&
      <Block ghost addon="Newsletter" price="350" tooltip="Newsletter add-on: name + email + opt-ins. Pulled up out of the footer so it has actual presence on Home.">
          <div className="newsletter-card">
            <div className="newsletter-side">
              <div className="newsletter-eyebrow">FREE TO JOIN</div>
              <div className="newsletter-title">First word on what's pouring next.</div>
              <div className="newsletter-sub">New taps, takeover Fridays, members-only nights. Once a week, never spammy.</div>
            </div>
            <div className="newsletter-form">
              <FormField label="Name" />
              <FormField label="Email" />
              <div style={{ fontSize: 11, marginTop: 4 }}>☐ Text me too &nbsp;·&nbsp; Tags: ☐ events ☐ new taps ☐ members-only</div>
              <button className="btn primary" style={{ marginTop: 8, fontSize: 12 }}>Sign me up</button>
            </div>
          </div>
        </Block>
      }

      {/* This Week at Beluga (Events add-on, Home placement) */}
      {plus &&
      <Block ghost addon="Events" price="350" tooltip="Events add-on bleed: 3-up 'This Week' band on Home + full /events page in nav.">
          <div className="block-label">This Week at Beluga</div>
          <div className="grid grid-3">
            <EventCard date="WED" title="Pub Trivia" desc="7p · free · teams of 4" />
            <EventCard date="FRI" title="Karaoke Night" desc="9p · sign up at the bar" />
            <EventCard date="SUN" title="Members D&D" desc="Library room · RSVP" />
          </div>
        </Block>
      }

      <Block label="Now Pouring" tag="local first. always.">
        <div className="grid grid-3">
          <TapCard num="01" brewery="Hop The Griffin" beer="Hazy IPA" style="IPA" abv="6.8%" price="16oz $8" status="ON" />
          <TapCard num="02" brewery="Heirloom" beer="Czech Pils" style="Lager" abv="4.9%" price="16oz $7" />
          <TapCard num="03" brewery="Marshall" beer="Sundown Wheat" style="Wheat" abv="5.2%" price="16oz $7" />
          <TapCard num="04" brewery="Welltown" beer="Stout-ish" style="Stout" abv="6.0%" price="12oz $7" />
          <TapCard num="05" brewery="Cabin Boys" beer="Wild Sour" style="Sour" abv="5.5%" price="10oz $8" status="NEW" />
          <TapCard num="06" brewery="American Solera" beer="Saison" style="Farmhouse" abv="6.2%" price="12oz $8" />
        </div>
        <div style={{ textAlign: 'right', marginTop: 6, fontSize: 12 }}>View Full Tap List →</div>
      </Block>

      <Block label="Featured" solid>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <PH label="[BOTTLE / POUR SHOT]" h={120} style={{ width: 140 }} />
          <div style={{ flex: 1, minWidth: 180 }}>
            <div style={{ fontFamily: 'Caveat, cursive', fontSize: 26, lineHeight: 1 }}>"No Honey, It's Vegan Mead"</div>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 6 }}>Agave-fermented, made by Alex Yoner up at Dancing Skeleton. Not technically mead. Drinks like one anyway.</div>
          </div>
        </div>
      </Block>

      <Block label="What's Cooking">
        <div className="grid grid-3">
          {[
          ['Impossible Smash Burger', 'plant patty · pickles · special sauce', '$12'],
          ['Buffalo Cauli', 'house ranch · celery', '$10'],
          ['Hot "Honey" Pizza', 'red sauce · jalapeño infused agave', '$15'],
          ['Loaded Tots', 'queso · scallion · bacon-y bits', '$9'],
          ['Banh Mi', 'pickled veg · cilantro · sriracha', '$13'],
          ['Apple Crumble', 'with oat-milk ice cream', '$7']].
          map(([n, d, p]) =>
          <div key={n} className="tap-card" style={{ background: '#fffaf0' }}>
              <PH label="[DISH]" h={70} />
              <div style={{ fontWeight: 'bold', marginTop: 4 }}>{n}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-2)' }}>{d}</div>
              <div style={{ fontFamily: 'Caveat, cursive', fontSize: 18 }}>{p}</div>
            </div>
          )}
        </div>
        <div style={{ textAlign: 'right', marginTop: 6, fontSize: 12 }}>Full Menu →</div>
      </Block>

      <Block label="Story tease">
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <PH label="[TOBY + ALISSA PORTRAIT]" h={100} style={{ width: 110 }} />
          <div style={{ flex: 1, minWidth: 180 }}>
            <div style={{ fontFamily: 'Caveat, cursive', fontSize: 22, lineHeight: 1.1 }}>From Pippin's to Beluga Bev. Co.

            </div>
            <TxtLines n={2} />
            <div style={{ fontSize: 12, marginTop: 4 }}>Read Our Story →</div>
          </div>
        </div>
      </Block>



      {/* Latest Stories — Blog add-on placement */}
      {plus &&
      <Block ghost addon="Blog" price="350" tooltip="Blog add-on bleed: 3-up 'Latest Stories' band on Home + full /blog page. Posts seeded from @belugabevco IG captions.">
          <div className="block-label">Latest Stories</div>
          <div className="grid grid-3">
            {[1, 2, 3].map((i) =>
          <div key={i} className="tap-card" style={{ background: '#fffaf0' }}>
                <PH label="[IG IMG]" h={70} />
                <div style={{ fontSize: 10, color: 'var(--ghost)' }}>via Instagram</div>
                <div style={{ fontWeight: 'bold' }}>Post title placeholder</div>
                <TxtLines n={2} />
              </div>
          )}
          </div>
        </Block>
      }
    </Fragment>);

}

// ============== MENU + TAPS (single page) ==============
function MenuPage({ plus }) {
  return (
    <Fragment>
      <div className="page-header">
        <h2>Menu</h2>
        <div className="ribbon"></div>
      </div>

      {/* TOP: Pop-Up + Tap Takeover — always visible */}
      <div className="menu-top-grid">
        <Block label="Pop-Up Kitchen" solid tag="↗ vendor site">
          <div className="popup-card">
            <div className="popup-art"><div className="popup-art-glyph"></div><div className="popup-art-strip">[VENDOR LOGO]</div></div>
            <div className="popup-meat">
              <div className="popup-now">NOW SERVING</div>
              <div className="popup-name">Ruth's Chicken</div>
              <div className="popup-when">through Sat · Tue–Sat 11a–9p</div>
              <div className="popup-next"><span className="chip-mini">UP NEXT</span> Goodcow · dates TBD</div>
            </div>
          </div>
        </Block>
        <Block label="Tap Takeover" tag="members monday">
          <div className="popup-card">
            <div className="popup-art takeover"><div className="popup-art-glyph"></div><div className="popup-art-strip">[BREWERY LOGO]</div></div>
            <div className="popup-meat">
              <div className="popup-now accent">NEXT MONDAY</div>
              <div className="popup-name">Nothings Left Brewing Co</div>
              <div className="popup-when"></div>
              <div className="popup-next"><span className="chip-mini">UP NEXT</span> Cabin Boys · a Monday next month</div>
            </div>
          </div>
          <div className="takeover-foot">Mondays = Members Day. OK brewery rolls in with their bartenders + experts; members get first pours. Frequency owner-controlled (monthly-ish).</div>
        </Block>
      </div>

      {/* 2. Beluga Bites — collapsible, in-house menu */}
      <Block label="Beluga Bites" tag="in-house · updated on site" collapsible open>
        <div style={{ fontSize: 11, color: 'var(--ink-2)', marginBottom: 8, fontStyle: 'italic' }}>Plant-forward / vegan-by-default. Diet flags: GF gluten-free · NF nut-free · SF soy-free.</div>
        <div className="block-label" style={{ marginTop: 4 }}>Apps</div>
        <MenuRow name="Loaded Tots" desc="queso · scallion · 'bacon' bits" price="$9" diet="GF" />
        <MenuRow name="Buffalo Cauli" desc="house ranch · celery" price="$10" diet="NF" />
        <MenuRow name="Soft Pretzel" desc="beer-cheese sauce" price="$8" />
        <div className="block-label" style={{ marginTop: 12 }}>Mains</div>
        <MenuRow name="Impossible Smash Burger" desc="plant patty · pickles · special sauce" price="$12" />
        <MenuRow name="Banh Mi" desc="pickled veg · sriracha" price="$13" diet="SF" />
        <MenuRow name="Hot &quot;Honey&quot; Pizza" desc="red sauce · jalapeño infused agave" price="$15" />
        <MenuRow name="Mushroom Reuben" desc="kraut · russian · rye" price="$13" />
        <div className="block-label" style={{ marginTop: 12 }}>Sides</div>
        <MenuRow name="House Fries" desc="" price="$5" diet="GF NF" />
        <MenuRow name="Pickle Plate" desc="seasonal" price="$6" diet="GF SF NF" />
        <div className="block-label" style={{ marginTop: 12 }}>Sweets</div>
        <MenuRow name="Apple Crumble" desc="with oat-milk ice cream" price="$7" />
        <div className="block-label" style={{ marginTop: 12 }}>Kids</div>
        <MenuRow name="Mac n' Cheese" desc="house cashew sauce" price="$6" diet="NF" />
        <MenuRow name="Mini Plant Burger + Fries" desc="" price="$7" />
      </Block>

      {/* 3. What's On Tap — collapsible. Holds Featured drink, Beer, Wine, Mead, NA & Mocktail
          all in one place, since they're all "what's pouring right now". */}
      <Block label="What's On Tap" tag="local first. always." collapsible open>
        <div style={{ fontSize: 11, color: 'var(--ink-2)', marginBottom: 8, fontStyle: 'italic' }}>Last updated [timestamp] · Featured drink up top, then taps, wine, NA + mocktail.</div>

        {/* FEATURED DRINK — same prominence slot as Pop-Up + Tap Takeover at the top of the page.
            Currently the new mead. Rotates seasonally — owner-controlled, swap whenever. */}
        <div className="featured-drink-card" style={{ marginBottom: 14 }}>
          <div className="featured-drink-art">[BOTTLE / POUR]</div>
          <div className="featured-drink-meat">
            <span className="now">NEWLY FEATURED · MEAD/AGAVE</span>
            <div className="name">"No Honey, It's Vegan Mead"</div>
            <div className="blurb">#M01 · Dancing Skeleton (Tulsa) · agave-fermented, made by Alex Yoner. Not technically mead. Drinks like one.</div>
            <div className="meta">Agave wine · 11% · 6oz $9</div>
          </div>
        </div>

        {/* BEER — the bulk of the list */}
        <div className="tap-subhead">Beer <span className="tag">12 on tap</span></div>
        <div id="taps" className="grid grid-4">
          {Array.from({ length: 12 }).map((_, i) => <TapCard key={i} num={String(i + 1).padStart(2, '0')}
          brewery={['Hop The Griffin', 'Heirloom', 'Marshall', 'Welltown', 'Cabin Boys', 'American Solera', 'Prairie', 'Vanessa House', 'NEFF', 'Roughtail', 'Stonecloud', 'Anthem'][i]}
          beer={['Hazy IPA', 'Czech Pils', 'Wheat', 'Stout', 'Wild Sour', 'Saison', 'Bomb!', 'Pale', 'Pilsner', 'Hoptometrist', 'Forager', 'Uroboros'][i]}
          style={['IPA', 'Lager', 'Wheat', 'Stout', 'Sour', 'Farmhouse', 'Imperial Stout', 'Pale Ale', 'Pilsner', 'IPA', 'Sour', 'Saison'][i]}
          abv={['6.8%', '4.9%', '5.2%', '6.0%', '5.5%', '6.2%', '13%', '5.4%', '5.0%', '7.2%', '5.8%', '6.5%'][i]}
          price="16oz $8"
          status={i === 4 ? 'NEW' : null}
          diet={[null, 'GF', null, null, null, null, null, null, 'GF', null, null, 'GF NF'][i]} />

          )}
        </div>

        {/* WINE — local OK where possible */}
        <div className="tap-subhead">Wine <span className="tag">local OK where possible</span></div>
        <div className="grid grid-4">
          <TapCard num="W01" brewery="Chapel Creek (OK)" beer="Red Blend" style="Red" abv="13%" price="6oz $9" />
          <TapCard num="W02" brewery="Stableridge (OK)" beer="Chardonnay" style="White" abv="12.5%" price="6oz $9" />
          <TapCard num="W03" brewery="Sparks (OK)" beer="Rosé" style="Rosé" abv="12%" price="6oz $9" />
          <TapCard num="W04" brewery="House" beer="Bubbles" style="Sparkling" abv="11.5%" price="6oz $10" />
        </div>

        {/* NA & MOCKTAIL — real program, equal weight */}
        <div className="tap-subhead">NA &amp; Mocktail <span className="tag">real program, equal weight</span></div>
        <div className="grid grid-4">
          <TapCard num="N01" brewery="Athletic" beer="Free Wave" style="NA Hazy" abv="<0.5%" price="$6" />
          <TapCard num="N02" brewery="House" beer="Garden Spritz" style="Mocktail" abv="0%" price="$8" />
          <TapCard num="N03" brewery="House" beer="Smoke + Citrus" style="Mocktail" abv="0%" price="$9" />
          <TapCard num="N04" brewery="Olipop" beer="Cream Soda" style="Soda" abv="0%" price="$5" />
        </div>
      </Block>

      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-2)', padding: '12px', fontStyle: 'italic' }}>
        Menu changes seasonally. Featured drink rotates seasonally, owner-controlled. Taps rotate constantly. Last updated [date].
      </div>
    </Fragment>);

}

// ============== VISIT ==============
function VisitPage({ plus }) {
  return (
    <Fragment>
      <PH label="[BUILDING EXTERIOR · wide]" h={140} style={{ margin: 12 }} />
      <div className="page-header">
        <h2>Visit</h2>
      </div>

      <Block label="Hours" solid>
        <table style={{ width: '100%', fontSize: 13 }}>
          <tbody>
            <tr><td>Tuesday</td><td style={{ textAlign: 'right' }}>11a–11p</td></tr>
            <tr><td>Wednesday</td><td style={{ textAlign: 'right' }}>11a–11p</td></tr>
            <tr><td>Thursday</td><td style={{ textAlign: 'right' }}>11a–11p</td></tr>
            <tr><td>Friday</td><td style={{ textAlign: 'right' }}>11a–12a</td></tr>
            <tr><td>Saturday</td><td style={{ textAlign: 'right' }}>10a–12a</td></tr>
            <tr><td>Sunday</td><td style={{ textAlign: 'right' }}>10a–10p</td></tr>
            <tr><td>Monday</td><td style={{ textAlign: 'right', color: 'var(--ink-2)' }}>closed</td></tr>
          </tbody>
        </table>
        <div style={{ fontSize: 11, color: 'var(--ink-2)', marginTop: 6 }}>Special hours / closures: [block placeholder]</div>
      </Block>

      <Block label="Where">
        <PH label="[EMBEDDED MAP]" h={140} />
        <div style={{ marginTop: 6, fontSize: 13 }}>Eton Square, Tulsa</div>
        <button className="btn primary" style={{ marginTop: 6, fontSize: 12 }}>Get Directions</button>
      </Block>

      {/* Reservation listings add-on */}
      {plus &&
      <Block ghost addon="Reservations" price="350" requires="Event calendar" tooltip="Reservation listings add-on: badge row linking out to OpenTable / Resy / TripAdvisor / Google Reservations.">
          <div className="block-label">Also find us on</div>
          <div className="badge-row">
            <span className="badge">OpenTable</span>
            <span className="badge">Resy</span>
            <span className="badge">TripAdvisor</span>
            <span className="badge">Google Reservations</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--ghost)', marginTop: 8, fontStyle: 'italic' }}>
            ↳ Stronger when paired with the Event calendar: ticketed events surface in these listings too.
          </div>
        </Block>
      }

      <Block label="Contact">
        <div style={{ fontSize: 13 }}>📞 (918) XXX-XXXX (tap to call)</div>
        <div style={{ fontSize: 13 }}>✉️ hello@belugabevco.com</div>
        <div style={{ fontSize: 11, color: 'var(--ink-2)' }}>For private rooms / brewroom inquiries, see below.</div>
      </Block>

      <Block label="Patio" solid>
        <PH label="[PATIO WIDE · wraparound]" h={120} />
        <div style={{ fontSize: 13, marginTop: 8 }}>The patio wraps the building. There's a fenced turf area in the back for dogs.</div>
      </Block>

      {/* Brewroom add-on */}
      {plus &&
      <Block ghost addon="Brewroom" price="350" tooltip="Brewroom inquiry add-on: form for small-batch collab requests.">
          <div className="block-label">Want to brew a small batch in our brewroom? Tell us about it.</div>
          <div className="grid grid-2">
            <FormField label="Name" />
            <FormField label="Email" />
            <FormField label="Phone" />
            <FormField label="Batch size" />
            <FormField label="Preferred date" />
          </div>
          <FormField label="Notes" tall />
          <button className="btn primary" style={{ fontSize: 12 }}>Send</button>
        </Block>
      }

      {/* Private room add-on */}
      {plus &&
      <Block ghost addon="Private rooms" price="350" tooltip="Private room inquiry add-on: form for booking the Boardroom, Library, Engine Room, or Small Private.">
          <div className="block-label">Book a private room. D&D, birthday, tap-takeover.</div>
          <div className="grid grid-2">
            <FormField label="Room (Boardroom · Library · Engine Room · Small Private)" />
            <FormField label="Date" />
            <FormField label="Party size" />
            <FormField label="Email" />
          </div>
          <FormField label="Notes" tall />
          <button className="btn primary" style={{ fontSize: 12 }}>Send inquiry</button>
        </Block>
      }
    </Fragment>);

}

// ============== ABOUT ==============
function AboutPage() {
  return (
    <Fragment>
      <div className="page-header">
        <h2>Our Story</h2>
        <div className="ribbon">Taps and Plants.</div>
      </div>

      <Block label="Founder story" solid>
        <PH label="[TOBY + ALISSA PORTRAIT]" h={120} />
        <div style={{
          background: '#fff8d8', border: '1.5px dashed var(--note-edge)',
          padding: 10, marginTop: 8, fontFamily: 'Caveat, cursive', fontSize: 18, lineHeight: 1.2
        }}>[ EDITABLE COPY BLOCK ] · Owners author this

        </div>
      </Block>

      <Block label="What We Stand For">
        <div className="grid grid-2">
          {[
          ['Local first', 'Every tap, every plate, every supplier we can manage.'],
          ['Plant-based', 'Because the food is better this way.'],
          ['Family-friendly', 'Everyone is welcome here'],
          ['No-pressure hangout', 'Stay as long as you want. Your bar.']].
          map(([h, c]) =>
          <div key={h} style={{ border: '1.5px solid var(--ink)', padding: 8, background: '#fffaf0' }}>
              <div style={{ fontFamily: 'Caveat, cursive', fontSize: 22, lineHeight: 1 }}>{h}</div>
              <div style={{ fontSize: 12, marginTop: 4 }}>{c}</div>
            </div>
          )}
        </div>
      </Block>

      <Block label="Our Partners">
        <div className="grid grid-4">
          {['Goodcow', 'Heirloom', 'Hop The Griffin', 'Dancing Skeleton', 'Marshall', 'Welltown', 'Prairie', 'Cabin Boys'].map((p) =>
          <div key={p} style={{ border: '1.5px solid var(--ink)', height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, background: '#fffaf0', textAlign: 'center', padding: 4 }}>
              {p}
            </div>
          )}
        </div>
        <div style={{ fontSize: 11, color: 'var(--ink-2)', marginTop: 6 }}>+ more local OK breweries / fermentation groups</div>
      </Block>
    </Fragment>);

}

// ============== EVENTS (Base+ only) ==============
function EventsPage() {
  return (
    <Fragment>
      <div className="page-header" style={{ background: 'var(--ghost-tint)', borderColor: 'var(--ghost)' }}>
        <h2 style={{ color: 'var(--ghost)' }}>Events</h2>
        <div className="ribbon">Entire page is the Events add-on · $350</div>
      </div>

      <Block ghost addon="Events" price="350" tooltip="Full /events page: calendar view + list view + filter chips by event type.">
        <div className="block-label">Filter</div>
        <div className="section-chips" style={{ background: 'transparent', border: 0, padding: 0 }}>
          <span className="chip active">All</span>
          <span className="chip">Trivia</span>
          <span className="chip">Karaoke</span>
          <span className="chip">Game night</span>
          <span className="chip">Members-only</span>
        </div>
      </Block>

      <Block ghost addon="Events" price="350" tooltip="Calendar view (month grid).">
        <div className="block-label">Calendar view</div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
          {Array.from({ length: 30 }).map((_, i) =>
          <div key={i} style={{
            border: '1px solid var(--ghost)', minHeight: 50, padding: 4,
            background: i % 5 === 0 ? 'var(--ghost-tint)' : '#fffaf0',
            fontSize: 10, color: 'var(--ink-2)'
          }}>
              {i + 1}
              {i % 5 === 0 && <div style={{ fontFamily: 'Caveat, cursive', fontSize: 13, color: 'var(--ghost)' }}>· event</div>}
            </div>
          )}
        </div>
      </Block>

      <Block ghost addon="Events" price="350" tooltip="List view of upcoming events with RSVP CTAs (RSVPs handled in POS / external; site does not own data).">
        <div className="block-label">Upcoming (list view)</div>
        <div className="grid grid-3">
          <EventCard date="WED" title="Pub Trivia" desc="7p · free · teams of 4" />
          <EventCard date="FRI" title="Karaoke Night" desc="9p · sign up at the bar" />
          <EventCard date="SAT" title="Game Night" desc="board games + brews" />
          <EventCard date="SUN" title="Members D&D" desc="Library room · RSVP" />
          <EventCard date="TUE" title="Tap Takeover" desc="Heirloom" />
          <EventCard date="THU" title="Open Mic" desc="sign up 8p" />
        </div>
      </Block>

      <Block ghost addon="Events" price="350" subAddon="Reservation listings" tooltip="Some events are ticketed/reservation-required: those use the Reservation listings add-on for OpenTable/Resy bookings.">
        <div className="block-label">Ticketed / reservation-required events</div>
        <div className="grid grid-3">
          <EventCard date="FRI" title="Wine Dinner" desc="ticketed · seats 24 · book ↗" />
          <EventCard date="SAT" title="Brewery Pairing" desc="reservation · book ↗" />
          <EventCard date="SUN" title="Pop-Up Brunch" desc="seats 40 · book ↗" />
        </div>
        <div style={{ fontSize: 11, color: 'var(--ghost)', marginTop: 8, fontStyle: 'italic' }}>
          ↳ "Book" buttons route to OpenTable / Resy (Reservation listings add-on). Without it, these events still list, but bookings happen by phone.
        </div>
      </Block>
    </Fragment>);

}

// ============== BLOG (Base+ only) ==============
function BlogPage() {
  return (
    <Fragment>
      <div className="page-header" style={{ background: 'var(--ghost-tint)', borderColor: 'var(--ghost)' }}>
        <h2 style={{ color: 'var(--ghost)' }}>Stories</h2>
        <div className="ribbon">Entire page is the Blog add-on · $350 · IG-fed</div>
      </div>

      <Block ghost addon="Blog" price="350" tooltip="Posts seeded from @belugabevco IG captions to demonstrate the IG-to-blog pipeline & SEO amplification.">
        <div className="block-label">Latest</div>
        <div className="grid grid-3">
          {Array.from({ length: 6 }).map((_, i) =>
          <div key={i} className="tap-card" style={{ background: '#fffaf0' }}>
              <PH label="[FROM @BELUGABEVCO IG]" h={100} />
              <div style={{ fontSize: 10, color: 'var(--ghost)' }}>via Instagram · [post date]</div>
              <div style={{ fontWeight: 'bold', marginTop: 2 }}>Post title placeholder #{i + 1}</div>
              <TxtLines n={2} />
              <div style={{ fontSize: 11, marginTop: 4 }}>Read →</div>
            </div>
          )}
        </div>
      </Block>
    </Fragment>);

}

Object.assign(window, {
  HomePage, MenuPage, VisitPage, AboutPage,
  EventsPage, BlogPage
});