// Main loboLab institutional site.
// Loads after copy.js, heroes.jsx, tweaks-panel.jsx.

const { useState, useEffect, useRef } = React;

const T = window.LOBO_COPY;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "pt",
  "hero": "wolf",
  "intensity": "med",
  "accent": "#F08A2B"
} /*EDITMODE-END*/;

// ──────────────────────────────────────────────────────────────────
// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {if (e.isIntersecting) {setShown(true);io.unobserve(el);}}),
      { threshold: 0.15, rootMargin: "0px 0px -60px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`reveal ${shown ? "is-in" : ""} ${className}`}
    style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </Tag>);

}

// ──────────────────────────────────────────────────────────────────
// Logo lockup — uses the wolf glyph (recreated in SVG so it inverts cleanly on dark)
function Logo({ size = 32 }) {
  return (
    <a href="#top" className="logo">
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor"
      strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ strokeWidth: "5px" }}>
        {/* Stylized wolf head — outline, matches the brand mark spirit */}
        <path d="M16 22 L20 14 L24 22" />
        <path d="M48 22 L44 14 L40 22" />
        <path d="M16 22 C12 30 14 42 22 50 C28 56 36 56 42 50 C50 42 52 30 48 22" />
        <path d="M22 32 L28 36 M42 32 L36 36" />
        <path d="M28 42 L32 46 L36 42 Z" fill="currentColor" />
      </svg>
      <span className="logo-text">
        <span className="logo-lobo" style={{ fontSize: "50px" }}>LOBO</span><span className="logo-lab" style={{ fontSize: "65px" }}>LAB</span>
      </span>
    </a>);

}

