// Icons (Lucide-style line SVGs)
const Icon = ({ name, size = 22 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    bot: <><path d="M12 8V4H8"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/></>,
    rocket: <><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></>,
    zap: <><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></>,
    sparkles: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/><path d="M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    chevDown: <><polyline points="6 9 12 15 18 9"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    close: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    pickaxe: <><path d="M14 5l5 5"/><path d="M19 4l-2.5 2.5L19 9"/><path d="M3 21l9-9"/><path d="M14 5L5 14l-2 2 3 3 2-2 9-9"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    chevLeft: <><polyline points="15 18 9 12 15 6"/></>,
    chevRight: <><polyline points="9 18 15 12 9 6"/></>,
    dot: <><circle cx="12" cy="12" r="4"/></>,
  };
  return <svg {...props}>{paths[name]}</svg>;
};

const Reveal = ({ children, delay = 0, as: Tag = 'div', className = '' }) => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <Tag ref={ref} className={`reveal ${seen ? 'in' : ''} ${className}`} style={{ transitionDelay: `${delay}ms` }}>{children}</Tag>;
};

// Animated number counter
const Counter = ({ to, suffix = '' }) => {
  const ref = React.useRef(null);
  const [v, setV] = React.useState(0);
  const target = parseFloat(String(to).replace(/[^0-9.\-]/g, '')) || 0;
  const prefix = String(to).startsWith('+') ? '+' : '';
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const start = performance.now(); const dur = 1500;
        const tick = (t) => {
          const p = Math.min(1, (t - start) / dur);
          const eased = 1 - Math.pow(1 - p, 3);
          setV(target * eased);
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [target]);
  return <span ref={ref}>{prefix}{Math.round(v)}{suffix}</span>;
};

const Logo = () => (
  <a href="index.html" className="logo">
    <span className="logo-dot" />
    DCM Partner
  </a>
);

const Nav = ({ t, lang, setLang, onBook }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#servicios">{t.nav.servicios}</a>
          <a href="#industrias">{t.nav.industrias}</a>
          <a href="#metodo">{t.nav.metodo}</a>
          <a href="#caso">{t.nav.casos}</a>
          <a href="blog.html">{t.nav.blog}</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch">
            <button className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>ES</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <button className="btn btn-primary" onClick={onBook}>{t.nav.cta}<Icon name="arrow" size={14}/></button>
        </div>
      </div>
    </nav>
  );
};

