const { useState, useEffect, useRef } = React;

// ---------- i18n ----------
const COPY = {
  pt: {
    nav: { services: "Serviços", why: "Por que nós", approach: "Processo", contact: "Contato" },
    cta_primary: "Solicitar orçamento",
    cta_secondary: "Conheça os serviços",

    hero_title_1: "Marketing, software e ",
    hero_title_accent: "presença digital",
    hero_title_2: " sob medida.",
    hero_lead:
      "Ajudamos empresas de todos os tamanhos a crescer com estratégias de marketing digital, desenvolvimento de software customizado e plataformas digitais bem construídas.",
    hero_scroll: "Role para ver mais",

    stats: [
      { num: "3", suffix: "", h: "Frentes integradas", p: "Marketing, software e plataformas digitais como uma operação única." },
      { num: "100", suffix: "%", h: "Projetos sob medida", p: "Nada de templates prontos — cada entrega é desenhada para o seu negócio." },
      { num: "24", suffix: "h", h: "Resposta inicial", p: "Retornamos seu pedido de orçamento em até um dia útil." },
    ],

    services_kicker: "Nossos serviços",
    services_title: "Três frentes, uma parceria integrada.",
    services_sub:
      "Cada serviço resolve um problema específico. Juntos, formam uma operação digital completa.",
    services: [
      {
        title: "Marketing digital",
        desc: "Estratégia, performance e conteúdo — do planejamento à execução nos canais certos.",
        icon: "marketing",
      },
      {
        title: "Software sob medida",
        desc: "Desenvolvimento e licenciamento de sistemas customizáveis, feitos para o seu problema.",
        icon: "code",
      },
      {
        title: "Websites & portais",
        desc: "Criação, gestão e manutenção de sites, portais e plataformas digitais que escalam com você.",
        icon: "web",
      },
    ],

    // Feature rows
    feat1_kicker: "Marketing que gera resultado",
    feat1_title: "Estratégia, mídia e conteúdo em um só time.",
    feat1_desc:
      "Planejamos e executamos campanhas de marketing digital focadas em metas claras — tráfego, leads, vendas ou posicionamento.",
    feat1_list: [
      { h: "Planejamento e estratégia", p: "Diagnóstico do canal, público e funil." },
      { h: "Gestão de mídia paga", p: "Google, Meta, LinkedIn e outros canais." },
      { h: "Conteúdo e SEO", p: "Produção editorial alinhada à sua marca." },
    ],

    feat2_kicker: "Tecnologia sob medida",
    feat2_title: "Software e plataformas feitos para o seu negócio.",
    feat2_desc:
      "Construímos sistemas customizados, websites e portais digitais que resolvem problemas reais — com manutenção e evolução contínuas.",
    feat2_list: [
      { h: "Software customizável", p: "Desenvolvimento e licenciamento sob medida." },
      { h: "Websites & portais", p: "Sites institucionais, portais e plataformas digitais." },
      { h: "Gestão e manutenção", p: "Evolução, atualizações e suporte contínuo." },
    ],

    cta_title_1: "Vamos construir algo ",
    cta_title_accent: "que funcione",
    cta_title_2: ".",
    cta_desc:
      "Conte sobre seu projeto. Respondemos em até um dia útil com um plano inicial e estimativa.",
    cta_btn: "Solicitar orçamento",

    footer: {
      about:
        "L & N Digital Solutions LTDA — Marketing digital, desenvolvimento de software customizável, websites e portais digitais.",
      col_services: "Serviços",
      col_company: "Empresa",
      s_marketing: "Marketing digital",
      s_software: "Software sob medida",
      s_web: "Websites & portais",
      c_about: "Sobre",
      c_process: "Processo",
      c_contact: "Contato",
      rights: "© 2026 L & N Digital Solutions. Todos os direitos reservados.",
      domain: "lndigital.solutions",
    },
  },
  en: {
    nav: { services: "Services", why: "Why us", approach: "Process", contact: "Contact" },
    cta_primary: "Request a quote",
    cta_secondary: "Explore services",

    hero_title_1: "Marketing, software and ",
    hero_title_accent: "digital presence",
    hero_title_2: " made to fit.",
    hero_lead:
      "We help companies of every size grow — through digital marketing strategy, custom software development, and well-built digital platforms.",
    hero_scroll: "Scroll to explore",

    stats: [
      { num: "3", suffix: "", h: "Integrated practices", p: "Marketing, software and digital platforms running as one operation." },
      { num: "100", suffix: "%", h: "Tailor-made projects", p: "No templates — every delivery is designed for your business." },
      { num: "24", suffix: "h", h: "Initial response", p: "We answer quote requests within one business day." },
    ],

    services_kicker: "What we do",
    services_title: "Three services, one integrated partnership.",
    services_sub:
      "Each service solves a specific problem. Together, they form a complete digital operation.",
    services: [
      {
        title: "Digital marketing",
        desc: "Strategy, performance and content — from planning to execution across the right channels.",
        icon: "marketing",
      },
      {
        title: "Custom software",
        desc: "Development and licensing of tailored, customizable software systems — built for your problem.",
        icon: "code",
      },
      {
        title: "Websites & portals",
        desc: "Building, managing and maintaining websites, portals and digital platforms that scale with you.",
        icon: "web",
      },
    ],

    feat1_kicker: "Marketing that drives results",
    feat1_title: "Strategy, media and content under one team.",
    feat1_desc:
      "We plan and execute digital marketing campaigns around clear goals — traffic, leads, sales or positioning.",
    feat1_list: [
      { h: "Strategy & planning", p: "Channel, audience and funnel diagnosis." },
      { h: "Paid media management", p: "Google, Meta, LinkedIn and more." },
      { h: "Content & SEO", p: "Editorial production aligned to your brand." },
    ],

    feat2_kicker: "Tailored technology",
    feat2_title: "Software and platforms built for your business.",
    feat2_desc:
      "We build custom software, websites and digital portals that solve real problems — with ongoing maintenance and iteration.",
    feat2_list: [
      { h: "Customizable software", p: "Development and licensing, made to order." },
      { h: "Websites & portals", p: "Corporate sites, portals and digital platforms." },
      { h: "Management & support", p: "Iteration, updates and ongoing support." },
    ],

    cta_title_1: "Let's build something ",
    cta_title_accent: "that works",
    cta_title_2: ".",
    cta_desc:
      "Tell us about your project. We respond within one business day with an initial plan and estimate.",
    cta_btn: "Request a quote",

    footer: {
      about:
        "L & N Digital Solutions LTDA — Digital marketing, custom software development, websites and digital portals.",
      col_services: "Services",
      col_company: "Company",
      s_marketing: "Digital marketing",
      s_software: "Custom software",
      s_web: "Websites & portals",
      c_about: "About",
      c_process: "Process",
      c_contact: "Contact",
      rights: "© 2026 L & N Digital Solutions. All rights reserved.",
      domain: "lndigital.solutions",
    },
  },
};

