const ReviewsCard = () => (
  <div className="card reviews-card">
    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
      <div>
        <div style={{ fontSize: 14, color: "var(--text-dim)" }}>Customer visits</div>
        <div style={{ fontSize: 14, color: "var(--text-dim)", marginTop: 32 }}>Page impressions</div>
      </div>
      <div style={{ textAlign: "right" }}>
        <div style={{ fontSize: 14, color: "var(--text-dim)" }}>Page Funnels</div>
      </div>
    </div>
    <div className="reviews-row" style={{ marginTop: 8 }}>
      {[1,2,3].map(i => (
        <div className="review-chip" key={i}>
          <div className="rh">
            <span className="lbl mono">REV · 0{i}</span>
            <span className="stars">★★★★★</span>
          </div>
          <div style={{ height: 6, borderRadius: 4, background: "rgba(255,255,255,0.08)", overflow: "hidden" }}>
            <div style={{ height: "100%", width: `${60 + i*12}%`, background: "linear-gradient(90deg,#fff,#9b9b9f)" }} />
          </div>
        </div>
      ))}
    </div>
    <div className="reviews-row" style={{ marginTop: 4, transform: "translateX(8px)" }}>
      {[1,2].map(i => (
        <div className="review-chip" key={i}>
          <div className="rh">
            <span className="lbl mono">IMP · 0{i+3}</span>
            <span className="stars">★★★★★</span>
          </div>
          <div style={{ height: 6, borderRadius: 4, background: "rgba(255,255,255,0.08)", overflow: "hidden" }}>
            <div style={{ height: "100%", width: `${40 + i*20}%`, background: "linear-gradient(90deg,#fff,#9b9b9f)" }} />
          </div>
        </div>
      ))}
    </div>
  </div>
);

const ChartCard = () => {
  // Smooth path that climbs
  const pts = [10, 14, 11, 18, 16, 24, 22, 32, 28, 40, 38, 52, 48, 64, 60, 78];
  const w = 380, h = 160;
  const stepX = w / (pts.length - 1);
  const maxY = Math.max(...pts);
  const path = pts.map((p, i) => {
    const x = i * stepX;
    const y = h - (p / maxY) * (h - 20) - 8;
    return `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(" ");
  const fillPath = path + ` L${w} ${h} L0 ${h} Z`;

  return (
    <div className="card chart-card">
      <div className="chart-meta">
        <div className="chart-stat">
          <div className="num">12.8k <span style={{ fontSize: 12, color: "var(--text-mute)", fontWeight: 400 }}>views</span></div>
          <div className="num" style={{ fontSize: 14, marginTop: 4, color: "var(--text-dim)" }}>3.2k clicks</div>
        </div>
        <div className="chart-up">+12%</div>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: "100%", height: 170, marginTop: 80 }}>
        <defs>
          <linearGradient id="gFill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="rgba(255,255,255,0.35)" />
            <stop offset="100%" stopColor="rgba(255,255,255,0)" />
          </linearGradient>
        </defs>
        <path d={fillPath} fill="url(#gFill)" />
        <path d={path} fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx={(pts.length-1)*stepX} cy={h - (pts[pts.length-1]/maxY)*(h-20) - 8} r="4" fill="#fff" />
      </svg>
    </div>
  );
};

const GoogleCard = () => (
  <div className="card google-card">
    <div className="connect-pill">
      <Cursor />
      Connect with
    </div>
    <div>
      <div className="google-logo">
        <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
      </div>
      <div className="sub">Search Console</div>
    </div>
  </div>
);

const KeywordCard = () => (
  <div className="card keyword-card">
    <div style={{ fontSize: 13, color: "var(--text-dim)", marginBottom: 6 }}>Live keyword tracking</div>
    <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em" }}>
      Watch your terms<br/> climb the SERP.
    </div>
    <div className="kw-stack">
      <div className="kw-chip k1">
        <div>
          <div className="kw">"best seo tools"</div>
          <div className="vol mono">VOL 18.4k</div>
        </div>
        <div className="mono" style={{ color: "#fff" }}>↑ 4</div>
      </div>
      <div className="kw-chip k2">
        <div>
          <div className="kw">"saas ranking"</div>
          <div className="vol mono">VOL 6.1k</div>
        </div>
        <div className="mono" style={{ color: "#fff" }}>↑ 11</div>
      </div>
      <div className="kw-chip k3">
        <div>
          <div className="kw">"fitness culture"</div>
          <div className="vol mono">VOL 4.3k</div>
        </div>
        <div className="mono" style={{ color: "#fff" }}>↑ 2</div>
      </div>
    </div>
  </div>
);

const Features = () => (
  <section className="section" data-screen-label="Features">
    <div className="shell">
      <span className="kicker"><span className="pip" /> Features</span>
      <h2 className="title metal">
        SEO Tool That<br/>
        Delivers Real Results
      </h2>
      <p className="section-sub">
        Our proven methods help you climb search rankings faster than ever, with no technical skills required.
      </p>

      <div className="feat-grid">
        <ReviewsCard />
        <ChartCard />
      </div>
      <div className="feat-grid row2">
        <GoogleCard />
        <KeywordCard />
      </div>
    </div>
  </section>
);

window.Features = Features;