const Hero = ({ t, onBook }) => {
  const words = [t.hero.titleA, t.hero.titleB];
  return (
    <section className="hero" id="hero" data-screen-label="01 Hero">
      <div className="hero-orbs">
        <div className="orb violet" />
        <div className="orb cyan" />
        <div className="orb rose" />
      </div>
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow"><span className="dot" />{t.hero.eyebrow}</div>
          <h1 className="h1">
            <span className="word" style={{animationDelay:'0.05s'}}>{t.hero.titleA}</span><br/>
            <span className="word" style={{animationDelay:'0.18s'}}>{t.hero.titleB} </span>
            <span className="word gradient-text" style={{animationDelay:'0.32s'}}>{t.hero.titleC}</span>
            <span className="cursor" />
          </h1>
          <p className="body-lg">{t.hero.sub}</p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onBook}>{t.hero.ctaA}<Icon name="arrow" size={14}/></button>
            <a href="#solucion" className="btn btn-secondary">{t.hero.ctaB} ↓</a>
          </div>
        </div>
        <div className="hero-visual">
          <div className="agent-visual">
            <div className="agent-link l1" />
            <div className="agent-link l2" />
            {t.agents.map((a, i) => (
              <div key={i} className={`agent-card a${i+1}`}>
                <div className="agent-head">
                  <div className="agent-icon" style={{ background: ['#F3F0FF','#E0FAFA','#FFE4F0'][i], color: ['#7C5CFF','#06B6D4','#DB2777'][i] }}>
                    <Icon name={['bot','sparkles','zap'][i]} size={16}/>
                  </div>
                  <div className="agent-name">{a.name}</div>
                  <span className="agent-status">live</span>
                </div>
                <div className="agent-task">{a.task}</div>
                <div className="agent-meta"><span>{a.meta[0]}</span><span>{a.meta[1]}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Problema = ({ t }) => (
  <section style={{ background: 'var(--bg-secondary)' }} id="problema" data-screen-label="02 Problema">
    <div className="container">
      <Reveal>
        <span className="section-tag">{t.problema.tag}</span>
        <h2 className="h2" style={{ maxWidth: 1000, marginBottom: 28 }}>{t.problema.title}</h2>
        <p className="body-lg" style={{ maxWidth: 780 }}>{t.problema.body}</p>
      </Reveal>
    </div>
  </section>
);

const Solucion = ({ t }) => (
  <section id="solucion" data-screen-label="03 Solución">
    <div className="container">
      <Reveal>
        <div className="sec-head">
          <span className="section-tag">{t.solucion.tag}</span>
          <h2 className="h2">{t.solucion.title}</h2>
          <p className="body-lg">{t.solucion.sub}</p>
        </div>
      </Reveal>
      <div className="three-col">
        {t.solucion.cards.map((c, i) => (
          <Reveal key={i} delay={i*80}>
            <div className="card" style={{ height: '100%' }}>
              <div className="card-icon"><Icon name={c.icon} size={22}/></div>
              <h3>{c.title}</h3>
              <p className="body">{c.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const Servicios = ({ t }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: 'var(--bg-secondary)' }} id="servicios" data-screen-label="04 Servicios">
      <div className="container">
        <Reveal>
          <div className="sec-head">
            <span className="section-tag">{t.servicios.tag}</span>
            <h2 className="h2">{t.servicios.title}</h2>
          </div>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {t.servicios.cards.map((c, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} delay={i*60}>
                <div className={`svc-card ${isOpen ? 'open' : ''}`} onClick={() => setOpen(isOpen ? -1 : i)}>
                  <div className="svc-head">
                    <div className="svc-num">0{i+1}</div>
                    <div style={{ flex: 1 }}>
                      <div className="svc-title">{c.title}</div>
                      <div className="svc-sub">{c.sub}</div>
                    </div>
                    <div className="svc-chev"><Icon name="chevDown" size={16}/></div>
                  </div>
                  <div className="svc-body">
                    <div className="svc-body-inner">
                      <div className="svc-grid">
                        {c.items.map((it, j) => (
                          <div className="svc-item" key={j}>
                            <div className="svc-item-icon"><Icon name="dot" size={14}/></div>
                            <div>
                              <div className="svc-item-title">{it.t}</div>
                              <div className="svc-item-desc">{it.d}</div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const Industrias = ({ t }) => (
  <section id="industrias" data-screen-label="05 Industrias">
    <div className="container">
      <Reveal>
        <div className="sec-head">
          <span className="section-tag">{t.industrias.tag}</span>
          <h2 className="h2">{t.industrias.title}</h2>
          <p className="body-lg">{t.industrias.sub}</p>
        </div>
      </Reveal>
      <Reveal>
        <div className="chips">
          {t.industrias.chips.map((c, i) => (
            <div key={i} className={`chip ${c.featured ? 'featured' : c.ghost ? 'ghost' : 'standard'}`}>
              {c.featured && <Icon name="pickaxe" size={18}/>}
              {c.label}
              {c.meta && <span className="chip-meta">{c.meta}</span>}
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

const Metodo = ({ t }) => (
  <section style={{ background: 'var(--bg-secondary)' }} id="metodo" data-screen-label="06 Método">
    <div className="container">
      <Reveal>
        <div className="sec-head">
          <span className="section-tag">{t.metodo.tag}</span>
          <h2 className="h2">{t.metodo.title}</h2>
        </div>
      </Reveal>
      <div className="steps">
        {t.metodo.steps.map((s, i) => (
          <Reveal key={i} delay={i*100}>
            <div className="step">
              <div className="step-num">{i+1}</div>
              <h3>{s.t}</h3>
              <span className="duration mono">{s.d}</span>
              <p className="body" style={{ fontSize: 15 }}>{s.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const Caso = ({ t }) => (
  <section id="caso" data-screen-label="07 Caso">
    <div className="container">
      <Reveal>
        <div className="case">
          <div className="case-grid">
            <div>
              <span className="section-tag">{t.caso.tag}</span>
              <h2 className="h2" style={{ marginBottom: 20 }}>{t.caso.title}</h2>
              <p className="body-lg" style={{ color: 'var(--text-secondary)' }}>{t.caso.body}</p>
              <div className="orchestra">
                <div className="orch-label mono">{t.caso.tracksLabel}</div>
                <div className="orch-pmo">
                  <div className="orch-icon"><Icon name="sparkles" size={16}/></div>
                  <div>
                    <div className="orch-name">{t.caso.orchestrator.name}</div>
                    <div className="orch-role">{t.caso.orchestrator.role}</div>
                  </div>
                </div>
                <div className="orch-desc">{t.caso.orchestrator.desc}</div>
                <div className="orch-stem" />
                <div className="orch-tier-label mono">{t.caso.agentsHeading}</div>
                <div className="orch-agents">
                  {t.caso.tracks.map((tk, i) => (
                    <div key={i} className="orch-agent">
                      <div className="orch-agent-head">
                        <span className="orch-dot" />
                        <span className="orch-name">{tk.name}</span>
                      </div>
                      <div className="orch-agent-role">{tk.role}</div>
                      <div className="orch-agent-status mono">live</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="partners">
              {t.caso.partners.map((p, i) => (
                <div key={i} className="partner">
                  <div className="partner-logo"><img src={p.logo} alt={`${p.name} logo`} /></div>
                  <div className="partner-meta">
                    <div className="partner-name">{p.name}</div>
                    <div className="partner-note">{p.note}</div>
                  </div>
                </div>
              ))}
              <p className="partner-foot mono">{t.caso.footnote}</p>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

const Diferencial = ({ t }) => (
  <section data-screen-label="08 Diferencial">
    <div className="container">
      <Reveal>
        <div className="sec-head">
          <span className="section-tag">{t.diferencial.tag}</span>
          <h2 className="h2">{t.diferencial.title}</h2>
        </div>
      </Reveal>
      <div className="three-col">
        {t.diferencial.cards.map((c, i) => (
          <Reveal key={i} delay={i*80}>
            <div className="card" style={{ height: '100%' }}>
              <div className="card-icon"><Icon name={c.icon} size={22}/></div>
              <h3>{c.title}</h3>
              <p className="body">{c.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const Insights = ({ t }) => (
  <section style={{ background: 'var(--bg-secondary)' }} id="insights" data-screen-label="09 Insights">
    <div className="container">
      <Reveal>
        <div className="sec-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', maxWidth: '100%', gap: 32 }}>
          <div>
            <span className="section-tag">{t.insights.tag}</span>
            <h2 className="h2">{t.insights.title}</h2>
          </div>
          <a href="#" className="btn btn-ghost">{t.insights.seeAll} →</a>
        </div>
      </Reveal>
      <div className="posts">
        {t.insights.posts.map((p, i) => (
          <Reveal key={i} delay={i*80}>
            <a className="post-link" href={`blog/${p.slug}.html`}>
              <article className="post">
                <div className={`post-img alt${i+1}`}>
                  <img src={p.img} alt={p.title} loading="lazy"/>
                </div>
                <div className="post-body">
                  <div className="post-cat">{p.cat}</div>
                  <h3>{p.title}</h3>
                  <div className="post-meta">{p.date} · {p.time}</div>
                </div>
              </article>
            </a>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const CTAFinal = ({ t, onBook }) => (
  <section data-screen-label="10 CTA">
    <div className="container">
      <Reveal>
        <div className="cta-final">
          <span className="section-tag" style={{ background: 'rgba(255,255,255,0.6)' }}>30 min · Calendly</span>
          <h2 className="h2">{t.cta.title}</h2>
          <p className="body-lg">{t.cta.sub}</p>
          <button className="btn btn-primary" style={{ padding: '18px 32px', fontSize: 16 }} onClick={onBook}>{t.cta.btn}<Icon name="arrow" size={14}/></button>
          <span className="cta-email">{t.cta.email} <a href="mailto:contacto@dcmpartner.com">contacto@dcmpartner.com</a></span>
        </div>
      </Reveal>
    </div>
  </section>
);

const FAQ = ({ t }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section data-screen-label="11 FAQ">
      <div className="container">
        <Reveal>
          <div className="sec-head" style={{ textAlign: 'center', margin: '0 auto 48px' }}>
            <span className="section-tag">{t.faq.tag}</span>
            <h2 className="h2">{t.faq.title}</h2>
          </div>
        </Reveal>
        <div className="faq">
          {t.faq.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="icon"><Icon name="plus" size={20}/></span>
              </button>
              <div className="faq-a"><div><p>{it.a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = ({ t, lang, setLang }) => (
  <footer className="footer" data-screen-label="12 Footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo />
          <p className="footer-tag">{t.footer.tag}</p>
        </div>
        {t.footer.cols.map((col, i) => (
          <div className="footer-col" key={i}>
            <h4>{col.h}</h4>
            <ul>{col.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}</ul>
          </div>
        ))}
      </div>
      <div className="footer-bottom">
        <span>{t.footer.copy}</span>
        <div className="legal">
          {t.footer.legal.map((l, i) => <a key={i} href="#">{l}</a>)}
          <div className="lang-switch" style={{ marginLeft: 8 }}>
            <button className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>ES</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Icon, Reveal, Counter, Logo, Nav, Hero, Problema, Solucion, Servicios, Industrias, Metodo, Caso, Diferencial, Insights, CTAFinal, FAQ, Footer });