// app.jsx — LittleGrains one-page site

const { useState, useEffect, useRef, useCallback, useMemo } = React;

/* ── Hooks ─────────────────────────────────────────────────────────── */

function useScrollReveal(selector) {
  selector = selector || '.reveal';
  useEffect(function() {
    var els = document.querySelectorAll(selector);
    var io = new IntersectionObserver(
      function(entries) {
        entries.forEach(function(e) {
          if (e.isIntersecting) e.target.classList.add('in');
        });
      },
      { threshold: 0.10 }
    );
    els.forEach(function(el) { io.observe(el); });
    return function() { io.disconnect(); };
  }, []);
}

/* ── Icons ─────────────────────────────────────────────────────────── */

const Icon = {
  Arrow: function(props) {
    var size = props.size || 16;
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M5 12h14M13 6l6 6-6 6"/>
      </svg>
    );
  },
  Check: function(props) {
    var size = props.size || 14;
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 12l5 5 11-11"/>
      </svg>
    );
  },
};

/* ── Logo ──────────────────────────────────────────────────────────── */

function Logo(props) {
  var height = props.height || 40;
  var invert = props.invert || false;
  return (
    <span className="brand-lockup">
      <img src="assets/logo-mark.png" alt=""
           className="brand-logo-img"
           style={{ height: height, width: height, objectFit: 'contain', display: 'block' }}/>
      <span className={'brand-wordmark' + (invert ? ' brand-wordmark-invert' : '')}>
        LittleGrains
      </span>
    </span>
  );
}

/* ── Product Visual ────────────────────────────────────────────────── */

function ProductVisual(props) {
  var product = props.product;
  var large = props.large || false;
  var image = props.image;
  var src = image || product.image;
  return (
    <div className="product-img">
      {src && (
        <img src={src} alt={product.name}
             style={{
               position: 'absolute', inset: 0, width: '100%', height: '100%',
               objectFit: 'cover', display: 'block',
             }}/>
      )}
      {large && (
        <div style={{
          position: 'absolute', bottom: 14, left: 14,
          fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
          letterSpacing: 0, textTransform: 'uppercase',
          color: 'var(--white)',
          padding: '5px 12px', borderRadius: 'var(--r-pill)',
          background: 'rgba(26,58,42,0.65)', backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
        }}>
          {product.weight}
        </div>
      )}
    </div>
  );
}

/* ── Header ────────────────────────────────────────────────────────── */

function SiteHeader() {
  var links = [
    { label: 'Order', href: '#order' },
    { label: 'Ingredients', href: '#ingredients' },
    { label: 'Nutrition', href: '#nutrition' },
    { label: 'Our Story', href: '#story' },
  ];

  return (
    <header className="site-header">
      <div className="container">
        <div className="site-header-inner">
          <a href="#hero" style={{ display: 'flex', alignItems: 'center' }}>
            <Logo height={42} invert/>
          </a>

          <nav className="site-header-nav">
            {links.map(function(l) {
              return (
                <a key={l.label} href={l.href}>{l.label}</a>
              );
            })}
          </nav>

          <a href="#order" className="btn btn-orange btn-sm site-header-order-btn">
            Order now
          </a>
        </div>
      </div>
    </header>
  );
}

/* ── Mobile Bottom Order Bar ───────────────────────────────────────── */

function MobileOrderBar() {
  return (
    <div className="mobile-order-bar">
      <a href="#order">
        Order now <Icon.Arrow size={16}/>
      </a>
    </div>
  );
}