// ---------- Reveal on scroll ----------
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { rootMargin: "0px 0px -10% 0px", threshold: 0.08 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ as: Tag = "div", className = "", stagger = false, children, ...rest }) {
  const ref = useReveal();
  return (
    <Tag
      ref={ref}
      className={`${stagger ? "reveal-stagger" : "reveal"} ${className}`.trim()}
      {...rest}
    >
      {children}
    </Tag>
  );
}

// ---------- Icons ----------
const IconArrowRight = ({ size = 14 }) => (
  <svg viewBox="0 0 20 20" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 10h12M11 5l5 5-5 5" />
  </svg>
);

const IconCheck = () => (
  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <path d="m3 8.5 3.5 3.5L13 5" />
  </svg>
);

const IconMarketing = () => (
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 21V13l10-5 10 4 4-2v14l-4 2-10-4-10 4z" />
    <path d="M14 8v16" />
    <path d="M9 25v4" />
  </svg>
);
const IconCode = () => (
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M11 9 4 16l7 7" />
    <path d="m21 9 7 7-7 7" />
    <path d="m18 6-4 20" />
  </svg>
);
const IconWeb = () => (
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="6" width="24" height="20" rx="2" />
    <path d="M4 12h24" />
    <circle cx="8" cy="9" r=".6" fill="currentColor" />
    <circle cx="11" cy="9" r=".6" fill="currentColor" />
    <circle cx="14" cy="9" r=".6" fill="currentColor" />
  </svg>
);

