// V1 — Split Hub
// Hub com duas metades verticais (Tech / Arte) que se expandem no hover.
// Tech: terminal verde-cyan · Arte: terminal âmbar quente.

const V1_W = 1280;
const V1_H = 800;

function V1Site({ lang: outerLang, fullscreen }) {
  const [view, setView] = React.useState("hub"); // 'hub' | 'tech' | 'arte'
  const [lang, setLang] = React.useState(outerLang || "pt");
  const t = window.SITE_CONTENT[lang];

  return (
    <div style={{
      width: fullscreen ? "100%" : V1_W, height: fullscreen ? "100%" : V1_H,
      position: "relative", overflow: "hidden",
      background: "#0a0a0c", color: "#e6e7eb",
      fontFamily: "'JetBrains Mono', ui-monospace, monospace",
      fontSize: 13, lineHeight: 1.5,
    }}>
      {/* persistent chrome */}
      <V1Chrome lang={lang} setLang={setLang} view={view} setView={setView} t={t} />

      {view === "hub" && <V1Hub t={t} setView={setView} />}
      {view === "tech" && <V1Tech t={t} setView={setView} />}
      {view === "arte" && <V1Arte t={t} setView={setView} />}
    </div>
  );
}

function V1Chrome({ lang, setLang, view, setView, t }) {
  return (
    <div style={{
      position: "absolute", top: 0, left: 0, right: 0, height: 44, zIndex: 10,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 20px",
      borderBottom: "1px solid rgba(255,255,255,0.06)",
      background: "rgba(10,10,12,0.7)", backdropFilter: "blur(8px)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          width: 22, height: 22, border: "1px solid #4ade80", color: "#4ade80",
          fontSize: 11, fontWeight: 700,
        }}>M</span>
        <span style={{ color: "#9ca3af", fontSize: 12 }}>marcos.perdomo</span>
        {view !== "hub" && (
          <button onClick={() => setView("hub")} style={{
            background: "transparent", border: "1px solid rgba(255,255,255,0.1)",
            color: "#9ca3af", fontFamily: "inherit", fontSize: 11,
            padding: "4px 10px", cursor: "pointer",
          }}>← {t.nav.hub}</button>
        )}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 11, color: "#6b7280" }}>
        <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 6, height: 6, background: "#4ade80", borderRadius: "50%", display: "inline-block" }} />
          {t.status}
        </span>
        <span style={{ color: "#374151" }}>|</span>
        <div style={{ display: "flex", border: "1px solid rgba(255,255,255,0.1)" }}>
          {["pt", "en"].map((l) => (
            <button key={l} onClick={() => setLang(l)} style={{
              background: lang === l ? "rgba(255,255,255,0.08)" : "transparent",
              border: "none", color: lang === l ? "#e6e7eb" : "#6b7280",
              fontFamily: "inherit", fontSize: 10, padding: "4px 8px", cursor: "pointer",
              textTransform: "uppercase",
            }}>{l}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function V1Hub({ t, setView }) {
  const [hover, setHover] = React.useState(null); // 'tech' | 'arte' | null

  const techW = hover === "tech" ? "62%" : hover === "arte" ? "38%" : "50%";
  const arteW = hover === "arte" ? "62%" : hover === "tech" ? "38%" : "50%";

  return (
    <div style={{ position: "absolute", inset: "44px 0 0 0", display: "flex" }}>
      {/* LEFT — TECH */}
      <div
        onMouseEnter={() => setHover("tech")}
        onMouseLeave={() => setHover(null)}
        onClick={() => setView("tech")}
        style={{
          width: techW, transition: "width 400ms cubic-bezier(.2,.7,.2,1)",
          position: "relative", cursor: "pointer", overflow: "hidden",
          background: "radial-gradient(80% 60% at 30% 40%, #0d1814 0%, #07090a 60%, #050608 100%)",
          borderRight: "1px solid rgba(74,222,128,0.15)",
        }}
      >
        <V1HubPanel
          side="tech" accent="#4ade80" t={t}
          kicker={`// ${t.hub.techTag}`}
          title={t.tech.title}
          subtitle={t.tech.subtitle}
          cta={t.hub.enterTech}
          active={hover !== "arte"}
          numerals={["01", "02", "03", "04"]}
        />
      </div>

      {/* RIGHT — ARTE */}
      <div
        onMouseEnter={() => setHover("arte")}
        onMouseLeave={() => setHover(null)}
        onClick={() => setView("arte")}
        style={{
          width: arteW, transition: "width 400ms cubic-bezier(.2,.7,.2,1)",
          position: "relative", cursor: "pointer", overflow: "hidden",
          background: "radial-gradient(80% 60% at 70% 40%, #1a120a 0%, #0a0805 60%, #050404 100%)",
        }}
      >
        <V1HubPanel
          side="arte" accent="#f59e0b" t={t}
          kicker={`// ${t.hub.arteTag}`}
          title={t.arte.title}
          subtitle={t.arte.subtitle}
          cta={t.hub.enterArte}
          active={hover !== "tech"}
          numerals={["α", "β", "γ", "δ"]}
        />
      </div>

      {/* center hairline & marker */}
      <div style={{
        position: "absolute", top: 0, bottom: 0, left: techW,
        transition: "left 400ms cubic-bezier(.2,.7,.2,1)",
        width: 0,
      }}>
        <div style={{
          position: "absolute", top: "50%", left: "-12px", transform: "translateY(-50%)",
          width: 24, height: 24, border: "1px solid rgba(255,255,255,0.2)",
          background: "#0a0a0c", display: "flex", alignItems: "center", justifyContent: "center",
          color: "#6b7280", fontSize: 11,
        }}>×</div>
      </div>

      {/* HUB top centered headline */}
      <div style={{
        position: "absolute", top: 88, left: 0, right: 0, textAlign: "center", pointerEvents: "none",
      }}>
        <div style={{ color: "#6b7280", fontSize: 11, letterSpacing: 2, textTransform: "uppercase" }}>
          {t.hub.kicker}
        </div>
        <div style={{
          marginTop: 14, fontFamily: "'JetBrains Mono', monospace", fontWeight: 600,
          fontSize: 56, letterSpacing: -1, lineHeight: 1,
          color: "#e6e7eb",
        }}>{t.nome}</div>
        <div style={{ marginTop: 14, color: "#9ca3af", fontSize: 13, maxWidth: 560, margin: "14px auto 0", textWrap: "pretty" }}>
          {t.hub.lead}
        </div>
      </div>
    </div>
  );
}

function V1HubPanel({ side, accent, t, kicker, title, subtitle, cta, active, numerals }) {
  return (
    <div style={{
      position: "absolute", inset: 0, padding: "240px 56px 56px 56px",
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      opacity: active ? 1 : 0.55, transition: "opacity 300ms",
    }}>
      <div>
        <div style={{ color: accent, fontSize: 11, letterSpacing: 1, marginBottom: 12 }}>{kicker}</div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontWeight: 600,
          fontSize: 84, letterSpacing: -2, lineHeight: 0.95,
          color: "#f3f4f6",
        }}>{title.toLowerCase()}</div>
        <div style={{ marginTop: 16, color: "#9ca3af", fontSize: 13, maxWidth: 380, textWrap: "pretty" }}>
          {subtitle}
        </div>
      </div>

      <div>
        {/* faint ascii grid */}
        <div style={{ color: "rgba(255,255,255,0.08)", fontSize: 10, lineHeight: 1.4, marginBottom: 20 }}>
          {numerals.map((n, i) => (
            <span key={i} style={{ marginRight: 14 }}>{n}.</span>
          ))}
        </div>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          borderTop: `1px solid ${accent}`, paddingTop: 12,
          color: accent, fontSize: 13, letterSpacing: 0.5,
        }}>
          <span>{cta}</span>
          <span style={{ fontSize: 16 }}>→</span>
        </div>
      </div>
    </div>
  );
}

