// Monjez landing — The Offer (90-day phase timeline) + Guarantee
const { useState: useStateOffer } = React;

function OfferPhases() {
  const t = window.useT();
  const O = t.offer;
  const phases = O.phases;
  const [open, setOpen] = useStateOffer(0);
  return (
    <section id="offer" style={{ position: 'relative', padding: '96px 0', borderTop: '1px solid var(--border-subtle)' }}>
      <window.Container>
        <window.Reveal>
          <window.SectionHead align="left" maxTitle={760}
            eyebrow={O.eyebrow}
            title={<span>{O.title.pre}<window.Accent>{O.title.accent}</window.Accent>{O.title.post}</span>}
            sub={O.sub}
          />
        </window.Reveal>

        {/* offer value band */}
        <window.Reveal delay={0.05}>
          <div className="mj-offerval" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 16 }}>
            <div style={{ borderRadius: 'var(--radius-lg)', border: '1px solid var(--teal-signal)', background: 'radial-gradient(130% 160% at 0% 0%, rgba(20,184,166,0.18), transparent 60%), var(--graphite)', padding: '24px 26px', display: 'flex', alignItems: 'center', gap: 18 }}>
              <span style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 14, display: 'grid', placeItems: 'center', background: 'var(--teal-soft)', border: '1px solid var(--teal-signal)', color: 'var(--teal-signal)' }}>
                <window.IconTrending size={26} />
              </span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3.4vw,38px)', letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--teal-signal)' }}>{O.value.amount}</div>
                <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 8 }}>{O.value.amountLabel}</div>
              </div>
            </div>
            <div style={{ borderRadius: 'var(--radius-lg)', border: '1px solid var(--blue-400)', background: 'radial-gradient(130% 160% at 100% 0%, rgba(37,99,235,0.18), transparent 60%), var(--graphite)', padding: '24px 26px', display: 'flex', alignItems: 'center', gap: 18 }}>
              <span style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 14, display: 'grid', placeItems: 'center', background: 'var(--blue-soft)', border: '1px solid var(--blue-400)', color: 'var(--blue-400)' }}>
                <window.IconUsers size={26} />
              </span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(18px,2vw,22px)', letterSpacing: '-0.02em', lineHeight: 1.2, color: 'var(--cloud-white)' }}>{O.value.retainTitle}</div>
                <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginTop: 8 }}>{O.value.retainLabel}</div>
              </div>
            </div>
          </div>
        </window.Reveal>

        <div style={{ marginTop: 52 }}>
          {phases.map((p, i) => {
            const isOpen = open === i;
            const Ic = window[p.icon];
            const last = i === phases.length - 1;
            return (
              <window.Reveal key={i} delay={i * 0.04}>
                <div style={{ display: 'grid', gridTemplateColumns: '44px 1fr', gap: 18 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <span style={{ width: 36, height: 36, borderRadius: '50%', display: 'grid', placeItems: 'center', flexShrink: 0,
                      background: isOpen ? 'var(--blue-soft)' : 'var(--graphite)', border: '1px solid ' + (isOpen ? 'var(--blue-400)' : 'var(--border-strong)'),
                      color: isOpen ? 'var(--blue-400)' : 'var(--text-muted)', transition: 'all .2s', boxShadow: isOpen ? '0 0 0 5px var(--blue-soft)' : 'none' }}>
                      <Ic size={17} />
                    </span>
                    {!last && <span style={{ flex: 1, width: 2, minHeight: 26, background: 'var(--border-subtle)', marginTop: 4 }} />}
                  </div>
                  <div style={{ paddingBottom: last ? 0 : 30 }}>
                    <button onClick={() => setOpen(isOpen ? -1 : i)}
                      style={{ width: '100%', textAlign: 'start', background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--cloud-white)', display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--blue-400)' }}>{p.tag}</span>
                          <span style={{ fontSize: 12.5, color: 'var(--slate-gray)' }}>{p.week}</span>
                        </div>
                        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(22px,2.6vw,30px)', letterSpacing: '-0.02em', lineHeight: 1.15, color: 'var(--cloud-white)' }}>{p.title}</div>
                      </div>
                      <span style={{ width: 34, height: 34, flexShrink: 0, borderRadius: '50%', border: '1px solid var(--border-strong)', display: 'grid', placeItems: 'center', color: 'var(--slate-gray)', background: 'var(--white-04)', transition: 'all .2s', marginTop: 4 }}>
                        {isOpen ? <window.IconMinus size={16} /> : <window.IconPlus size={16} />}
                      </span>
                    </button>
                    <p style={{ margin: '12px 0 0', fontSize: 15.5, lineHeight: 1.65, color: 'var(--text-secondary)', maxWidth: 620 }}>{p.body}</p>
                    <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: 'grid-template-rows .35s cubic-bezier(.4,0,.2,1)' }}>
                      <div style={{ overflow: 'hidden' }}>
                        <div style={{ marginTop: 16, borderRadius: 'var(--radius-lg)', border: '1px solid var(--blue-400)', background: 'radial-gradient(120% 140% at 0% 0%, rgba(37,99,235,0.14), transparent 60%), var(--graphite)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14, maxWidth: 620 }}>
                          <window.IconKey size={22} stroke="var(--teal-signal)" style={{ flexShrink: 0 }} />
                          <div>
                            <div style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--text-muted)', marginBottom: 4 }}>{O.walkaway}</div>
                            <div style={{ fontSize: 15.5, fontWeight: 600, color: 'var(--cloud-white)', lineHeight: 1.5 }}>{p.walk}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </window.Reveal>
            );
          })}
        </div>
      </window.Container>
    </section>
  );
}

function Guarantee() {
  const { Button, Badge } = window.MonjezDesignSystem_019de9;
  const t = window.useT();
  const G = t.guarantee;
  return (
    <section id="guarantee" style={{ position: 'relative', padding: '40px 0 96px' }}>
      <window.Container>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--border-strong)',
          background: 'radial-gradient(70% 90% at 50% 0%, rgba(37,99,235,0.26), transparent 60%), radial-gradient(50% 70% at 50% 110%, rgba(20,184,166,0.14), transparent 60%), var(--graphite-600)',
          padding: 'clamp(48px, 7vw, 88px) 28px', textAlign: 'center' }}>
          <window.Reveal>
            <div style={{ display: 'inline-flex', marginBottom: 26 }}><Badge tone="accent" dot>{G.badge}</Badge></div>
          </window.Reveal>
          <window.Reveal delay={0.05}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(32px, 5.6vw, 66px)', lineHeight: 1.06, letterSpacing: '-0.035em', margin: '0 auto', maxWidth: 900, textWrap: 'balance' }}>
              {G.h.pre}<window.Accent>{G.h.accent}</window.Accent>{G.h.post}
            </h2>
          </window.Reveal>
          <window.Reveal delay={0.1}>
            <p style={{ fontSize: 'clamp(16px,1.8vw,18px)', lineHeight: 1.65, color: 'var(--text-secondary)', maxWidth: 600, margin: '24px auto 0' }}>
              {G.sub}
            </p>
          </window.Reveal>
          <window.Reveal delay={0.15}>
            <div style={{ marginTop: 34, display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" iconRight={<window.IconArrowRight size={18} />} onClick={() => window.scrollToId('apply')}>{G.ctaPrimary}</Button>
              <Button variant="secondary" size="lg" onClick={() => window.scrollToId('build')}>{G.ctaSecondary}</Button>
            </div>
          </window.Reveal>
        </div>
      </window.Container>
    </section>
  );
}

Object.assign(window, { OfferPhases, Guarantee });