/* Features + Pain marquee + Stats */

const Features = () => {
  const items = t("features.items");
  const ref = useReveal();
  return (
    <section id="features" ref={ref} style={{ background: "var(--bg)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }} className="reveal">
          <div style={{ marginBottom: 16 }}><span className="eyebrow">{t("features.eyebrow")}</span></div>
          <h2 className="h2" style={{ maxWidth: 820, margin: "0 auto 16px" }}>{t("features.title")}</h2>
          <p className="body-lg" style={{ maxWidth: 620, margin: "0 auto", color: "var(--ink-3)" }}>{t("features.subtitle")}</p>
        </div>

        {/* Hero feature — real product photo on left */}
        <div className="card reveal" style={{
          overflow: "hidden",
          padding: 0,
          marginBottom: 16,
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
          gap: 0,
        }} id="feature-main">
          <div style={{
            position: "relative",
            minHeight: 360,
            background: "#f6ece8",
            overflow: "hidden",
          }}>
            <img src="assets/how-1.png" alt="" style={{
              position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
            }} />
          </div>
          <div style={{ padding: "40px 40px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 14 }}>
            <span className="pill" style={{ alignSelf: "flex-start", fontSize: 12 }}>
              <span className="dot" /> {items[0].title}
            </span>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3vw, 40px)", letterSpacing: "-0.015em", fontWeight: 400, lineHeight: 1.1 }}>
              Simplify First-Round Interviews with Powerful Features
            </h3>
            <p className="body" style={{ color: "var(--ink-3)" }}>{items[0].body}</p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="feat-row">
          {items.slice(1).map((f, i) => (
            <div key={i} className="card reveal" style={{
              padding: 32,
              display: "flex", flexDirection: "column", gap: 14,
              minHeight: 240,
              background: i === 0 ? "var(--bg-cream)" : "var(--bg-pink)",
              border: "1px solid var(--line)",
            }}>
              <span style={{
                width: 44, height: 44, borderRadius: 12,
                background: "rgba(255,255,255,0.7)",
                border: "1px solid var(--line-soft)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                color: "var(--accent)",
              }}>
                {i === 0 ? (
                  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M4 11l3 3 7-7M4 18h14" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" /></svg>
                ) : (
                  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M3 6h10M3 11h16M3 16h8" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" /></svg>
                )}
              </span>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1.15, letterSpacing: "-0.015em", fontWeight: 400 }}>{f.title}</h3>
              <p className="body" style={{ color: "var(--ink-2)" }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          #feature-main { grid-template-columns: 1fr !important; }
          .feat-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const Pains = () => {
  const items = t("pains.items");
  const doubled = [...items, ...items, ...items];
  return (
    <section style={{ paddingTop: 40, paddingBottom: 40, overflow: "hidden", background: "var(--bg)" }}>
      <div className="container" style={{ marginBottom: 24 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(28px, 3vw, 44px)", fontWeight: 400, letterSpacing: "-0.015em" }}>{t("pains.title")}</h3>
      </div>
      <div style={{
        display: "flex", gap: 14, width: "max-content",
        animation: "marquee 40s linear infinite",
        paddingLeft: 24,
      }}>
        {doubled.map((it, i) => (
          <span key={i} style={{
            display: "inline-flex", alignItems: "center", gap: 12,
            padding: "18px 28px",
            borderRadius: 999,
            border: "1px solid var(--line)",
            background: "var(--bg-soft)",
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(22px, 2.4vw, 32px)",
            color: "var(--ink-2)",
            letterSpacing: "-0.01em",
            whiteSpace: "nowrap",
          }}>
            <Cross /> <span style={{ textDecoration: "line-through", textDecorationColor: "var(--accent)", textDecorationThickness: 2 }}>{it}</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-33.33%) } }`}</style>
    </section>
  );
};

const Stats = () => {
  const items = t("stats.items");
  const ref = useReveal();
  return (
    <section style={{ paddingTop: 40, paddingBottom: 80, background: "var(--bg)" }} ref={ref}>
      <div className="container">
        <div className="reveal card" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
          overflow: "hidden",
          background: "var(--bg-cream)",
          border: "1px solid var(--line)",
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: "36px 28px",
              borderRight: i < items.length - 1 ? "1px solid var(--line-soft)" : "none",
              textAlign: "center",
            }} className="stat-cell">
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(44px, 5vw, 72px)",
                letterSpacing: "-0.02em", lineHeight: 1,
                fontWeight: 400,
                color: "var(--ink)",
              }}>{it.value}</div>
              <div style={{ marginTop: 10, fontSize: 14, color: "var(--ink-3)" }}>{it.label}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .stat-cell { border-right: none !important; border-bottom: 1px solid var(--line-soft) !important; }
          section .card[style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Features = Features;
window.Pains = Pains;
window.Stats = Stats;
