/* Orvio — seções do site */

// ---- Símbolo Orvio ----
// variant="grad" (padrão) roda a mesma animação "linha seguindo o planeta"
// do selo de autoria (orvio-seal.js) — mesmo path, mesmo gradiente coral —
// a menos que animated={false} seja passado explicitamente (ex.: o mark
// grande do Hero, onde o movimento ficou exagerado). "mono" e "balance"
// continuam sempre estáticos (usam as defs do HTML via <use>): "mono"
// herda currentColor e "balance" tem paleta mint própria, nenhum dos dois
// combina com o gradiente coral hardcoded do motor de animação.
function OrvioMark({ size = 40, variant = "grad", animated = variant === "grad" }) {
  const svgRef = React.useRef(null);
  React.useEffect(() => {
    if (!animated || !svgRef.current || !window.initOrvioSeal) return;
    return window.initOrvioSeal(svgRef.current);
  }, [animated]);

  if (animated) {
    return <svg ref={svgRef} className="seal-mark" width={size} height={size} aria-hidden="true" />;
  }
  const href = variant === "mono" ? "#orvio-mark-mono" : variant === "balance" ? "#orvio-mark-balance" : "#orvio-mark";
  return (
    <svg viewBox="-100 -100 200 200" width={size} height={size} aria-hidden="true"
         style={variant === "mono" ? { color: "var(--fg)" } : null}>
      <use href={href} />
    </svg>
  );
}

function Wordmark({ className = "" }) {
  return <span className={"wordmark " + className}>orvio</span>;
}

// ---- Selo "feito pela orvio" (autoria) — identidade fixa em qualquer site da Orvio ----
function OrvioSeal() {
  const svgRef = React.useRef(null);
  React.useEffect(() => {
    if (!svgRef.current || !window.initOrvioSeal) return;
    return window.initOrvioSeal(svgRef.current);
  }, []);
  return (
    <a className="orvio-seal" href="https://orvioapp.com" target="_blank" rel="noopener" aria-label="Site feito pela Orvio">
      <svg ref={svgRef} className="seal-mark" width="17" height="17" aria-hidden="true" />
      <span className="nm">orvio</span>
    </a>
  );
}

