// Three hero variants for the top of the page.
// HeroScore — aggregate rating + breakdown bars (default)
// HeroQuote — featured testimonial carousel, big headline left
// HeroStats — large headline with KPI grid below
//
// Visible numbers (score, total) come from window.AGGREGATE, which mirrors
// E-ITA's public Trustpilot profile as of AGGREGATE.lastUpdated. Numbers
// shown here must always match what's in data.js and what Trustpilot
// reports — they are also reflected in JSON-LD structured data in
// index.html, and a mismatch can be flagged by Google.

const _A = window.AGGREGATE;
const TRUSTPILOT_URL = "https://www.trustpilot.com/review/www.e-ita.org";
const DIST_KEYS = { 5: "five", 4: "four", 3: "three", 2: "two", 1: "one" };

function HeroScore({ badgeStyle }) {
  const bars = [5, 4, 3, 2, 1];
  return (
    <section className="hero-score">
      <div className="hero-score-left">
        <span className="eyebrow"><span className="bar" />TRUSTPILOT · UPDATED MONTHLY</span>
        <h2 className="h1" style={{ marginTop: 18 }}>
          E-ITA reviews,<br/>curated from<br/><em>Trustpilot.</em>
        </h2>
        <p className="sub">
          A curated selection of verified Trustpilot reviews for E-ITA, the international driving permit service at <a href="https://www.e-ita.org" target="_blank" rel="noreferrer">e-ita.org</a>. See the full Trustpilot profile, including all ratings, at <a href={TRUSTPILOT_URL} target="_blank" rel="noreferrer">trustpilot.com/review/www.e-ita.org</a>.
        </p>
        <div className="sources-row">
          <SourceBadge source="trustpilot" style={badgeStyle} />
          <a className="tp-link" href={TRUSTPILOT_URL} target="_blank" rel="noreferrer">View all on Trustpilot →</a>
        </div>
      </div>

      <div className="score-card">
        <div className="big">
          {_A.score.toFixed(1)}<span className="of">/ 5.0</span>
        </div>
        <div className="stars-big"><Stars rating={_A.score} size={22} /></div>
        <div className="total">Based on {_A.total.toLocaleString()} Trustpilot reviews</div>

        <div style={{ marginTop: 24, borderTop: "1px solid var(--line)", paddingTop: 18 }}>
          {bars.map(n => {
            const pct = _A.distribution[DIST_KEYS[n]];
            return (
              <div key={n} className="bar-row">
                <span>{n}★</span>
                <span className="bar"><span style={{ width: pct + "%" }} /></span>
                <span className="pct">{pct}%</span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// IDs that exist in data.js, picked for variety across rating, country, and
// length. If data.js changes, this list may need to update — HeroQuote falls
// back to whatever IDs still resolve.
const FEATURED_IDS = ["r02", "r17", "r25", "r44", "r48"];

function HeroQuote({ reviews, badgeStyle }) {
  const featured = FEATURED_IDS.map(id => reviews.find(r => r.id === id)).filter(Boolean);
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    if (featured.length === 0) return;
    const t = setInterval(() => setIdx(i => (i + 1) % featured.length), 6500);
    return () => clearInterval(t);
  }, [featured.length]);
  if (featured.length === 0) return null;
  const cur = featured[idx];

  return (
    <section className="hero-quote">
      <div className="qbox">
        <div>
          <span className="eyebrow"><span className="bar" />TRUSTPILOT · {_A.total.toLocaleString()} REVIEWS</span>
          <h2 className="h1" style={{ marginTop: 28 }}>
            Don't take<br/>our word for it<span className="blink"></span>
          </h2>
          <p className="sub" style={{ marginTop: 24, maxWidth: 460 }}>
            E-ITA holds a <strong style={{ color: "var(--ink)" }}>{_A.score.toFixed(1)}★</strong> TrustScore from {_A.total.toLocaleString()} reviews on Trustpilot. The selection below is curated from that public profile.
          </p>
        </div>
        <div className="badges">
          <SourceBadge source="trustpilot" style={badgeStyle} />
          <a className="tp-link" href={TRUSTPILOT_URL} target="_blank" rel="noreferrer">View all on Trustpilot →</a>
        </div>
      </div>

      <div className="fcard">
        <span className="quotemark">"</span>
        <SourceBadge source={cur.source} style={badgeStyle} />
        <p className="fquote">"{cur.body}"</p>
        <div className="fwho">
          <div className="avatar">{getInitials(cur.name)}</div>
          <div>
            <div className="fwho-name">{cur.name} {cur.verified && <VerifiedTick />}</div>
            <div className="fwho-meta">{cur.country} · {formatDate(cur.date)}</div>
          </div>
          <div style={{ marginLeft: "auto" }}><Stars rating={cur.rating} size={16} /></div>
        </div>
        <div className="fcard-nav">
          <div className="dots">
            {featured.map((_, i) => <span key={i} data-on={i === idx ? "1" : "0"} />)}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => setIdx(i => (i - 1 + featured.length) % featured.length)} aria-label="Previous">
              <svg width="12" height="12" viewBox="0 0 12 12"><path d="M8 1 3 6l5 5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <button onClick={() => setIdx(i => (i + 1) % featured.length)} aria-label="Next">
              <svg width="12" height="12" viewBox="0 0 12 12"><path d="M4 1 9 6l-5 5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroStats({ badgeStyle }) {
  // Curated count = number of reviews surfaced on this page (window.REVIEWS).
  // It's *not* the same as _A.total (Trustpilot's full review count); both
  // are real, non-fabricated numbers and both are labeled honestly below.
  const curatedCount = (window.REVIEWS || []).length;
  return (
    <section className="hero-stats">
      <span className="eyebrow"><span className="bar" />TRUSTPILOT · UPDATED MONTHLY</span>
      <h2 className="h1" style={{ marginTop: 20 }}>
        E-ITA reviews,<br/>
        <span className="accent">{_A.score.toFixed(1)} stars</span> from<br/>
        {_A.total.toLocaleString()} verified reviews.
      </h2>
      <p className="sub">
        Real Trustpilot reviews for E-ITA, the international driving permit service. Aggregate score and total review count are mirrored directly from E-ITA's public Trustpilot profile.
      </p>

      <div className="statgrid">
        <div className="stat">
          <div className="lbl">TrustScore</div>
          <div className="val">{_A.score.toFixed(1)}<span className="unit">/5</span></div>
          <div className="delta">On Trustpilot</div>
        </div>
        <div className="stat">
          <div className="lbl">Total reviews</div>
          <div className="val">{(_A.total/1000).toFixed(2)}k</div>
          <div className="delta">{_A.total.toLocaleString()} on Trustpilot</div>
        </div>
        <div className="stat">
          <div className="lbl">5-star share</div>
          <div className="val">{_A.distribution.five}<span className="unit">%</span></div>
          <div className="delta">of all Trustpilot reviews</div>
        </div>
        <div className="stat">
          <div className="lbl">Curated here</div>
          <div className="val">{curatedCount}</div>
          <div className="delta">selected reviews shown</div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28, alignItems: "center" }}>
        <SourceBadge source="trustpilot" style={badgeStyle} />
        <a className="tp-link" href={TRUSTPILOT_URL} target="_blank" rel="noreferrer">View all on Trustpilot →</a>
      </div>
    </section>
  );
}

Object.assign(window, { HeroScore, HeroQuote, HeroStats });