/* global React */
const { useState, useEffect, useRef } = React;

// ============================================
// HERO
// ============================================
window.Hero = function Hero({ t }) {
  const [rotatorIdx, setRotatorIdx] = useState(0);
  useEffect(() => {
    const i = setInterval(() => {
      setRotatorIdx(prev => (prev + 1) % t.hero.rotators.length);
    }, 2200);
    return () => clearInterval(i);
  }, [t]);

  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-inner">
          <div>
            <div className="hero-meta reveal">
              {t.hero.meta.map((m, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <span className="dot">◆</span>}
                  <span>{m}</span>
                </React.Fragment>
              ))}
            </div>
            <h1 className="reveal" data-delay="1">
              {t.hero.title1}{" "}
              <span className="rotator" key={rotatorIdx}>{t.hero.rotators[rotatorIdx]}</span>
              <br/>
              {t.hero.title2}
            </h1>
            <p className="hero-desc reveal" data-delay="2">{t.hero.desc}</p>
            <div className="hero-actions reveal" data-delay="3">
              <a href="#contact" className="cta">{t.hero.cta1} <span className="arrow">→</span></a>
              <a href="#process" className="cta cta-outline">{t.hero.cta2} <span className="arrow">↓</span></a>
            </div>
            <div className="hero-stats reveal" data-delay="4">
              {t.hero.stats.map((s, i) => (
                <div key={i} className="hero-stat">
                  <span className="num">
                    <Counter value={s.num} suffix={s.suffix}/>
                  </span>
                  <span className="label">{s.label}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="reveal" data-delay="2">
            <AutomationFlow t={t}/>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================
// MARQUEE
// ============================================
window.Marquee = function Marquee({ t }) {
  return (
    <div className="scroll-marquee">
      <div className="marquee-track">
        {[...t.marquee, ...t.marquee].map((m, i) => <span key={i}>{m}</span>)}
      </div>
    </div>
  );
};

// ============================================
// SERVICE ICONS
// ============================================
const SvcIcon = ({ kind }) => {
  if (kind === "software") return (
    <svg viewBox="0 0 64 64" fill="none" width="64" height="64">
      <rect x="6" y="10" width="52" height="40" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="6" y1="20" x2="58" y2="20" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="12" cy="15" r="1.5" fill="currentColor"/>
      <circle cx="17" cy="15" r="1.5" fill="currentColor"/>
      <path d="M14 30 L20 36 L14 42" stroke="var(--accent)" strokeWidth="1.5" fill="none"/>
      <line x1="24" y1="42" x2="36" y2="42" stroke="var(--accent)" strokeWidth="1.5"/>
    </svg>
  );
  if (kind === "integrations") return (
    <svg viewBox="0 0 64 64" fill="none" width="64" height="64">
      <rect x="6" y="14" width="18" height="18" stroke="currentColor" strokeWidth="1.5"/>
      <rect x="40" y="14" width="18" height="18" stroke="currentColor" strokeWidth="1.5"/>
      <rect x="23" y="40" width="18" height="14" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="24" y1="23" x2="40" y2="23" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="2 2"/>
      <line x1="15" y1="32" x2="29" y2="40" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="2 2"/>
      <line x1="49" y1="32" x2="35" y2="40" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="2 2"/>
    </svg>
  );
  return (
    <svg viewBox="0 0 64 64" fill="none" width="64" height="64">
      <circle cx="32" cy="32" r="20" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="32" cy="32" r="6" fill="var(--accent)"/>
      <line x1="32" y1="8" x2="32" y2="14" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="32" y1="50" x2="32" y2="56" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="8" y1="32" x2="14" y2="32" stroke="currentColor" strokeWidth="1.5"/>
      <line x1="50" y1="32" x2="56" y2="32" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M18 18 L22 22" stroke="var(--accent)" strokeWidth="1.5"/>
      <path d="M42 42 L46 46" stroke="var(--accent)" strokeWidth="1.5"/>
    </svg>
  );
};

// ============================================
// SERVICES
// ============================================
window.Services = function Services({ t }) {
  const kinds = ["software", "integrations", "automation"];
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="section-tag">{t.services.tag}</div>
            <h2 className="section-title">{t.services.title}</h2>
          </div>
          <p className="section-desc">{t.services.desc}</p>
        </div>
        <div className="svc-grid">
          {t.services.items.map((s, i) => (
            <div key={i} className="svc-card reveal" data-delay={i+1}>
              <div className="svc-num">
                <span>{s.num} / 03</span>
                <span>{s.tag}</span>
              </div>
              <div className="svc-icon"><SvcIcon kind={kinds[i]}/></div>
              <h3 className="svc-title">{s.title}</h3>
              <p className="svc-body">{s.body}</p>
              <ul className="svc-list">
                {s.list.map((l, j) => <li key={j}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================
// PROCESS
// ============================================
window.Process = function Process({ t }) {
  return (
    <section className="section" id="process">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="section-tag">{t.process.tag}</div>
            <h2 className="section-title">{t.process.title}</h2>
          </div>
          <p className="section-desc">{t.process.desc}</p>
        </div>
        <div className="ascii-row reveal" aria-hidden="true">
          {"┌─── DISCOVERY ────────── BLUEPRINT ──────────── BUILD ──────────────── OPERATE ──┐ // pipeline_v3"}
        </div>
        <div className="process">
          {t.process.steps.map((s, i) => (
            <div key={i} className="proc-step reveal" data-delay={i+1}>
              <div className="pnum">{s.num}</div>
              <div className="pcode">// {s.code}</div>
              <h3 className="ptitle">{s.title}</h3>
              <p className="pbody">{s.body}</p>
              <div className="pdur">
                <span>DURATION</span>
                <span>{s.dur}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================
// TECH STACK ICONS
// ============================================
const StackIcon = ({ kind }) => {
  const icons = {
    react: <><circle cx="18" cy="18" r="3" fill="currentColor"/><ellipse cx="18" cy="18" rx="14" ry="5.5" stroke="currentColor" strokeWidth="1.5" fill="none"/><ellipse cx="18" cy="18" rx="14" ry="5.5" stroke="currentColor" strokeWidth="1.5" fill="none" transform="rotate(60 18 18)"/><ellipse cx="18" cy="18" rx="14" ry="5.5" stroke="currentColor" strokeWidth="1.5" fill="none" transform="rotate(120 18 18)"/></>,
    next: <><path d="M6 6 L30 30 M6 30 L18 18" stroke="currentColor" strokeWidth="2" fill="none"/><circle cx="18" cy="18" r="14" stroke="currentColor" strokeWidth="1.5" fill="none"/></>,
    ts: <><rect x="4" y="4" width="28" height="28" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M10 18 H18 M14 18 V26" stroke="currentColor" strokeWidth="2"/><path d="M20 24 Q22 26 24 26 Q27 26 27 24 Q27 22 24 21 Q21 20 21 18 Q21 16 24 16 Q26 16 27 17" stroke="currentColor" strokeWidth="1.5" fill="none"/></>,
    node: <><polygon points="18,3 32,11 32,25 18,33 4,25 4,11" stroke="currentColor" strokeWidth="1.5" fill="none"/><text x="18" y="22" textAnchor="middle" fontFamily="monospace" fontSize="9" fill="currentColor" fontWeight="600">N</text></>,
    py: <><circle cx="13" cy="9" r="2.5" stroke="currentColor" fill="none"/><circle cx="23" cy="27" r="2.5" stroke="currentColor" fill="none"/><path d="M13 11 Q13 18 18 18 Q23 18 23 25" stroke="currentColor" strokeWidth="1.5" fill="none"/><rect x="9" y="11" width="14" height="7" stroke="currentColor" strokeWidth="1.5" fill="none"/><rect x="13" y="18" width="14" height="7" stroke="currentColor" strokeWidth="1.5" fill="none"/></>,
    pg: <><ellipse cx="18" cy="9" rx="13" ry="4" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M5 9 V27 Q5 31 18 31 Q31 31 31 27 V9" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M5 18 Q5 22 18 22 Q31 22 31 18" stroke="currentColor" strokeWidth="1.5" fill="none"/></>,
    openai: <><circle cx="18" cy="18" r="14" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M11 14 L18 18 L25 14 M18 18 V26 M11 22 L18 18 L25 22" stroke="currentColor" strokeWidth="1.5" fill="none"/></>,
    anthropic: <><path d="M8 30 L16 6 H20 L28 30 H24 L22 24 H14 L12 30 Z M15 21 H21 L18 12 Z" fill="currentColor"/></>,
    n8n: <><circle cx="8" cy="10" r="3" stroke="currentColor" strokeWidth="1.5" fill="none"/><circle cx="28" cy="10" r="3" stroke="currentColor" strokeWidth="1.5" fill="none"/><circle cx="18" cy="20" r="3" fill="currentColor"/><circle cx="8" cy="28" r="3" stroke="currentColor" strokeWidth="1.5" fill="none"/><circle cx="28" cy="28" r="3" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M11 11 L15 19 M25 11 L21 19 M11 27 L15 21 M25 27 L21 21" stroke="currentColor" strokeWidth="1.2"/></>,
    aws: <><path d="M4 24 Q18 30 32 24" stroke="var(--accent)" strokeWidth="1.5" fill="none"/><text x="18" y="20" textAnchor="middle" fontFamily="monospace" fontSize="11" fontWeight="700" fill="currentColor">aws</text></>,
    docker: <><rect x="4" y="14" width="5" height="5" stroke="currentColor" strokeWidth="1.2" fill="none"/><rect x="10" y="14" width="5" height="5" stroke="currentColor" strokeWidth="1.2" fill="none"/><rect x="16" y="14" width="5" height="5" stroke="currentColor" strokeWidth="1.2" fill="none"/><rect x="10" y="8" width="5" height="5" stroke="currentColor" strokeWidth="1.2" fill="none"/><rect x="16" y="8" width="5" height="5" stroke="currentColor" strokeWidth="1.2" fill="none"/><path d="M4 21 Q10 28 22 28 Q30 28 32 22 L32 20 Q26 22 22 20" stroke="currentColor" strokeWidth="1.5" fill="none"/></>,
    api: <><rect x="4" y="9" width="28" height="18" stroke="currentColor" strokeWidth="1.5" fill="none"/><text x="18" y="22" textAnchor="middle" fontFamily="monospace" fontSize="10" fontWeight="700" fill="currentColor">API</text></>,
  };
  return (
    <svg viewBox="0 0 36 36" width="36" height="36">
      {icons[kind] || icons.api}
    </svg>
  );
};

window.Stack = function Stack({ t }) {
  const cells = [
    { kind: "react", name: "React" }, { kind: "next", name: "Next.js" }, { kind: "ts", name: "TypeScript" },
    { kind: "node", name: "Node.js" }, { kind: "py", name: "Python" }, { kind: "pg", name: "Postgres" },
    { kind: "openai", name: "OpenAI" }, { kind: "anthropic", name: "Anthropic" }, { kind: "n8n", name: "n8n" },
    { kind: "aws", name: "AWS" }, { kind: "docker", name: "Docker" }, { kind: "api", name: "REST/GraphQL" },
  ];
  return (
    <section className="section" id="stack">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="section-tag">{t.stack.tag}</div>
            <h2 className="section-title">{t.stack.title}</h2>
          </div>
          <p className="section-desc">{t.stack.desc}</p>
        </div>
        <div className="stack-grid reveal">
          {cells.map((c, i) => (
            <div key={i} className="stack-cell" data-magnet>
              <StackIcon kind={c.kind}/>
              <span className="sl">{c.name}</span>
            </div>
          ))}
        </div>
        <div className="stack-counters">
          {t.stack.counters.map((c, i) => (
            <div key={i} className="counter reveal" data-delay={i+1}>
              <div className="cv">
                <Counter value={c.v} suffix={c.suffix}/>
              </div>
              <div className="cl">{c.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================
// CTA FINAL + CONTACT
// ============================================
window.CtaFinal = function CtaFinal({ t }) {
  return (
    <section className="cta-final" id="contact">
      <div className="wrap">
        <div className="section-tag reveal">{t.cta.tag}</div>
        <h2 className="reveal" data-delay="1">
          {t.cta.pre}<br/>
          {t.cta.mid} <span className="accent">{t.cta.accent}</span><br/>
          {t.cta.post}
        </h2>
        <div className="cta-final-actions reveal" data-delay="2">
          <a href="mailto:hola@aicoagency.io" className="cta">{t.cta.cta1} <span className="arrow">→</span></a>
          <a href="mailto:hola@aicoagency.io" className="cta cta-outline">{t.cta.cta2} <span className="arrow">↗</span></a>
        </div>
        <div className="contact-grid">
          {t.cta.contact.map((c, i) => (
            <div key={i} className="contact-item reveal" data-delay={i+1}>
              <div className="ck">{c.k}</div>
              {c.href
                ? <a href={c.href} target="_blank" rel="noopener noreferrer" className="cv2">{c.v}</a>
                : <div className="cv2">{c.v}</div>
              }
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Footer = function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-inner">
          <span>{t.footer.left}</span>
          <span>{t.footer.mid}</span>
          <span>{t.footer.right}</span>
        </div>
      </div>
    </footer>
  );
};