// ─── TECH VIEW ───────────────────────────────────────────────────
function V1Tech({ t, setView }) {
  const [sec, setSec] = React.useState("whoami");

  return (
    <div style={{ position: "absolute", inset: "44px 0 0 0", display: "flex" }}>
      {/* Sidebar */}
      <div style={{
        width: 260, borderRight: "1px solid rgba(255,255,255,0.06)",
        padding: "32px 24px", background: "#08090b",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
      }}>
        <div>
          <div style={{ color: "#4ade80", fontSize: 11, letterSpacing: 1, marginBottom: 8 }}>// {t.hub.techTag}</div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.5, lineHeight: 1.1, color: "#f3f4f6" }}>
            {t.tech.title}
          </div>
          <div style={{ marginTop: 6, fontSize: 12, color: "#9ca3af" }}>{t.tech.subtitle}</div>

          <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 2 }}>
            {t.tech.sections.map((s) => (
              <button key={s.id} onClick={() => setSec(s.id)} style={{
                textAlign: "left", border: "none", background: "transparent",
                color: sec === s.id ? "#4ade80" : "#9ca3af",
                fontFamily: "inherit", fontSize: 13, padding: "8px 0", cursor: "pointer",
                display: "flex", alignItems: "center", gap: 10,
                borderLeft: sec === s.id ? "2px solid #4ade80" : "2px solid transparent",
                paddingLeft: 12,
              }}>
                <span style={{ color: "#4b5563", fontSize: 11 }}>$</span>
                <span>{s.title}</span>
              </button>
            ))}
          </div>
        </div>

        <div style={{ fontSize: 10, color: "#4b5563", lineHeight: 1.6 }}>
          <div>{t.location}</div>
          <div style={{ marginTop: 4 }}>marcos@perdomo.dev</div>
        </div>
      </div>

      {/* Main */}
      <div style={{ flex: 1, padding: "44px 56px", overflow: "auto" }}>
        <V1TechSection id={sec} t={t} />
      </div>
    </div>
  );
}