// ---- Ícones dos princípios (stroke 1.75, grid 24, cap round) ----
const stroke = { fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round" };
const GLYPHS = {
  clareza: (
    <svg viewBox="0 0 24 24" className="value-glyph"><g {...stroke}>
      <rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" />
      <rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" />
    </g></svg>
  ),
  movimento: (
    <svg viewBox="0 0 24 24" className="value-glyph"><g {...stroke}>
      <path d="M3 17 A 9 9 0 1 1 17 19" /><circle cx="18.5" cy="18.5" r="1.6" fill="currentColor" stroke="none" />
    </g></svg>
  ),
  leveza: (
    <svg viewBox="0 0 24 24" className="value-glyph"><g {...stroke}>
      <path d="M4 8h16" /><path d="M6 12.5h12" /><path d="M9 17h6" />
    </g></svg>
  ),
  foco: (
    <svg viewBox="0 0 24 24" className="value-glyph"><g {...stroke}>
      <circle cx="12" cy="12" r="8.5" /><circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none" />
    </g></svg>
  ),
  confianca: (
    <svg viewBox="0 0 24 24" className="value-glyph"><g {...stroke}>
      <path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z" /><path d="M9 12l2 2 4-4" />
    </g></svg>
  ),
  escala: (
    <svg viewBox="0 0 24 24" className="value-glyph"><g {...stroke}>
      <rect x="4" y="13" width="7" height="7" rx="1.5" /><path d="M13 11V6.5A1.5 1.5 0 0 1 14.5 5H19" /><circle cx="19" cy="5" r="1.6" fill="currentColor" stroke="none" />
    </g></svg>
  ),
};

const VALUES = [
  { id: "clareza",   n: "01", t: "Clareza",   d: "Cada coisa no seu lugar. Interfaces que mostram o essencial e silenciam o resto." },
  { id: "movimento", n: "02", t: "Movimento", d: "Produto que evolui com você. O que entrega hoje é o ponto de partida de amanhã." },
  { id: "leveza",    n: "03", t: "Leveza",    d: "Menos atrito, mais ar. Espaço para respirar entre uma decisão e a próxima." },
  { id: "foco",      n: "04", t: "Foco",      d: "Só o que importa, visível. Sem ruído, sem disputa por atenção." },
  { id: "confianca", n: "05", t: "Confiança", d: "Premium, mas sem peso. Tecnologia que inspira segurança e não treme." },
  { id: "escala",    n: "06", t: "Escala",    d: "Um sistema, muitos produtos. A mesma base sustenta tudo o que vem a seguir." },
];

// ---- Reveal wrapper ----
function Reveal({ as: Tag = "div", d, className = "", children, ...rest }) {
  return <Tag className={"reveal " + className} data-d={d} {...rest}>{children}</Tag>;
}

// ============================================================
const ON_HOME = window.location.pathname === "/";
function homeHref(hash) { return (ON_HOME ? "#" : "/#") + hash; }

// ---- Portfólio de clientes ----
const PROJECTS = [
  {
    id: "intrasaude",
    name: "Rede IntraSaúde",
    url: "http://redeintrasaude.com.br/",
    image: "/portfolio-intrasaude.png",
    blurb: "Plataforma institucional de saúde: notícias, cursos, biblioteca de materiais e captação de leads.",
    tags: ["Saúde", "Next.js", "Captação de leads"],
  },
];

function ProjectCard({ project }) {
  return (
    <a className="folio-card" href={project.url} target="_blank" rel="noopener noreferrer">
      <div className="folio-shot">
        <img src={project.image} alt={`Captura de tela do site ${project.name}`} loading="lazy" />
      </div>
      <div className="folio-body">
        <h3 className="folio-name">{project.name}</h3>
        <p className="folio-blurb">{project.blurb}</p>
        <div className="folio-tags">
          {project.tags.map((t) => <span className="folio-tag" key={t}>{t}</span>)}
        </div>
        <span className="folio-link">
          Visitar site
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M9 7h8v8" /></svg>
        </span>
      </div>
    </a>
  );
}

// ============================================================
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className="nav" data-scrolled={scrolled ? "1" : "0"}>
      <div className="wrap">
        <a className="nav-logo" href={homeHref("top")} aria-label="Orvio — início">
          <OrvioMark size={30} animated={false} /><Wordmark />
        </a>
        <div className="nav-links">
          <a href={homeHref("manifesto")}>Manifesto</a>
          <a href={homeHref("principios")}>Princípios</a>
          <a href={homeHref("arquitetura")}>Arquitetura</a>
          <a href={homeHref("portfolio-teaser")}>Sites</a>
        </div>
        <a className="nav-cta" href={homeHref("arquitetura")}><span className="dot" />Em breve</a>
      </div>
    </nav>
  );
}

// ============================================================
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="bg-field">
        <div className="blob petrol" style={{ width: 720, height: 720, top: "-18%", left: "-12%" }} />
        <div className="blob graph"  style={{ width: 640, height: 640, top: "4%", right: "-12%" }} />
        <div className="blob coral"  style={{ width: 460, height: 460, top: "24%", left: "58%", opacity: "calc(var(--glow) * 0.55)" }} />
        <div className="grid-mask" />
      </div>
      <div className="wrap hero-grid">
        <div className="hero-text">
          <Reveal className="hero-eyebrow eyebrow" d="1">Ecossistema digital</Reveal>
          <Reveal as="h1" className="hero-name" d="2"><span className="wordmark">orvio</span></Reveal>
          <Reveal as="p" className="hero-tagline" d="3">Tecnologia em movimento.</Reveal>
          <Reveal as="p" className="hero-sub" d="4">
            Soluções digitais para pessoas e empresas. Criamos tecnologia que
            resolve problemas reais — clara, leve e sem ruído.
          </Reveal>
        </div>
        <Reveal className="hero-mark" d="2">
          <div className="rings" aria-hidden="true"><span /><span /><span /></div>
          <OrvioMark size={440} animated={false} />
        </Reveal>
      </div>
      <div className="hero-scroll"><span>Role</span><span className="line" /></div>
    </header>
  );
}

