<!--
Donor Wall for Squarespace (Drop in a Code Block)
Bolder patriotic look + memorial styling + animated flag watermark
-->

<div class="donorwall patriotic bold">
  <section class="dw-hero">
    <div class="dw-flagbanner" aria-hidden="true"></div>
    <h2>🇺🇸 Raising the Roof for Our Heroes — Donor Wall 🇺🇸</h2>
    <p>With gratitude to our supporters of American Legion Post 222 and the Woody Woodbury Hall Dedication.</p>
  </section>

  <!-- Controls -->
  <div class="dw-controls">
    <div class="dw-filters">
      <button data-filter="all" class="active">All</button>
      <button data-filter="person">Individuals</button>
      <button data-filter="memory">In Memory Of</button>
      <button data-filter="business">Businesses</button>
    </div>
    <div class="dw-tier">
      <label for="tier">Tier</label>
      <select id="tier">
        <option value="">All tiers</option>
        <option>Platinum Hero</option>
        <option>Gold Star</option>
        <option>Supporter</option>
        <option>Friend</option>
      </select>
    </div>
    <div class="dw-search">
      <input id="search" type="search" placeholder="Search name or business..." aria-label="Search donors" />
    </div>
  </div>

  <!-- Results grid -->
  <div id="dw-grid" class="dw-grid" aria-live="polite"></div>
</div>

