/* global React, Icon, Reveal, Eyebrow, Section */
const { useState: useStateCities } = React;

const STATE_NAMES = { RS: "Rio Grande do Sul", SC: "Santa Catarina", DF: "Distrito Federal", SP: "São Paulo" };

const CITY_MARKERS = [
  { id: "bsb", name: "Brasília", uf: "DF", major: true, x: 258.6, y: 221.4, lx: 32, ly: -18 },
  { id: "sao", name: "São Paulo", uf: "SP", major: true, x: 265.8, y: 297.5, lx: 34, ly: -8 },
  { id: "poa", name: "Porto Alegre", uf: "RS", major: true, x: 229.8, y: 369.2, lx: -18, ly: 34 },
  { id: "ant", name: "Antônio Prado", uf: "RS", x: 229.1, y: 357.6, lx: -42, ly: -8 },
  { id: "cax", name: "Caxias do Sul", uf: "RS", x: 230.1, y: 360.7, lx: 36, ly: 12 },
  { id: "ita", name: "Itaqui", uf: "RS", x: 179.2, y: 360.3, lx: -40, ly: 10 },
  { id: "flo", name: "Florianópolis", uf: "SC", x: 255.1, y: 345.4, lx: 38, ly: -2 },
  { id: "con", name: "Concórdia", uf: "SC", x: 222.1, y: 341.8, lx: -8, ly: -34 },
];

const CITY_GROUPS = [
  { uf: "Rio Grande do Sul", ids: ["poa", "ant", "cax", "ita"] },
  { uf: "Santa Catarina", ids: ["flo", "con"] },
  { uf: "Distrito Federal", ids: ["bsb"] },
  { uf: "São Paulo", ids: ["sao"] },
];

const ROUTE_IDS = ["poa", "cax", "ant", "con", "flo", "bsb"];

const BRAZIL_PATH = "M169,371 L181.7,357.7 L192.4,348.2 L198.7,344.2 L206.7,338.8 L206.9,331 L202.2,325.3 L197.5,327.2 L199.3,321.6 L200.6,315.8 L200.6,310.4 L197.2,308.6 L193.7,310.2 L190.1,309.8 L189,306 L188.1,297.1 L186.4,294.1 L180,291.5 L176.1,293.4 L166.1,291.5 L166.7,278.3 L163.9,272.8 L166.9,270.8 L166,265.2 L168.6,261 L170.2,253.3 L168,247.2 L162.8,244.4 L161.8,240.6 L163.2,234.9 L145,234.5 L141.4,223.1 L144.2,223 L144,218.8 L142.2,215.9 L141.8,210.2 L136.3,207.3 L130.3,207.4 L126.4,204.6 L120,202.7 L116.3,199 L105.6,197.4 L95.4,188.6 L96.1,182.1 L94.9,178.3 L96,171 L83.6,172.7 L78.6,176.3 L70.3,180.3 L68.2,183.2 L63.3,183.5 L56.2,182.6 L50.9,184.3 L46.6,183.2 L47.2,168.3 L39.4,174.1 L31.1,173.9 L27.5,168.6 L21.2,168.1 L23.2,163.9 L17.9,157.9 L14,149.1 L16.5,147.3 L16.5,143.2 L22.2,140.4 L21.3,135.1 L23.7,131.7 L24.4,127.1 L35.2,120.5 L43,118.6 L44.3,117.1 L52.8,117.6 L57.1,90.8 L57.3,86.5 L55.8,80.9 L51.6,77.4 L51.6,70.3 L57,68.7 L58.9,69.7 L59.2,65.9 L53.6,64.9 L53.5,58.8 L72,59 L75.1,55.6 L77.7,58.7 L79.6,64.5 L81.4,63.3 L86.6,68.5 L94,67.8 L95.8,64.8 L102.8,62.6 L106.8,61 L107.9,56.8 L114.6,54 L114.1,52 L106.1,51.1 L104.8,45 L105.1,38.4 L100.9,35.9 L102.7,35 L109.7,36.2 L117.2,38.7 L120,36.4 L126.8,34.9 L137.4,31.2 L140.8,27.5 L139.6,24.7 L144.5,24.3 L146.7,26.5 L145.5,30.8 L148.7,32.3 L150.9,36.9 L148.3,40.3 L146.8,48.6 L149.2,53.6 L149.9,58.1 L155.7,62.7 L160.4,63.2 L161.4,61.2 L164.4,60.8 L168.7,59.1 L171.8,56.5 L177,57.3 L179.3,57 L184.5,57.8 L185.3,55.8 L183.8,53.8 L184.7,51 L188.5,51.9 L193,50.9 L198.4,53 L202.6,55 L205.5,52.3 L207.6,52.7 L208.9,55.5 L213.4,54.8 L217.1,51.1 L220,43.9 L225.6,34.9 L228.8,34.5 L231.2,39.9 L236.5,57 L241.5,58.6 L241.8,65.3 L234.7,73.4 L237.6,76.3 L254.4,77.9 L254.7,87.7 L261.9,81.2 L273.8,84.8 L289.6,90.7 L294.2,96.5 L292.6,101.9 L303.7,98.9 L322.1,104 L336.3,103.6 L350.3,111.7 L362.4,122.7 L369.7,125.5 L377.8,125.9 L381.2,129 L384.4,141.4 L386,147.4 L382.2,163.5 L377.4,169.9 L364,183.5 L358,194.6 L351,203 L348.6,203.2 L346,210.4 L346.7,228.7 L344,243.8 L343,250.3 L340,254.1 L338.3,267.2 L328.7,279.9 L327.1,290 L319.4,294.3 L317.2,300.1 L306.9,300.1 L292,303.9 L285.3,308.2 L274.7,311.1 L263.6,318.9 L255.6,328.6 L254.2,335.9 L255.8,341.3 L254,351.1 L251.8,355.9 L245.2,361.3 L234.7,378.5 L226.4,386.3 L219.9,390.8 L215.6,400.1 L209.3,405.7 L206.7,400.2 L210.9,395.5 L205.4,388.9 L198,383.5 L188.2,377.2 L184.7,377.5 L175.2,369.9 L169,371 Z";

