/* global React */

function Sede() {
  return (
    <section id="sede" style={{ background: "var(--ink-900)", color: "#fff" }}>
      <div className="wrap">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 64,
          alignItems: "center",
        }} className="sede-grid">
          <div>
            <span className="eyebrow-tag on-dark" style={{ marginBottom: 20 }}>
              <span className="dot" />
              Nossa sede
            </span>
            <h2 style={{
              color: "#fff",
              fontFamily: "var(--font-display)",
              fontWeight: 600,
              fontSize: "clamp(32px, 4vw, 52px)",
              lineHeight: 1.06,
              letterSpacing: "-0.02em",
              textWrap: "balance",
              marginBottom: 24,
            }}>
              Operação física em<br />
              <span style={{ color: "var(--brand-violet-300)" }}>Barueri — Alphaville.</span>
            </h2>
            <p style={{
              color: "rgba(255,255,255,0.72)",
              fontSize: 18,
              lineHeight: 1.55,
              maxWidth: 480,
              marginBottom: 36,
            }}>
              Não somos uma operação remota anônima. Temos endereço, time
              presencial e estrutura para receber clientes em um dos principais
              hubs corporativos de São Paulo.
            </p>

            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 24,
              marginBottom: 36,
            }}>
              {[
                { k: "Endereço", v: "Alphaville Industrial\nBarueri — SP" },
                { k: "Atendimento", v: "Presencial e remoto\nSegunda a sexta" },
              ].map((it) => (
                <div key={it.k} style={{ paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
                  <div style={{
                    fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
                    color: "rgba(255,255,255,0.5)", marginBottom: 10,
                  }}>{it.k}</div>
                  <div style={{ color: "#fff", fontSize: 15, lineHeight: 1.5, whiteSpace: "pre-line" }}>
                    {it.v}
                  </div>
                </div>
              ))}
            </div>

            <a href="#diagnostico" className="btn btn-primary">
              Agendar visita ou call
              <span className="arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
            </a>
          </div>

          {/* Map / location card */}
          <div style={{
            position: "relative",
            background: "linear-gradient(180deg, rgba(64,13,166,0.18), rgba(11,11,14,0.6))",
            border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 24,
            overflow: "hidden",
            aspectRatio: "4 / 5",
            minHeight: 460,
          }}>
            {/* Stylized map grid */}
            <div aria-hidden="true" style={{
              position: "absolute", inset: 0,
              backgroundImage:
                "linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)",
              backgroundSize: "40px 40px",
            }} />
            {/* Diagonal "roads" */}
            <svg viewBox="0 0 400 500" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} aria-hidden="true">
              <path d="M -50 200 Q 150 180 240 260 T 460 380" stroke="rgba(255,255,255,0.18)" strokeWidth="2" fill="none" />
              <path d="M -50 320 Q 80 300 200 320 T 460 220" stroke="rgba(255,255,255,0.12)" strokeWidth="1.5" fill="none" />
              <path d="M 80 -20 Q 100 120 200 240 T 280 520" stroke="rgba(255,255,255,0.10)" strokeWidth="1.5" fill="none" />
              <path d="M 320 -20 Q 280 100 240 240 T 180 520" stroke="rgba(255,255,255,0.08)" strokeWidth="1.5" fill="none" />
            </svg>

            {/* Pin */}
            <div style={{
              position: "absolute",
              top: "46%", left: "50%",
              transform: "translate(-50%, -50%)",
              display: "flex", flexDirection: "column", alignItems: "center", gap: 0,
            }}>
              {/* pulse */}
              <div style={{
                position: "absolute",
                width: 80, height: 80, borderRadius: 999,
                background: "var(--brand-violet)",
                opacity: 0.25,
                animation: "pulse 2.4s ease-out infinite",
              }} />
              <div style={{
                position: "absolute",
                width: 120, height: 120, borderRadius: 999,
                background: "var(--brand-violet)",
                opacity: 0.12,
                animation: "pulse 2.4s ease-out infinite 0.4s",
              }} />
              <div style={{
                width: 44, height: 44, borderRadius: 999,
                background: "var(--brand-violet)",
                border: "3px solid #fff",
                boxShadow: "0 8px 24px rgba(64,13,166,0.6)",
                position: "relative", zIndex: 2,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>
                <img src={(window.__resources && window.__resources.iconWhite) || "assets/icon-cabecalho-white.png"} alt="" style={{ height: 22 }} />
              </div>
            </div>

            <style>{`
              @keyframes pulse {
                0% { transform: scale(0.6); opacity: 0.4; }
                100% { transform: scale(1.6); opacity: 0; }
              }
            `}</style>

            {/* Address card */}
            <div style={{
              position: "absolute",
              left: 24, right: 24, bottom: 24,
              background: "rgba(11,11,14,0.85)",
              backdropFilter: "blur(12px)",
              WebkitBackdropFilter: "blur(12px)",
              border: "1px solid rgba(255,255,255,0.1)",
              borderRadius: 14,
              padding: 20,
              display: "flex", alignItems: "center", gap: 16,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: "var(--brand-violet)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                color: "#fff",
                flexShrink: 0,
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>
                  MaveUp · Sede
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600, color: "#fff", lineHeight: 1.2 }}>
                  Barueri — Alphaville · SP
                </div>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .sede-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Sede = Sede;