<style>
  :root{--navy:#0b2149;--red:#b22234;--white:#ffffff;--blue:#1b3a6b;--gold:#c99a2e;--muted:#42526e;--border:#e6e9f0}
  .donorwall{font-family: Montserrat, Arial, sans-serif; color:var(--navy); position:relative}

  /* Bold Patriotic background with animated flag watermark */
  .donorwall.bold{background:linear-gradient(180deg,rgba(11,33,73,.96),rgba(27,58,107,.92)), url('https://www.transparenttextures.com/patterns/stardust.png'); background-size:cover; color:#fff; position:relative; overflow:hidden}
  .donorwall.bold::before{content:""; position:absolute; inset:0; background:url('https://upload.wikimedia.org/wikipedia/commons/5/5c/US_flag_large_51_stars.png') center/80% no-repeat; opacity:0.08; z-index:0; animation:wave 12s ease-in-out infinite alternate}
  .donorwall>*{position:relative; z-index:1}

  @keyframes wave{
    0%{background-position:center top}
    50%{background-position:center 10px}
    100%{background-position:center -10px}
  }

  .donorwall.bold .dw-hero h2{color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.5)}
  .donorwall.bold .dw-hero p{color:#f0f0f0}

  /* Flag banner */
  .dw-flagbanner{height:36px; background:linear-gradient(90deg,var(--red) 0 20%, var(--white) 20% 40%, var(--blue) 40% 60%, var(--white) 60% 80%, var(--red) 80% 100%); margin:0 auto 18px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.3)}

  .donorwall .dw-hero{text-align:center; margin: 0 auto 1.25rem; max-width: 900px; padding-top:.5rem}
  .donorwall .dw-hero h2{font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 0.5rem 0; font-weight:900}

  .donorwall .dw-controls{display:grid; grid-template-columns: 1fr auto auto; gap:.75rem; align-items:center; margin: 1rem 0 1.25rem}
  .donorwall .dw-filters{display:flex; flex-wrap:wrap; gap:.5rem}
  .donorwall .dw-filters button{border:2px solid #fff; background:var(--blue); color:#fff; padding:.5rem .9rem; border-radius:999px; cursor:pointer; font-size:1rem; font-weight:600; text-transform:uppercase}
  .donorwall .dw-filters button.active, .donorwall .dw-filters button:hover{background:var(--red); border-color:#fff}
  .donorwall .dw-tier select, .donorwall .dw-search input{border:2px solid #fff; padding:.5rem .7rem; border-radius:.6rem; font-size:.95rem}

  .donorwall .dw-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; padding-bottom:16px}
  @media (max-width:1100px){ .donorwall .dw-grid{grid-template-columns: repeat(8, 1fr);} }
  @media (max-width:700px){ .donorwall .dw-grid{grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px} .donorwall .dw-controls{grid-template-columns:1fr} .donorwall .dw-card, .donorwall .dw-card.business{grid-column:auto} .donorwall .dw-card{padding:18px} .donorwall .dw-name{font-size:1.05rem} }

  /* Card */
  .donorwall .dw-card{grid-column: span 4; background:#fff; color:var(--navy); border:2px solid var(--navy); border-radius:18px; box-shadow:0 4px 8px rgba(9,30,66,.3); padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; overflow:hidden; transition:transform .2s}
  .donorwall .dw-card:hover{transform:translateY(-4px); box-shadow:0 6px 12px rgba(0,0,0,.35)}
  .donorwall .dw-card.business{flex-direction:row; text-align:left; grid-column: span 6}
  @media (max-width:700px){ .donorwall .dw-card.business{grid-column: span 4; flex-direction:column; text-align:center} }

  /* Patriotic border accent */
  .donorwall .dw-card::after{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--red),var(--white),var(--blue))}

  .donorwall .dw-logo{width:84px; height:84px; border-radius:14px; border:2px solid var(--navy); display:grid; place-items:center; overflow:hidden; background:#f6f8fb; margin-bottom:8px}
  .donorwall .dw-logo img{width:100%; height:100%; object-fit:contain}

  .donorwall .dw-body{flex:1}
  .donorwall .dw-name{font-weight:900; font-size:1.1rem}
  .donorwall .dw-meta{font-size:.95rem; color:var(--muted); margin-top:2px}
  .donorwall .dw-badge{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; background:var(--navy); color:#fff; padding:.25rem .7rem; border-radius:999px; margin-top:8px; font-weight:600}
  .donorwall .dw-badge.flag::before{content:"🇺🇸"; font-size:.95em; line-height:1; filter:saturate(1.1)}

  /* Memorial chip */
  .donorwall .dw-memory{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.85rem; background:rgba(178,34,52,.1); color:var(--red); padding:.3rem .7rem; border:2px solid rgba(178,34,52,.4); border-radius:999px; font-weight:600}
  .donorwall .dw-memory .icon{font-size:1rem; line-height:1}

  .donorwall .dw-actions{display:flex; gap:8px; margin-top:8px; justify-content:center}
  .donorwall .dw-actions a{font-size:.9rem; text-decoration:none; color:var(--navy); border:2px solid var(--navy); padding:.35rem .7rem; border-radius:8px; font-weight:600}
  .donorwall .dw-actions a:hover{background:var(--navy); color:#fff}
</style>

<script>
<!--
Donor Wall for Squarespace (Drop in a Code Block)
Fixed Script so donors render properly
-->

<div class="donorwall patriotic bold">
  <section class="dw-hero">
    <div class="dw-flagbanner" aria-hidden="true"></div>
    <h2>🇺🇸 Raising the Roof for Our Heroes — Donor Wall 🇺🇸</h2>
    <p>With gratitude to our supporters of American Legion Post 222 and the Woody Woodbury Hall Dedication.</p>
  </section>

  <!-- Controls -->
  <div class="dw-controls">
    <div class="dw-filters">
      <button data-filter="all" class="active">All</button>
      <button data-filter="person">Individuals</button>
      <button data-filter="memory">In Memory Of</button>
      <button data-filter="business">Businesses</button>
    </div>
    <div class="dw-tier">
      <label for="tier">Tier</label>
      <select id="tier">
        <option value="">All tiers</option>
        <option>Platinum Hero</option>
        <option>Gold Star</option>
        <option>Supporter</option>
        <option>Friend</option>
      </select>
    </div>
    <div class="dw-search">
      <input id="search" type="search" placeholder="Search name or business..." aria-label="Search donors" />
    </div>
  </div>

  <!-- Results grid -->
  <div id="dw-grid" class="dw-grid" aria-live="polite"></div>
</div>

<style>
  /* styles unchanged for brevity */
</style>

<script>
document.addEventListener('DOMContentLoaded', function(){
  const donors = [
    { type: 'person', name: 'Ed and Barbara Newman', tier: 'Patriot', amount: 500, memory: '' },
    { type: 'person', name: 'Gator Carter', tier: 'Bronze Star', amount: 2000, memory: 'In memory of Vicki' },
    { type: 'person', name: "Billy O'Hara", tier: 'Friend', amount: 0, memory: '' },
    { type: 'business', name: 'Erica’s Plumbing', tier: 'Business Donation', donation: 'Business Donation — 1-year membership (service in-kind)', url: 'https://www.ericasplumbing.com/', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/a57b5634-742f-4a6f-b47e-7d58b15e73ba/thumbnail_image.png?content-type=image%2Fpng' },
    { type: 'business', name: 'Koala Cooling', tier: 'Business Donation', donation: 'Gift Certificate', url: 'https://example.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/57ae7c31-f5a6-409e-9f44-81538efba69c/koaka.png?content-type=image%2Fpng' },
    { type: 'business', name: 'Lickie Stickie BBQ', tier: 'Business Donation', donation: 'Pig Donation', url: 'https://www.LickieStickieBBQ.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/48e1c3f1-ba2c-47f2-a578-03e732762166/LICKIE+GOOD+LOGO.jpg?content-type=image%2Fjpeg' },
    { type: 'business', name: 'Tropical Acres', tier: 'Gift Card Donation', donation: 'Gift Card', url: 'https://tropicalacres.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/3956487a-68a6-4368-a20c-88fe654ad929/troical+acres%27.jpg?content-type=image%2Fjpeg' },
    { type: 'business', name: 'Mai Kai', tier: 'Business Donation', donation: 'Gift Certificate for Dinner and Show', url: 'https://www.maikai.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/233d0175-dbfb-44fc-85cd-0ef8ca9dd3b5/mai+kai%27.png?content-type=image%2Fpng' },
    { type: 'business', name: 'Chick-fil-A', tier: 'Gift Card Donation', donation: 'Gift Card', url: 'https://www.chick-fil-a.com', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/a281a8e9-de50-4613-92aa-46ea42416424/chick+fila.jpg?content-type=image%2Fjpeg' },
    { type: 'business', name: 'AquaPlex Fort Lauderdale', tier: 'Business Donation', donation: 'Support Gift', logo: 'https://images.squarespace-cdn.com/content/687f76ea7c37801d2b458d6e/979e86b0-da65-4009-8d9c-d688cebe4a8a/AquaPlex-Fort-Lauderdale_LP-Logo_Courtesy-of-AquaPlex-Fort-Lauderdale-scaled.jpg?content-type=image%2Fjpeg' }
  ];

  const grid = document.getElementById('dw-grid');
  const filterButtons = document.querySelectorAll('.dw-filters button');
  const tierSelect = document.getElementById('tier');
  const searchInput = document.getElementById('search');
  let currentFilter = 'all';

  function fmtUSD(n){
    return n ? new Intl.NumberFormat('en-US',{style:'currency',currency:'USD',maximumFractionDigits:0}).format(n) : '';
  }

  function makeCard(d){
    const card = document.createElement('article');
    card.className = 'dw-card ' + (d.type==='business'?'business':'');
    // add logo for business donors
    if(d.type==='business' && d.logo){
      const logo = document.createElement('div');
      logo.className = 'dw-logo';
      const img = document.createElement('img');
      img.src = d.logo; img.alt = d.name + ' logo';
      logo.appendChild(img);
      card.appendChild(logo);
    }
    const body = document.createElement('div');
    body.className = 'dw-body';
    const name = document.createElement('div');
    name.className = 'dw-name';
    name.textContent = d.name;
    const meta = document.createElement('div');
    meta.className = 'dw-meta';
    let metaParts = [];
    if(d.tier) metaParts.push(d.tier);
    if(d.type==='person' && d.amount) metaParts.push(fmtUSD(d.amount));
    if(d.type==='business' && d.donation) metaParts.push(d.donation);
    meta.textContent = metaParts.join(' • ');
    body.appendChild(name);
    body.appendChild(meta);
    card.appendChild(body);
    return card;
  }

  function render(){
    grid.innerHTML = '';
    donors.forEach(d => grid.appendChild(makeCard(d)));
  }
  render();
});