// Three hero variants for the top of the page.
// HeroScore — aggregate rating + breakdown bars
// HeroQuote — featured testimonial carousel, big headline left
// HeroStats — massive headline with kpi grid below

const _A = window.AGGREGATE;
const _S = window.SOURCES;

function HeroScore({ badgeStyle }) {
  const bars = [5, 4, 3, 2, 1];
  const total = _A.total;
  return (
    <section className="hero-score">
      <div className="hero-score-left">
        <span className="eyebrow"><span className="bar" />REVIEW AGGREGATOR · LIVE</span>
        <h1 className="h1" style={{ marginTop: 18 }}>
          Every review<br/>for E-ITA,<br/><em>in one place.</em>
        </h1>
        <p className="sub">
          We continuously pull verified reviews from Google, Trustpilot, Yelp, Facebook, Sitejabber and the BBB into a single feed — so you don't have to open six tabs to make up your mind about an international driving permit.
        </p>
        <div className="sources-row">
          {Object.keys(_S).map(k => (
            <SourceBadge key={k} source={k} style={badgeStyle} />
          ))}
        </div>
      </div>

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

        <div style={{ marginTop: 24, borderTop: "1px solid var(--line)", paddingTop: 18 }}>
          {bars.map(n => {
            const pct = Math.round((_A.breakdown[n] / total) * 100);
            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>
  );
}

const FEATURED_IDS = ["r03", "r13", "r07", "r19", "r01"];

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(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % featured.length), 6500);
    return () => clearInterval(t);
  }, [featured.length]);
  const cur = featured[idx];

  return (
    <section className="hero-quote">
      <div className="qbox">
        <div>
          <span className="eyebrow"><span className="bar" />SOCIAL PROOF · {_A.total.toLocaleString()} REVIEWS</span>
          <h1 className="h1" style={{ marginTop: 28 }}>
            Don't take<br/>our word for it<span className="blink"></span>
          </h1>
          <p className="sub" style={{ marginTop: 24, maxWidth: 460 }}>
            {_A.recommend}% of E-ITA customers across {Object.keys(_S).length} review platforms recommend the service.
            Average issue time: <strong style={{ color: "var(--ink)" }}>{_A.median_turnaround_hours} hours</strong>.
          </p>
        </div>
        <div className="badges">
          {Object.entries(_S).slice(0, 4).map(([k]) => (
            <SourceBadge key={k} source={k} style={badgeStyle} />
          ))}
        </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">{cur.initials}</div>
          <div>
            <div className="fwho-name">{cur.author} {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 }) {
  return (
    <section className="hero-stats">
      <span className="eyebrow"><span className="bar" />EITAREVIEWS.COM · UPDATED HOURLY</span>
      <h1 className="h1" style={{ marginTop: 20 }}>
        <span className="strike">Trust</span> <span className="accent">Verified.</span><br/>
        3,882 reviews.<br/>
        Six platforms.<br/>
        One signal.
      </h1>
      <p className="sub">
        Reviews for E-ITA from Google, Trustpilot, Yelp, Facebook, Sitejabber and the BBB — aggregated, deduplicated, and continuously updated.
      </p>

      <div className="statgrid">
        <div className="stat">
          <div className="lbl">Aggregate rating</div>
          <div className="val">{_A.average.toFixed(1)}<span className="unit">/5</span></div>
          <div className="delta">↑ 0.1 last 30 days</div>
        </div>
        <div className="stat">
          <div className="lbl">Total reviews</div>
          <div className="val">{(_A.total/1000).toFixed(1)}k</div>
          <div className="delta">+ 184 this month</div>
        </div>
        <div className="stat">
          <div className="lbl">Recommend rate</div>
          <div className="val">{_A.recommend}<span className="unit">%</span></div>
          <div className="delta">5,032 customers polled</div>
        </div>
        <div className="stat">
          <div className="lbl">Median turnaround</div>
          <div className="val">{_A.median_turnaround_hours}<span className="unit">hr</span></div>
          <div className="delta">PDF issue time</div>
        </div>
      </div>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
        {Object.keys(_S).map(k => (
          <SourceBadge key={k} source={k} style={badgeStyle} />
        ))}
      </div>
    </section>
  );
}

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