// Monjez landing — FAQ + Apply (multi-step) + Footer
const { useState: useStateApply } = React;

function FAQ() {
  const { Button } = window.MonjezDesignSystem_019de9;
  const t = window.useT();
  const F = t.faq;
  const [open, setOpen] = useStateApply(0);
  return (
    <section id="faq" style={{ position: 'relative', padding: '96px 0', borderTop: '1px solid var(--border-subtle)' }}>
      <window.Container>
        <div className="mj-faq" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 48, alignItems: 'start' }}>
          <window.Reveal>
            <div style={{ position: 'sticky', top: 100 }}>
              <window.Eyebrow style={{ marginBottom: 16 }}>{F.eyebrow}</window.Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(30px,4vw,44px)', lineHeight: 1.1, letterSpacing: '-0.03em', margin: 0 }}>
                {F.titleLines[0]}<br />{F.titleLines[1]}
              </h2>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: 340, margin: '20px 0 24px' }}>{F.sub}</p>
              <Button variant="secondary" size="md" iconRight={<window.IconArrowRight size={16} />} onClick={() => window.scrollToId('apply')}>{F.btn}</Button>
            </div>
          </window.Reveal>
          <window.Reveal delay={0.05}>
            <div>
              {F.items.map((f, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} style={{ borderTop: '1px solid var(--border-subtle)', borderBottom: i === F.items.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
                    <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '22px 0', textAlign: 'start' }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(17px,2vw,20px)', color: 'var(--cloud-white)', letterSpacing: '-0.01em' }}>{f.q}</span>
                      <span style={{ width: 32, height: 32, flexShrink: 0, borderRadius: '50%', border: '1px solid ' + (isOpen ? 'var(--blue-400)' : 'var(--border-strong)'), display: 'grid', placeItems: 'center', color: isOpen ? 'var(--blue-400)' : 'var(--slate-gray)', transition: 'all .2s' }}>
                        {isOpen ? <window.IconMinus size={15} /> : <window.IconPlus size={15} />}
                      </span>
                    </button>
                    <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: 'grid-template-rows .3s ease' }}>
                      <div style={{ overflow: 'hidden' }}>
                        <p style={{ margin: 0, paddingBottom: 24, paddingInlineEnd: 48, fontSize: 15, lineHeight: 1.65, color: 'var(--text-secondary)' }}>{f.a}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </window.Reveal>
        </div>
      </window.Container>
    </section>
  );
}

function ApplyForm() {
  const { Button } = window.MonjezDesignSystem_019de9;
  const t = window.useT();
  const { lang } = window.useLang();
  const AP = t.apply;
  return (
    <section id="apply" style={{ position: 'relative', padding: '96px 0 56px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(55% 45% at 50% 0%, rgba(37,99,235,0.24), transparent 60%), radial-gradient(40% 50% at 50% 110%, rgba(20,184,166,0.10), transparent 60%)' }} />
      <window.Container narrow style={{ position: 'relative' }}>
        <window.Reveal>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <window.Eyebrow style={{ marginBottom: 16 }}>{AP.eyebrow}</window.Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(30px,5vw,52px)', lineHeight: 1.08, letterSpacing: '-0.03em', margin: 0 }}>
              {AP.title.pre}<window.Accent>{AP.title.accent}</window.Accent>{AP.title.post}
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.65, color: 'var(--text-secondary)', maxWidth: 520, margin: '18px auto 0' }}>{AP.sub}</p>
          </div>
        </window.Reveal>

        <window.Reveal delay={0.08}>
          {window.MonjezApply ? <window.MonjezApply embed lang={lang} /> : null}
        </window.Reveal>
      </window.Container>
    </section>
  );
}

function Qualified({ onRestart }) {
  const { Button } = window.MonjezDesignSystem_019de9;
  const t = window.useT();
  const R = t.apply.result;
  const url = window.BOOKING_URL || '#';
  const external = /^https?:/.test(url);
  const [slot, setSlot] = useStateApply(R.slots[2]);
  return (
    <div style={{ animation: 'mjFadeUp .4s ease', flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
        <span style={{ width: 44, height: 44, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', background: 'var(--teal-soft)', border: '1px solid var(--teal-signal)', color: 'var(--teal-signal)' }}>
          <window.IconCheckCircle size={24} />
        </span>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--teal-signal)' }}>{R.tag}</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(22px,3vw,28px)', letterSpacing: '-0.02em', margin: '2px 0 0' }}>{R.title}</h3>
        </div>
      </div>
      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-secondary)', margin: '12px 0 22px', maxWidth: 480 }}>{R.body}</p>
      <div style={{ display: 'flex', gap: 9, flexWrap: 'wrap', marginBottom: 22 }}>
        {R.slots.map((s) => {
          const on = slot === s;
          return (
            <button key={s} onClick={() => setSlot(s)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 15px', cursor: 'pointer', borderRadius: 'var(--radius-md)',
              border: '1px solid ' + (on ? 'var(--teal-signal)' : 'var(--border-strong)'), background: on ? 'var(--teal-soft)' : 'var(--surface-sunken)', transition: 'all .15s' }}>
              <window.IconCalendar size={15} stroke={on ? 'var(--teal-signal)' : 'var(--slate-gray)'} />
              <span style={{ fontSize: 14, color: on ? 'var(--cloud-white)' : 'var(--text-secondary)', fontWeight: on ? 600 : 400 }}>{s}</span>
            </button>
          );
        })}
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
        <a href={url} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} style={{ textDecoration: 'none' }}>
          <Button variant="primary" size="lg" iconRight={<window.IconArrowRight size={18} />}>{R.book}{slot}</Button>
        </a>
        <button onClick={onRestart} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--slate-gray)', fontSize: 14, fontWeight: 500 }}>{R.startOver}</button>
      </div>
    </div>
  );
}

function Footer() {
  const t = window.useT();
  const FO = t.footer;
  return (
    <footer style={{ borderTop: '1px solid var(--border-subtle)', background: 'var(--midnight)' }}>
      <window.Container style={{ padding: '64px 28px 28px' }}>
        <div className="mj-footer" style={{ display: 'grid', gridTemplateColumns: '1.8fr 1fr 1fr 1.4fr', gap: 28 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <img src="assets/logo-mark.svg" width="26" height="26" alt="Monjez" />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19 }}>Monjez</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.6, maxWidth: 280, margin: 0 }}>{FO.tagline}</p>
          </div>
          {Object.entries(FO.cols).map(([h, items]) => (
            <div key={h}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14, color: 'var(--cloud-white)' }}>{h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {items.map(([label, id]) => (
                  <a key={id} href={'#' + id} onClick={(e) => { e.preventDefault(); window.scrollToId(id); }} style={{ fontSize: 14, color: 'var(--slate-gray)' }}>{label}</a>
                ))}
              </div>
            </div>
          ))}
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14, color: 'var(--cloud-white)' }}>{FO.ctaTitle}</div>
            <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 14px' }}>{FO.ctaText}</p>
            <window.MJBtn label={FO.ctaBtn} />
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--border-subtle)', marginTop: 40, paddingTop: 22, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 12.5, color: 'var(--text-muted)' }}>
          <span>{FO.legalLeft}</span>
          <span>{FO.legalRight}</span>
        </div>
      </window.Container>
    </footer>
  );
}

function MJBtn({ label }) {
  const { Button } = window.MonjezDesignSystem_019de9;
  return <Button variant="primary" size="md" iconRight={<window.IconArrowRight size={16} />} onClick={() => window.scrollToId('apply')}>{label}</Button>;
}

Object.assign(window, { FAQ, ApplyForm, Footer, MJBtn });