const SERVICE_ICONS = {
  marketing: <IconMarketing />,
  code: <IconCode />,
  web: <IconWeb />,
};

// ---------- Nav ----------
function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container nav-inner">
        <a className="brand" href="#top">
          <span className="brand-mark">L&amp;N</span>
          <span>L &amp; N Digital Solutions</span>
        </a>

        <nav className="nav-links">
          <a href="#services">{t.nav.services}</a>
          <a href="#why">{t.nav.why}</a>
          <a href="#contact">{t.nav.contact}</a>
        </nav>

        <div className="nav-right">
          <div className="lang-toggle" role="tablist" aria-label="Language">
            <button
              className={lang === "pt" ? "active" : ""}
              onClick={() => setLang("pt")}
              aria-selected={lang === "pt"}
            >PT</button>
            <button
              className={lang === "en" ? "active" : ""}
              onClick={() => setLang("en")}
              aria-selected={lang === "en"}
            >EN</button>
          </div>
          <a href="#contact" className="btn btn-primary">
            {t.cta_primary} <IconArrowRight />
          </a>
        </div>
      </div>
    </header>
  );
}

// ---------- Hero ----------
function Hero({ t }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true" />
      <div className="container hero-inner">
        <Reveal>
          <h1>
            {t.hero_title_1}
            <span className="accent">{t.hero_title_accent}</span>
            {t.hero_title_2}
          </h1>
          <p className="lead">{t.hero_lead}</p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary btn-lg">
              {t.cta_primary} <IconArrowRight />
            </a>
            <a href="#services" className="btn btn-outline btn-lg">
              {t.cta_secondary}
            </a>
          </div>
        </Reveal>
      </div>
      <div className="hero-scroll" aria-hidden="true">
        <span>{t.hero_scroll}</span>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 6l4 4 4-4" />
        </svg>
      </div>
    </section>
  );
}

