// All sections: ticker, manifesto, ads, diff, growth, method, ai, process, calc, guarantee, faq, finalcta
function Ticker() {
  const { t } = window.useI18n();
  const items = ['ticker.1','ticker.2','ticker.3','ticker.4','ticker.5','ticker.6','ticker.7','ticker.8','ticker.9','ticker.10'];
  const all = [...items, ...items];
  return (
    <section className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {all.map((k, i) => (
          <span key={i} className="ticker-item">
            <i>—</i> {t(k)} <span className="dot"></span>
          </span>
        ))}
      </div>
    </section>
  );
}

function Manifesto() {
  const { t } = window.useI18n();
  return (
    <section className="manifesto">
      <div className="manifesto-grain" aria-hidden="true"></div>
      <div className="manifesto-inner">
        <p className="manifesto-quote">
          {t('manifesto.quote.a')} <span className="strike">{t('manifesto.quote.strike')}</span>{t('manifesto.quote.b')} <i>{t('manifesto.quote.profit')}</i>{t('manifesto.quote.dot')}
        </p>
        <p className="manifesto-sub">{t('manifesto.sub')}</p>
        <div className="manifesto-sig">{t('manifesto.sig')}</div>
      </div>
    </section>
  );
}

function AdsAnim() {
  const { t } = window.useI18n();
  return (
    <section className="ads-anim-section">
      <div className="ads-anim-grid">
        <div>
          <div className="eyebrow">{t('ads.label')}</div>
          <h2 className="section-title">{t('ads.title.a')} <em>{t('ads.title.em')}</em>{t('ads.title.b')}</h2>
          <p className="section-sub">{t('ads.sub')}</p>
          <ul style={{listStyle:'none', marginTop:32, display:'flex', flexDirection:'column', gap:14}}>
            {[1,2,3,4].map(i => (
              <li key={i} style={{display:'flex',gap:12,alignItems:'flex-start',fontSize:15,color:'var(--g1)',lineHeight:1.55}}>
                <span style={{color:'var(--green)',marginTop:3,flexShrink:0}}><window.CheckIcon/></span>
                {t(`ads.bullet.${i}`)}
              </li>
            ))}
          </ul>
        </div>
        <window.AdsAttractScene/>
      </div>
    </section>
  );
}

