/* Review detail + Article detail pages */

function ReviewPage({ slug }) {
  const paddle = window.PADDLES.find(p => p.slug === slug);
  if (!paddle) {
    return (
      <div className="container" style={{padding:"80px 0", textAlign:"center"}}>
        <h1>Review not found</h1>
        <p style={{color:"var(--text-muted)"}}>That paddle isn't in our database.</p>
        <a href="#/reviews" className="btn btn-primary" style={{marginTop:20}}>See all reviews</a>
      </div>
    );
  }

  // Animate perf bars on mount by keying a remount
  const [mounted, setMounted] = useState(false);
  useEffect(() => { setMounted(true); }, [slug]);

  const related = window.PADDLES
    .filter(p => p.slug !== paddle.slug && p.category.some(c => paddle.category.includes(c)))
    .slice(0, 3);

  return (
    <div>
      <section className="review-hero">
        <div className="container">
          <div style={{display:"flex", gap:8, marginBottom:12, fontSize:13, color:"var(--text-muted)"}}>
            <a href="#/reviews" style={{color:"var(--text-muted)"}}>Reviews</a>
            <span>/</span>
            <span>{paddle.brand}</span>
          </div>
          <div className="review-brand">{paddle.brand}</div>
          <h1 className="review-title">{paddle.name} Review (2026)</h1>
          <div className="review-meta">
            <span><b>Tested</b> {paddle.tested}</span>
            <span><b>Score</b> {paddle.score.toFixed(1)}/10</span>
            <span><b>Best for</b> {paddle.bestFor}</span>
          </div>
        </div>
      </section>

      <div className="container">
        <div className="review-body">
          {/* MAIN */}
          <article className="review-main">
            <QuickAnswer>{paddle.quickAnswer}</QuickAnswer>

            <section className="review-section" id="verdict">
              <h2>The Verdict</h2>
              <p style={{fontSize:18, color:"var(--navy)", fontWeight:500}}>{paddle.tagline}</p>
              <p>{paddle.hook} After three weeks and roughly twenty-plus hours of play across our six testers,
                the {paddle.name} landed in the <b>{paddle.score >= 9 ? "elite" : paddle.score >= 8.5 ? "upper tier" : "solid mid-tier"}</b> of the paddles we tested in 2026.</p>
              <p>If you're comparing it against other foam-core paddles, it's one of several <a href="#/articles/best-foam-core-paddles-2026">great foam core paddles</a> we've played this year.</p>

              <div style={{margin:"24px 0"}}>
                <AffiliateCTA paddle={paddle} size="lg" block={false} />
              </div>
            </section>

            <PromoBox code={paddle.code} discount={paddle.codeNote ? `${paddle.codeNote} — drops to $${paddle.salePrice}` : `Save on ${paddle.brand}`} />

            <section className="review-section" id="specs">
              <h2>Specs</h2>
              <table className="specs-table">
                <tbody>
                  <tr className="highlight"><td>Overall Score</td><td>{paddle.score.toFixed(1)} / 10</td></tr>
                  <tr className="highlight"><td>Price (with code)</td><td>${paddle.salePrice}{paddle.code ? ` with code ${paddle.code}` : ""}</td></tr>
                  <tr><td>Stock Price</td><td>${paddle.stockPrice}</td></tr>
                  <tr><td>Shape</td><td>{paddle.shape}</td></tr>
                  <tr><td>Thickness</td><td>{paddle.thickness}</td></tr>
                  <tr><td>Core</td><td>{paddle.core}</td></tr>
                  <tr><td>Face</td><td>{paddle.face}</td></tr>
                  <tr><td>Weight</td><td>{paddle.weight}</td></tr>
                  <tr><td>Grip Length</td><td>{paddle.grip}</td></tr>
                  <tr><td>Swing Weight</td><td>{paddle.swingweight}</td></tr>
                </tbody>
              </table>
            </section>

            <section className="review-section" id="performance">
              <h2>Performance Scores</h2>
              {mounted && <PerfTable scores={paddle.scores} />}
            </section>

            <section className="review-section" id="feel">
              <h2>On-Court Feel</h2>
              <p>{paddle.feel}</p>

              <h3 style={{marginTop:28, marginBottom:12}}>Performance & Testing</h3>
              <p style={{color:"var(--text-muted)", fontSize:15}}>
                We tested the {paddle.name} across 6 players over 3 weeks. Drills, rec play, and at least one tournament match per paddle.
                Scores reflect consensus feedback, not a single reviewer's opinion.
              </p>

              <h3 style={{marginTop:28, marginBottom:12}}>Grit & Durability</h3>
              <p>{paddle.durability}</p>
            </section>

            <section className="review-section" id="who">
              <h2>Who It's For</h2>
              <p>{paddle.whoFor}</p>
            </section>

            <section className="review-section" id="proscons">
              <h2>Pros & Cons</h2>
              <div className="proscons">
                <div className="proscons-col pros">
                  <h4>Pros</h4>
                  <ul>{paddle.pros.map((p, i) => <li key={i}>{p}</li>)}</ul>
                </div>
                <div className="proscons-col cons">
                  <h4>Cons</h4>
                  <ul>{paddle.cons.map((c, i) => <li key={i}>{c}</li>)}</ul>
                </div>
              </div>
            </section>

            <section className="review-section" id="bottom">
              <h2>Bottom Line</h2>
              <p style={{fontSize:20, fontWeight:600, color:"var(--navy)", lineHeight:1.4, padding:"16px 20px", background:"var(--gray-50)", borderRadius:10, borderLeft:"4px solid var(--teal)"}}>{paddle.verdict}</p>
              <p style={{marginTop:20}}>{paddle.closing}</p>

              <div style={{margin:"28px 0 12px"}}>
                <AffiliateCTA paddle={paddle} size="lg" block={false} />
              </div>
            </section>

            {related.length > 0 && (
              <section className="review-section">
                <h2>Compare to</h2>
                <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(200px, 1fr))", gap:16, marginTop:16}}>
                  {related.map(r => <PaddleCard key={r.slug} paddle={r} />)}
                </div>
              </section>
            )}
          </article>

          {/* SIDE */}
          <aside className="review-side">
            <div className="review-stickycard">
              <div className="sticky-img">
                <img src={paddle.image} alt={paddle.name} />
              </div>
              <div className="sticky-score">
                <ScoreBadge score={paddle.score} />
                <div className="sticky-score-text">
                  <b>Editor's Score</b>
                  <div>Tested {paddle.tested}</div>
                </div>
              </div>
              <div className="sticky-price">
                <b>${paddle.salePrice}</b>
                {paddle.stockPrice !== paddle.salePrice && <s>${paddle.stockPrice}</s>}
                <div>{paddle.code ? `with code ${paddle.code}` : "No active code"}</div>
              </div>
              <div style={{padding: "10px 16px", background: "var(--gray-50)", borderRadius: 8, margin: "12px 0", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                <span style={{fontSize: 12, color: "var(--text-muted)", fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase"}}>Overall Score</span>
                <b style={{color: "var(--navy)", fontSize: 22, letterSpacing: "-0.02em"}}>{paddle.score.toFixed(1)}<span style={{fontSize: 13, color: "var(--text-muted)", fontWeight: 600}}>/10</span></b>
              </div>
              <AffiliateCTA paddle={paddle} size="md" block={true} />
            </div>
          </aside>
        </div>
      </div>

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

function ArticlePage({ slug }) {
  const article = window.ARTICLES.find(a => a.slug === slug);
  if (!article) {
    return (
      <div className="container" style={{padding:"80px 0", textAlign:"center"}}>
        <h1>Article not found</h1>
        <a href="#/articles" className="btn btn-primary" style={{marginTop:20}}>See all articles</a>
      </div>
    );
  }

  const picks = article.categories.map(c => ({
    label: c.label,
    paddle: window.PADDLES.find(p => p.slug === c.slug),
  })).filter(x => x.paddle);

  return (
    <div>
      <section className="review-hero">
        <div className="container-narrow">
          <div style={{display:"flex", gap:8, marginBottom:12, fontSize:13, color:"var(--text-muted)"}}>
            <a href="#/articles" style={{color:"var(--text-muted)"}}>Articles</a>
            <span>/</span>
            <span>Buyer Guide</span>
          </div>
          <div className="section-kicker">{article.date} · By PaddleReviewHub Team</div>
          <h1 style={{marginTop:8}}>{article.title}</h1>
          <p style={{color:"var(--text-muted)", fontSize:19, marginTop:10}}>{article.subtitle}</p>
        </div>
      </section>

      <div className="container-narrow" style={{padding:"32px 24px 0"}}>
        <QuickAnswer>{article.quickAnswer}</QuickAnswer>

        <section className="review-section">
          <h2>How we tested</h2>
          <p>We bought or received {window.PADDLES.length} paddles and put each through our standard three-week testing protocol — individual play, head-to-head comparisons, and tournament use. Every paddle below has a full review on the site; click through to see scores, specs, and the deal we found for each.</p>
        </section>

        <section className="review-section">
          <h2>The rankings</h2>
          <p style={{color:"var(--text-muted)"}}>Each category below links to the full review for that paddle.</p>
          <div style={{display:"grid", gap:16, marginTop:20}}>
            {picks.map(({ label, paddle }, i) => (
              <a key={paddle.slug} href={`#/reviews/${paddle.slug}`} className="card" style={{padding:20, display:"grid", gridTemplateColumns:"80px 1fr auto", gap:20, alignItems:"center", textDecoration:"none", color:"inherit"}}>
                <div style={{width:80, height:100, background:"var(--gray-100)", borderRadius:8, display:"flex", alignItems:"center", justifyContent:"center", padding:8}}>
                  <img src={paddle.image} alt={paddle.name} style={{maxWidth:"100%", maxHeight:"100%", objectFit:"contain"}} />
                </div>
                <div>
                  <div className="section-kicker" style={{marginBottom:4}}>{label}</div>
                  <div style={{fontSize:20, fontWeight:800, color:"var(--navy)", letterSpacing:"-0.02em"}}>{paddle.name}</div>
                  <div style={{fontSize:14, color:"var(--text-muted)", marginTop:4}}>{paddle.tagline}</div>
                  <div style={{marginTop:10, display:"flex", gap:12, fontSize:13, color:"var(--text-muted)"}}>
                    <span><b style={{color:"var(--navy)"}}>${paddle.salePrice}</b>{paddle.code && ` · code ${paddle.code}`}</span>
                    <span>{paddle.shape}</span>
                    <span>{paddle.thickness}</span>
                  </div>
                </div>
                <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:8}}>
                  <ScoreBadge score={paddle.score} size="sm" />
                  <span style={{color:"var(--teal-ink)", fontWeight:700, fontSize:13}}>Read →</span>
                </div>
              </a>
            ))}
          </div>
        </section>

        <section className="review-section">
          <h2>How to choose</h2>
          <p><b>If you play mostly doubles</b> and want one paddle for everything, a 14mm hybrid shape (like the J2CR) is the safest pick. You get balance across power, control, and spin.</p>
          <p><b>If you're a banger or play singles</b>, an elongated 16mm paddle gives you more reach and put-away power. Your hands will need to be quick enough to still block resets.</p>
          <p><b>If you're on a budget</b>, the foam-core options under $100 (like the V-SOL Pro Flash) are better in 2026 than premium paddles were two years ago. No shame in a budget pick.</p>
          <p><b>If you play control-first</b>, look for 16mm cores and hybrid shapes — the J2NF is our top pick. You give up some pop but gain a huge margin for error.</p>
        </section>

        <section className="review-section">
          <h2>Related guides</h2>
          <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(240px, 1fr))", gap:16, marginTop:16}}>
            {window.ARTICLES.filter(a => a.slug !== article.slug).slice(0, 3).map(a => (
              <a key={a.slug} href={`#/articles/${a.slug}`} className="card" style={{padding:20, textDecoration:"none", color:"inherit"}}>
                <div className="section-kicker" style={{marginBottom:6}}>Guide</div>
                <div style={{fontSize:17, fontWeight:700, color:"var(--navy)", letterSpacing:"-0.02em"}}>{a.title}</div>
                <div style={{fontSize:13, color:"var(--teal-ink)", fontWeight:600, marginTop:10}}>Read →</div>
              </a>
            ))}
          </div>
        </section>
      </div>

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

Object.assign(window, { ReviewPage, ArticlePage });