// ============================================================
function Manifesto() {
  return (
    <section className="band manifesto" id="manifesto">
      <div className="wrap">
        <Reveal as="h2" d="1">
          Tecnologia com <span className="accent">clareza</span>,<br />em movimento.
        </Reveal>
        <div className="manifesto-body">
          <Reveal as="p" d="2">
            A Orvio é um ecossistema digital em formação. Existimos para trazer
            clareza ao que é tecnologia: produtos que evoluem, com menos atrito
            e mais foco no que importa.
          </Reveal>
          <Reveal as="p" d="3">
            A ideia central é movimento com clareza — equilíbrio presente,
            crescimento à frente. Onde o círculo termina, o movimento começa.
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================================
function Principios() {
  return (
    <section className="band" id="principios">
      <div className="wrap">
        <div className="section-head">
          <Reveal className="eyebrow" d="1">Princípios</Reveal>
          <Reveal as="h2" d="1">Seis ideias que sustentam<br />tudo o que construímos.</Reveal>
        </div>
        <div className="values-grid">
          {VALUES.map((v, i) => (
            <Reveal key={v.id} className="value" d={String((i % 3) + 1)}>
              <span className="value-idx">{v.n}</span>
              {GLYPHS[v.id]}
              <h3>{v.t}</h3>
              <p>{v.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
function Arquitetura() {
  const slots = [
    { o: "orvio", p: "·····", desc: "Mais um nasce do mesmo sistema.", status: "Em breve" },
    { o: "orvio", p: "·····", desc: "O ecossistema cresce com método.", status: "Em breve" },
    { o: "orvio", p: "·····", desc: "Um roadmap, sem pressa.", status: "Em breve" },
  ];
  return (
    <section className="band arch" id="arquitetura">
      <div className="bg-field">
        <div className="blob graph" style={{ width: 560, height: 560, top: "20%", right: "-14%", opacity: "calc(var(--glow) * 0.7)" }} />
      </div>
      <div className="wrap">
        <div className="section-head">
          <Reveal className="eyebrow" d="1">Arquitetura de marca</Reveal>
          <Reveal as="h2" d="1">Um ecossistema.<br />Vários produtos.</Reveal>
          <Reveal as="p" d="2">
            A Orvio assina cada produto. Todos nascem do mesmo sistema —
            tipografia, símbolo, curvas. Muda apenas o acento da categoria.
          </Reveal>
        </div>

        <Reveal className="arch-diagram" d="1">
          <div className="arch-mother">
            <OrvioMark size={30} animated={false} /><Wordmark />
            <span className="tag">orvio</span>
          </div>
          <div className="arch-stem" />
          <div className="arch-slots">
            <a className="slot balance" href="/balance">
              <div className="slot-head">
                <OrvioMark variant="balance" size={36} />
                <span className="slot-orbit">Primeiro em órbita</span>
              </div>
              <div className="slot-name"><span className="o">orvio</span> <span className="b">balance</span></div>
              <p className="slot-desc">O começo de algo maior. Fique de olho — vem aí.</p>
              <span className="slot-status"><span className="pulse" />Em breve</span>
            </a>
            {slots.map((s, i) => (
              <div className="slot" key={i}>
                <div className="slot-name"><span className="o">{s.o}</span><span className="p">{s.p}</span></div>
                <p className="slot-desc">{s.desc}</p>
                <span className="slot-status"><span className="pulse" />{s.status}</span>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal className="arch-note" d="2">
          <div>
            <div className="k">Convenção</div>
            <div className="v"><b>orvio</b> + nome descritivo. Ex.: <b>orvio balance</b>.</div>
          </div>
          <div>
            <div className="k">Acento</div>
            <div className="v">Uma cor para cada solução. O Balance é <b>verde-água</b>.</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
function Constelacao() {
  return (
    <section className="constel">
      <div className="bg-field">
        <div className="blob petrol" style={{ width: 700, height: 700, top: "-30%", left: "20%", opacity: "calc(var(--glow) * 0.8)" }} />
      </div>
      <div className="constel-orbits" aria-hidden="true">
        <svg viewBox="-260 -260 520 520">
          <g fill="none" stroke="currentColor" style={{ color: "var(--ink-4)" }}>
            <circle r="80" strokeWidth="1" opacity="0.55" />
            <circle r="140" strokeWidth="1" opacity="0.4" />
            <circle r="200" strokeWidth="1" opacity="0.28" />
            <circle r="250" strokeWidth="1" opacity="0.16" />
          </g>
          <path d="M 200 0 A 200 200 0 0 1 -141 141" fill="none" stroke="url(#orvio-stroke)" strokeWidth="2.5" strokeLinecap="round" opacity="0.85" />
          <circle cx="200" cy="0" r="4" fill="var(--accent-2, #FFA572)" />
          <circle cx="-99" cy="99" r="2.5" fill="var(--fg-3)" opacity="0.7" />
          <circle cx="56" cy="-130" r="2" fill="var(--fg-3)" opacity="0.5" />
          <circle cx="-200" cy="-60" r="2" fill="var(--fg-3)" opacity="0.4" />
        </svg>
      </div>
      <div className="wrap">
        <Reveal className="eyebrow" d="1">A marca em movimento</Reveal>
        <Reveal as="h2" d="2">
          Onde o círculo termina,<br />o <span className="accent">movimento</span> começa.
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
function PortfolioTeaser() {
  return (
    <section className="band folio-teaser" id="portfolio-teaser">
      <div className="wrap">
        <div className="section-head">
          <Reveal className="eyebrow" d="1">Também construímos sites</Reveal>
          <Reveal as="h2" d="1">Sites institucionais para empresas.</Reveal>
          <Reveal as="p" d="2">
            Rápido, claro e sem enrolação — o mesmo cuidado que colocamos nos
            nossos produtos, aplicado ao site de quem confia na gente.
          </Reveal>
        </div>
        <Reveal d="3">
          <a className="folio-more" href="/portfolio">Ver portfólio completo →</a>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
function Footer() {
  const Social = ({ label, href = "#", d }) => (
    <a href={href} aria-label={label} target={href !== "#" ? "_blank" : undefined} rel={href !== "#" ? "noopener noreferrer" : undefined}>
      <svg viewBox="0 0 24 24" width="16" height="16"><g {...stroke}>{d}</g></svg>
    </a>
  );
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="nav-logo"><OrvioMark size={32} /><Wordmark /></div>
            <p>Um ecossistema digital. Criamos produtos claros, leves e em movimento.</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h4>Marca</h4>
              <a href={homeHref("manifesto")}>Manifesto</a>
              <a href={homeHref("principios")}>Princípios</a>
              <a href={homeHref("arquitetura")}>Arquitetura</a>
            </div>
            <div className="footer-col">
              <h4>Orvio</h4>
              <a href={homeHref("top")}>Sobre</a>
              <a href={homeHref("arquitetura")}>Produtos</a>
              <a href={homeHref("portfolio-teaser")}>Sites</a>
              <a href="/contato">Contato</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="meta">© Orvio · 2026 — Rio Grande do Sul · Brasil</span>
          <div className="footer-end">
            <div className="footer-social">
              <Social label="Facebook" href="https://www.facebook.com/profile.php?id=61592424149315" d={<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />} />
              <Social label="Instagram" href="https://www.instagram.com/orvioapp" d={<><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17" cy="7" r="0.6" fill="currentColor" stroke="none" /></>} />
              <Social label="X" d={<path d="M5 5l14 14M19 5L5 19" />} />
            </div>
            <OrvioSeal />
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { OrvioMark, Wordmark, Reveal, Nav, Hero, Manifesto, Principios, Arquitetura, Constelacao, Footer, PROJECTS, ProjectCard, PortfolioTeaser });