function QuickFind() {
  var items = [
    { label: 'Order boxes', href: '#order', detail: '6, 15, or 30 bites', tone: 'green' },
    { label: 'Ingredients', href: '#ingredients', detail: 'Tap each one', tone: 'mango' },
    { label: 'Nutrition', href: '#nutrition', detail: '~6g protein', tone: 'berry' },
    { label: 'Story', href: '#story', detail: 'Grandma kitchen roots', tone: 'sky' },
  ];

  return (
    <section className="lg-quick-find" aria-label="Quick links">
      <div className="container">
        <div className="lg-quick-find-grid">
          {items.map(function(item) {
            return (
              <a key={item.label} className={'lg-quick-tile lg-quick-tile--' + item.tone} href={item.href}>
                <span>{item.label}</span>
                <strong>{item.detail}</strong>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ── Footer ────────────────────────────────────────────────────────── */

function SiteFooter() {
  var faqs = [
    ['Do you deliver?', 'Yes — local delivery in the Seattle area.'],
    ['Is it for kids?', 'Yes, for kids and adults who can safely eat nuts and sesame.'],
    ['How much protein?', 'About 6g whole-food protein per serving.'],
  ];
  var explore = [
    ['Order', '#order'],
    ['Ingredients', '#ingredients'],
    ['Nutrition', '#nutrition'],
    ['Our Story', '#story'],
  ];

  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand-name">LittleGrains</div>
            <div className="footer-tagline">natural · wholesome · nourishing</div>
            <p style={{ marginTop: 20, maxWidth: 300, color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 1.65 }}>
              Hand-rolled superfood energy bites made in a Seattle kitchen with almond flour, seeds, dates, jaggery, and A2 ghee.
            </p>
            <a href="mailto:hello@littlegrains.com" className="btn btn-ghost-light btn-sm" style={{ marginTop: 24 }}>
              hello@littlegrains.com
            </a>
          </div>

          <div>
            <div className="footer-eyebrow">Explore</div>
            <ul className="footer-link-list">
              {explore.map(function(item) {
                return (
                  <li key={item[0]}><a href={item[1]}>{item[0]}</a></li>
                );
              })}
            </ul>
          </div>

          <div>
            <div className="footer-eyebrow">FAQ</div>
            {faqs.map(function(faq) {
              return (
                <div key={faq[0]} className="footer-faq-item">
                  <div className="footer-faq-q">{faq[0]}</div>
                  <p className="footer-faq-a">{faq[1]}</p>
                </div>
              );
            })}
          </div>

          <div>
            <div className="footer-eyebrow">Contact</div>
            <ul className="footer-link-list">
              <li><a href="mailto:hello@littlegrains.com">hello@littlegrains.com</a></li>
              <li><span>Seattle area</span></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div>&copy; 2026 LittleGrains &middot; Hand-rolled in Seattle</div>
          <a href="mailto:hello@littlegrains.com" style={{ color: 'rgba(255,255,255,0.4)' }}>Email</a>
        </div>
      </div>
    </footer>
  );
}

/* ── Form field ────────────────────────────────────────────────────── */

function OrderField(props) {
  var label = props.label;
  var value = props.value;
  var onChange = props.onChange;
  var placeholder = props.placeholder;
  var type = props.type || 'text';
  return (
    <label className="order-field-label">
      <span className="order-field-eyebrow">{label}</span>
      <input className="input" type={type} value={value}
             onChange={function(e) { onChange(e.target.value); }}
             placeholder={placeholder}
             style={{ height: 48, borderRadius: 'var(--r-md)', padding: '0 16px' }}/>
    </label>
  );
}

/* ── Ingredient Card ───────────────────────────────────────────────── */

function IngredientCard(props) {
  var item = props.item;
  var index = props.index;
  var [open, setOpen] = useState(false);

  return (
    <div
      className={'lg-ingredient-card' + (open ? ' lg-ingredient-card--open' : '')}
      onMouseEnter={function() { setOpen(true); }}
      onMouseLeave={function() { setOpen(false); }}
      onClick={function() { setOpen(function(v) { return !v; }); }}
      role="button"
      tabIndex={0}
      onKeyDown={function(e) { if (e.key === 'Enter' || e.key === ' ') setOpen(function(v) { return !v; }); }}
      aria-expanded={open}
    >
      <div className="lg-ingredient-card__main">
        <span className="lg-ingredient-card__num">{index + 1}</span>
        <strong className="lg-ingredient-card__name">{item.name}</strong>
        <span className="lg-ingredient-card__from">{item.from}</span>
      </div>
      <div className="lg-ingredient-card__detail" aria-hidden={!open}>
        <p className="lg-ingredient-card__note">{item.note}</p>
        {item.benefit && (
          <p className="lg-ingredient-card__benefit">{item.benefit}</p>
        )}
      </div>
    </div>
  );
}

/* ── App ───────────────────────────────────────────────────────────── */

function App() {
  useScrollReveal();
  var product = PRODUCTS[0];

  var [purchaseType, setPurchaseType] = useState('one-time');
  var [variant, setVariant] = useState(getProductVariants(product, 'one-time')[0].id);
  var [activeImage, setActiveImage] = useState(0);
  var [customer, setCustomer] = useState({ name: '', email: '', zip: '', notes: '' });
  var [attemptedOrder, setAttemptedOrder] = useState(false);

  var variants = getProductVariants(product, purchaseType);
  var selectedVariant = getVariantOption(product, variant);
  var unitPrice = getVariantUnitPrice(product, variant);
  var gallery = product.gallery || [product.image].filter(Boolean);

  useEffect(function() {
    var next = getProductVariants(product, purchaseType)[0];
    if (next && !getProductVariants(product, purchaseType).some(function(v) { return v.id === variant; })) {
      setVariant(next.id);
    }
  }, [purchaseType]);

  var zip = customer.zip.trim().slice(0, 5);
  var deliveryZipComplete = zip.length === 5;
  var deliveryEligible = isLocalDeliveryZip(zip);
  var canPlaceOrder = customer.name.trim() && customer.email.trim() && deliveryZipComplete && deliveryEligible;

  function updateCustomer(field, value) {
    setCustomer(function(prev) {
      var next = {};
      Object.keys(prev).forEach(function(k) { next[k] = prev[k]; });
      next[field] = value;
      return next;
    });
  }

  var orderMailto = useMemo(function() {
    var body = [
      'LittleGrains local delivery order',
      '',
      'Item: ' + selectedVariant.label + ' — $' + selectedVariant.price,
      purchaseType === 'subscription' ? 'Type: Monthly subscription' : 'Type: One-time purchase',
      unitPrice ? 'Per bite: $' + unitPrice.toFixed(2) : '',
      '',
      'Name: ' + customer.name,
      'Email: ' + customer.email,
      'Delivery ZIP: ' + zip,
      customer.notes ? 'Notes: ' + customer.notes : '',
    ].filter(Boolean).join('\n');
    return 'mailto:hello@littlegrains.com?subject=' + encodeURIComponent('LittleGrains local order') + '&body=' + encodeURIComponent(body);
  }, [selectedVariant, purchaseType, unitPrice, customer, zip]);

  function placeOrder() {
    setAttemptedOrder(true);
    if (!canPlaceOrder) return;
    window.location.href = orderMailto;
  }

  return (
    <>
      <SiteHeader/>
      <MobileOrderBar/>
      <main>

        {/* ── Hero ─────────────────────────────────────────────── */}
        <section className="home-hero section-lg" id="hero">
          <div className="container">
            <div className="lg-hero-grid">
              <div className="reveal">
                <div className="hero-eyebrow-wrap">
                  <span className="hero-badge">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/><path d="M8 12l3 3 5-5"/></svg>
                    Seattle area delivery
                  </span>
                  <span className="eyebrow">Natural · Wholesome · Nourishing</span>
                </div>

                <h1 className="h1">
                  Hand-rolled<br/>
                  energy bites<br/>
                  for everyday<br/>
                  <span>health boosts.</span>
                </h1>

                <p className="lede" style={{ marginTop: 22 }}>
                  A grandma-kitchen recipe with five seeds, almond flour, Medjool dates,
                  jaggery, and A2 ghee. Soft, sunny, and easy to keep within reach.
                </p>

                <div className="hero-actions">
                  <a className="btn btn-primary btn-lg" href="#order">
                    Pick your box <Icon.Arrow/>
                  </a>
                  <a className="btn btn-mango btn-lg" href="#ingredients">
                    What's inside
                  </a>
                </div>

                <div className="lg-proof-row">
                  {[
                    ['~6g', 'protein per serving'],
                    ['5', 'seeds in every energy bite'],
                    ['Seattle', 'local delivery'],
                  ].map(function(item) {
                    return (
                      <div key={item[1]}>
                        <strong>{item[0]}</strong>
                        <span>{item[1]}</span>
                      </div>
                    );
                  })}
                </div>
              </div>

              <div className="reveal lg-hero-photo">
                <ProductVisual product={product} image={product.image} large={true}/>
                <div className="lg-hero-callout lg-hero-callout--top">
                  <strong>5 seeds</strong>
                  <span>pumpkin · flax · hemp · sunflower · sesame</span>
                </div>
                <div className="lg-hero-callout lg-hero-callout--bottom">
                  <strong>No refined sugar</strong>
                  <span>dates + a little jaggery</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <QuickFind/>

        {/* ── Order ─────────────────────────────────────────────── */}
        <section className="section lg-order-section" id="order">
          <div className="container">
            <div className="lg-section-head reveal">
              <div>
                <div className="eyebrow">Order local delivery</div>
                <h2 className="h2">Choose the box that fits your week.</h2>
              </div>
              <p>
                Start small, stock the counter, or subscribe monthly. The order flow stays simple
                on desktop and phone.
              </p>
            </div>

            <div className="lg-product-grid reveal">
              {/* Gallery */}
              <div className="lg-product-gallery">
                <ProductVisual product={product} image={gallery[activeImage]} large={true}/>
                <div className="lg-thumb-row">
                  {gallery.map(function(src, index) {
                    return (
                      <button key={src}
                        aria-label={'Show product image ' + (index + 1)}
                        onClick={function() { setActiveImage(index); }}
                        className={index === activeImage ? 'active' : ''}>
                        <ProductVisual product={product} image={src}/>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Order panel */}
              <div className="lg-order-panel">
                <p className="product-detail-description">
                  {product.description}
                </p>

                {/* Purchase type toggle */}
                <div className="lg-purchase-switch">
                  <button
                    className={purchaseType === 'one-time' ? 'active' : ''}
                    onClick={function() { setPurchaseType('one-time'); setVariant(getProductVariants(product, 'one-time')[0].id); }}>
                    <strong>One-time</strong>
                    <span>Boxes of 6, 15, or 30</span>
                  </button>
                  <button
                    className={purchaseType === 'subscription' ? 'active' : ''}
                    onClick={function() { setPurchaseType('subscription'); setVariant(getProductVariants(product, 'subscription')[0].id); }}>
                    <strong>Subscribe</strong>
                    <span>Monthly box of 30</span>
                  </button>
                </div>

                {/* Box size options */}
                <div className="lg-box-options"
                     style={variants.length < 3 ? { gridTemplateColumns: 'repeat(' + variants.length + ', minmax(0, 1fr))' } : undefined}>
                  {variants.map(function(option) {
                    return (
                      <button key={option.id}
                        className={variant === option.id ? 'active' : ''}
                        onClick={function() { setVariant(option.id); }}>
                        <span>{option.label}</span>
                        <strong>${option.price}</strong>
                        <small>${(option.price / option.count).toFixed(2)} per bite</small>
                      </button>
                    );
                  })}
                </div>

                {/* Summary */}
                <div className="lg-selected-summary">
                  <div>
                    <span>Selected</span>
                    <strong>{selectedVariant.label}</strong>
                    <small>
                      {selectedVariant.frequency || 'One-time purchase'}
                      {unitPrice ? ' · $' + unitPrice.toFixed(2) + ' per bite' : ''}
                    </small>
                  </div>
                  <strong>${selectedVariant.price}</strong>
                </div>

                {/* Customer fields */}
                <div style={{ display: 'grid', gap: 12 }}>
                  <OrderField label="Name" value={customer.name}
                    onChange={function(v) { updateCustomer('name', v); }} placeholder="Your name"/>
                  <OrderField label="Email" value={customer.email} type="email"
                    onChange={function(v) { updateCustomer('email', v); }} placeholder="you@example.com"/>
                  <OrderField label="Delivery ZIP" value={customer.zip}
                    onChange={function(v) { updateCustomer('zip', v.replace(/[^\d]/g, '').slice(0, 5)); }}
                    placeholder="Seattle area ZIP"/>
                  {deliveryZipComplete && (
                    <p style={{
                      fontSize: 13, fontWeight: 600,
                      color: deliveryEligible ? 'var(--green)' : 'var(--orange-dark)',
                      display: 'flex', alignItems: 'center', gap: 6,
                    }}>
                      {deliveryEligible
                        ? <><Icon.Check size={13}/> This ZIP is in our delivery zone.</>
                        : <>Sorry, local delivery is limited to the Seattle area for now.</>}
                    </p>
                  )}
                  <label style={{ display: 'grid', gap: 7 }}>
                    <span className="order-field-eyebrow">Notes (optional)</span>
                    <textarea value={customer.notes}
                      onChange={function(e) { updateCustomer('notes', e.target.value); }}
                      placeholder="Delivery timing, allergies, or gift note"
                      rows={2} className="input"
                      style={{ minHeight: 68, resize: 'vertical', padding: 14, lineHeight: 1.5, borderRadius: 'var(--r-md)', height: 'auto' }}/>
                  </label>
                </div>

                {attemptedOrder && !canPlaceOrder && (
                  <p style={{ marginTop: 10, fontSize: 13, fontWeight: 600, color: 'var(--orange-dark)', lineHeight: 1.45 }}>
                    Please add your name, email, and a Seattle-area ZIP code.
                  </p>
                )}

                <button className="btn btn-primary btn-lg" style={{ width: '100%', marginTop: 20 }}
                  onClick={placeOrder}>
                  Place local order <Icon.Arrow/>
                </button>
                <p className="lg-order-note">
                  This opens an email with your order details. Payment and delivery confirmed after your request. Contains tree nuts and sesame.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* ── Ingredients ──────────────────────────────────────── */}
        <section className="section lg-ingredients-section" id="ingredients">
          <div className="container">
            <div className="lg-split reveal">
              <div>
                <div className="eyebrow" style={{ marginBottom: 16 }}>Ingredient-led</div>
                <h2 className="h2">Real pantry ingredients, each with a reason to be here.</h2>
                <p className="lede" style={{ marginTop: 20 }}>
                  Almond flour gives the soft base. Pumpkin, flax, hemp, sunflower, and sesame bring
                  the seed-rich nutrition. Dates, jaggery, and A2 ghee make it taste like something
                  you want to eat every day.
                </p>
                <p style={{ marginTop: 14, fontSize: 14, color: 'var(--ink-mute)', fontWeight: 600 }}>
                  Tap or hover any ingredient to see why it is in the energy bite.
                </p>
              </div>
              <div className="lg-ingredient-list">
                {INGREDIENTS_GLOSSARY.map(function(item, index) {
                  return <IngredientCard key={item.name} item={item} index={index}/>;
                })}
              </div>
            </div>
          </div>
        </section>

        {/* ── Nutrition ─────────────────────────────────────────── */}
        <section className="section lg-nutrition-band" id="nutrition">
          <div className="container">
            <div className="lg-section-head reveal" style={{ marginBottom: 40 }}>
              <div>
                <div className="eyebrow">Nutrition per serving</div>
                <h2 className="h2">Small bite, real nourishment.</h2>
              </div>
              <p>
                Each serving carries roughly 6g whole-food protein, seed-led minerals, fibre,
                and satisfying fats. Recipe-based estimates, not lab-tested medical claims.
              </p>
            </div>

            <div className="lg-nutrition-layout reveal">
              <div>
                <div className="lg-nutrient-grid">
                  {product.nutrition.highlights.map(function(item) {
                    return (
                      <div key={item.label}>
                        <strong>{item.value}</strong>
                        <span>{item.label}</span>
                        <small>{item.daily} DV</small>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div className="lg-nutrition-copy">
                <h3>For kids, adults, and older family members.</h3>
                <p>
                  A compact snack you can keep on the counter: soft, familiar, nutrient-dense,
                  and easy to share with anyone who can safely eat nuts and sesame.
                </p>
                <ul>
                  {(product.nutrition.sellingPoints || []).map(function(point) {
                    return <li key={point}>{point}</li>;
                  })}
                </ul>
                <small>{NUTRITION_NOTES.testing}</small>
              </div>
            </div>
          </div>
        </section>

        {/* ── How to Enjoy ─────────────────────────────────────── */}
        <section className="section lg-enjoy-section" id="enjoy">
          <div className="container">
            <div className="reveal">
              <div className="eyebrow" style={{ marginBottom: 16 }}>How to enjoy</div>
              <h2 className="h2" style={{ marginBottom: 36 }}>A little energy bite for real-life snack moments.</h2>
            </div>
            <div className="lg-how-panel reveal">
              <div className="lg-how-image">
                <img src="assets/products/everyday-real-hand.jpg" alt="Everyday Superseeds bite held in hand"/>
              </div>
              <div>
                <div className="lg-use-grid">
                  {[
                    ['Morning snack', 'With tea, coffee, milk, or after a light breakfast.'],
                    ['Dessert after meals', 'A naturally sweet finish that still feels nourishing.'],
                    ['Anytime energy', 'A quick bite for work breaks, school pickup, or study time.'],
                    ['On-the-go food', 'Keep a box in the car, office bag, or picnic basket.'],
                    ['Lunchbox treat', 'For kids who can safely eat nuts and sesame.'],
                    ['With bowls', 'Crumble over oats, yogurt, porridge, or smoothie bowls.'],
                  ].map(function(item) {
                    return (
                      <div key={item[0]}>
                        <strong>{item[0]}</strong>
                        <span>{item[1]}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ── Our Story ─────────────────────────────────────────── */}
        <section className="section lg-story-section" id="story">
          <div className="container">
            <div className="reveal lg-story-card">
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                Our story · Hand-rolled in Seattle, WA
              </div>
              <h2 className="h2" style={{ marginBottom: 32 }}>
                From grandma's kitchen to your counter.
              </h2>
              <div className="lg-story-copy">
                <p>
                  These energy bites come from grandma's kitchen. Growing up, whenever I was run-down, catching a cold, or just needed a health boost, my mom would make them for me — no fuss, no recipe card, just the handful of seeds, almond flour, dates, a spoon of jaggery, and A2 ghee she learned from her own mother, rolled together by hand. They were dense and a little sweet, and they always made things feel better.
                </p>
                <p>
                  I never stopped eating them. As a kid, as a student, as a working adult — through every phase of life, this is what I reach for. Now I make them the same way, by hand, in my Seattle home kitchen, in small batches, with the same fixed recipe: pumpkin, flax, hemp, sunflower, and sesame seeds, almond flour, dates, jaggery, and A2 ghee. Nothing added, nothing changed.
                </p>
                <p style={{ color: 'var(--ink)' }}>
                  <strong>LittleGrains is one energy bite, made carefully.</strong> It comes from grandma's kitchen and lands on your counter. The recipe is honest, the batches are small, and every energy bite is rolled by hand.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* ── Final CTA ─────────────────────────────────────────── */}
        <section className="section-sm">
          <div className="container">
            <div className="lg-final-cta reveal">
              <h2 className="h2">Ready for your first box?</h2>
              <p>Order directly today for local delivery in the Seattle area.</p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
                <a className="btn btn-ghost-light btn-lg" href="#order">
                  Order Everyday Superseeds <Icon.Arrow/>
                </a>
              </div>
            </div>
          </div>
        </section>

      </main>
      <SiteFooter/>
    </>
  );
}

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