function CityMarker({ city, active, onEnter, onLeave, onToggle, delay }) {
  const anchorLeft = city.lx < 0;
  const base = city.major ? 6 : 4.5;
  const hi = city.major ? 8.5 : 6.5;
  return (
    <g transform={`translate(${city.x},${city.y})`} onMouseEnter={onEnter} onMouseLeave={onLeave} onClick={onToggle} style={{ cursor: "pointer" }}>
      <circle r="16" fill="transparent" />
      <g className="vl-city-enter" style={{ animationDelay: `${delay}ms` }}>
        <circle r={active ? hi : base} fill="var(--steel)" style={{ transition: "r .3s var(--ease-smooth)" }} />
        <circle r={active ? hi : base} fill="none" stroke="var(--champagne)" strokeWidth="1.5" style={{ transition: "r .3s var(--ease-smooth)" }} />
      </g>
      {active && (
        <g className="vl-city-enter" style={{ animationDuration: ".3s" }}>
          <line x1="0" y1="0" x2={city.lx} y2={city.ly} stroke="var(--steel)" strokeWidth=".75" opacity=".55" />
          <g transform={`translate(${city.lx + (anchorLeft ? -6 : 6)},${city.ly - 22})`}>
            <rect x={anchorLeft ? -128 : 0} y="-2" width="128" height={city.desc ? 54 : 42} rx="10" fill="var(--surface)" stroke="var(--line)" strokeWidth="1" style={{ filter: "drop-shadow(0 8px 20px rgba(44,44,42,.12))" }} />
            <text x={anchorLeft ? -114 : 14} y="16" fontFamily="var(--font-sans)" fontSize="12" fontWeight="700" fill="var(--graphite)">📍 {city.name}</text>
            <text x={anchorLeft ? -114 : 14} y="32" fontFamily="var(--font-sans)" fontSize="10.5" fill="var(--cinza-medio)">{STATE_NAMES[city.uf]}</text>
            {city.desc && <text x={anchorLeft ? -114 : 14} y="46" fontFamily="var(--font-sans)" fontSize="9.5" fontStyle="italic" fill="var(--steel-deep)">{city.desc}</text>}
          </g>
        </g>
      )}
    </g>
  );
}

function CitiesMap({ activeId, setActiveId }) {
  const routePts = ROUTE_IDS.map((id) => CITY_MARKERS.find((m) => m.id === id));
  const routeD = "M" + routePts.map((p) => `${p.x},${p.y}`).join(" L");
  return (
    <svg viewBox="0 0 400 430" role="img" aria-label="Mapa do Brasil com as cidades onde a Vittalure já atuou" style={{ width: "100%", height: "auto", display: "block", overflow: "visible" }}>
      <path d={BRAZIL_PATH} fill="var(--slate-light)" fillOpacity=".38" stroke="var(--steel)" strokeOpacity=".65" strokeWidth="1.5" strokeLinejoin="round" />
      <path className="vl-city-route" d={routeD} fill="none" stroke="var(--steel)" strokeWidth=".7" strokeDasharray="1 5.5" strokeLinecap="round" opacity=".52" />
      {CITY_MARKERS.map((c, i) => (
        <CityMarker
          key={c.id}
          city={c}
          delay={i * 80}
          active={activeId === c.id}
          onEnter={() => setActiveId(c.id)}
          onLeave={() => setActiveId((p) => (p === c.id ? null : p))}
          onToggle={(e) => { e.stopPropagation(); setActiveId((p) => (p === c.id ? null : c.id)); }}
        />
      ))}
    </svg>
  );
}

