// GrowthPad — DIY platform page + reusable home section. (i18n)
// GrowthPad is Evveland's self-serve product: AI-powered Telegram miniapp builder.

const GP_URL = 'https://growthpad.es';
const GP_DEMO_URL = 'https://calendly.com/evveland';
const GP_PINK = '#FF28DC';
const GP_VIOLET = '#7C5CFF';

function CreateHomeSection({ setPage }) {
  const t = useT();
  return (
    <section className="sec" style={{ position: 'relative' }}>
      <div className="wrap">
        <Reveal>
          <div style={{
            position: 'relative',
            borderRadius: 22,
            overflow: 'hidden',
            border: '1px solid rgba(255,40,220,0.25)',
            background: 'linear-gradient(135deg, #1a0c2e 0%, #0c0e15 70%)',
          }}>
            <div style={{ position: 'absolute', top: -120, right: -120, width: 480, height: 480, background: `radial-gradient(circle, ${GP_PINK}22 0%, transparent 65%)`, pointerEvents: 'none' }}/>
            <div style={{ position: 'absolute', bottom: -160, left: -120, width: 520, height: 520, background: `radial-gradient(circle, ${GP_VIOLET}22 0%, transparent 65%)`, pointerEvents: 'none' }}/>

            <div className="grid g-2" style={{ gap: 0, alignItems: 'stretch', position: 'relative' }}>
              <div style={{ padding: '56px 48px' }}>
                <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
                  <span className="tag" style={{ background: 'rgba(255,40,220,0.14)', color: GP_PINK, borderColor: 'rgba(255,40,220,0.4)' }}>{t('create.tagBeta')}</span>
                  <span className="tag">{t('create.tagDiy')}</span>
                </div>
                <div className="eyebrow" style={{ color: 'var(--text-3)' }}>{t('create.heroEyebrow')}</div>
                <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', letterSpacing: '-0.03em', lineHeight: 0.98, marginTop: 16 }}>
                  <span style={{ background: `linear-gradient(90deg, ${GP_PINK} 0%, ${GP_VIOLET} 100%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{t('create.title1')}</span>
                  <br/>
                  <span style={{ color: 'var(--text)' }}>{t('create.title2a')}<br/>{t('create.title2b')}</span>
                </h2>
                <p style={{ fontSize: 17, color: 'var(--text-2)', marginTop: 22, maxWidth: 520 }}>
                  {t('create.body')}
                </p>

                <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                  <a className="btn btn-primary btn-lg" href={GP_URL} target="_blank" rel="noopener" style={{ background: GP_PINK, color: '#0c0e15', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                    {t('cta.tryCreate')} <span className="chev">→</span>
                  </a>
                  <button className="btn btn-ghost btn-lg" onClick={() => setPage('create')}>
                    {t('create.whatsInside')}
                  </button>
                </div>

                <div style={{ display: 'flex', gap: 18, alignItems: 'center', marginTop: 28, flexWrap: 'wrap' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>{t('create.needBuiltForYou')}</span>
                  <button className="mono" onClick={() => setPage('services')} style={{ background: 'transparent', border: 'none', color: GP_PINK, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', cursor: 'pointer', padding: 0 }}>
                    {t('create.studioDfy')} <span className="chev">→</span>
                  </button>
                </div>
              </div>

              <div style={{ position: 'relative', minHeight: 480, padding: '40px 24px 0 24px', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', overflow: 'hidden' }}>
                <div style={{ position: 'relative', width: '100%', maxWidth: 560, transform: 'rotate(-2deg)', borderRadius: 16, overflow: 'hidden', border: '1px solid var(--line-2)', boxShadow: '0 40px 80px -30px rgba(0,0,0,0.6)' }}>
                  <img src="assets/create-onboarding-1.png" alt="GrowthPad — Build your audience economy" style={{ width: '100%', height: 'auto', display: 'block' }}/>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Create({ setPage }) {
  const t = useT();
  const FEATURES = [
    { n: '01', title: t('create.feat1.title'), body: t('create.feat1.body'), img: 'assets/create-scenes.png' },
    { n: '02', title: t('create.feat2.title'), body: t('create.feat2.body'), img: 'assets/create-images.png' },
    { n: '03', title: t('create.feat3.title'), body: t('create.feat3.body'), img: 'assets/create-theme.png' },
    { n: '04', title: t('create.feat4.title'), body: t('create.feat4.body'), img: 'assets/create-telegram.png' },
  ];
  return (
    <div className="page">
      <Breadcrumbs setPage={setPage} current={t('crumb.create')}/>

      <section className="sec sec-after-crumbs" style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -200, right: -200, width: 700, height: 700, background: `radial-gradient(circle, ${GP_PINK}22 0%, transparent 60%)`, pointerEvents: 'none' }}/>
        <div style={{ position: 'absolute', bottom: -200, left: -200, width: 600, height: 600, background: `radial-gradient(circle, ${GP_VIOLET}22 0%, transparent 60%)`, pointerEvents: 'none' }}/>

        <div className="wrap">
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
              <span className="pulse-dot" style={{ background: GP_PINK }}/>
              <span className="mono" style={{ fontSize: 12, color: 'var(--text-2)', letterSpacing: '0.12em' }}>{t('create.statusBadge')}</span>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <div className="eyebrow" style={{ color: GP_PINK }}>{t('create.pageEyebrow')}</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 130px)', marginTop: 20, maxWidth: 1100, letterSpacing: '-0.04em', lineHeight: 0.95 }}>
              {t('create.pageTitle1')}<br/>
              <span style={{ background: `linear-gradient(90deg, ${GP_PINK} 0%, ${GP_VIOLET} 100%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{t('create.pageTitle2')}</span>
            </h1>
          </Reveal>

          <Reveal delay={160}>
            <p style={{ fontSize: 20, color: 'var(--text-2)', maxWidth: 660, marginTop: 28, lineHeight: 1.5 }}>
              {t('create.pageSub')}
            </p>
          </Reveal>

          <Reveal delay={240}>
            <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
              <a className="btn btn-lg" href={GP_URL} target="_blank" rel="noopener" style={{ background: GP_PINK, color: '#0c0e15', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
                {t('create.seePricing')} <span className="chev">→</span>
              </a>
              <a className="btn btn-ghost btn-lg" href={GP_URL} target="_blank" rel="noopener" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                {t('create.visit')}
              </a>
            </div>
          </Reveal>

          <Reveal delay={320}>
            <div style={{ marginTop: 64, borderRadius: 18, overflow: 'hidden', border: '1px solid var(--line-2)', boxShadow: '0 60px 120px -40px rgba(0,0,0,0.7)' }}>
              <img src="assets/create-onboarding-1.png" alt="GrowthPad" style={{ width: '100%', display: 'block' }}/>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">{t('create.insideEyebrow')}</div>
              <h2 style={{ marginTop: 16 }}>{t('create.insideTitle1')}<br/><span style={{ color: GP_PINK }}>{t('create.insideTitle2')}</span></h2>
            </div>
            <p style={{ maxWidth: 420, color: 'var(--text-2)', fontSize: 17 }}>
              {t('create.insideBody')}
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {FEATURES.map((f, i) => (
              <Reveal key={f.n} delay={i * 60}>
                <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
                  <div className="grid" style={{ gridTemplateColumns: i % 2 === 0 ? '1fr 1.2fr' : '1.2fr 1fr', gap: 0, alignItems: 'stretch' }}>
                    {i % 2 === 0 ? (
                      <>
                        <div style={{ padding: '40px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderRight: '1px solid var(--line)' }}>
                          <div className="mono" style={{ fontSize: 11, color: GP_PINK, letterSpacing: '0.15em' }}>{t('create.step')} {f.n}</div>
                          <h3 className="display" style={{ fontSize: 'clamp(26px, 3vw, 36px)', letterSpacing: '-0.02em', marginTop: 12 }}>{f.title}</h3>
                          <p style={{ fontSize: 16, color: 'var(--text-2)', marginTop: 12, maxWidth: 460 }}>{f.body}</p>
                        </div>
                        <div style={{ background: '#0a0a0d', padding: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 320 }}>
                          <img src={f.img} alt={f.title} style={{ width: '100%', maxWidth: 600, borderRadius: 10, border: '1px solid var(--line)', display: 'block' }}/>
                        </div>
                      </>
                    ) : (
                      <>
                        <div style={{ background: '#0a0a0d', padding: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 320, borderRight: '1px solid var(--line)' }}>
                          <img src={f.img} alt={f.title} style={{ width: '100%', maxWidth: 600, borderRadius: 10, border: '1px solid var(--line)', display: 'block' }}/>
                        </div>
                        <div style={{ padding: '40px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                          <div className="mono" style={{ fontSize: 11, color: GP_PINK, letterSpacing: '0.15em' }}>{t('create.step')} {f.n}</div>
                          <h3 className="display" style={{ fontSize: 'clamp(26px, 3vw, 36px)', letterSpacing: '-0.02em', marginTop: 12 }}>{f.title}</h3>
                          <p style={{ fontSize: 16, color: 'var(--text-2)', marginTop: 12, maxWidth: 460 }}>{f.body}</p>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="sec" style={{ background: 'var(--ink-0)' }}>
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">{t('create.vsEyebrow')}</div>
              <h2 style={{ marginTop: 16 }}>{t('create.vsTitle1')}<br/><span className="u-accent">{t('create.vsTitle2')}</span></h2>
            </div>
            <p style={{ maxWidth: 420, color: 'var(--text-2)', fontSize: 17 }}>
              {t('create.vsBody')}
            </p>
          </div>

          <div className="grid g-2" style={{ gap: 24 }}>
            <Reveal>
              <div className="card" style={{ padding: 36, borderColor: 'rgba(255,40,220,0.3)', background: 'linear-gradient(180deg, rgba(255,40,220,0.04), var(--ink-3))', height: '100%' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <span className="tag" style={{ background: 'rgba(255,40,220,0.14)', color: GP_PINK, borderColor: 'rgba(255,40,220,0.4)' }}>{t('create.tagDiy')}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.14em' }}>{t('create.vsCreateFrom')}</span>
                </div>
                <h3 className="display" style={{ fontSize: 32, letterSpacing: '-0.02em' }}>{t('create.vsCreateName')}</h3>
                <p style={{ color: 'var(--text-2)', fontSize: 15, marginTop: 12 }}>{t('create.vsCreateBody')}</p>
                <a className="btn btn-lg" href={GP_URL} target="_blank" rel="noopener" style={{ background: GP_PINK, color: '#0c0e15', textDecoration: 'none', width: '100%', justifyContent: 'center', display: 'flex', marginTop: 24 }}>
                  {t('create.seePricing')} <span className="chev">→</span>
                </a>
              </div>
            </Reveal>

            <Reveal delay={80}>
              <div className="card" style={{ padding: 36, height: '100%' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <span className="tag tag-flag">{t('create.vsTagDfy')}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.14em' }}>{t('create.vsStudioCustom')}</span>
                </div>
                <h3 className="display" style={{ fontSize: 32, letterSpacing: '-0.02em' }}>{t('create.vsStudioName')}</h3>
                <p style={{ color: 'var(--text-2)', fontSize: 15, marginTop: 12 }}>{t('create.vsStudioBody')}</p>
                <button className="btn btn-primary btn-lg" onClick={() => setPage('contact')} style={{ width: '100%', justifyContent: 'center', display: 'flex', marginTop: 24 }}>
                  {t('cta.discoveryCall')} <span className="chev">→</span>
                </button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <Reveal>
            <div style={{
              position: 'relative',
              padding: '72px 48px',
              borderRadius: 22,
              border: '1px solid rgba(255,40,220,0.3)',
              background: `radial-gradient(ellipse at 30% 30%, ${GP_PINK}22 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, ${GP_VIOLET}22 0%, transparent 60%), var(--ink-3)`,
              overflow: 'hidden',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
                <div>
                  <div className="eyebrow" style={{ color: GP_PINK }}>{t('create.ctaEyebrow')}</div>
                  <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', marginTop: 14, maxWidth: 700, letterSpacing: '-0.03em' }}>
                    {t('create.ctaTitle')}
                  </h2>
                  <p style={{ color: 'var(--text-2)', fontSize: 16, marginTop: 14, maxWidth: 540 }}>
                    {t('create.ctaBody')}
                  </p>
                </div>
                <a className="btn btn-lg" href={GP_URL} target="_blank" rel="noopener" style={{ background: GP_PINK, color: '#0c0e15', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600, fontSize: 16, padding: '20px 28px' }}>
                  {t('create.seePricing')} <span className="chev">→</span>
                </a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Create, CreateHomeSection });