// Services + Process + Footer

function Services({ t }) {
  return (
    <section id="services" className="section">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 80 }} className="services-head">
          <span className="eyebrow"><span className="dot"></span>{t.services.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 24 }}>{t.services.title}</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden" }} className="services-grid">
          {t.services.items.map((s, i) => (
            <ServiceItem key={i} s={s} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceItem({ s }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--bg-2)" : "var(--bg-1)",
        padding: "36px 40px",
        position: "relative",
        transition: "background 0.3s var(--ease)",
        cursor: "default",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
        <span className="mono mono--accent">{s.tag}</span>
        <span style={{
          width: 32, height: 32, borderRadius: "50%",
          border: "1px solid var(--line-strong)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          color: hover ? "var(--accent-fg)" : "var(--fg-1)",
          background: hover ? "var(--accent)" : "transparent",
          transition: "all 0.3s var(--ease)",
          transform: hover ? "rotate(-45deg)" : "rotate(0)",
        }}>
          <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
        </span>
      </div>
      <h3 className="h3" style={{ marginBottom: 12 }}>{s.t}</h3>
      <p style={{ color: "var(--fg-2)", fontSize: 15, lineHeight: 1.55, margin: 0, maxWidth: "44ch" }}>{s.d}</p>
    </div>
  );
}

function Process({ t }) {
  return (
    <section id="process" className="section">
      <div className="container">
        <div style={{ marginBottom: 70 }}>
          <span className="eyebrow"><span className="dot"></span>{t.process.eyebrow}</span>
          <h2 className="h2" style={{ marginTop: 24, maxWidth: "16ch" }}>{t.process.title}</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, position: "relative" }} className="process-grid">
          <div style={{ position: "absolute", top: 28, left: 0, right: 0, height: 1, background: "var(--line)" }} />
          {t.process.steps.map((s, i) => (
            <div key={i} style={{ paddingRight: 24, position: "relative" }}>
              <div style={{
                width: 56, height: 56, borderRadius: "50%",
                background: "var(--bg-0)",
                border: "1px solid var(--line-strong)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--ff-mono)", fontSize: 13, color: "var(--accent)",
                position: "relative", zIndex: 1,
                marginBottom: 24,
              }}>
                {s.n}
              </div>
              <h3 className="h3" style={{ marginBottom: 10, fontSize: 22 }}>{s.t}</h3>
              <p style={{ color: "var(--fg-2)", fontSize: 14, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer style={{ borderTop: "1px solid var(--line)", padding: "60px 0 40px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 60, marginBottom: 80 }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18, fontFamily: "var(--ff-mono)", fontSize: 14, fontWeight: 600 }}>
              <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--accent-fg)", fontWeight: 800, fontSize: 11 }}>NR</span>
              NR-INTERACTIONS<span style={{ color: "var(--accent)" }}>.</span>
            </div>
            <p style={{ color: "var(--fg-2)", fontSize: 14, lineHeight: 1.55, maxWidth: "40ch", margin: 0 }}>{t.footer.tagline}</p>
          </div>
          <div>
            <div className="mono" style={{ marginBottom: 14 }}>{t.contact.contact || "Contact"}</div>
            <a href="mailto:jorge.norambuena2712@gmail.com" style={{ display: "block", color: "var(--fg-1)", fontSize: 14 }}>jorge.norambuena2712@gmail.com</a>
          </div>
          <div>
            <div className="mono" style={{ marginBottom: 14 }}>{t.nav.services}</div>
            {Object.entries(t.nav).map(([k, v]) => (
              <a key={k} href={`#${k}`} style={{ display: "block", color: "var(--fg-1)", fontSize: 14, marginBottom: 8 }}>{v}</a>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 30, borderTop: "1px solid var(--line)" }}>
          <div className="mono" style={{ fontSize: 10 }}>© 2026 NR-INTERACTIONS · {t.footer.rights}</div>
          <div className="mono" style={{ fontSize: 10 }}>SANTIAGO · CL</div>
        </div>
      </div>
    </footer>
  );
}

window.Services = Services;
window.Process = Process;
window.Footer = Footer;