function Diff() {
  const { t } = window.useI18n();
  return (
    <section className="diff-section" id="diferencia">
      <div className="container">
        <div className="eyebrow eyebrow-cream">{t('diff.label')}</div>
        <h2 className="section-title dark">{t('diff.title.a')} <em>{t('diff.title.b')}</em><br/><em>{t('diff.title.c')}</em></h2>
        <p className="section-sub dark">{t('diff.sub')}</p>
        <div className="diff-grid">
          <div className="diff-col">
            <span className="diff-tag old">{t('diff.old.tag')}</span>
            <h3>{t('diff.old.h')}</h3>
            <ul className="diff-list bad">
              {[1,2,3,4,5,6].map(i => (
                <li key={i}><span className="icon">×</span>{t(`diff.old.${i}`)}</li>
              ))}
            </ul>
          </div>
          <div className="diff-col hi">
            <span className="diff-tag new">{t('diff.new.tag')}</span>
            <h3><i>{t('diff.new.h')}</i></h3>
            <ul className="diff-list good">
              {[1,2,3,4,5,6].map(i => (
                <li key={i}><span className="icon">✓</span>{t(`diff.new.${i}`)}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Growth() {
  const { t } = window.useI18n();
  return (
    <section className="growth-section">
      <div className="growth-grid">
        <div>
          <div className="eyebrow">{t('growth.label')}</div>
          <h2 className="section-title">{t('growth.title.a')} <em>{t('growth.title.em')}</em>{t('growth.title.b')}</h2>
          <p className="section-sub">{t('growth.sub')}</p>
          <div className="growth-stat">
            <div>
              <div className="gs-label">{t('growth.stat1.lbl')}</div>
              <div className="gs-num"><i>{t('growth.stat1.num')}</i></div>
            </div>
            <div>
              <div className="gs-label">{t('growth.stat2.lbl')}</div>
              <div className="gs-num"><span className="blue">{t('growth.stat2.num')}</span></div>
            </div>
          </div>
        </div>
        <window.GrowthChart/>
      </div>
    </section>
  );
}

function Method() {
  const { t } = window.useI18n();
  return (
    <section className="method-section" id="metodo">
      <div className="container">
        <div className="eyebrow">{t('method.label')}</div>
        <h2 className="section-title">{t('method.title.a')} <em>{t('method.title.em')}</em>{t('method.title.b')}</h2>
        <p className="section-sub">{t('method.sub')}</p>
        <div className="method-pillars">
          {[1,2,3,4].map(i => (
            <div key={i} className="method-card">
              <div className="num">0{i}</div>
              <h3>{t(`method.${i}.h.a`)} <i>{t(`method.${i}.h.em`)}</i></h3>
              <p>{t(`method.${i}.p`)}</p>
              <span className="tag">{t(`method.${i}.tag`)}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AISection() {
  const { t } = window.useI18n();
  const icons = [
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>,
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>,
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/><circle cx="12" cy="12" r="3"/></svg>,
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 10h18M8 4v14"/></svg>
  ];
  return (
    <section className="ai-section" id="ia">
      <div className="ai-grain" aria-hidden="true"></div>
      <div className="ai-inner">
        <div>
          <div className="eyebrow eyebrow-cream">{t('ai.label')}</div>
          <h2 className="section-title dark">{t('ai.title.a')}<br/><em>{t('ai.title.em')}</em>{t('ai.title.b')}</h2>
          <p className="section-sub dark">{t('ai.sub')}</p>
        </div>
        <div className="ai-feats">
          {[1,2,3,4].map(i => (
            <div key={i} className="ai-feat">
              <div className="ai-feat-icon">{icons[i-1]}</div>
              <div>
                <h4>{t(`ai.${i}.h.a`)} <i>{t(`ai.${i}.h.em`)}</i></h4>
                <p>{t(`ai.${i}.p`)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const { t } = window.useI18n();
  return (
    <section className="process-section" id="proceso">
      <div className="container">
        <div className="eyebrow">{t('process.label')}</div>
        <h2 className="section-title">{t('process.title.a')} <em>{t('process.title.em')}</em>{t('process.title.b')}</h2>
        <p className="section-sub">{t('process.sub')}</p>
        <div className="process-flow">
          <div className="process-line" aria-hidden="true"></div>
          {[1,2,3,4,5].map(i => (
            <div key={i} className="process-item">
              <div className="process-num"><i>0{i}</i></div>
              <div className="process-content">
                <div>
                  <div className="process-period">{t(`process.${i}.period`)}</div>
                  <h3>{t(`process.${i}.h.a`)} <i>{t(`process.${i}.h.em`)}</i></h3>
                </div>
                <p>{t(`process.${i}.p`)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FitCheck() {
  const { t } = window.useI18n();
  const yes = [1,2,3,4,5];
  const no = [1,2,3,4,5];
  return (
    <section className="fit-section" id="fit">
      <div className="container">
        <div className="eyebrow" style={{justifyContent:'center', display:'flex'}}>{t('fit.label')}</div>
        <h2 className="section-title" style={{textAlign:'center', maxWidth:900, margin:'0 auto 22px'}}>
          {t('fit.title.a')} <em>{t('fit.title.em')}</em>{t('fit.title.b')}
        </h2>
        <p className="section-sub" style={{textAlign:'center', margin:'0 auto'}}>{t('fit.sub')}</p>

        <div className="fit-grid">
          <div className="fit-col fit-yes">
            <div className="fit-head">
              <div className="fit-mark fit-mark-yes" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 11l5 5 9-10"/></svg>
              </div>
              <div>
                <div className="fit-tag fit-tag-yes">{t('fit.yes.tag')}</div>
                <h3 className="fit-h"><i>{t('fit.yes.h.a')}</i> {t('fit.yes.h.b')}</h3>
              </div>
            </div>
            <ul className="fit-list">
              {yes.map(i => (
                <li key={i}>
                  <span className="fit-li-icon yes" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l3 3 5-7"/></svg>
                  </span>
                  <span>{t(`fit.yes.${i}`)}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="fit-col fit-no">
            <div className="fit-head">
              <div className="fit-mark fit-mark-no" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 5l12 12M17 5L5 17"/></svg>
              </div>
              <div>
                <div className="fit-tag fit-tag-no">{t('fit.no.tag')}</div>
                <h3 className="fit-h">{t('fit.no.h.a')} <i>{t('fit.no.h.b')}</i></h3>
              </div>
            </div>
            <ul className="fit-list">
              {no.map(i => (
                <li key={i}>
                  <span className="fit-li-icon no" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"><path d="M3.5 3.5l7 7M10.5 3.5l-7 7"/></svg>
                  </span>
                  <span>{t(`fit.no.${i}`)}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="fit-footer">
          <p className="fit-foot-line">{t('fit.foot.line')}</p>
          <a href="https://calendly.com/diegoemanuel634/30min" target="_blank" rel="noopener" className="btn-primary btn-blue">
            <span>{t('fit.cta')}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M2 7h10M7 2l5 5-5 5"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function Guarantee() {
  const { t } = window.useI18n();
  return (
    <section className="guarantee-section" id="garantia">
      <div className="guarantee-card">
        <div className="inner">
          <div className="guarantee-seal">{t('g.seal')}</div>
          <h2 className="guarantee-title">{t('g.title.a')} <i>{t('g.title.em')}</i> {t('g.title.b')}<br/><span className="green">{t('g.title.green')}</span>{t('g.title.dot')}</h2>
          <p className="guarantee-sub">{t('g.sub')}</p>
          <ul className="guarantee-list">
            {[1,2,3,4].map(i => (
              <li key={i}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M3 9l4 4 8-8"/></svg>
                {t(`g.list.${i}`)}
              </li>
            ))}
          </ul>
          <a href="https://calendly.com/diegoemanuel634/30min" target="_blank" rel="noopener" className="btn-primary btn-blue">
            <span>{t('g.cta')}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M2 7h10M7 2l5 5-5 5"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const { t } = window.useI18n();
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq-section" id="faq">
      <div className="container-narrow">
        <div className="eyebrow" style={{justifyContent:'center', display:'flex'}}>{t('faq.label')}</div>
        <h2 className="section-title" style={{textAlign:'center'}}>{t('faq.title.a')} <em>{t('faq.title.em')}</em>{t('faq.title.b')}</h2>
        <div className="faq-list">
          {[1,2,3,4,5,6].map(i => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? 0 : i)}>
                <span className="faq-q-text">{t(`faq.${i}.q`)}</span>
                <span className="faq-icon">+</span>
              </button>
              <div className="faq-a"><p>{t(`faq.${i}.a`)}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const { t } = window.useI18n();
  return (
    <section className="finalcta-section">
      <div className="finalcta-bg" aria-hidden="true"></div>
      <div className="finalcta-content">
        <h2 className="finalcta-title">{t('fc.title.a')}<br/><i>{t('fc.title.em')}</i>{t('fc.title.dot')}</h2>
        <p className="finalcta-sub">{t('fc.sub')}</p>
        <div className="finalcta-actions">
          <a href="https://calendly.com/diegoemanuel634/30min" target="_blank" rel="noopener" className="btn-primary btn-blue">
            <span>{t('fc.cta')}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M2 7h10M7 2l5 5-5 5"/></svg>
          </a>
        </div>
        <div className="finalcta-spots">
          <span>{t('fc.spots.a')}</span>
          <span className="dots">
            <span className="dot taken"></span>
            <span className="dot taken"></span>
            <span className="dot"></span>
            <span className="dot"></span>
            <span className="dot"></span>
          </span>
          <strong>{t('fc.spots.b')}</strong>
          <span>{t('fc.spots.c')}</span>
        </div>
      </div>
    </section>
  );
}

function About() {
  const { t } = window.useI18n();
  return (
    <section className="about-section" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-portrait">
            <div className="about-portrait-frame" aria-hidden="true">
              <div className="about-portrait-initials">DE</div>
              <div className="about-portrait-tag">
                <span className="about-portrait-dot"></span>
                <span>{t('about.portrait.tag')}</span>
              </div>
            </div>
          </div>
          <div className="about-body">
            <div className="eyebrow">{t('about.label')}</div>
            <h2 className="section-title about-title">
              {t('about.title.a')} <em>{t('about.title.em')}</em>{t('about.title.b')}
            </h2>
            <div className="about-quote-mark" aria-hidden="true">"</div>
            <p className="about-lede">{t('about.lede')}</p>
            <p className="about-p">{t('about.p1')}</p>
            <p className="about-p">{t('about.p2')}</p>

            <div className="about-stats">
              <div className="about-stat">
                <div className="about-stat-num">{t('about.stat1.num')}</div>
                <div className="about-stat-lbl">{t('about.stat1.lbl')}</div>
              </div>
              <div className="about-stat">
                <div className="about-stat-num">{t('about.stat2.num')}</div>
                <div className="about-stat-lbl">{t('about.stat2.lbl')}</div>
              </div>
              <div className="about-stat">
                <div className="about-stat-num">{t('about.stat3.num')}</div>
                <div className="about-stat-lbl">{t('about.stat3.lbl')}</div>
              </div>
            </div>

            <div className="about-sign">
              <div className="about-sign-name">{t('about.sign.name')}</div>
              <div className="about-sign-role">{t('about.sign.role')}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Ticker = Ticker;
window.Manifesto = Manifesto;
window.AdsAnim = AdsAnim;
window.Diff = Diff;
window.Growth = Growth;
window.Method = Method;
window.AISection = AISection;
window.Process = Process;
window.FitCheck = FitCheck;
window.Guarantee = Guarantee;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.About = About;