// ---------- Stats ----------
function Stats({ t }) {
  return (
    <section className="stats">
      <div className="container">
        <Reveal stagger className="stats-card">
          {t.stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="num">
                {s.num}<sup>{s.suffix}</sup>
              </div>
              <h5>{s.h}</h5>
              <p>{s.p}</p>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Services ----------
function Services({ t }) {
  return (
    <section className="block" id="services">
      <div className="container">
        <Reveal className="section-head">
          <div className="section-kicker">{t.services_kicker}</div>
          <h2>{t.services_title}</h2>
          <p className="sub">{t.services_sub}</p>
        </Reveal>

        <Reveal stagger className="services">
          {t.services.map((s, i) => (
            <div className="service" key={i}>
              <div className="icon">{SERVICE_ICONS[s.icon]}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Feature rows ----------
function FeatureRow({ reverse, kicker, title, desc, list, visual }) {
  return (
    <Reveal className={`feature-row ${reverse ? "reverse" : ""}`}>
      <div className="feature-text">
        <div className="section-kicker" style={{ marginBottom: 10 }}>{kicker}</div>
        <h2>{title}</h2>
        <p>{desc}</p>
        <ul className="feature-list">
          {list.map((it, i) => (
            <li key={i}>
              <span className="check"><IconCheck /></span>
              <div>
                <strong>{it.h}</strong>
                <span className="d">{it.p}</span>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div>{visual}</div>
    </Reveal>
  );
}

function FeatureVisualA() {
  return (
    <div className="feature-visual v1">
      <div className="mock">
        <div className="mock-bar med" />
        <div className="mock-bar short dark" />
        <div className="mock-card">
          <div className="mock-tile" />
          <div className="mock-tile" />
          <div className="mock-tile" />
          <div className="mock-tile" />
        </div>
      </div>
    </div>
  );
}

function FeatureVisualB() {
  return (
    <div className="feature-visual v2">
      <div className="mock">
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#fca5a5" }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#fcd34d" }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#86efac" }} />
          <div className="mock-bar short dark" style={{ marginLeft: "auto", width: "40%" }} />
        </div>
        <div className="mock-bar med" />
        <div className="mock-bar short" />
        <div className="mock-bar" style={{ width: "90%" }} />
        <div className="mock-card">
          <div className="mock-tile" style={{ gridColumn: "span 2" }} />
          <div className="mock-tile" />
          <div className="mock-tile" />
        </div>
      </div>
    </div>
  );
}

// ---------- CTA ----------
function CTA({ t }) {
  return (
    <section className="cta" id="contact">
      <div className="cta-bg" aria-hidden="true" />
      <div className="container cta-inner">
        <Reveal>
          <h2>
            {t.cta_title_1}
            <em>{t.cta_title_accent}</em>
            {t.cta_title_2}
          </h2>
          <p>{t.cta_desc}</p>
          <a
            href="#"
            className="btn btn-primary btn-lg"
            onClick={(e) => {
              e.preventDefault();
              // dynamically assemble so bots scraping static HTML don't find it
              const u = ["contato", "lndigital.solutions"].join("@");
              window.location.href = "mailto:" + u;
            }}
          >
            {t.cta_btn} <IconArrowRight />
          </a>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t, lang, setLang }) {
  const f = t.footer;
  return (
    <footer>
      <div className="container">
        <div className="foot-top">
          <div>
            <div className="brand">
              <span className="brand-mark">L&amp;N</span>
              <span>L &amp; N Digital Solutions</span>
            </div>
            <p className="about">{f.about}</p>
          </div>
          <div>
            <h6>{f.col_services}</h6>
            <ul>
              <li><a href="#services">{f.s_marketing}</a></li>
              <li><a href="#services">{f.s_software}</a></li>
              <li><a href="#services">{f.s_web}</a></li>
            </ul>
          </div>
          <div>
            <h6>{f.col_company}</h6>
            <ul>
              <li><a href="#why">{f.c_about}</a></li>
              <li><a href="#contact">{f.c_contact}</a></li>
              <li>
                <a href="#" onClick={(e) => { e.preventDefault(); setLang(lang === "pt" ? "en" : "pt"); }}>
                  {lang === "pt" ? "English version" : "Versão em português"}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <div>{f.rights}</div>
          <div>{f.domain}</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- App ----------
function App() {
  const [lang, setLang] = useState("pt");
  const t = COPY[lang];

  useEffect(() => {
    document.documentElement.lang = lang === "pt" ? "pt-BR" : "en";
    document.title =
      lang === "pt"
        ? "L & N Digital Solutions — Marketing, software e plataformas digitais"
        : "L & N Digital Solutions — Marketing, software and digital platforms";
  }, [lang]);

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={t} />
      <main>
        <Hero t={t} />
        <Stats t={t} />
        <Services t={t} />

        <section className="block" id="why" style={{ background: "var(--bg-alt)" }}>
          <div className="container" style={{ display: "grid", gap: 96 }}>
            <FeatureRow
              kicker={t.feat1_kicker}
              title={t.feat1_title}
              desc={t.feat1_desc}
              list={t.feat1_list}
              visual={<FeatureVisualA />}
            />
            <FeatureRow
              reverse
              kicker={t.feat2_kicker}
              title={t.feat2_title}
              desc={t.feat2_desc}
              list={t.feat2_list}
              visual={<FeatureVisualB />}
            />
          </div>
        </section>

        <CTA t={t} />
      </main>
      <Footer t={t} lang={lang} setLang={setLang} />
    </>
  );
}

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