// Home page sections
const { useState: useStateH } = React;

function Hero({ lang }) {
  const t = window.I18N[lang];
  return (
    <section className="hero">
      <div className="bg-grid"></div>
      <div className="dot-field"></div>
      <div className="wrap hero-grid">
        <div>
          <span className="eyebrow">{t.hero.eyebrow}</span>
          <h1>
            {t.hero.titleA}<br/>
            <span className="accent">{t.hero.titleB}</span><br/>
            {t.hero.titleC}
          </h1>
          <p className="lead">{t.hero.lead}</p>
          <div className="hero-ctas">
            <a href="contact.html" className="btn btn-primary">
              {t.hero.ctaPrimary} <span className="arrow"><Icon name="arrow" size={14}/></span>
            </a>
            <a href="#process" className="btn btn-ghost">{t.hero.ctaSecondary}</a>
          </div>
        </div>
        <Console lang={lang}/>
      </div>
    </section>
  );
}

function TrustStrip({ lang }) {
  const t = window.I18N[lang];
  const partners = ["Microsoft Partner", "CISCO Select", "SentinelOne", "Datto MSP", "Sophos Gold", "Proofpoint"];
  return (
    <section className="trust">
      <div className="wrap trust-row">
        <div className="trust-label">{t.trust.label}</div>
        <div className="trust-logos">
          {partners.map((p) => (
            <div className="logo-chip" key={p}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--accent)", opacity: 0.6 }}></span>
              {p}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatsStrip({ lang }) {
  const t = window.I18N[lang];
  return (
    <section className="stats">
      <div className="wrap">
        <div className="stats-grid">
          {t.stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="num">{s.num}</div>
              <div className="label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services({ lang }) {
  const t = window.I18N[lang];
  const photos = [
    "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=900&q=80",
    "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=900&q=80",
    "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=900&q=80",
    "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=900&q=80",
    "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=900&q=80",
    "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=900&q=80",
  ];
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="section-head services-head">
          <div className="services-head-visual">
            <span className="eyebrow">{t.services.eyebrow}</span>
            <div className="services-photo">
              <img
                src="https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=900&q=80"
                alt={lang === "es" ? "Ingenieros AMAAC trabajando en data center" : "AMAAC engineers working in data center"}
                loading="lazy"
              />
              <div className="services-photo-overlay"></div>
              <div className="services-photo-tag">
                <span className="dot"></span>
                {lang === "es" ? "EQUIPO EN SITIO · DORAL, FL" : "ON-SITE TEAM · DORAL, FL"}
              </div>
            </div>
          </div>
          <div>
            <h2>{t.services.title} <span className="accent">{t.services.titleAccent}</span></h2>
            <p className="desc" style={{ marginTop: 24 }}>{t.services.desc}</p>
          </div>
        </div>
        <div className="services-grid">
          {t.services.items.map((s, i) => (
            <a href="services.html" className="service-card" key={i}>
              <div className="service-photo">
                <img src={photos[i]} alt={s.title} loading="lazy"/>
                <div className="service-photo-overlay"></div>
              </div>
              <div className="service-body">
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="meta">
                  <span>{s.tag}</span>
                  <span className="arrow"><Icon name="arrow" size={14}/></span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Industries({ lang }) {
  const t = window.I18N[lang];
  const photos = [
    "https://images.unsplash.com/photo-1565008447742-97f6f38c985c?auto=format&fit=crop&w=800&q=80",
    "https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80",
    "https://images.unsplash.com/photo-1505664194779-8beaceb93744?auto=format&fit=crop&w=800&q=80",
    "https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80",
  ];
  return (
    <section className="section" id="industries">
      <div className="wrap">
        <div className="section-head services-head">
          <div className="services-head-visual">
            <span className="eyebrow">{t.industries.eyebrow}</span>
            <div className="services-photo">
              <img
                src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=900&q=80"
                alt={lang === "es" ? "Vista aérea de Miami" : "Aerial view of Miami"}
                loading="lazy"
              />
              <div className="services-photo-overlay"></div>
              <div className="services-photo-tag">
                <span className="dot"></span>
                {lang === "es" ? "MIAMI-DADE · BROWARD" : "MIAMI-DADE · BROWARD"}
              </div>
            </div>
          </div>
          <div>
            <h2>{t.industries.title} <span className="accent">{t.industries.titleAccent}</span></h2>
            <p className="desc" style={{ marginTop: 24 }}>{t.industries.desc}</p>
          </div>
        </div>
        <div className="industries-grid">
          {t.industries.items.map((it, i) => (
            <a href="industries.html" className="industry-card" key={i}>
              <div className="industry-img">
                <img src={photos[i]} alt={it.name} loading="lazy" className="industry-photo"/>
                <div className="industry-photo-overlay"></div>
                <div className="placeholder-tag">
                  <span>{it.placeholder}</span>
                </div>
              </div>
              <div className="industry-meta">
                <h4>{it.name}</h4>
                <span className="pct">{it.pct}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Why({ lang }) {
  const t = window.I18N[lang];
  return (
    <section className="section" id="why">
      <div className="wrap">
        <div className="section-head services-head">
          <div className="services-head-visual">
            <span className="eyebrow">{t.why.eyebrow}</span>
            <div className="services-photo">
              <img
                src="https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=900&q=80"
                alt={lang === "es" ? "Ingeniera AMAAC en llamada de soporte" : "AMAAC engineer on a support call"}
                loading="lazy"
              />
              <div className="services-photo-overlay"></div>
              <div className="services-photo-tag">
                <span className="dot"></span>
                {lang === "es" ? "SOPORTE BILINGÜE · 24/7" : "BILINGUAL SUPPORT · 24/7"}
              </div>
            </div>
          </div>
          <div>
            <h2>
              {t.why.title} <span className="accent">{t.why.titleAccent}</span>{t.why.titleAfter}
            </h2>
            <p className="desc" style={{ marginTop: 24 }}>{t.why.desc}</p>
          </div>
        </div>
        <div className="why-grid">
          {t.why.items.map((w, i) => (
            <div className="why-card" key={i}>
              <div className="why-num">{w.n}</div>
              <div>
                <h3>{w.title}</h3>
                <p>{w.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ lang }) {
  const t = window.I18N[lang];
  return (
    <section className="section" id="process">
      <div className="wrap">
        <div className="section-head services-head">
          <div className="services-head-visual">
            <span className="eyebrow">{t.process.eyebrow}</span>
            <div className="services-photo">
              <img
                src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=900&q=80"
                alt={lang === "es" ? "Equipo planeando onboarding" : "Team planning onboarding"}
                loading="lazy"
              />
              <div className="services-photo-overlay"></div>
              <div className="services-photo-tag">
                <span className="dot"></span>
                {lang === "es" ? "ONBOARDING DOCUMENTADO · 30D" : "DOCUMENTED ONBOARDING · 30D"}
              </div>
            </div>
          </div>
          <div>
            <h2>{t.process.title} <span className="accent">{t.process.titleAccent}</span></h2>
            <p className="desc" style={{ marginTop: 24 }}>{t.process.desc}</p>
          </div>
        </div>
        <div className="process">
          {t.process.steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="label">{s.label}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              <div className="day">{s.day}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials({ lang }) {
  const t = window.I18N[lang];
  // duplicate items so the marquee loops seamlessly
  const loop = [...t.testimonials.items, ...t.testimonials.items];
  return (
    <section className="section" id="testimonials">
      <div className="wrap">
        <div className="section-head services-head">
          <div className="services-head-visual">
            <span className="eyebrow">{t.testimonials.eyebrow}</span>
            <div className="services-photo">
              <img
                src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=900&q=80"
                alt={lang === "es" ? "Reunión con clientes" : "Client meeting"}
                loading="lazy"
              />
              <div className="services-photo-overlay"></div>
              <div className="services-photo-tag">
                <span className="dot"></span>
                {lang === "es" ? "10+ NEGOCIOS · SUR DE FLORIDA" : "10+ BUSINESSES · SOUTH FLORIDA"}
              </div>
            </div>
          </div>
          <div>
            <h2>{t.testimonials.title} <span className="accent">{t.testimonials.titleAccent}</span></h2>
          </div>
        </div>
      </div>
      <div className="testi-marquee">
        <div className="testi-track">
          {loop.map((it, i) => (
            <div className="testi" key={i}>
              <blockquote>{it.quote}</blockquote>
              <div className="who">
                <div className="avatar">{it.initials}</div>
                <div className="meta">
                  <span className="name">{it.name}</span>
                  <span className="role">{it.role}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="testi-fade testi-fade-l"></div>
        <div className="testi-fade testi-fade-r"></div>
      </div>
    </section>
  );
}

function FAQ({ lang }) {
  const t = window.I18N[lang];
  const [open, setOpen] = useStateH(0);
  return (
    <section className="section" id="faq">
      <div className="wrap" style={{ maxWidth: 960 }}>
        <div className="section-head">
          <div><span className="eyebrow">{t.faq.eyebrow}</span></div>
          <div>
            <h2>{t.faq.title} <span className="accent">{t.faq.titleAccent}</span></h2>
          </div>
        </div>
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustStrip, StatsStrip, Services, Industries, Why, Process, Testimonials, FAQ });