// ──────────────────────────────────────────────────────────────────
// NAV
function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 12);
    onS();window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`} id="top">
      <Logo size={28} />
      <div className="nav-links">
        <a href="#about">{t.nav.about}</a>
        <a href="#services">{t.nav.services}</a>
        <a href="#cases">{t.nav.cases}</a>
        <a href="#team">{t.nav.team}</a>
        <a href="#contact">{t.nav.contact}</a>
      </div>
      <div className="nav-right">
        <div className="lang-switch" role="group" aria-label="Language">
          <button className={lang === "pt" ? "is-on" : ""} onClick={() => setLang("pt")}>PT</button>
          <button className={lang === "en" ? "is-on" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <a href="#contact" className="btn btn-primary btn-sm">{t.nav.cta}</a>
      </div>
    </nav>);

}

// ──────────────────────────────────────────────────────────────────
// HERO
function Hero({ variant, intensity, t }) {
  const HeroBg = variant === "wolf" ? WolfHowling : variant === "streams" ? DataStreams : NeuralMesh;
  return (
    <section className="hero" data-screen-label="01 Hero">
      <HeroBg intensity={intensity} />
      <div className="hero-inner">
        <div className="hero-tag">
          <span className="hero-tag-dot" />
          <span>{t.hero.tag}</span>
        </div>
        <h1 className="hero-title">
          <span className="hero-line">{t.hero.title_a}</span>
          <span className="hero-line">{t.hero.title_b}</span>
          <span className="hero-line accent">{t.hero.title_c}</span>
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-ctas">
          <a href="#contact" className="btn btn-primary">
            {t.hero.cta_primary}
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M3 7h8M7 3l4 4-4 4" /></svg>
          </a>
          <a href="#about" className="btn btn-ghost">{t.hero.cta_secondary}</a>
        </div>
        <div className="hero-stats">
          {[t.hero.stat_a, t.hero.stat_b, t.hero.stat_c].map((s, i) =>
          <div key={i} className="stat">
              <div className="stat-num">{s[0]}</div>
              <div className="stat-lbl">{s[1]}</div>
            </div>
          )}
        </div>
      </div>
      <div className="hero-scroll" aria-hidden="true">
        <span>scroll</span>
        <span className="hero-scroll-line" />
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────
// MARQUEE — fake client logos as wordmarks (placeholders)
function Marquee() {
  const items = ["BANCO·TIER1", "INSURE/CO", "RETAIL∞", "PHARMA-X", "LOGTECH", "ENERGIA·SA", "FINX", "HOSPITAL·R", "SEGUROS·ZL", "TELECO"];
  const row = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((it, i) => <span key={i} className="marquee-item">{it}</span>)}
      </div>
    </div>);

}

// ──────────────────────────────────────────────────────────────────
// ABOUT
function About({ t }) {
  return (
    <section className="section about" id="about" data-screen-label="02 About">
      <div className="section-grid">
        <Reveal className="section-head">
          <div className="kicker"><span className="kicker-line" /> {t.about.kicker}</div>
          <h2 className="section-title">{t.about.title}</h2>
        </Reveal>
        <div className="about-body">
          <Reveal delay={80}><p className="lead">{t.about.body_a}</p></Reveal>
          <Reveal delay={160}><p>{t.about.body_b}</p></Reveal>
        </div>
      </div>
      <div className="pillars">
        {t.about.pillars.map((p, i) =>
        <Reveal key={p.k} delay={i * 100} className="pillar">
            <div className="pillar-k">{p.k}</div>
            <div className="pillar-t">{p.t}</div>
            <div className="pillar-d">{p.d}</div>
          </Reveal>
        )}
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────
// SERVICES
function Services({ t }) {
  return (
    <section className="section services" id="services" data-screen-label="03 Services">
      <Reveal className="section-head section-head-row">
        <div>
          <div className="kicker"><span className="kicker-line" /> {t.services.kicker}</div>
          <h2 className="section-title">{t.services.title}</h2>
        </div>
      </Reveal>
      <div className="svc-grid">
        {t.services.items.map((s, i) =>
        <Reveal key={s.n} delay={i * 80} className="svc-card">
            <div className="svc-top">
              <span className="svc-n">{s.n}</span>
              <ServiceGlyph idx={i} />
            </div>
            <h3 className="svc-t">{s.t}</h3>
            <p className="svc-d">{s.d}</p>
            <div className="svc-tags">
              {s.tags.map((tg) => <span key={tg} className="tag">{tg}</span>)}
            </div>
          </Reveal>
        )}
      </div>
    </section>);

}

function ServiceGlyph({ idx }) {
  // Tiny abstract SVG glyphs per service — geometric, monoline orange
  const sw = 1.6;
  const props = { width: 36, height: 36, viewBox: "0 0 36 36", fill: "none",
    stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  if (idx === 0) return (// single agent node with branches
    <svg {...props}><circle cx="18" cy="18" r="4" />
      <path d="M18 14V6M18 22v8M14 18H6M22 18h8M14.5 14.5L9 9M21.5 14.5L27 9M14.5 21.5L9 27M21.5 21.5L27 27" />
      <circle cx="6" cy="9" r="1.5" /><circle cx="30" cy="9" r="1.5" />
      <circle cx="6" cy="27" r="1.5" /><circle cx="30" cy="27" r="1.5" /></svg>);

  if (idx === 1) return (// workflow boxes
    <svg {...props}><rect x="3" y="14" width="8" height="8" rx="1.5" /><rect x="14" y="6" width="8" height="8" rx="1.5" />
      <rect x="14" y="22" width="8" height="8" rx="1.5" /><rect x="25" y="14" width="8" height="8" rx="1.5" />
      <path d="M11 18h3M22 10h3M22 26h3" /></svg>);

  if (idx === 2) return (// strategy chart
    <svg {...props}><path d="M5 28 L13 20 L19 24 L31 8" /><path d="M25 8h6v6" />
      <path d="M5 32h26" /></svg>);

  return (// integration plug/cycle
    <svg {...props}><path d="M6 18a12 12 0 0 1 24 0M30 18a12 12 0 0 1-24 0" />
      <path d="M30 18l-3-3M30 18l-3 3M6 18l3-3M6 18l3 3" /></svg>);

}

// ──────────────────────────────────────────────────────────────────
// CASES
function Cases({ t }) {
  return (
    <section className="section cases" id="cases" data-screen-label="04 Cases">
      <Reveal className="section-head">
        <div className="kicker"><span className="kicker-line" /> {t.cases.kicker}</div>
        <h2 className="section-title">{t.cases.title}</h2>
      </Reveal>
      <div className="case-list">
        {t.cases.items.map((c, i) =>
        <Reveal key={c.t} delay={i * 100} className="case-row">
            <div className="case-num">0{i + 1}</div>
            <div className="case-meta">
              <div className="case-sector">{c.sector}</div>
              <h3 className="case-t">{c.t}</h3>
              <p className="case-body">{c.body}</p>
            </div>
            <div className="case-metrics">
              {c.metrics.map((m, j) =>
            <div key={j} className="metric">
                  <div className="metric-v">{m[0]}</div>
                  <div className="metric-l">{m[1]}</div>
                </div>
            )}
            </div>
          </Reveal>
        )}
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────
// TEAM
function Team({ t }) {
  // Initial-only avatars on tinted plates (no photo placeholders to avoid slop)
  const palette = ["#F08A2B", "#5B6B85", "#E97640", "#7B8AA3"];
  return (
    <section className="section team" id="team" data-screen-label="05 Team">
      <Reveal className="section-head">
        <div className="kicker"><span className="kicker-line" /> {t.team.kicker}</div>
        <h2 className="section-title">{t.team.title}</h2>
        <p className="section-sub">{t.team.sub}</p>
      </Reveal>
      <div className="team-grid">
        {t.team.members.map((m, i) => {
          const initials = m.name.split(" ").map((s) => s[0]).slice(0, 2).join("");
          return (
            <Reveal key={m.name} delay={i * 80} className="team-card">
              <div className="team-avatar" style={{ background: `linear-gradient(135deg, ${palette[i]}, #1a1d28)` }}>
                <span>{initials}</span>
              </div>
              <div className="team-name">{m.name}</div>
              <div className="team-role">{m.role}</div>
              <div className="team-bio">{m.bio}</div>
            </Reveal>);

        })}
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────
// CONTACT
function Contact({ t }) {
  const [sent, setSent] = useState(false);
  return (
    <section className="section contact" id="contact" data-screen-label="06 Contact">
      <div className="contact-grid">
        <Reveal>
          <div className="kicker"><span className="kicker-line" /> {t.contact.kicker}</div>
          <h2 className="section-title">{t.contact.title}</h2>
          <p className="section-sub">{t.contact.sub}</p>
          <div className="contact-direct">
            <div className="cd-label">{t.contact.direct}</div>
            <a href="mailto:alcateia@lobolab.ai" className="cd-link">alcateia@lobolab.pro</a>
            <a href="tel:+5511999990000" className="cd-link">+55 62 99989-8819</a>
            <div className="cd-addr">Goiânia· Goias · BR</div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <form className="contact-form" onSubmit={(e) => {e.preventDefault();setSent(true);}}>
            <div className="form-row">
              <label>{t.contact.name}<input type="text" required /></label>
              <label>{t.contact.company}<input type="text" required /></label>
            </div>
            <label>{t.contact.email}<input type="email" required /></label>
            <label>{t.contact.message}<textarea rows="4" required /></label>
            <button type="submit" className="btn btn-primary btn-block" disabled={sent}>
              {sent ? "✓" : t.contact.send}
              {!sent && <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M3 7h8M7 3l4 4-4 4" /></svg>}
            </button>
          </form>
        </Reveal>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────
// FOOTER
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer-row">
        <Logo size={24} />
        <div className="footer-meta">
          <span>© 2026 loboLab. {t.footer.rights}</span>
          <span className="dot">·</span>
          <span>{t.footer.made}</span>
        </div>
      </div>
    </footer>);

}

// ──────────────────────────────────────────────────────────────────
// TWEAKS
function LoboTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Language" />
      <TweakRadio label="Idioma" value={t.lang} options={["pt", "en"]} onChange={(v) => setTweak("lang", v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Variação" value={t.hero}
      options={[
      { value: "neural", label: "Neural" },
      { value: "wolf", label: "Wolf" },
      { value: "streams", label: "Streams" }]
      }
      onChange={(v) => setTweak("hero", v)} />
      <TweakRadio label="Animação" value={t.intensity}
      options={[
      { value: "low", label: "Sutil" },
      { value: "med", label: "Média" },
      { value: "high", label: "Intensa" }]
      }
      onChange={(v) => setTweak("intensity", v)} />

      <TweakSection label="Brand" />
      <TweakColor label="Acento"
      value={t.accent}
      options={["#F08A2B", "#FF6B35", "#E94E1B", "#FFB845"]}
      onChange={(v) => setTweak("accent", v)} />
    </TweaksPanel>);

}

// ──────────────────────────────────────────────────────────────────
// APP
function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const t = T[tw.lang] || T.pt;

  // Apply accent color as CSS var
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tw.accent);
  }, [tw.accent]);

  return (
    <div className="app">
      <Nav lang={tw.lang} setLang={(v) => setTweak("lang", v)} t={t} />
      <Hero variant={tw.hero} intensity={tw.intensity} t={t} />
      <Marquee />
      <About t={t} />
      <Services t={t} />
      <Cases t={t} />
      <Team t={t} />
      <Contact t={t} />
      <Footer t={t} />
      <LoboTweaks t={tw} setTweak={setTweak} />
    </div>);

}

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