/* Page components — Home, Reviews directory, Articles directory, Community, Deals, About */

function HomePage() {
  const top3 = [...window.PADDLES].sort((a,b) => b.score - a.score).slice(0, 3);
  const featured = top3[0];
  const categories = [
    { label: "Best All-Around", winner: "Honolulu J2CR", href: "#/reviews/honolulu-j2cr" },
    { label: "Best Under $100", winner: "Vatic V-SOL Pro", href: "#/reviews/vatic-v-sol-pro-flash" },
    { label: "Best Power", winner: "Selkirk Boomstik", href: "#/reviews/selkirk-boomstik" },
    { label: "Best Control", winner: "Honolulu J2NF", href: "#/reviews/honolulu-j2nf" },
    { label: "Best Elongated", winner: "Honolulu J6CR", href: "#/reviews/honolulu-j6cr" },
    { label: "Best Foam Core", winner: "Honolulu J2CR", href: "#/articles/best-foam-core-paddles-2026" },
  ];

  return (
    <div>
      {/* Hero */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow">
                <span style={{width:6, height:6, borderRadius:"50%", background:"var(--teal-dark)"}} />
                More reviews coming soon
              </div>
              <h1>The pickleball paddle reviews that <em>tell you the truth</em>.</h1>
              <p className="hero-sub">
                Independent, on-court testing by real players. No affiliate-driven rankings.
                No manufacturer influence. Just paddles, scores, and honest verdicts.
              </p>
              <div className="hero-ctas">
                <a href="#/reviews" className="btn btn-dark btn-lg">Browse all reviews</a>
                <a href="#/articles/best-pickleball-paddles-2026" className="btn btn-ghost btn-lg">Best of 2026 →</a>
              </div>
            </div>

            <div className="hero-featured">
              <div className="hero-featured-eyebrow">#1 Paddle of 2026</div>
              <div className="hero-featured-title">{featured.name}</div>
              <div className="hero-featured-tag">{featured.tagline}</div>
              <div className="hero-featured-body">
                <div className="hero-featured-img">
                  <img src={featured.image} alt={featured.name} />
                </div>
                <div className="hero-featured-details">
                  <div style={{display:"flex", gap:12, alignItems:"center"}}>
                    <ScoreBadge score={featured.score} />
                    <div>
                      <div style={{color:"white", fontWeight:700}}>Editor's Pick</div>
                      <div style={{color:"rgba(255,255,255,0.6)", fontSize:13}}>Tested {featured.tested}</div>
                    </div>
                  </div>
                  <div className="hero-featured-row">
                    <span>Price</span>
                    <b>
                      {featured.stockPrice !== featured.salePrice && (
                        <s style={{opacity:0.5, fontWeight:500, marginRight:6}}>${featured.stockPrice}</s>
                      )}
                      ${featured.salePrice}
                      {featured.code && <span style={{fontSize:12, fontWeight:500, color:"var(--teal)", marginLeft:6}}>code {featured.code}</span>}
                    </b>
                  </div>
                  <div className="hero-featured-row"><span>Shape</span><b>{featured.shape}</b></div>
                  <div className="hero-featured-row"><span>Thickness</span><b>{featured.thickness}</b></div>
                  <a href={`#/reviews/${featured.slug}`} className="btn btn-primary btn-block">Read full review</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Top 3 */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-kicker">This Month's Top 3</div>
            <h2>After testing, these are the paddles we're playing this month.</h2>
            <p>Our three highest-scoring paddles right now. More reviews coming soon.</p>
          </div>
          <div className="top3">
            {top3.map((p, i) => <PaddleCard key={p.slug} paddle={p} rank={i+1} />)}
          </div>
        </div>
      </section>

      {/* Best by category */}
      <section className="section" style={{background: "var(--gray-50)"}}>
        <div className="container">
          <div className="section-head">
            <div className="section-kicker">Best By Category</div>
            <h2>Find the paddle for how you actually play.</h2>
            <p>Shop by play style, budget, or paddle shape — we've named a winner in every category.</p>
          </div>
          <div className="cat-grid">
            {categories.map((c) => (
              <a key={c.label} href={c.href} className="cat-tile">
                <div className="cat-arrow">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </div>
                <div className="cat-label">{c.label}</div>
                <div className="cat-title">{c.winner}</div>
                <div className="cat-winner">See why it won →</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* About strip */}
      <section className="section-sm">
        <div className="container-narrow" style={{textAlign:"center"}}>
          <div className="section-kicker" style={{textAlign:"center"}}>Why trust us?</div>
          <h2 style={{marginBottom:16}}>We play, we test, we compare.</h2>
          <p style={{color:"var(--text-muted)", fontSize:18, lineHeight:1.6}}>
            Every paddle we review is put through consistent on-court sessions — drives, dinks, volleys, resets, and extended rallies.
            No paid placements, no sugarcoating. If a paddle wins our top pick, it's because it won on the court.
            More reviews coming soon.
          </p>
        </div>
      </section>

      {/* Community / Newsletter */}
      <section className="section">
        <div className="container">
          <Newsletter />
        </div>
      </section>
    </div>
  );
}

function ReviewsDirectoryPage() {
  const [sortBy, setSortBy] = useState("score");
  const [filter, setFilter] = useState("all");

  let paddles = [...window.PADDLES];
  if (filter !== "all") paddles = paddles.filter(p => p.category.includes(filter));
  paddles.sort((a,b) => {
    if (sortBy === "score") return b.score - a.score;
    if (sortBy === "price-low") return a.salePrice - b.salePrice;
    if (sortBy === "price-high") return b.salePrice - a.salePrice;
    if (sortBy === "name") return a.name.localeCompare(b.name);
    return 0;
  });

  const filters = [
    { id: "all", label: "All paddles" },
    { id: "all-around", label: "All-around" },
    { id: "power", label: "Power" },
    { id: "control", label: "Control" },
    { id: "budget", label: "Under $100" },
    { id: "value", label: "Best Value" },
    { id: "spin", label: "Spin" },
  ];

  return (
    <div>
      <section style={{padding: "48px 0 24px", borderBottom: "1px solid var(--gray-200)"}}>
        <div className="container">
          <div className="section-kicker">All Reviews</div>
          <h1 style={{marginBottom:12}}>Every paddle we've tested in 2026.</h1>
          <p style={{color:"var(--text-muted)", fontSize:18, maxWidth:720}}>
            Paddles reviewed so far — ranked, scored, and honestly verdicted.
            Filter by category or sort by score to find yours. More coming soon! What would you like to see next?
          </p>
        </div>
      </section>

      <section style={{padding: "20px 0", borderBottom:"1px solid var(--gray-200)", background:"var(--gray-50)"}}>
        <div className="container" style={{display:"flex", flexWrap:"wrap", gap:16, alignItems:"center", justifyContent:"space-between"}}>
          <div style={{display:"flex", flexWrap:"wrap", gap:6}}>
            {filters.map(f => (
              <button
                key={f.id}
                onClick={() => setFilter(f.id)}
                className="pill"
                style={{
                  border: 0, cursor:"pointer", fontFamily:"inherit",
                  background: filter === f.id ? "var(--navy)" : "white",
                  color: filter === f.id ? "white" : "var(--navy)",
                  borderColor: filter === f.id ? "var(--navy)" : "var(--gray-200)",
                  border: "1px solid var(--gray-200)",
                  padding:"8px 14px",
                  fontSize:13,
                }}
              >{f.label}</button>
            ))}
          </div>
          <div style={{display:"flex", alignItems:"center", gap:8, fontSize:13, color:"var(--text-muted)"}}>
            <span>Sort:</span>
            <select value={sortBy} onChange={(e)=>setSortBy(e.target.value)} style={{padding:"8px 12px", borderRadius:8, border:"1px solid var(--gray-200)", fontFamily:"inherit", fontSize:14, background:"white"}}>
              <option value="score">Highest score</option>
              <option value="price-low">Price: low to high</option>
              <option value="price-high">Price: high to low</option>
              <option value="name">Name A–Z</option>
            </select>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          {paddles.length === 0 ? (
            <p style={{textAlign:"center", color:"var(--text-muted)", padding:"60px 0"}}>No paddles match this filter.</p>
          ) : (
            <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(260px, 1fr))", gap:20}}>
              {paddles.map(p => <PaddleCard key={p.slug} paddle={p} />)}
            </div>
          )}
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container"><Newsletter /></div>
      </section>
    </div>
  );
}

function ArticlesPage() {
  return (
    <div>
      <section style={{padding: "48px 0 24px", borderBottom: "1px solid var(--gray-200)"}}>
        <div className="container">
          <div className="section-kicker">Articles & Buyer Guides</div>
          <h1 style={{marginBottom:12}}>Pick the right paddle the first time.</h1>
          <p style={{color:"var(--text-muted)", fontSize:18, maxWidth:620}}>
            Category guides, head-to-head comparisons, and decision frameworks —
            built from the same on-court testing as our reviews.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(320px, 1fr))", gap:20}}>
            {window.ARTICLES.map(a => (
              <a key={a.slug} href={`#/articles/${a.slug}`} className="card" style={{padding:28, textDecoration:"none", color:"inherit", display:"flex", flexDirection:"column", gap:14}}>
                <div className="section-kicker">{a.date} · Guide</div>
                <h3 style={{fontSize:24, fontWeight:800, letterSpacing:"-0.02em"}}>{a.title}</h3>
                <p style={{color:"var(--text-muted)", margin:0}}>{a.meta}</p>
                <div style={{marginTop:"auto", paddingTop:16, borderTop:"1px solid var(--gray-100)", display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <span style={{fontSize:13, color:"var(--text-muted)"}}>{a.categories.length} paddles covered</span>
                  <span style={{color:"var(--teal-ink)", fontWeight:700, fontSize:14}}>Read guide →</span>
                </div>
              </a>
            ))}
            <div className="card" style={{padding:28, display:"flex", flexDirection:"column", gap:14, background:"linear-gradient(135deg, rgba(45,212,191,0.08), rgba(45,212,191,0.02))", borderColor:"rgba(45,212,191,0.25)", borderStyle:"dashed"}}>
              <div className="section-kicker">Coming soon</div>
              <h3 style={{fontSize:24, fontWeight:800, letterSpacing:"-0.02em"}}>More guides on the way.</h3>
              <p style={{color:"var(--text-muted)", margin:0}}>
                Spin paddle breakdowns, kevlar-face comparisons, elongated vs hybrid, beginner picks — we're working through our guide backlog.
                Got a guide you'd like to see? Email us at <a href="mailto:info@paddlereviewhub.com" style={{color:"var(--teal-ink)"}}>info@paddlereviewhub.com</a>.
              </p>
              <div style={{marginTop:"auto", paddingTop:16, borderTop:"1px dashed rgba(45,212,191,0.25)", fontSize:13, color:"var(--text-muted)"}}>
                Subscribe below to hear first.
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container"><Newsletter /></div>
      </section>
    </div>
  );
}

const COMMUNITY_FORM_URL = "https://docs.google.com/forms/d/1D1I0l_q4GWytEQeMZFSVle3-AQEi_tXRgmeHBQOdlo4/edit";

function CommunityPage() {
  return (
    <div>
      <section className="hero" style={{padding:"56px 0 40px"}}>
        <div className="container">
          <div className="hero-eyebrow">
            <span style={{width:6, height:6, borderRadius:"50%", background:"var(--teal-dark)"}} />
            Community Reviews
          </div>
          <h1 style={{maxWidth:860}}>More than one voice. That's how you pick the right paddle.</h1>
          <p className="hero-sub" style={{maxWidth:780}}>
            Pickleball is more than just a sport — it's a vibrant, fast-growing community where players of all ages and skill levels come together to enjoy the game.
            We deeply value that community spirit, and we've built a unique multi-perspective review system so you hear from more than one tester.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop:20}}>
        <div className="container">
          <p style={{fontSize:17, lineHeight:1.7, maxWidth:780}}>
            We know from experience that no two players experience the same paddle the exact same way.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container" style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:48}}>
          <div>
            <h2 style={{marginBottom:14}}>Share your paddle review. Win $100.</h2>
            <p style={{color:"var(--text-muted)", marginTop:0, marginBottom:20}}>
              Every review you submit enters you into our community giveaway. For every 1,000 legitimate reviews we receive,
              we'll randomly select one reviewer to win $100. Reviews are checked for quality before entry is confirmed.
            </p>

            <div className="card" style={{padding:28, display:"flex", flexDirection:"column", gap:18}}>
              <div style={{display:"flex", alignItems:"center", gap:14}}>
                <div style={{width:48, height:48, borderRadius:12, background:"rgba(45,212,191,0.12)", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--teal-ink)"}}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                </div>
                <div>
                  <div style={{fontWeight:700, color:"var(--navy)", fontSize:17}}>Community Paddle Review Form</div>
                  <div style={{fontSize:13, color:"var(--text-muted)"}}>Opens in a new tab · Takes ~3 minutes</div>
                </div>
              </div>

              <div style={{padding:"16px 18px", background:"var(--gray-50)", borderRadius:10, fontSize:14, color:"var(--navy)", lineHeight:1.6}}>
                <div style={{fontSize:11, color:"var(--text-muted)", textTransform:"uppercase", letterSpacing:"0.1em", fontWeight:700, marginBottom:10}}>What you'll be asked</div>
                <ul style={{margin:0, paddingLeft:18, display:"flex", flexDirection:"column", gap:4}}>
                  <li>Your name & email (for giveaway contact)</li>
                  <li>Paddle brand & model you're reviewing</li>
                  <li>Your skill level and playing style</li>
                  <li>How it feels on drives, dinks, volleys & resets</li>
                  <li>Durability, grit, and edge guard notes</li>
                  <li>Overall rating and who you'd recommend it to</li>
                </ul>
              </div>

              <a href={COMMUNITY_FORM_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-lg btn-block">
                Submit your review
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
              </a>

              <div style={{padding:"14px 16px", background:"rgba(45,212,191,0.08)", borderRadius:10, fontSize:13, color:"var(--text-muted)", lineHeight:1.5, border:"1px solid rgba(45,212,191,0.2)"}}>
                <b style={{color:"var(--navy)"}}>How the giveaway works:</b> For every 1,000 legitimate reviews received, we'll
                randomly select one reviewer to win $100. One entry per review. We'll reach out to the winner via the email
                on the form — no public announcements needed.
              </div>
            </div>
          </div>

          <aside style={{display:"flex", flexDirection:"column", gap:20}}>
            <div className="card" style={{padding:24, background:"var(--navy)", color:"white", borderColor:"var(--navy)"}}>
              <div className="section-kicker" style={{color:"var(--teal)"}}>Community giveaway</div>
              <h3 style={{color:"white", marginTop:8, fontSize:28, letterSpacing:"-0.02em"}}>$100 prize</h3>
              <p style={{color:"rgba(255,255,255,0.72)", marginTop:10, lineHeight:1.5, fontSize:14}}>
                One random reviewer wins for every 1,000 legitimate community reviews we receive.
                Winners are contacted via the email used on the form.
              </p>
              <div style={{marginTop:16, padding:"14px 16px", background:"rgba(255,255,255,0.06)", borderRadius:10}}>
                <div style={{fontSize:11, color:"rgba(255,255,255,0.6)", textTransform:"uppercase", letterSpacing:"0.12em", fontWeight:700}}>Entry limits</div>
                <div style={{fontSize:15, color:"white", marginTop:6, lineHeight:1.5}}>One entry per review · No spam · No duplicates</div>
              </div>
            </div>

            <div className="card" style={{padding:24, background:"linear-gradient(135deg, rgba(45,212,191,0.08), rgba(45,212,191,0.02))", borderColor:"rgba(45,212,191,0.2)"}}>
              <div className="section-kicker">Why share?</div>
              <p style={{margin:"10px 0 0", color:"var(--navy)", lineHeight:1.6, fontSize:14}}>
                Your review helps the next player avoid a $200 mistake.
                The more perspectives we collect, the better our recommendations get — for everyone.
              </p>
            </div>
          </aside>
        </div>

        <div className="container" style={{marginTop:56}}>
          <div className="card" style={{padding:48, textAlign:"center", background:"var(--gray-50)"}}>
            <div className="section-kicker" style={{justifyContent:"center", display:"flex"}}>Coming Soon</div>
            <h2 style={{marginTop:10}}>Community Analytics</h2>
            <p style={{color:"var(--text-muted)", maxWidth:520, margin:"12px auto 0"}}>
              Aggregate scores, most-reviewed paddles, and breakdowns by skill level — built from real player submissions.
              We'll light this section up once we've collected enough reviews to make the data meaningful.
            </p>
          </div>
        </div>

        <div className="container" style={{marginTop:40}}>
          <p style={{fontSize:13, lineHeight:1.6, color:"var(--text-muted)", maxWidth:780, margin:0}}>
            <b style={{color:"var(--navy)"}}>Disclaimer:</b> Only real accounts are eligible. All sign-ups will be reviewed for authenticity. We reserve the right to disqualify any suspicious, duplicate, or fake/bot accounts. The organizer's decisions regarding eligibility and the winner are final.
          </p>
        </div>

        <div className="container" style={{marginTop:56}}>
          <Newsletter />
        </div>
      </section>
    </div>
  );
}

function WinnerRow({ name, paddle, date }) {
  return (
    <div style={{display:"flex", justifyContent:"space-between", paddingBottom:10, borderBottom:"1px solid var(--gray-100)"}}>
      <div>
        <div style={{fontWeight:600, color:"var(--navy)"}}>{name}</div>
        <div style={{fontSize:12, color:"var(--text-muted)"}}>{paddle}</div>
      </div>
      <div style={{fontSize:12, color:"var(--text-muted)"}}>{date}</div>
    </div>
  );
}

function DealsPage() {
  return (
    <div>
      <section style={{padding:"48px 0 24px", borderBottom:"1px solid var(--gray-200)"}}>
        <div className="container">
          <div className="section-kicker">Promo Codes</div>
          <h1 style={{marginBottom:12}}>Every active promo code, in one place.</h1>
          <p style={{color:"var(--text-muted)", fontSize:18, maxWidth:640}}>
            Working promo codes for every brand we review. We update this page weekly and remove codes when they expire.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <table className="deals-table">
            <thead>
              <tr>
                <th>Brand</th>
                <th>Code</th>
                <th>Discount</th>
                <th style={{textAlign:"right"}}>Shop</th>
              </tr>
            </thead>
            <tbody>
              {window.PROMO_CODES.map((p) => (
                <tr key={p.brand}>
                  <td style={{fontWeight:700, color:"var(--navy)"}}>{p.brand}</td>
                  <td>{p.code === "—" ? <span style={{color:"var(--text-muted)"}}>—</span> : <code onClick={() => { navigator.clipboard?.writeText(p.code); showToast(`Code ${p.code} copied`); }} style={{cursor:"pointer"}} title="Click to copy">{p.code}</code>}</td>
                  <td style={{color:"var(--navy)"}}>{p.discount}</td>
                  <td style={{textAlign:"right"}}>
                    <a href="#" onClick={(e)=>{e.preventDefault(); showToast("Demo — affiliate link placeholder")}} className="btn btn-ghost" style={{padding:"8px 14px", fontSize:13}}>Shop →</a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          <div className="quick-answer" style={{marginTop:32}}>
            <div className="quick-answer-label">HOW IT WORKS</div>
            <p>Copy a code, click Shop to visit the brand, and paste the code at checkout. Our affiliate links don't cost you anything extra — we just get a small commission that keeps this site running. If a code stops working, email us at <b>info@paddlereviewhub.com</b> and we'll fix it same-day.</p>
          </div>

          <div className="card" style={{marginTop:20, padding:"24px 28px", background:"var(--navy)", color:"white", borderColor:"var(--navy)"}}>
            <div className="section-kicker" style={{color:"var(--teal)"}}>For brands</div>
            <h3 style={{color:"white", marginTop:8, fontSize:22, letterSpacing:"-0.02em"}}>Want to set up a promo code with us?</h3>
            <p style={{color:"rgba(255,255,255,0.72)", marginTop:10, lineHeight:1.5, fontSize:15, maxWidth:640}}>
              If you're a paddle brand interested in partnering — promo codes, review samples, or featured placements — reach out at <a href="mailto:info@paddlereviewhub.com" style={{color:"var(--teal)", fontWeight:600}}>info@paddlereviewhub.com</a>. We'd love to hear from you.
            </p>
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container"><Newsletter /></div>
      </section>
    </div>
  );
}

function AboutPage() {
  return (
    <div>
      <section style={{padding:"64px 0 32px", borderBottom:"1px solid var(--gray-200)"}}>
        <div className="container-narrow">
          <div className="section-kicker">About</div>
          <h1 style={{marginBottom:18}}>Honest, no-hype pickleball paddle reviews.</h1>
          <p style={{color:"var(--text-muted)", fontSize:19, lineHeight:1.6}}>
            PaddleReviewHub was created to deliver honest, no-hype pickleball paddle reviews that
            actually help players find the right gear for their game.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container-narrow">
          <p>
            We believe in transparent, real-world testing. Every paddle we review is put through
            consistent on-court sessions — drives, dinks, volleys, resets, and extended rallies — so we
            can describe exactly how it performs in real play. We use a clear hybrid rating system
            (overall score plus straightforward descriptions like "low end of high power" or "middle of
            medium swing weight") and always share both the strengths and weaknesses we experience.
            No paid placements, no sugarcoating.
          </p>
          <p>
            We also deeply value the pickleball community. That's why we feature <a href="#/community">Community Reviews</a> —
            honest feedback and testing notes from players across different skill levels and playing
            styles. These independent perspectives sit alongside our own testing to give you a more
            complete picture before you buy.
          </p>

          <h2 style={{marginTop:48, marginBottom:16}}>Get in touch</h2>
          <p>
            Questions, feedback, or a paddle you'd like us to review? We'd love to hear from you — whether you're a player with a question or a brand with a paddle to send over.
          </p>
          <p style={{fontSize:17}}>
            Reach us at <a href="mailto:info@paddlereviewhub.com">info@paddlereviewhub.com</a>
          </p>

          <h2 style={{marginTop:48, marginBottom:16}}>Follow along</h2>
          <p style={{color:"var(--text-muted)"}}>New reviews, deals, and giveaway drops — posted across all our channels.</p>
          <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(220px, 1fr))", gap:14, marginTop:20}}>
            <SocialCard
              href="https://www.instagram.com/paddlereviewhub/"
              name="Instagram"
              handle="@paddlereviewhub"
              icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".5" fill="currentColor"/></svg>}
            />
            <SocialCard
              href="https://www.facebook.com/people/Paddle-Review-Hub/61572100277064/"
              name="Facebook"
              handle="Paddle Review Hub"
              icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>}
            />
            <SocialCard
              href="https://www.youtube.com/@PaddleReviewHub"
              name="YouTube"
              handle="@PaddleReviewHub"
              icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48" fill="currentColor"/></svg>}
            />
            <SocialCard
              href="https://www.tiktok.com/@paddle.review.hub"
              name="TikTok"
              handle="@paddle.review.hub"
              icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>}
            />
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container"><Newsletter /></div>
      </section>
    </div>
  );
}

function SocialCard({ href, name, handle, icon }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" className="card" style={{padding:18, display:"flex", alignItems:"center", gap:14, textDecoration:"none", color:"inherit"}}>
      <div style={{width:44, height:44, borderRadius:10, background:"rgba(45,212,191,0.12)", color:"var(--teal-ink)", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0}}>
        {icon}
      </div>
      <div style={{minWidth:0}}>
        <div style={{fontWeight:700, color:"var(--navy)"}}>{name}</div>
        <div style={{fontSize:13, color:"var(--text-muted)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{handle}</div>
      </div>
    </a>
  );
}

Object.assign(window, {
  HomePage, ReviewsDirectoryPage, ArticlesPage, CommunityPage, DealsPage, AboutPage,
});