// Landing page for dSalles Labs.
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "constellation",
  "accent": "#7BE3F2",
  "density": "default",
  "logo": "bracket",
  "lang": "en"
}/*EDITMODE-END*/;

const ACCENT_HEX = { phosphor: "#7BE3F2", amber: "#F2C268", magenta: "#F285C0" };
const ACCENT_FROM_HEX = Object.fromEntries(Object.entries(ACCENT_HEX).map(([k,v])=>[v,k]));

// ============== I18N ==============
function buildVersion() {
  const d = new Date();
  const pad = (n) => String(n).padStart(2, "0");
  return `${String(d.getFullYear()).slice(2)}.${pad(d.getMonth()+1)}.${pad(d.getDate())}`;
}
function buildStamp() { return "BUILD " + buildVersion(); }

const I18N = {
  en: {
    nav: { capabilities: "Capabilities", integration: "Integration", track: "Track record", process: "Process", start: "Start a project" },
    status: { online: "SYS // ONLINE", est: "EST. 2005", build: buildStamp(), booking: "Booking Q2 / 2026" },
    hero: {
      headline: ["Connect your world to the\u00a0frontier of ", "AI", "."],
      sub: "dSalles Labs builds intelligent web systems that fold cutting-edge AI into the work you already do — your products, your operations, your life. Twenty years of engineering, pointed at the next twenty.",
      cta1: "Start a project", cta2: "See capabilities",
      readouts: {
        constellation: ["NETWORK GRAPH", "0.024°/s drift", "70 nodes"],
        signal: ["SIGNAL FIELD", "12.4 Hz scan", "1920 cells"],
        aperture: ["APERTURE", "f/1.4 lock", "ø 110px"],
      },
      coords: "LAT 23.5°S · LONG 46.6°W",
    },
    sections: {
      capTag: "CAPABILITIES", capTitle: ["Software systems with an ", "AI nervous system", " built in."],
      intTag: "INTEGRATION", intTitle: ["One hub between ", "what you have", " and what AI can do now."],
      trkTag: "TRACK RECORD", trkTitle: ["Two decades of shipping, ", "now pointed at AI", "."],
      prcTag: "HOW WE WORK", prcTitle: ["A short, ", "opinionated", " path from idea to running system."],
    },
    caps: [
      ["Intelligent web platforms", "Custom web apps and dashboards engineered for the long haul — typed, testable, observable. AI is wired in from day one, not bolted on."],
      ["AI integration & orchestration", "LLMs, vector search, agents, computer vision. We pick the right model for each job and stitch them together so they actually deliver value to your team."],
      ["Workflow automation", "Email triage, document parsing, internal copilots, voice transcripts that turn into action items. Quiet automation that saves real hours every week."],
      ["Personal AI surfaces", "Private assistants for founders, creators and small teams that connect to your calendar, notes and projects — your data, your rules, your voice."],
    ],
    diagram: {
      yours: "YOUR WORLD", frontier: "FRONTIER AI", orchestration: "dSalles · ORCHESTRATION", hub: ["dS", "HUB"],
      left: [["CRM", "live"], ["Calendar", "live"], ["Email inbox", "live"], ["Spreadsheets", "sync"], ["Internal docs", "vector"], ["Voice notes", "stream"]],
      right: [["Reasoning models", "GPT · Claude"], ["Vector search", "embeddings"], ["Agents", "tool-use"], ["Vision & OCR", "files · pdfs"], ["Speech", "asr · tts"], ["Custom models", "fine-tuned"]],
    },
    cred: {
      stat: ["20", "yrs"], statLbl: ["of engineering web", "systems for real businesses,", "across four technology eras."],
      timeline: [
        ["2005 — 2012", "First wave web platforms — CMS, e-commerce, internal tools for SMBs scaling beyond spreadsheets."],
        ["2013 — 2019", "Cloud-native rebuilds. APIs, real-time, mobile companions. The shift from \"a website\" to \"a system\"."],
        ["2020 — 2023", "Data-driven products. Pipelines, embeddings, the first generation of LLM features in client work."],
        ["2024 — now", "dSalles Labs. AI-native systems for businesses and individuals — agentic workflows, personal copilots, decision tooling."],
      ],
    },
    process: [
      ["01", "Map", "A focused two-week diagnostic. We sit with your team, map the work, find the seams where AI quietly buys back hours.",
        ["Stakeholder interviews", "System & data audit", "Opportunity scorecard"]],
      ["02", "Build", "A small senior team ships a working system in weeks, not quarters. Typed code, hard tests, real users in the loop from week one.",
        ["Vertical slice in 4 weeks", "Weekly client demos", "Production-grade from day one"]],
      ["03", "Operate", "We stay on as your AI engineering partner — tuning prompts, watching costs, evolving the system as models and your business change.",
        ["SLA & observability", "Model upgrades & evals", "Quarterly roadmap reviews"]],
    ],
    cta: {
      tag: "[ TRANSMISSION OPEN ]",
      title: ["Bring us ", "one hard problem", ". We'll show you what AI can really do with it."],
      body: "Free 30-minute conversation. No deck, no pitch — we look at your workflow together and tell you where AI helps, where it doesn't, and what we'd build first.",
      placeholder: "you@company.com", submit: "Open channel →",
      direct: "or write directly — hello@dsalles.labs",
    },
    footer: {
      tagline: "Intelligent web systems for businesses and people who'd rather spend their time on what they're good at.",
      studio: ["Studio", ["Capabilities", "Process", "Track record", "Pricing"]],
      resources: ["Resources", ["Field notes", "Case studies", "Open source"]],
      channel: ["Channel", ["hello@dsalles.labs", "LinkedIn", "GitHub"]],
      copy: "© 2005–2026 dSalles Labs", loc: "São Paulo · Remote", build: "v " + buildVersion() + " / built with care",
    },
  },
  pt: {
    nav: { capabilities: "Capacidades", integration: "Integração", track: "Trajetória", process: "Processo", start: "Começar projeto" },
    status: { online: "SIST // ONLINE", est: "DESDE 2005", build: buildStamp(), booking: "Agenda Q2 / 2026" },
    hero: {
      headline: ["Conecte seu mundo à\u00a0fronteira da ", "IA", "."],
      sub: "A dSalles Labs constrói sistemas web inteligentes que incorporam IA de ponta ao trabalho que você já faz — seus produtos, suas operações, sua vida. Vinte anos de engenharia, mirando os próximos vinte.",
      cta1: "Começar projeto", cta2: "Ver capacidades",
      readouts: {
        constellation: ["NETWORK GRAPH", "0,024°/s drift", "70 nodes"],
        signal: ["SIGNAL FIELD", "12,4 Hz scan", "1920 cells"],
        aperture: ["APERTURE", "f/1.4 lock", "ø 110px"],
      },
      coords: "LAT 23,5°S · LONG 46,6°O",
    },
    sections: {
      capTag: "CAPACIDADES", capTitle: ["Sistemas de software com um ", "sistema nervoso de IA", " embutido."],
      intTag: "INTEGRAÇÃO", intTitle: ["Um hub entre ", "o que você já tem", " e o que a IA é capaz de fazer hoje."],
      trkTag: "TRAJETÓRIA", trkTitle: ["Duas décadas entregando software, ", "agora apontadas para a IA", "."],
      prcTag: "COMO TRABALHAMOS", prcTitle: ["Um caminho curto e ", "objetivo", " da ideia ao sistema rodando."],
    },
    caps: [
      ["Plataformas web inteligentes", "Aplicações e dashboards sob medida, feitos para durar — tipados, testáveis, observáveis. A IA é cabeada desde o primeiro dia, não pendurada depois."],
      ["Integração e orquestração de IA", "LLMs, busca vetorial, agentes, visão computacional. Escolhemos o modelo certo para cada tarefa e amarramos tudo para gerar valor real para o seu time."],
      ["Automação de processos", "Triagem de e-mails, leitura de documentos, copilotos internos, transcrições de áudio que viram tarefas. Automação discreta que devolve horas de verdade toda semana."],
      ["IA pessoal sob medida", "Assistentes privados para fundadores, criadores e times pequenos, plugados na sua agenda, anotações e projetos — seus dados, suas regras, sua voz."],
    ],
    diagram: {
      yours: "SEU MUNDO", frontier: "IA DE PONTA", orchestration: "dSalles · ORQUESTRAÇÃO", hub: ["dS", "HUB"],
      left: [["CRM", "ao vivo"], ["Agenda", "ao vivo"], ["Caixa de e-mail", "ao vivo"], ["Planilhas", "sync"], ["Documentos", "vetor"], ["Áudios", "stream"]],
      right: [["Modelos de raciocínio", "GPT · Claude"], ["Busca vetorial", "embeddings"], ["Agentes", "ferramentas"], ["Visão e OCR", "arquivos · pdfs"], ["Voz", "asr · tts"], ["Modelos próprios", "fine-tuned"]],
    },
    cred: {
      stat: ["20", "anos"], statLbl: ["construindo sistemas web", "para empresas de verdade,", "atravessando quatro eras tecnológicas."],
      timeline: [
        ["2005 — 2012", "Primeira onda de plataformas web — CMS, e-commerce e ferramentas internas para PMEs que cresceram além das planilhas."],
        ["2013 — 2019", "Reconstruções cloud-native. APIs, tempo real, apps mobile complementares. A virada de \"um site\" para \"um sistema\"."],
        ["2020 — 2023", "Produtos guiados por dados. Pipelines, embeddings e a primeira geração de recursos com LLM em projetos de clientes."],
        ["2024 — hoje", "dSalles Labs. Sistemas AI-native para empresas e pessoas — fluxos com agentes, copilotos pessoais e ferramentas de decisão."],
      ],
    },
    process: [
      ["01", "Mapear", "Um diagnóstico focado de duas semanas. Sentamos com o seu time, mapeamos o trabalho e encontramos os pontos onde a IA devolve horas em silêncio.",
        ["Entrevistas com stakeholders", "Auditoria de sistemas e dados", "Scorecard de oportunidades"]],
      ["02", "Construir", "Um time pequeno e sênior entrega um sistema funcionando em semanas, não em trimestres. Código tipado, testes firmes e usuários reais no loop desde a primeira semana.",
        ["Fatia vertical em 4 semanas", "Demos semanais com o cliente", "Qualidade de produção desde o primeiro dia"]],
      ["03", "Operar", "Seguimos como seu parceiro de engenharia de IA — ajustando prompts, monitorando custos e evoluindo o sistema conforme os modelos e o negócio mudam.",
        ["SLA e observabilidade", "Upgrades e avaliações de modelo", "Revisões trimestrais de roadmap"]],
    ],
    cta: {
      tag: "[ CANAL ABERTO ]",
      title: ["Traga ", "um problema difícil", ". A gente mostra o que a IA realmente consegue fazer com ele."],
      body: "Conversa gratuita de 30 minutos. Sem deck, sem pitch — olhamos seu fluxo junto com você e dizemos onde a IA ajuda, onde não ajuda e o que construiríamos primeiro.",
      placeholder: "voce@empresa.com", submit: "Abrir canal →",
      direct: "ou escreva direto — hello@dsalles.labs",
    },
    footer: {
      tagline: "Sistemas web inteligentes para empresas e pessoas que preferem gastar o tempo no que fazem de melhor.",
      studio: ["Estúdio", ["Capacidades", "Processo", "Trajetória", "Preços"]],
      resources: ["Conteúdo", ["Notas de bastidor", "Cases", "Open source"]],
      channel: ["Contato", ["hello@dsalles.labs", "LinkedIn", "GitHub"]],
      copy: "© 2005–2026 dSalles Labs", loc: "São Paulo · Remoto", build: "v " + buildVersion() + " / feito com carinho",
    },
  },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const L = I18N[t.lang] || I18N.en;

  useEffect(() => {
    const accentKey = ACCENT_FROM_HEX[t.accent] || t.accent || "phosphor";
    document.documentElement.dataset.accent = accentKey;
    document.documentElement.dataset.density = t.density;
    document.documentElement.lang = t.lang === "pt" ? "pt-BR" : "en";
  }, [t.accent, t.density, t.lang]);

  const Hero = {
    constellation: window.HeroConstellation,
    signal: window.HeroSignal,
    aperture: window.HeroAperture,
  }[t.hero] || window.HeroConstellation;

  const heroLabels = L.hero.readouts[t.hero] || [];

  return (
    <div data-screen-label="Landing">
      <SiteHeader logo={t.logo} lang={t.lang} setLang={v => setTweak("lang", v)} L={L} />

      <section className="hero" data-screen-label="Hero">
        <div className="hero-canvas"><Hero key={t.hero} /></div>
        <div className="container">
          <div className="hero-meta">
            <span><span className="dot" style={{display:"inline-block",marginRight:8,verticalAlign:"middle"}}></span>{L.status.online}</span>
            <span>{L.status.est}</span>
            <span>{L.status.build}</span>
          </div>
          <h1>{L.hero.headline[0]}<em>{L.hero.headline[1]}</em>{L.hero.headline[2]}</h1>
          <p className="hero-sub">{L.hero.sub}</p>
          <div className="hero-cta">
            <a href="#contact" className="btn">{L.hero.cta1} <span className="arrow">→</span></a>
            <a href="#capabilities" className="btn btn-ghost">{L.hero.cta2}</a>
          </div>
        </div>
        <div className="hero-readout">
          {heroLabels.map((l, i) => (
            <div key={i} className={i === 0 ? "v" : ""}>{l}</div>
          ))}
          <div>{L.hero.coords}</div>
        </div>
      </section>

      <section id="capabilities" data-screen-label="Capabilities">
        <div className="container">
          <SectionHead num="01" total="04" tag={L.sections.capTag} title={L.sections.capTitle} />
          <div className="caps-grid">
            {L.caps.map(([title, body], i) => (
              <Cap key={i} num={String(i+1).padStart(2,"0")} title={title} body={body}
                glyph={[<GlyphLayers/>, <GlyphHub/>, <GlyphFlow/>, <GlyphPerson/>][i]} />
            ))}
          </div>
        </div>
      </section>

      <section id="integration" data-screen-label="Integration">
        <div className="container">
          <SectionHead num="02" total="04" tag={L.sections.intTag} title={L.sections.intTitle} />
          <Diagram L={L.diagram} />
        </div>
      </section>

      <section id="track" data-screen-label="Credibility">
        <div className="container">
          <SectionHead num="03" total="04" tag={L.sections.trkTag} title={L.sections.trkTitle} />
          <div className="credibility">
            <div className="big-stat">
              <div className="num"><em>{L.cred.stat[0]}</em>{L.cred.stat[1]}</div>
              <div className="lbl">
                {L.cred.statLbl[0]}<br/>{L.cred.statLbl[1]}<br/>{L.cred.statLbl[2]}
              </div>
            </div>
            <div className="timeline">
              {L.cred.timeline.map(([yr, txt], i) => (
                <div className="tl-item" key={i}>
                  <div className="tl-year">{yr}</div>
                  <div className="tl-text">{txt}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="process" data-screen-label="Process">
        <div className="container">
          <SectionHead num="04" total="04" tag={L.sections.prcTag} title={L.sections.prcTitle} />
          <div className="process">
            {L.process.map(([n, name, body, list], i) => (
              <Step key={i} n={n} name={name} body={body} list={list} />
            ))}
          </div>
        </div>
      </section>

      <section id="contact" data-screen-label="CTA">
        <div className="container">
          <div className="cta-block">
            <div className="cta-inner">
              <span className="label label-accent">{L.cta.tag}</span>
              <h2>{L.cta.title[0]}<em>{L.cta.title[1]}</em>{L.cta.title[2]}</h2>
              <p style={{color: "var(--fg-dim)", fontSize: 17, maxWidth: "52ch"}}>{L.cta.body}</p>
              <form className="cta-form" onSubmit={e => e.preventDefault()}>
                <input type="email" placeholder={L.cta.placeholder} />
                <button type="submit">{L.cta.submit}</button>
              </form>
              <div className="mono" style={{fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.14em", textTransform: "uppercase"}}>
                {L.cta.direct}
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter logo={t.logo} L={L} />

      <Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}

function SectionHead({num, total, tag, title}) {
  return (
    <div className="section-head">
      <div className="section-index">
        <span className="num">[ {num} / {total} ]</span>
        <span className="tag">{tag}</span>
      </div>
      <h2 className="section-title">{title[0]}<em>{title[1]}</em>{title[2]}</h2>
    </div>
  );
}

function smoothScrollTo(targetY, duration = 600) {
  const scroller = document.scrollingElement || document.documentElement;
  const startY = scroller.scrollTop;
  const dy = targetY - startY;
  const t0 = performance.now();
  const ease = (t) => t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t+2, 2)/2;
  function step(now) {
    const t = Math.min(1, (now - t0) / duration);
    scroller.scrollTop = startY + dy * ease(t);
    if (t < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

// ============== BRAND MARKS ==============
function BrandMark({ variant = "bracket", size = 26 }) {
  const Mark = {
    bracket: MarkBracket, aperture: MarkAperture, monogram: MarkMonogram,
    signal: MarkSignal, node: MarkNode, glyph: MarkGlyph,
  }[variant] || MarkBracket;
  return <Mark size={size} />;
}

function MarkBracket({ size }) {
  return (
    <span className="bm bm-bracket" style={{ width: size, height: size }}>
      <span className="bm-orbit" />
      <span className="bm-letters">dS</span>
    </span>
  );
}
function MarkAperture({ size }) {
  return (
    <svg className="bm" width={size} height={size} viewBox="0 0 26 26" fill="none" aria-hidden="true">
      <circle cx="13" cy="13" r="11.5" stroke="currentColor" strokeWidth="1"/>
      <circle cx="13" cy="13" r="6" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2">
        <animateTransform attributeName="transform" type="rotate" from="0 13 13" to="360 13 13" dur="14s" repeatCount="indefinite"/>
      </circle>
      <circle cx="13" cy="13" r="2" fill="currentColor"/>
      <path d="M13 0.5 V3 M13 23 V25.5 M0.5 13 H3 M23 13 H25.5" stroke="currentColor" strokeWidth="1"/>
    </svg>
  );
}
function MarkMonogram({ size }) {
  return (
    <svg className="bm" width={size} height={size} viewBox="0 0 26 26" fill="none" aria-hidden="true">
      <path d="M19 4 V22" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/>
      <path d="M19 8 H10 a5 5 0 0 0 0 10 H19" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="square"/>
      <circle cx="6.2" cy="13" r="1.4" fill="currentColor"/>
    </svg>
  );
}
function MarkSignal({ size }) {
  return (
    <svg className="bm" width={size} height={size} viewBox="0 0 26 26" fill="none" aria-hidden="true">
      <rect x="1.5" y="1.5" width="23" height="23" stroke="currentColor" strokeOpacity="0.3" strokeWidth="1"/>
      {[{x:4,h:6,d:"1.2s"},{x:8,h:14,d:"0.9s"},{x:12,h:18,d:"1.1s"},{x:16,h:10,d:"1.3s"},{x:20,h:14,d:"1.0s"}].map((b,i)=>(
        <rect key={i} x={b.x} width="2" y={13 - b.h/2} height={b.h} fill="currentColor">
          <animate attributeName="height" values={`${b.h};${b.h*0.4};${b.h}`} dur={b.d} repeatCount="indefinite"/>
          <animate attributeName="y" values={`${13-b.h/2};${13-b.h*0.2};${13-b.h/2}`} dur={b.d} repeatCount="indefinite"/>
        </rect>
      ))}
    </svg>
  );
}
function MarkNode({ size }) {
  return (
    <svg className="bm" width={size} height={size} viewBox="0 0 26 26" fill="none" aria-hidden="true">
      <circle cx="13" cy="13" r="3" fill="currentColor"/>
      <circle cx="13" cy="13" r="9" stroke="currentColor" strokeWidth="1" strokeDasharray="1 3"/>
      <line x1="13" y1="6" x2="13" y2="0.5" stroke="currentColor" strokeWidth="1"/>
      <line x1="13" y1="20" x2="13" y2="25.5" stroke="currentColor" strokeWidth="1"/>
      <line x1="6" y1="13" x2="0.5" y2="13" stroke="currentColor" strokeWidth="1"/>
      <line x1="20" y1="13" x2="25.5" y2="13" stroke="currentColor" strokeWidth="1"/>
      <circle cx="13" cy="0.5" r="1.2" fill="currentColor"/>
      <circle cx="13" cy="25.5" r="1.2" fill="currentColor"/>
      <circle cx="0.5" cy="13" r="1.2" fill="currentColor"/>
      <circle cx="25.5" cy="13" r="1.2" fill="currentColor"/>
    </svg>
  );
}
function MarkGlyph({ size }) {
  return (
    <svg className="bm" width={size} height={size} viewBox="0 0 26 26" fill="none" aria-hidden="true">
      <path d="M2 2 H13 L24 13 L13 24 H2 Z" fill="currentColor"/>
      <text x="13" y="17" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="11" fontWeight="600" fill="var(--bg)">d</text>
    </svg>
  );
}
function BrandLockup({ variant, size = 26 }) {
  return (
    <>
      <BrandMark variant={variant} size={size} />
      <span className="brand-name">dSalles<em>·</em>Labs</span>
    </>
  );
}

// ============== HEADER ==============
function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      <button className={lang === "en" ? "is-on" : ""} onClick={() => setLang("en")} aria-pressed={lang === "en"}>EN</button>
      <span aria-hidden="true">/</span>
      <button className={lang === "pt" ? "is-on" : ""} onClick={() => setLang("pt")} aria-pressed={lang === "pt"}>PT</button>
    </div>
  );
}

function SiteHeader({ logo, lang, setLang, L }) {
  const onNav = (e) => {
    const href = e.currentTarget.getAttribute("href");
    if (href && href.startsWith("#") && href.length > 1) {
      const el = document.getElementById(href.slice(1));
      if (el) {
        e.preventDefault();
        const scroller = document.scrollingElement || document.documentElement;
        const top = el.getBoundingClientRect().top + scroller.scrollTop - 72;
        smoothScrollTo(top, 700);
        history.replaceState(null, "", href);
      }
    }
  };
  return (
    <header className="site">
      <div className="container">
        <div className="nav">
          <a href="#" className="brand" onClick={onNav}>
            <BrandLockup variant={logo} />
          </a>
          <nav className="nav-links">
            <a href="#capabilities" onClick={onNav}>{L.nav.capabilities}</a>
            <a href="#integration" onClick={onNav}>{L.nav.integration}</a>
            <a href="#track" onClick={onNav}>{L.nav.track}</a>
            <a href="#process" onClick={onNav}>{L.nav.process}</a>
          </nav>
          <LangToggle lang={lang} setLang={setLang} />
          <div className="nav-status">
            <span className="pulse"></span>
            <span>{L.status.booking}</span>
          </div>
          <a href="#contact" onClick={onNav} className="btn" style={{height: 36, padding: "0 14px", fontSize: 11}}>
            {L.nav.start}
          </a>
        </div>
      </div>
    </header>
  );
}

function Cap({num, title, body, glyph}) {
  return (
    <div className="cap">
      <div style={{display:"flex", alignItems:"flex-start", justifyContent:"space-between"}}>
        <span className="cap-num">[ {num} ]</span>
        <div className="cap-glyph">{glyph}</div>
      </div>
      <h3 className="cap-title">{title}</h3>
      <p className="cap-body">{body}</p>
    </div>
  );
}

function Step({n, name, body, list}) {
  return (
    <div className="step">
      <div className="step-head">
        <span className="step-num">{n}</span>
        <span className="step-name">{name}</span>
      </div>
      <p className="step-body">{body}</p>
      <ul className="step-list">{list.map((x,i) => <li key={i}>{x}</li>)}</ul>
    </div>
  );
}

function Diagram({L}) {
  return (
    <div className="diagram">
      <svg className="diag-lines" viewBox="0 0 1000 400" preserveAspectRatio="none" aria-hidden="true">
        {[80, 140, 200, 260, 320, 380].map((y, i) => (
          <path key={"l"+i} d={`M 60 ${y} C 280 ${y}, 380 200, 500 200`} />
        ))}
        {[80, 140, 200, 260, 320, 380].map((y, i) => (
          <path key={"r"+i} d={`M 940 ${y} C 720 ${y}, 620 200, 500 200`} />
        ))}
      </svg>
      <div className="diagram-stage">
        <div className="diag-col">
          <div className="label">{L.yours}</div>
          {L.left.map(([n, m]) => (
            <div className="diag-card" key={n}>
              <span className="ico">·</span>
              <span className="name">{n}</span>
              <span className="meta">{m}</span>
            </div>
          ))}
        </div>
        <div>
          <div className="diag-hub">
            <div className="core">{L.hub[0]}<br/>{L.hub[1]}</div>
          </div>
          <div className="label" style={{textAlign:"center", marginTop: 18}}>{L.orchestration}</div>
        </div>
        <div className="diag-col">
          <div className="label" style={{textAlign:"right"}}>{L.frontier}</div>
          {L.right.map(([n, m]) => (
            <div className="diag-card" key={n}>
              <span className="ico">∇</span>
              <span className="name">{n}</span>
              <span className="meta">{m}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SiteFooter({logo, L}) {
  return (
    <footer className="site">
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="brand" style={{marginBottom: 16}}>
              <BrandLockup variant={logo} />
            </div>
            <p style={{color: "var(--fg-dim)", fontSize: 14, maxWidth: "36ch"}}>{L.footer.tagline}</p>
          </div>
          {[L.footer.studio, L.footer.resources, L.footer.channel].map(([head, items], i) => (
            <div key={i}>
              <h5>{head}</h5>
              <ul>{items.map((x,j) => <li key={j}><a href="#">{x}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="foot-meta">
          <span>{L.footer.copy}</span>
          <span>{L.footer.loc}</span>
          <span>{L.footer.build}</span>
        </div>
      </div>
    </footer>
  );
}

// ============== GLYPHS ==============
function GlyphLayers() {
  return (<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <path d="M14 4 L24 9 L14 14 L4 9 Z" stroke="currentColor" strokeWidth="1"/>
    <path d="M14 14 L24 19 L14 24 L4 19 Z" stroke="currentColor" strokeWidth="1"/>
  </svg>);
}
function GlyphHub() {
  return (<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <circle cx="14" cy="14" r="3" fill="currentColor"/>
    <circle cx="14" cy="14" r="9" stroke="currentColor" strokeWidth="1"/>
    <circle cx="4" cy="14" r="1.6" fill="currentColor"/>
    <circle cx="24" cy="14" r="1.6" fill="currentColor"/>
    <circle cx="14" cy="4" r="1.6" fill="currentColor"/>
    <circle cx="14" cy="24" r="1.6" fill="currentColor"/>
  </svg>);
}
function GlyphFlow() {
  return (<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <path d="M4 7 H24 M4 14 H18 M4 21 H22" stroke="currentColor" strokeWidth="1"/>
    <circle cx="22" cy="7" r="1.6" fill="currentColor"/>
    <circle cx="16" cy="14" r="1.6" fill="currentColor"/>
    <circle cx="20" cy="21" r="1.6" fill="currentColor"/>
  </svg>);
}
function GlyphPerson() {
  return (<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <circle cx="14" cy="10" r="4" stroke="currentColor" strokeWidth="1"/>
    <path d="M5 24 C 5 18, 9 16, 14 16 S 23 18, 23 24" stroke="currentColor" strokeWidth="1"/>
  </svg>);
}

// ============== TWEAKS ==============
function Tweaks({t, setTweak}) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Language">
        <TweakRadio label="Lang" value={t.lang} onChange={v => setTweak("lang", v)}
          options={[{value:"en",label:"EN"},{value:"pt",label:"PT-BR"}]} />
      </TweakSection>
      <TweakSection label="Hero animation">
        <TweakSelect label="Variant" value={t.hero} onChange={v => setTweak("hero", v)}
          options={[{value:"constellation",label:"Constellation"},{value:"signal",label:"Signal field"},{value:"aperture",label:"Aperture"}]} />
      </TweakSection>
      <TweakSection label="Accent">
        <TweakColor label="Color" value={t.accent} onChange={v => setTweak("accent", v)}
          options={["#7BE3F2","#F2C268","#F285C0"]} />
      </TweakSection>
      <TweakSection label="Density">
        <TweakRadio label="Spacing" value={t.density} onChange={v => setTweak("density", v)}
          options={["compact","default","roomy"]} />
      </TweakSection>
      <TweakSection label="Logo mark">
        <TweakSelect label="Variant" value={t.logo} onChange={v => setTweak("logo", v)}
          options={[
            {value:"bracket",label:"Bracket — dS framed"},
            {value:"aperture",label:"Aperture — concentric rings"},
            {value:"monogram",label:"Monogram — d-stroke"},
            {value:"signal",label:"Signal — equalizer bars"},
            {value:"node",label:"Node — radiating hub"},
            {value:"glyph",label:"Glyph — angular shield"},
          ]} />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);