/* Direction A — "Neon Arcade": the page as a game HUD.
   Hearts = HP bar, pixel labels, scanlines, perspective grid floor. */
function DirArcade() {
  const [sent, setSent] = React.useState(false);
  const [modal, setModal] = React.useState(null); // 'tos' | 'privacy' | 'returns' | null
  const cats = ["TEES", "HOODIES", "HATS", "PHONE CASES", "LAPTOP SLEEVES", "TOTE BAGS", "STICKERS", "+ MORE"];

  const MODALS = {
    tos: {
      title: "Terms of Service",
      content: `
LAST UPDATED: June 2026

BY ACCESSING BADDYARMOR.COM, YOU AGREE TO THESE TERMS.

1. WHO WE ARE
Baddy Armor is a brand operated by SALTWRX LLC, a Texas limited liability company ("we," "us," or "our"). Our website is located at baddyarmor.com.

2. USE OF SITE
You may use this site for lawful purposes only. You agree not to reproduce, duplicate, copy, sell, or exploit any portion of the site without express written permission from SALTWRX LLC.

3. INTELLECTUAL PROPERTY
All designs, graphics, logos, mascots, and brand assets on this site are the exclusive property of SALTWRX LLC and are protected by copyright law. Unauthorized reproduction or distribution is strictly prohibited.

4. PRODUCTS & AVAILABILITY
All products are print-on-demand and made to order. We reserve the right to modify, discontinue, or limit availability of any product at any time without notice.

5. PURCHASES
By placing an order, you agree to provide accurate payment and shipping information. Prices are subject to change. We reserve the right to cancel orders at our discretion.

6. DISCLAIMER OF WARRANTIES
This site and its content are provided "as is" without warranties of any kind, express or implied. We do not guarantee that the site will be error-free or uninterrupted.

7. LIMITATION OF LIABILITY
SALTWRX LLC shall not be liable for any indirect, incidental, special, or consequential damages arising from your use of this site or our products, even if advised of the possibility of such damages.

8. GOVERNING LAW
These terms are governed by the laws of the State of Texas. Any disputes shall be resolved exclusively in the courts of Texas.

9. CHANGES TO TERMS
We may update these terms at any time. Continued use of the site constitutes acceptance of the updated terms.

10. CONTACT
Questions? Reach us at business@baddyarmor.com.
      `.trim()
    },
    privacy: {
      title: "Privacy Policy",
      content: `
LAST UPDATED: June 2026

YOUR PRIVACY MATTERS TO US.

1. WHAT WE COLLECT
We collect only what is necessary to operate this site:
• Email address — collected when you sign up for our newsletter.
• Usage data — collected automatically by Cloudflare's privacy-first analytics (no cookies, no cross-site tracking, no personal identifiers).

2. HOW WE USE YOUR INFORMATION
• Your email is used solely to send you launch notifications and occasional design updates from Baddy Armor.
• Usage analytics help us understand site performance. This data is aggregated and anonymous.

3. THIRD-PARTY SERVICES
We use the following services which may process your data:
• Cloudflare — DNS, CDN, and privacy-first analytics. No personally identifiable data is shared.
• Shopify — Email list management for our newsletter. Your email may be stored in Shopify's platform. See Shopify's Privacy Policy at shopify.com/legal/privacy.
• Google Fonts — Fonts are loaded from Google's servers, which may log your IP address.

4. DATA SHARING
We do not sell, trade, or rent your personal information to third parties. We do not share your data with anyone except the service providers listed above, and only as necessary to operate the site.

5. YOUR RIGHTS
• You may unsubscribe from our newsletter at any time using the link in any email we send.
• You may request deletion of your email from our list by contacting us at business@baddyarmor.com.

6. COOKIES
This site does not use tracking cookies. Cloudflare analytics are cookieless and privacy-compliant by design.

7. CHILDREN'S PRIVACY
This site is not directed at children under 13. We do not knowingly collect data from children.

8. CHANGES TO THIS POLICY
We may update this policy as our services evolve. Material changes will be noted with an updated date at the top of this page.

9. CONTACT
For any privacy questions or requests, contact us at business@baddyarmor.com.
      `.trim()
    },
    returns: {
      title: "Return Policy",
      content: `
LAST UPDATED: June 2026

MADE TO ORDER — PLEASE READ BEFORE YOU BUY.

HOW OUR PRODUCTS ARE MADE
Every Baddy Armor product is printed on demand specifically for you when you place an order. Because each item is custom-made, we are unable to accept returns or exchanges for change of mind, incorrect sizing, or similar reasons. Please review size charts carefully before ordering.

DEFECTIVE OR MISPRINTED ITEMS
We stand behind the quality of our products. If your item arrives:
• Defective or damaged
• Misprinted or with a manufacturing error
• Significantly different from what was displayed

Contact us within 30 days of delivery at merch@baddyarmor.com with your order number and a clear photo of the issue. We will arrange a replacement at no cost to you.

WRONG ITEM RECEIVED
If you receive an item that is not what you ordered, contact us at merch@baddyarmor.com within 30 days. We will make it right.

LOST OR STOLEN PACKAGES
We are not responsible for packages lost or stolen after confirmed delivery. If your tracking shows delivered but you have not received your order, please contact your local carrier first, then reach out to us and we will do our best to assist.

CANCELLATIONS
Orders may be cancelled within 24 hours of placement. After that, production has typically begun and cancellations cannot be processed.

CONTACT
For any order issues, contact us at merch@baddyarmor.com with your order number.
      `.trim()
    }
  };

  const openModal = (key) => setModal(key);
  const closeModal = () => setModal(null);

  return (
    <div className="ba-page dir-a" id="top">
      <style>{`
      .dir-a{--accent:var(--cyan);background:
        radial-gradient(900px 480px at 84% -6%, rgba(255,91,209,.16), transparent 60%),
        radial-gradient(820px 520px at 6% 6%, rgba(157,107,255,.18), transparent 58%),
        #090514;}
      /* scanline + grain overlay */
      .dir-a .scan{position:absolute;inset:0;pointer-events:none;z-index:40;mix-blend-mode:overlay;opacity:.5;
        background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);}
      .dir-a .floor{position:absolute;left:0;right:0;bottom:0;height:340px;pointer-events:none;z-index:0;
        background-image:linear-gradient(rgba(157,107,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(157,107,255,.22) 1px,transparent 1px);
        background-size:54px 54px;transform:perspective(420px) rotateX(62deg);transform-origin:bottom;
        -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);}
      .dir-a .wrap{position:relative;z-index:10;max-width:1180px;margin:0 auto;padding:0 56px;}

      /* twinkle sparkles (from B) */
      .dir-a .spark{position:absolute;color:var(--pink-soft);z-index:1;pointer-events:none;font-size:20px;
        animation:ba-sparkle 3.4s ease-in-out infinite;text-shadow:0 0 12px rgba(255,166,226,.8);}

      /* ticker / marquee (from C) */
      .dir-a .marquee{position:relative;z-index:20;overflow:hidden;border-bottom:1px solid var(--line);
        background:rgba(124,77,203,.08);padding:11px 0;white-space:nowrap;}
      .dir-a .marquee .track{display:inline-block;animation:ba-marq 24s linear infinite;font-family:var(--font-pixel);font-size:11px;letter-spacing:2px;color:var(--lav);}
      .dir-a .marquee .track span{margin:0 26px;}
      .dir-a .marquee .track b{color:var(--cyan);}
      @keyframes ba-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

      /* HUD nav */
      .dir-a .nav{display:flex;align-items:center;justify-content:space-between;padding:22px 56px;
        position:relative;z-index:20;border-bottom:1px solid var(--line);}
      .dir-a .nav .brand{font-family:var(--font-pixel);font-size:15px;letter-spacing:1px;color:var(--lav-soft);
        text-shadow:0 0 12px rgba(157,107,255,.6);}
      .dir-a .nav .links{display:flex;gap:30px;align-items:center;font-family:var(--font-pixel);font-size:11px;letter-spacing:1px;color:var(--muted);}
      .dir-a .nav .links a{transition:color .15s,text-shadow .15s;}
      .dir-a .nav .links a:hover{color:var(--cyan);text-shadow:0 0 10px rgba(52,231,224,.7);}
      .dir-a .status{display:flex;align-items:center;gap:8px;font-family:var(--font-pixel);font-size:10px;color:var(--cyan);letter-spacing:1px;}
      .dir-a .status .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:ba-pulse 1.6s infinite;}

      /* HERO */
      .dir-a .hero{position:relative;padding:74px 0 60px;display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:center;}
      .dir-a .logo-wrap{filter:drop-shadow(0 0 4px rgba(255,255,255,.62)) drop-shadow(0 0 14px rgba(157,107,255,.42)) drop-shadow(0 0 28px rgba(157,107,255,.2)) drop-shadow(0 8px 16px rgba(0,0,0,.55));}
      .dir-a .logo-wrap img{width:100%;max-width:640px;}
      .dir-a .hp{display:flex;align-items:center;gap:16px;margin-top:26px;}
      .dir-a .hp .lbl{font-family:var(--font-pixel);font-size:12px;color:var(--lav);letter-spacing:2px;}
      .dir-a .hp img{height:50px;width:auto;filter:drop-shadow(0 0 3px rgba(255,255,255,.6)) drop-shadow(0 0 9px rgba(157,107,255,.42)) drop-shadow(0 0 18px rgba(157,107,255,.2));}
      .dir-a .tag{font-family:var(--font-cyber);font-weight:600;font-size:31px;line-height:1.15;margin-top:30px;max-width:560px;letter-spacing:-.5px;}
      .dir-a .tag b{color:var(--cyan);text-shadow:0 0 16px rgba(52,231,224,.4);}
      .dir-a .sub{color:var(--muted);font-size:16px;line-height:1.6;margin-top:16px;max-width:480px;}
      .dir-a .cta-row{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap;}
      .dir-a .btn{font-family:var(--font-pixel);font-size:12px;letter-spacing:1px;padding:16px 26px;border:0;cursor:pointer;display:inline-block;text-align:center;text-decoration:none;
        background:var(--violet);color:#fff;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
        box-shadow:0 0 0 1px rgba(157,107,255,.6),0 0 26px rgba(157,107,255,.45);transition:transform .15s,box-shadow .15s;}
      .dir-a .btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--cyan),0 0 30px rgba(52,231,224,.55);}
      .dir-a .ghost{font-family:var(--font-pixel);font-size:11px;letter-spacing:1px;color:var(--muted);display:flex;align-items:center;gap:8px;}
      .dir-a .mascot-hero{position:relative;justify-self:center;animation:ba-float 5.5s ease-in-out infinite;}
      .dir-a .mascot-hero img{width:300px;}

      /* section scaffold */
      .dir-a .sec{padding:64px 0;border-top:1px solid var(--line);position:relative;}
      .dir-a .eyebrow{font-family:var(--font-pixel);font-size:11px;letter-spacing:2px;color:var(--cyan);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
      .dir-a .eyebrow::before{content:"";width:26px;height:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
      .dir-a .h2{font-family:var(--font-cyber);font-weight:700;font-size:38px;letter-spacing:-.5px;}

      /* ABOUT */
      .dir-a .about{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:center;}
      .dir-a .about .panel{border:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),var(--ink));padding:26px;
        clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));}
      .dir-a .about p{color:var(--muted);font-size:17px;line-height:1.7;margin-top:16px;max-width:560px;}
      .dir-a .inv{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
      .dir-a .chip{font-family:var(--font-pixel);font-size:10px;letter-spacing:1px;padding:9px 13px;border:1px solid var(--line);color:var(--lav);
        background:rgba(124,77,203,.08);transition:.15s;}
      .dir-a .chip:hover{border-color:var(--cyan);color:var(--cyan);}
      .dir-a .about .m{display:flex;justify-content:center;animation:ba-float 6s ease-in-out infinite;}
      .dir-a .about .m img{width:230px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));}
      .dir-a .stat-strip{display:flex;gap:34px;margin-top:30px;}
      .dir-a .stat .n{font-family:var(--font-pixel);font-size:20px;color:var(--lav-soft);text-shadow:0 0 12px rgba(157,107,255,.5);}
      .dir-a .stat .k{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.5px;}

      /* DROP / coming soon */
      .dir-a .drop{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center;}
      .dir-a .loadbox{border:1px solid var(--line);background:rgba(18,12,32,.6);padding:30px;margin-top:24px;}
      .dir-a .bar{height:18px;background:#0c0818;border:1px solid var(--line);position:relative;overflow:hidden;margin:18px 0 10px;}
      .dir-a .bar i{position:absolute;inset:0;width:62%;background:repeating-linear-gradient(90deg,var(--violet) 0 10px,var(--violet-bright) 10px 20px);
        box-shadow:0 0 16px rgba(157,107,255,.6);animation:ba-load 2.6s ease-out infinite alternate;}
      .dir-a .barmeta{display:flex;justify-content:space-between;font-family:var(--font-pixel);font-size:10px;color:var(--muted);letter-spacing:1px;}
      .dir-a .drop .m{display:flex;justify-content:center;animation:ba-float 5s ease-in-out infinite;}
      .dir-a .drop .m img{width:280px;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));}

      /* NEWSLETTER */
      .dir-a .coin{text-align:center;border:1px solid var(--line);padding:54px 30px;position:relative;
        background:radial-gradient(600px 240px at 50% 0,rgba(157,107,255,.18),transparent 70%);}
      .dir-a .coin .h2{margin-bottom:10px;}
      .dir-a .coin p{color:var(--muted);font-size:16px;margin-bottom:26px;}
      .dir-a .form{display:flex;gap:10px;max-width:460px;margin:0 auto;}
      .dir-a .form input{flex:1;background:#0c0818;border:1px solid var(--line);color:var(--paper);padding:15px 16px;font-family:var(--font-mono);font-size:14px;}
      .dir-a .form input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 14px rgba(52,231,224,.3);}
      .dir-a .form button{font-family:var(--font-pixel);font-size:11px;letter-spacing:1px;background:var(--cyan);color:#04201f;border:0;padding:0 22px;cursor:pointer;transition:.15s;}
      .dir-a .form button:hover{box-shadow:0 0 18px rgba(52,231,224,.6);}
      .dir-a .ok{font-family:var(--font-pixel);font-size:13px;color:var(--cyan);}
      .dir-a .news-sec{display:grid;grid-template-columns:350px 1fr;gap:44px;align-items:center;}
      .dir-a .news-m{display:flex;justify-content:center;animation:ba-float 5.6s ease-in-out infinite;}
      .dir-a .news-sec .coin{text-align:left;}
      .dir-a .news-sec .form{margin-left:0;}
      .dir-a .follow{display:grid;grid-template-columns:1fr 350px;gap:44px;align-items:center;}
      .dir-a .follow .m{display:flex;justify-content:center;animation:ba-float 5s ease-in-out infinite;}
      .dir-a .follow p{margin-bottom:6px;}

      /* FOOTER */
      .dir-a .foot{border-top:1px solid var(--line);padding:44px 56px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;position:relative;z-index:10;}
      .dir-a .foot .big-brand{font-family:var(--font-cyber);font-weight:700;font-size:34px;letter-spacing:-1px;text-transform:uppercase;color:var(--lav-soft);text-shadow:0 0 18px rgba(157,107,255,.4);}
      .dir-a .socials{display:flex;gap:10px;margin-top:16px;}
      .dir-a .soc{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
        font-family:var(--font-pixel);font-size:11px;color:var(--lav);transition:.15s;background:rgba(124,77,203,.06);}
      .dir-a .soc:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);box-shadow:0 0 16px rgba(52,231,224,.4);}
      .dir-a .foot .meta{font-family:var(--font-mono);font-size:12px;color:var(--muted);line-height:1.9;text-align:right;}
      .dir-a .foot .domains{color:var(--cyan);}
      .dir-a .legal-links{display:flex;gap:18px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap;}
      .dir-a .legal-links button{background:none;border:none;font-family:var(--font-pixel);font-size:10px;letter-spacing:1px;color:var(--muted);cursor:pointer;padding:0;transition:color .15s;}
      .dir-a .legal-links button:hover{color:var(--cyan);}

      /* MODAL */
      .ba-modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(9,5,20,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;}
      .ba-modal{position:relative;width:100%;max-width:680px;max-height:85vh;background:var(--ink-2);border:1px solid rgba(178,150,238,.3);
        clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
        display:flex;flex-direction:column;box-shadow:0 0 60px rgba(157,107,255,.2),0 0 120px rgba(157,107,255,.08);}
      .ba-modal-head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 20px;border-bottom:1px solid var(--line);flex-shrink:0;}
      .ba-modal-head h3{font-family:var(--font-cyber);font-weight:700;font-size:22px;letter-spacing:-.5px;margin:0;}
      .ba-modal-head .eyebrow{font-family:var(--font-pixel);font-size:10px;letter-spacing:2px;color:var(--cyan);margin-bottom:6px;}
      .ba-modal-close{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--font-pixel);font-size:10px;letter-spacing:1px;
        padding:8px 14px;cursor:pointer;transition:.15s;flex-shrink:0;}
      .ba-modal-close:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(52,231,224,.3);}
      .ba-modal-body{overflow-y:auto;padding:28px;flex:1;}
      .ba-modal-body pre{font-family:var(--font-body);font-size:14px;color:var(--muted);line-height:1.8;white-space:pre-wrap;word-break:break-word;margin:0;}
      .ba-modal-body pre b, .ba-modal-body pre strong{color:var(--lav-soft);}
      `}</style>

      {/* MODAL */}
      {modal && (
        <div className="ba-modal-backdrop" onClick={closeModal}>
          <div className="ba-modal" onClick={e => e.stopPropagation()}>
            <div className="ba-modal-head">
              <div>
                <div className="eyebrow">LEGAL // BADDY ARMOR</div>
                <h3>{MODALS[modal].title}</h3>
              </div>
              <button className="ba-modal-close" onClick={closeModal}>[ CLOSE ]</button>
            </div>
            <div className="ba-modal-body">
              <pre>{MODALS[modal].content}</pre>
            </div>
          </div>
        </div>
      )}

      <div className="scan"></div>
      <div className="floor"></div>
      <span className="spark" style={{top:'150px',left:'9%'}}>✦</span>
      <span className="spark" style={{top:'250px',right:'11%',animationDelay:'1.1s'}}>✧</span>
      <span className="spark" style={{top:'430px',left:'6%',animationDelay:'2s'}}>✦</span>
      <span className="spark" style={{top:'120px',right:'33%',animationDelay:'.6s'}}>✧</span>
      <span className="spark" style={{top:'540px',right:'7%',animationDelay:'1.6s'}}>✦</span>

      {/* NAV */}
      <nav className="nav">
        <div className="brand">★ BADDY ARMOR</div>
        <div className="links">
          <a href="#top">HOME</a><a href="#about">ABOUT</a><a href="#drop">THE DROP</a><a href="#follow">FOLLOW</a>
        </div>
        <div className="status"><span className="dot"></span>SHOP // STANDBY</div>
      </nav>
      <div className="marquee"><div className="track">
        <span>GAMES <b>×</b> ANIME <b>×</b> CYBERPUNK <b>×</b> CYBERGOTH <b>×</b> HACKER</span>
        <span>DROPS SOON — FOLLOW US <b>♥</b> DFW · TX</span>
        <span>GAMES <b>×</b> ANIME <b>×</b> CYBERPUNK <b>×</b> CYBERGOTH <b>×</b> HACKER</span>
        <span>DROPS SOON — FOLLOW US <b>♥</b> DFW · TX</span>
      </div></div>

      <div className="wrap">
        {/* HERO */}
        <header className="hero">
          <div className="hero-copy">
            <div className="logo-wrap"><img className="px-art" src="assets/ba-logo.png" alt="Baddy Armor" /></div>
            <div className="hp">
              <span className="lbl">[ HP ]</span>
              <img className="px-art" src="assets/ba-hearts.png" alt="" />
            </div>
            <h1 className="tag">Wearables for gamers, weebs &amp; <b>netrunners.</b></h1>
            <p className="sub">A modern clothing &amp; accessories brand fusing video games, anime, cyberpunk &amp; cybergoth into kawaii, fun designs.</p>
            <div className="cta-row">
              <a className="btn" href="#follow">▶ FOLLOW FOR THE DROP</a>
              <span className="ghost">// SHOP LOADING SOON</span>
            </div>
          </div>
          <div className="mascot-hero"><img src="assets/mascot-purple.png" alt="Baddy Armor mascot" /></div>
        </header>
      </div>

      <div className="wrap">
        {/* ABOUT */}
        <section className="sec about" id="about">
          <div className="m"><img src="assets/mascot-laptop.png" alt="Baddy Armor mascot" /></div>
          <div>
            <div className="eyebrow">PLAYER PROFILE</div>
            <h2 className="h2">Small crew. Big loadout.</h2>
            <p>Baddy Armor is a small operation headquartered in <b style={{ color: 'var(--lav-soft)' }}>DFW, TX</b> — a modern clothing &amp; accessories brand mixing video games, anime, cyberpunk, cybergoth and hacker themes into interesting, kawaii, fun designs.</p>
            <div className="inv">
              {cats.map((c, i) => <span className="chip" key={i}>{c}</span>)}
            </div>
            <div className="stat-strip">
              <div className="stat"><div className="n">DFW · TX</div><div className="k">Headquarters</div></div>
              <div className="stat"><div className="n">∞ DESIGNS</div><div className="k">In the works</div></div>
              <div className="stat"><div className="n">100% KAWAII</div><div className="k">Guaranteed</div></div>
            </div>
          </div>
        </section>

        {/* DROP */}
        <section className="sec drop" id="drop">
          <div>
            <div className="eyebrow">SYSTEM STATUS</div>
            <h2 className="h2">The drop is loading…</h2>
            <div className="loadbox">
              <div className="barmeta"><span>INITIALIZING MERCH</span><span>62%</span></div>
              <div className="bar"><i></i></div>
              <div className="barmeta"><span>SHIRTS · HOODIES · HATS · CASES · STICKERS</span><span>EST. SOON™</span></div>
            </div>
            <p className="sub" style={{ marginTop: '22px' }}>We're prepping the first wave. Follow along and you'll be first through the door when it goes live.</p>
          </div>
          <div className="m"><img src="assets/mascot-red.png" alt="Baddy Armor mascot" /></div>
        </section>

        {/* NEWSLETTER */}
        <section className="sec news-sec">
          <div className="m news-m"><img src="assets/mascot-green.png" alt="Baddy Armor mascot" /></div>
          <div className="coin">
            <div className="eyebrow">INSERT COIN</div>
            <h2 className="h2">Get pinged when we drop.</h2>
            <p>No spam — just the launch signal &amp; the occasional secret design.</p>
            {sent ? <div className="ok">✓ YOU'RE ON THE LIST. SEE YOU AT THE DROP.</div> :
            <form className="form" onSubmit={async (e) => {
              e.preventDefault();
              const email = e.target.querySelector('input[type=email]').value;
              try {
                const res = await fetch('/api/newsletter', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ email })
                });
                const data = await res.json();
                if (data.success) setSent(true);
              } catch {}
            }}>
                <input type="email" required placeholder="player@email.com" />
                <button type="submit">NOTIFY ME</button>
              </form>}
          </div>
        </section>

        {/* FOLLOW band */}
        <section className="sec follow" id="follow">
          <div className="follow-copy">
            <div className="eyebrow">JOIN THE SQUAD</div>
            <h2 className="h2">Drops soon — follow us.</h2>
            <p className="sub">Be first to see new designs, behind-the-scenes chaos &amp; the launch signal.</p>
            <div className="cta-row">
              <a className="btn" href="#connect">▶ FOLLOW BADDY ARMOR</a>
            </div>
          </div>
          <div className="m"><img src="assets/mascot-grey.png" alt="Baddy Armor mascot" /></div>
        </section>
      </div>

      {/* FOOTER */}
      <footer className="foot" id="connect">
        <div>
          <div className="big-brand">BADDY ARMOR</div>
          <div className="socials">
            <a className="soc" href="https://www.instagram.com/baddyarmor" title="Instagram">IG</a>
            <a className="soc" href="https://www.tiktok.com/@baddyarmor" title="TikTok">TT</a>
            <a className="soc" href="https://x.com/BaddyArmor" title="X">X</a>
            <a className="soc" href="#" title="Discord">DC</a>
          </div>
        </div>
        <div className="meta">
          <div className="domains">baddyarmor.com</div>
          <div>DFW, TX · © 2026 BADDY ARMOR</div>
          <div className="legal-links">
            <button onClick={() => openModal('tos')}>TERMS</button>
            <button onClick={() => openModal('privacy')}>PRIVACY</button>
            <button onClick={() => openModal('returns')}>RETURNS</button>
          </div>
        </div>
      </footer>
    </div>);

}
window.DirArcade = DirArcade;