function CityListItem({ id, name, desc, active, onEnter, onLeave }) {
  return (
    <li onMouseEnter={onEnter} onMouseLeave={onLeave} onClick={onEnter}
      style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 18, cursor: "pointer",
        color: active ? "var(--steel-deep)" : "var(--graphite)", transition: "color .3s var(--ease-smooth)" }}>
      {name}
      {desc && <span style={{ display: "block", fontFamily: "var(--font-sans)", fontStyle: "italic", fontSize: 12, color: "var(--cinza-medio)", marginTop: 2 }}>{desc}</span>}
    </li>
  );
}

function CityGroup({ uf, ids, delay, activeId, setActiveId }) {
  return (
    <Reveal delay={delay}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--steel)", flex: "none" }} />
          <span className="vl-eyebrow" style={{ fontSize: 12 }}>{uf}</span>
        </div>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }}>
          {ids.map((id) => {
            const c = CITY_MARKERS.find((m) => m.id === id);
            return (
              <CityListItem key={id} id={id} name={c.name} desc={c.desc} active={activeId === id}
                onEnter={() => setActiveId(id)} onLeave={() => setActiveId((p) => (p === id ? null : p))} />
            );
          })}
        </ul>
      </div>
    </Reveal>
  );
}

function Cities() {
  const [activeId, setActiveId] = useStateCities(null);
  return (
    <Section id="atuacao">
      <div style={{ display: "flex", gap: 40, alignItems: "center" }} className="vl-cities-grid">
        <div className="vl-cities-map" style={{ flex: "0 0 46%", maxWidth: 470, minWidth: 320, margin: "0 auto" }}>
          <Reveal>
            <div style={{ textAlign: "center", marginBottom: 0 }}><span className="vl-caption" style={{ letterSpacing: ".18em", fontWeight: 600 }}>Atuação presencial</span></div>
            <div style={{ position: "relative" }}>
              <div style={{ position: "absolute", inset: "-12%", borderRadius: "50%", background: "radial-gradient(circle, var(--slate-light) 0%, transparent 68%)", opacity: .26, filter: "blur(36px)", zIndex: 0, pointerEvents: "none" }} />
              <div style={{ position: "relative", zIndex: 1 }}><CitiesMap activeId={activeId} setActiveId={setActiveId} /></div>
            </div>
          </Reveal>
        </div>
        <div className="vl-cities-content" style={{ flex: "1 1 0%", marginTop: -24 }}>
          <Reveal>
            <Eyebrow>Onde já atuamos</Eyebrow>
            <h2 className="vl-display-2" style={{ marginTop: 24 }}>Estratégia que ultrapassa <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>fronteiras</em>.</h2>
            <p className="vl-body" style={{ marginTop: 20, maxWidth: 460 }}>Da Serra Gaúcha à capital do país, a Vittalure acompanha marcas em diferentes cidades, unindo estratégia, direção criativa e presença próxima em cada projeto.</p>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr 0.85fr 0.85fr", columnGap: 28, rowGap: 32, marginTop: 36, alignItems: "start" }} className="vl-cities-groups">
            {CITY_GROUPS.map((g, i) => <CityGroup key={g.uf} {...g} delay={i * 60} activeId={activeId} setActiveId={setActiveId} />)}
          </div>
          <Reveal delay={180}>
            <div style={{ marginTop: 44, paddingTop: 28, borderTop: "1px solid var(--line)" }}>
              <p style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 16, lineHeight: 1.6, color: "var(--graphite-soft)", margin: 0 }}>
                Da Serra Gaúcha ao Distrito Federal, levamos estratégia, criatividade e posicionamento para marcas que desejam crescer.
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 16, lineHeight: 1.6, color: "var(--graphite-soft)", margin: "10px 0 0" }}>
                Seguimos expandindo nossa atuação para conectar marcas de alto valor em <em style={{ fontStyle: "italic", color: "var(--steel-deep)" }}>todo o Brasil</em>.
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Cities });