/* global React, Logo, Reveal, TypeReveal, HeroParticles, Marquee */
const { useState: useStateH } = React;

function Hero({ t, setPage }) {
  return (
    <section className="hero">
      <HeroParticles />
      <div className="container">
        <Reveal>
          <div className="hero-meta">
            {t.hero.meta.map((m, i) => (
              <div key={i} className="hero-meta-block">
                <span className="k">{m.k}</span>
                <span className="v">{m.v}</span>
              </div>
            ))}
          </div>
        </Reveal>

        <div className="eyebrow" style={{marginBottom: '2rem'}}>{t.hero.eyebrow}</div>

        <h1 className="hero-headline">
          <TypeReveal text={t.hero.headline_a + ' '} />
          <Reveal as="span" className="accent reveal-inline" delay={300}>{t.hero.headline_b}</Reveal>
          <br />
          <TypeReveal text={t.hero.headline_c + ' '} delay={600} />
          <TypeReveal text={t.hero.headline_d} className="accent-2" delay={900} />
        </h1>

        <Reveal delay={1200}>
          <div className="hero-sub">
            <div>
              <p>{t.hero.sub}</p>
            </div>
            <div>
              <p style={{marginBottom: '2rem'}}>{t.hero.sub2}</p>
              <div className="hero-cta">
                <a href="#" className="btn btn-primary" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
                  <span>{t.hero.cta_primary}</span>
                  <span className="arrow">→</span>
                </a>
                <a href="#" className="btn" onClick={(e) => { e.preventDefault(); setPage('services'); }}>
                  <span>{t.hero.cta_secondary}</span>
                  <span className="arrow">→</span>
                </a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Pillars({ t, setPage }) {
  return (
    <section id="pillars">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="label">
              <span className="num">{t.pillars.eyebrow}</span>
            </div>
            <div>
              <h2 className="display-lg">
                {t.pillars.title}<br/>
                <span style={{color: 'var(--fg-2)'}}>{t.pillars.title2}</span>
              </h2>
              <p style={{marginTop: '1.5rem', maxWidth: '50ch', color: 'var(--fg-2)'}}>{t.pillars.desc}</p>
            </div>
          </div>
        </Reveal>

        <div className="pillars">
          {t.pillars.items.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="pillar" onClick={() => setPage('services')}>
                <div className="pillar-num">{p.num}</div>
                <div>
                  <h3 className="pillar-title">{p.title}</h3>
                  <div className="pillar-tags">
                    {p.tags.map((tag, j) => <span key={j} className="tag">{tag}</span>)}
                  </div>
                </div>
                <p className="pillar-desc">{p.desc}</p>
                <div className="pillar-arrow">→</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Cases({ t }) {
  return (
    <section>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="label">
              <span className="num">{t.cases.eyebrow}</span>
            </div>
            <div>
              <h2 className="display-lg">{t.cases.title}</h2>
              <p style={{marginTop: '1.5rem', maxWidth: '50ch', color: 'var(--fg-2)'}}>{t.cases.desc}</p>
            </div>
          </div>
        </Reveal>
        <div className="cases">
          {t.cases.items.map((c, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="case">
                <div className="case-image">
                  <span className="placeholder-tag">{c.tag}</span>
                </div>
                <div className="case-body">
                  <div className="case-meta">
                    <span>{c.industry}</span>
                    <span>{c.year}</span>
                  </div>
                  <h3 className="case-title">{c.title}</h3>
                  <div className="case-results">
                    {c.results.map((r, j) => (
                      <div key={j} className="case-result">
                        <div className="v">{r.v}</div>
                        <div className="l">{r.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="label">
              <span className="num">{t.process.eyebrow}</span>
            </div>
            <div>
              <h2 className="display-lg">
                {t.process.title}<br/>
                <span style={{color: 'var(--fg-2)'}}>{t.process.title2}</span>
              </h2>
              <p style={{marginTop: '1.5rem', maxWidth: '50ch', color: 'var(--fg-2)'}}>{t.process.desc}</p>
            </div>
          </div>
        </Reveal>
        <div className="process">
          {t.process.steps.map((s, i) => (
            <Reveal key={i} delay={i * 100} className="process-step in">
              <div className="step-num">{s.num}</div>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-desc">{s.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stack({ t }) {
  return (
    <section>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="label">
              <span className="num">{t.stack.eyebrow}</span>
            </div>
            <div>
              <h2 className="display-lg">{t.stack.title}</h2>
              <p style={{marginTop: '1.5rem', maxWidth: '50ch', color: 'var(--fg-2)'}}>{t.stack.desc}</p>
            </div>
          </div>
        </Reveal>
        <div className="stack">
          {t.stack.items.map((s, i) => (
            <div key={i} className="stack-item">
              <div className="stack-glyph">{s.glyph}</div>
              <div className="stack-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Metrics({ t }) {
  return (
    <section>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="label">
              <span className="num">{t.metrics.eyebrow}</span>
            </div>
            <div>
              <h2 className="display-lg">{t.metrics.title}</h2>
            </div>
          </div>
        </Reveal>
        <div className="metrics">
          {t.metrics.items.map((m, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="metric">
                <div className="metric-num">{m.num}<span className="unit">{m.unit}</span></div>
                <div className="metric-label">{m.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials({ t }) {
  return (
    <section>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="label">
              <span className="num">{t.testimonials.eyebrow}</span>
            </div>
            <div>
              <h2 className="display-lg">{t.testimonials.title}</h2>
            </div>
          </div>
        </Reveal>
        <div className="testimonials">
          {t.testimonials.items.map((tt, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="testimonial">
                <blockquote>"{tt.quote}"</blockquote>
                <div className="testimonial-author">
                  <div className="avatar">{tt.name.split(' ').map(p => p[0]).join('')}</div>
                  <div className="info">
                    <span className="name">{tt.name}</span>
                    <span className="role">{tt.role}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = useStateH(0);
  return (
    <section>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="label">
              <span className="num">{t.faq.eyebrow}</span>
            </div>
            <div>
              <h2 className="display-lg">{t.faq.title}</h2>
            </div>
          </div>
        </Reveal>
        <div className="faq">
          {t.faq.items.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="icon">+</span>
              </button>
              <div className="faq-a">
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ t, setPage }) {
  return (
    <section className="cta-final">
      <div className="container-tight" style={{position: 'relative'}}>
        <Reveal>
          <div className="eyebrow" style={{marginBottom: '2rem'}}>— Próximo passo</div>
          <h2 className="cta-final-headline">
            {t.cta.headline_a}<br/>
            <span style={{color: 'var(--violet)'}}>{t.cta.headline_b}</span><br/>
            {t.cta.headline_c}
          </h2>
          <p style={{maxWidth: '46ch', margin: '0 auto 3rem', color: 'var(--fg-2)', fontSize: '1.1rem'}}>{t.cta.sub}</p>
          <a href="#" className="btn btn-primary" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
            <span>{t.cta.btn}</span>
            <span className="arrow">→</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function HomePage({ t, setPage }) {
  return (
    <>
      <Hero t={t} setPage={setPage} />
      <Marquee items={t.marquee} />
      <Pillars t={t} setPage={setPage} />
      <Cases t={t} />
      <Process t={t} />
      <Stack t={t} />
      <Metrics t={t} />
      <Testimonials t={t} />
      <FAQ t={t} />
      <FinalCTA t={t} setPage={setPage} />
    </>
  );
}

Object.assign(window, { HomePage });