function V1TechSection({ id, t }) {
  const prompt = <span><span style={{ color: "#4ade80" }}>~/tech</span><span style={{ color: "#6b7280" }}> $ </span></span>;

  if (id === "whoami") {
    return (
      <div>
        <div style={{ color: "#6b7280", fontSize: 12, marginBottom: 6 }}>{prompt}whoami</div>
        <div style={{ fontSize: 40, lineHeight: 1.1, fontWeight: 600, letterSpacing: -0.5, color: "#f3f4f6", maxWidth: 720, textWrap: "balance" }}>
          {t.tech.intro}
        </div>
        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 760 }}>
          {t.tech.whoami.map((line, i) => (
            <div key={i} style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 12, color: "#d1d5db", fontSize: 13, lineHeight: 1.6 }}>
              <span style={{ color: "#4ade80", marginRight: 8 }}>0{i + 1}</span>{line}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40, color: "#6b7280", fontSize: 11, letterSpacing: 1, marginBottom: 12 }}>FORMAÇÃO / EDUCATION</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {t.tech.education.map((e, i) => (
            <div key={i} style={{ border: "1px solid rgba(255,255,255,0.08)", padding: "14px 12px" }}>
              <div style={{ fontSize: 10, color: "#4ade80", letterSpacing: 1 }}>{e.d}</div>
              <div style={{ marginTop: 8, fontSize: 12, color: "#e6e7eb", lineHeight: 1.3 }}>{e.t}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (id === "services") {
    return (
      <div>
        <div style={{ color: "#6b7280", fontSize: 12, marginBottom: 6 }}>{prompt}cat services.md</div>
        <div style={{ fontSize: 32, fontWeight: 600, color: "#f3f4f6", letterSpacing: -0.5 }}>O que faço</div>
        <div style={{ marginTop: 28, display: "grid", gap: 1, background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.06)" }}>
          {t.tech.services.map((s) => (
            <div key={s.k} style={{
              background: "#0a0a0c", padding: "20px 24px",
              display: "grid", gridTemplateColumns: "60px 240px 1fr", gap: 24, alignItems: "baseline",
            }}>
              <div style={{ color: "#4ade80", fontSize: 12 }}>{s.k}</div>
              <div style={{ color: "#f3f4f6", fontSize: 16, fontWeight: 600 }}>{s.t}</div>
              <div style={{ color: "#9ca3af", fontSize: 13, lineHeight: 1.6 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (id === "stack") {
    return (
      <div>
        <div style={{ color: "#6b7280", fontSize: 12, marginBottom: 6 }}>{prompt}cat stack.json</div>
        <div style={{ fontSize: 32, fontWeight: 600, color: "#f3f4f6", letterSpacing: -0.5 }}>Stack</div>
        <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
          {t.tech.stack.map((s, i) => (
            <div key={i} style={{
              border: "1px solid rgba(255,255,255,0.08)", padding: "20px 16px",
              display: "flex", alignItems: "center", justifyContent: "space-between",
              fontSize: 13, color: "#e6e7eb",
            }}>
              <span>{s}</span>
              <span style={{ color: "#4ade80", fontSize: 10 }}>●</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (id === "certs") {
    return (
      <div>
        <div style={{ color: "#6b7280", fontSize: 12, marginBottom: 6 }}>{prompt}ls certifications/</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 20 }}>
          <div style={{ fontSize: 96, fontWeight: 600, color: "#4ade80", lineHeight: 1, letterSpacing: -2 }}>{t.tech.certsCount}</div>
          <div style={{ color: "#9ca3af", fontSize: 14, maxWidth: 320 }}>{t.tech.certsNote}</div>
        </div>
        <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {t.tech.certs.map((c, i) => (
            <div key={i} style={{
              borderLeft: "1px solid rgba(74,222,128,0.4)", padding: "8px 14px",
              fontSize: 12, color: "#d1d5db",
            }}>{c}</div>
          ))}
        </div>
      </div>
    );
  }

  if (id === "contact") {
    return (
      <div>
        <div style={{ color: "#6b7280", fontSize: 12, marginBottom: 6 }}>{prompt}./contact --start</div>
        <div style={{ fontSize: 48, fontWeight: 600, color: "#f3f4f6", letterSpacing: -1, lineHeight: 1.1, maxWidth: 640 }}>
          {t.tech.contact.lead}
        </div>
        <div style={{ marginTop: 36, display: "flex", gap: 12 }}>
          <button style={{
            background: "#4ade80", color: "#0a0a0c", border: "none",
            fontFamily: "inherit", fontSize: 13, padding: "14px 22px", cursor: "pointer",
            fontWeight: 600,
          }}>{t.tech.contact.cta1} →</button>
          <button style={{
            background: "transparent", color: "#e6e7eb",
            border: "1px solid rgba(255,255,255,0.15)",
            fontFamily: "inherit", fontSize: 13, padding: "14px 22px", cursor: "pointer",
          }}>{t.tech.contact.cta2} →</button>
        </div>
        <div style={{ marginTop: 28, fontSize: 12, color: "#6b7280" }}>
          {t.tech.contact.email} · {t.location}
        </div>
      </div>
    );
  }

  return null;
}

// ─── ARTE VIEW ───────────────────────────────────────────────────
function V1Arte({ t, setView }) {
  const [sec, setSec] = React.useState("galeria");
  const [cat, setCat] = React.useState(t.arte.categorias[0]);

  return (
    <div style={{ position: "absolute", inset: "44px 0 0 0",
      background: "linear-gradient(180deg, #0a0805 0%, #08070a 100%)",
      overflow: "auto",
    }}>
      <div style={{ padding: "32px 56px 16px" }}>
        <div style={{ color: "#f59e0b", fontSize: 11, letterSpacing: 1, marginBottom: 8 }}>// {t.hub.arteTag}</div>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32 }}>
          <div style={{ fontSize: 64, fontWeight: 600, letterSpacing: -1.5, color: "#f3f4f6", lineHeight: 1 }}>
            {t.arte.title.toLowerCase()}
          </div>
          <div style={{ display: "flex", gap: 4 }}>
            {t.arte.sections.map((s) => (
              <button key={s.id} onClick={() => setSec(s.id)} style={{
                border: sec === s.id ? "1px solid #f59e0b" : "1px solid rgba(255,255,255,0.1)",
                background: sec === s.id ? "rgba(245,158,11,0.08)" : "transparent",
                color: sec === s.id ? "#f59e0b" : "#9ca3af",
                fontFamily: "inherit", fontSize: 11, padding: "8px 14px", cursor: "pointer",
              }}>{s.label}</button>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 12, color: "#9ca3af", fontSize: 13, maxWidth: 720, textWrap: "pretty" }}>
          {t.arte.intro}
        </div>
      </div>

      <div style={{ padding: "16px 56px 56px" }}>
        {sec === "galeria" && <V1ArteGallery t={t} cat={cat} setCat={setCat} />}
        {sec === "processo" && <V1ArteProcess t={t} />}
        {sec === "encomendas" && <V1ArteCommissions t={t} />}
        {sec === "sobre" && <V1ArteSobre t={t} />}
      </div>
    </div>
  );
}

function V1ArteGallery({ t, cat, setCat }) {
  const items = t.arte.works.filter((w) => cat === t.arte.categorias[0] || w.cat === cat);
  return (
    <div>
      <div style={{ display: "flex", gap: 6, marginBottom: 20, flexWrap: "wrap" }}>
        {t.arte.categorias.map((c) => (
          <button key={c} onClick={() => setCat(c)} style={{
            border: cat === c ? "1px solid #f59e0b" : "1px solid rgba(255,255,255,0.08)",
            background: cat === c ? "#f59e0b" : "transparent",
            color: cat === c ? "#0a0a0c" : "#9ca3af",
            fontFamily: "inherit", fontSize: 10, padding: "5px 10px", cursor: "pointer",
            letterSpacing: 0.5, textTransform: "uppercase",
          }}>{c}</button>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {items.map((w, i) => (
          <V1ArteCard key={i} w={w} idx={i} />
        ))}
      </div>
    </div>
  );
}

function V1ArteCard({ w, idx }) {
  // placeholder pattern based on category
  const pat = {
    "Aviação": "linear-gradient(135deg, #2c1810 0%, #4a2a18 50%, #1a0e08 100%)",
    "Aviation": "linear-gradient(135deg, #2c1810 0%, #4a2a18 50%, #1a0e08 100%)",
    "Militaria": "linear-gradient(135deg, #1f2410 0%, #3a3820 50%, #15170c 100%)",
    "Figura": "linear-gradient(135deg, #2a1818 0%, #4a2828 50%, #1a0f0f 100%)",
    "Figure": "linear-gradient(135deg, #2a1818 0%, #4a2828 50%, #1a0f0f 100%)",
    "3D Artístico": "linear-gradient(135deg, #181828 0%, #283058 50%, #0f0f1a 100%)",
    "3D Artistic": "linear-gradient(135deg, #181828 0%, #283058 50%, #0f0f1a 100%)",
    "3D Funcional": "linear-gradient(135deg, #1a1a1a 0%, #303030 50%, #0a0a0a 100%)",
    "3D Functional": "linear-gradient(135deg, #1a1a1a 0%, #303030 50%, #0a0a0a 100%)",
  };
  return (
    <div style={{ cursor: "pointer" }}>
      <div style={{
        aspectRatio: "1 / 1", background: pat[w.cat] || "#1a1a1a",
        border: "1px solid rgba(255,255,255,0.06)", position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        {/* simple silhouette glyph by category */}
        <div style={{ color: "rgba(245,158,11,0.4)", fontSize: 32, fontWeight: 700, letterSpacing: -1 }}>
          {String(idx + 1).padStart(2, "0")}
        </div>
        <div style={{ position: "absolute", top: 8, left: 8, fontSize: 9, color: "rgba(255,255,255,0.5)", letterSpacing: 1 }}>
          {w.esc}
        </div>
        <div style={{ position: "absolute", bottom: 8, right: 8, fontSize: 9, color: "rgba(255,255,255,0.5)" }}>
          {w.year}
        </div>
      </div>
      <div style={{ marginTop: 8, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
        <div style={{ fontSize: 12, color: "#e6e7eb" }}>{w.t}</div>
        <div style={{ fontSize: 10, color: "#f59e0b", letterSpacing: 0.5 }}>{w.cat}</div>
      </div>
    </div>
  );
}

function V1ArteProcess({ t }) {
  const steps = [
    { n: "01", t: "Pesquisa", d: "Referências históricas, fotos do veículo real, cores e marcações." },
    { n: "02", t: "Construção", d: "Montagem, ajustes finos, super-detalhamento e correções de escala." },
    { n: "03", t: "Pintura", d: "Pré-shading, camadas de cor, lavagens, filtros e desgaste." },
    { n: "04", t: "Acabamento", d: "Decais, pigmentos, fixação e base / diorama final." },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
      {steps.map((s) => (
        <div key={s.n} style={{ border: "1px solid rgba(255,255,255,0.08)", padding: "20px 18px" }}>
          <div style={{ color: "#f59e0b", fontSize: 12, marginBottom: 12 }}>{s.n}</div>
          <div style={{ fontSize: 18, color: "#f3f4f6", fontWeight: 600, marginBottom: 8 }}>{s.t}</div>
          <div style={{ fontSize: 12, color: "#9ca3af", lineHeight: 1.6 }}>{s.d}</div>
        </div>
      ))}
    </div>
  );
}

function V1ArteCommissions({ t }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32, alignItems: "start" }}>
      <div>
        <div style={{ fontSize: 32, fontWeight: 600, color: "#f3f4f6", letterSpacing: -0.5, lineHeight: 1.15, textWrap: "balance" }}>
          {t.arte.encomendas.lead}
        </div>
        <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
          {t.arte.encomendas.bullets.map((b, i) => (
            <div key={i} style={{ display: "flex", gap: 14, alignItems: "baseline", color: "#d1d5db", fontSize: 13 }}>
              <span style={{ color: "#f59e0b", fontSize: 11 }}>0{i + 1}</span>
              <span>{b}</span>
            </div>
          ))}
        </div>
        <button style={{
          marginTop: 32, background: "#f59e0b", color: "#0a0a0c", border: "none",
          fontFamily: "inherit", fontSize: 13, fontWeight: 600,
          padding: "14px 22px", cursor: "pointer",
        }}>{t.arte.encomendas.cta} →</button>
      </div>
      <div style={{ border: "1px solid rgba(255,255,255,0.08)", padding: 24, background: "rgba(245,158,11,0.04)" }}>
        <div style={{ color: "#f59e0b", fontSize: 11, letterSpacing: 1, marginBottom: 16 }}>// GPPSD</div>
        <div style={{ fontSize: 16, color: "#e6e7eb", lineHeight: 1.5 }}>
          Conselheiro do Grupo de Plastimodelismo e Pesquisa Santos Dumont — comunidade ativa há décadas, com participações em concursos nacionais e internacionais.
        </div>
        <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.08)", fontSize: 11, color: "#6b7280" }}>
          30 anos · Aviação militar · Militaria · Figuras · 3D
        </div>
      </div>
    </div>
  );
}

function V1ArteSobre({ t }) {
  return (
    <div style={{ maxWidth: 760 }}>
      {t.arte.sobre.map((line, i) => (
        <div key={i} style={{
          display: "flex", gap: 18, padding: "16px 0",
          borderBottom: "1px solid rgba(255,255,255,0.06)",
        }}>
          <span style={{ color: "#f59e0b", fontSize: 11, paddingTop: 4 }}>0{i + 1}</span>
          <span style={{ color: "#e6e7eb", fontSize: 15, lineHeight: 1.6 }}>{line}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { V1Site, V1_W, V1_H, V1Chrome, V1Hub, V1Tech });