// FAQ + Contact Form + Pricing + Footer
const FAQS = [
{ q: 'Quando começa esta imersão?', a: 'A próxima edição começa a 2 de fevereiro de 2027 e termina a 16 de março. As aulas decorrem em formato online, à noite, entre as 18h30 e as 22h00.' },
{ q: 'As aulas são gravadas?', a: 'Sim. Todas as aulas são gravadas e ficam disponíveis no teu dashboard, para que possas rever ao teu ritmo sempre que precisares.' },
{ q: 'Preciso de conhecimentos prévios?', a: 'Não necessariamente. A formação está estruturada para todos tirarem partido. Começa pelos fundamentos da IA generativa e avança progressivamente. Basta ter curiosidade e vontade de experimentar.' },
{ q: 'Qual a política de cancelamento?', a: 'Podes cancelar até 7 dias antes do início com reembolso total. Depois disso, avalia-se caso a caso. Queremos que estejas 100% confortável com a decisão.' },
{ q: 'O certificado é reconhecido?', a: 'Sim. A formação é ministrada por uma empresa com CAE de atividade de formação e os formadores detêm CCP registados no SIGO.' },
{ q: 'Como funciona a mentoria?', a: 'Tens direito a 4 horas de mentoria individual com um dos formadores, para aprofundares um tema específico ou discutires um projeto pessoal.' },
{ q: 'Que software preciso de ter?', a: 'Computador com acesso para uso de ferramentas de IA como ChatGPT, Gemini e Claude. Não é obrigatório ter planos pagos de nenhuma ferramenta — damos-te orientação e um guia ao longo das sessões sobre as ferramentas que podes adquirir de futuro no teu caso.' },
{ q: 'Há suporte após o curso?', a: 'Sim. Tens acesso vitalício à comunidade AI Magic Pill, onde continuas a aprender, partilhar e receber apoio dos formadores e outros alunos.' }];


const FAQ = () => {
  const { t, dict } = useI18n();
  const faqs = (dict.faqs && dict.faqs.length) ? dict.faqs : FAQS;
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container" style={{ maxWidth: 820 }}>
        <h2 className="h-section reveal">{t('faq.title')}</h2>
        <p className="section-sub reveal">{t('faq.sub')}</p>

        <div style={{ borderTop: '1px solid var(--border)' }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="reveal" style={{ borderBottom: '1px solid var(--border)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 20,
                  padding: '28px 4px', textAlign: 'left', background: 'transparent', border: 'none', cursor: 'pointer'
                }}>
                  <span style={{
                    flex: 1, fontSize: 17, fontWeight: 500, lineHeight: 1.4,
                    color: isOpen ? 'var(--text)' : 'var(--text-dim)',
                    transition: 'color 0.2s'
                  }}>{f.q}</span>
                  <span style={{
                    position: 'relative', width: 18, height: 18, flexShrink: 0,
                    color: isOpen ? 'var(--violet-2)' : 'var(--text-muted)',
                    transition: 'color 0.2s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1)',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)'
                  }}>
                    <span style={{
                      position: 'absolute', top: '50%', left: 0, right: 0, height: 1.5,
                      background: 'currentColor', borderRadius: 1, transform: 'translateY(-50%)'
                    }} />
                    <span style={{
                      position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1.5,
                      background: 'currentColor', borderRadius: 1, transform: 'translateX(-50%)'
                    }} />
                  </span>
                </button>
                <div style={{
                  display: 'grid',
                  gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1)'
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{
                      padding: '0 40px 32px 4px',
                      color: 'var(--text-dim)', fontSize: 15, lineHeight: 1.7,
                      maxWidth: 680
                    }}>{f.a}</div>
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

};

const ContactForm = () => {
  const { t } = useI18n();
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [form, setForm] = React.useState({ name: '', email: '', msg: '' });

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    try {
      const res = await fetch('https://formspree.io/f/mojzegga', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          message: form.msg,
          _subject: `AI+cademy · Mensagem de ${form.name || 'visitante'}`
        })
      });
      if (res.ok) {
        setStatus('sent');
        setForm({ name: '', email: '', msg: '' });
        setTimeout(() => setStatus('idle'), 5000);
      } else {
        setStatus('error');
        setTimeout(() => setStatus('idle'), 5000);
      }
    } catch (err) {
      setStatus('error');
      setTimeout(() => setStatus('idle'), 5000);
    }
  };

  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container" style={{ maxWidth: 620 }}>
        <form onSubmit={submit} className="reveal">
          <h3 style={{ textAlign: 'center', fontSize: 32, margin: '0 0 12px', fontWeight: 700, letterSpacing: '-0.025em' }}>
            {t('contact.title')}
          </h3>
          <p style={{ textAlign: 'center', color: 'var(--text-dim)', margin: '0 auto 48px', fontSize: 16, maxWidth: 440, lineHeight: 1.55 }}>
            {t('contact.sub')}
          </p>

          <div style={{ display: 'grid', gap: 40 }}>
            <div className="cf-field">
              <label className="cf-label" htmlFor="cf-name">{t('contact.name')}</label>
              <input id="cf-name" className="cf-input" placeholder={t('contact.namePlaceholder')} value={form.name}
              onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </div>
            <div className="cf-field">
              <label className="cf-label" htmlFor="cf-email">{t('contact.email')}</label>
              <input id="cf-email" type="email" className="cf-input" placeholder={t('contact.emailPlaceholder')} value={form.email}
              onChange={(e) => setForm({ ...form, email: e.target.value })} />
            </div>
            <div className="cf-field">
              <label className="cf-label" htmlFor="cf-msg">{t('contact.msg')}</label>
              <textarea id="cf-msg" className="cf-input cf-textarea" placeholder={t('contact.msgPlaceholder')}
              value={form.msg}
              onChange={(e) => { setForm({ ...form, msg: e.target.value }); e.target.style.height = 'auto'; e.target.style.height = e.target.scrollHeight + 'px'; }} />
            </div>
            <button type="submit" className="btn btn-primary" disabled={status === 'sending'}
            style={{
              width: '100%', justifyContent: 'center', padding: '16px 24px', fontSize: 16, marginTop: 8,
              opacity: status === 'sending' ? 0.7 : 1,
              cursor: status === 'sending' ? 'wait' : 'pointer'
            }}>
              {status === 'sending' && <>{t('contact.sending')}</>}
              {status === 'sent' && <>{t('contact.sent')}</>}
              {status === 'error' && <>{t('contact.error')}</>}
              {status === 'idle' && <>{t('contact.send')} <Icon name="send" size={16} /></>}
            </button>
          </div>
          <style>{`
            .cf-input {
              width: 100%; padding: 14px 0; background: transparent;
              border: none; border-bottom: 1px solid var(--border-strong);
              color: var(--text); font-size: 22px; line-height: 1.4; font-family: inherit;
              outline: none; transition: border-color 0.2s ease;
            }
            .cf-input:focus { border-color: var(--violet); }
            .cf-input::placeholder { color: var(--text-muted); font-weight: 300; }
            .cf-textarea { min-height: 80px; resize: none; overflow: hidden; }
            .cf-label { display: block; font-size: 18px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
            @media (max-width: 600px) {
              .cf-input { font-size: 18px; }
              .cf-label { font-size: 16px; }
            }
          `}</style>
        </form>
      </div>
    </section>);

};

const Pricing = () => {
  const { t, dict } = useI18n();
  const bullets = (dict.bullets && dict.bullets.length) ? dict.bullets : [
  '60 horas de formação',
  '40 horas práticas',
  '30 horas síncronas com os mentores',
  '4 horas extra de Mentoria (200€)',
  'Suporte vitalício à Magic Pill',
  'Acesso exclusivo ao Research lab (40€)',
  'Slides, gravações e outros materiais',
  'Certificado reconhecido'];


  // Early-bird deadline: 2 Jan 2027, 23:59 Lisbon (WET, +00:00)
  const c = useCountdown(new Date('2027-01-02T23:59:59+00:00').getTime());
  const earlyBirdActive = c.d + c.h + c.m + c.s > 0;

  const FULL_PRICE = '1.720';
  const PROMO_PRICE = '860';
  const SAVINGS = '860';

  return (
    <section className="section" id="pricing">
      <div className="container" style={{ maxWidth: 920 }}>
        <div className="card reveal" style={{
          padding: '52px 48px 48px', position: 'relative', overflow: 'hidden',
          border: '1px solid rgba(255,110,199,0.28)',
          background: 'linear-gradient(180deg, rgba(255,110,199,0.06), rgba(124,92,255,0.04) 40%, var(--surface) 80%)'
        }}>
          {/* Ambient halos */}
          <div className="ambient" style={{
            width: 520, height: 520, top: -200, left: '50%', transform: 'translateX(-50%)',
            background: 'radial-gradient(circle, rgba(255,110,199,0.25), transparent 60%)'
          }} />
          <div className="ambient" style={{
            width: 360, height: 360, bottom: -180, right: -100,
            background: 'radial-gradient(circle, rgba(124,92,255,0.22), transparent 60%)'
          }} />

          <div style={{ position: 'relative', zIndex: 1 }}>
            {/* Early-bird countdown strip */}
            {earlyBirdActive &&
            <div className="pricing-eb-strip" style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, flexWrap: 'wrap',
              padding: '12px 20px', marginBottom: 36,
              background: 'rgba(255,110,199,0.1)',
              border: '1px solid rgba(255,110,199,0.3)',
              borderRadius: 999,
              maxWidth: 560, margin: '0 auto 36px'
            }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#ffa8db', fontSize: 13, fontWeight: 600, letterSpacing: '0.02em' }}>
                  <span className="pricing-dot" /> {t('pricing.ebEnds')}
                </span>
                <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums',
                color: 'var(--text)', fontWeight: 600, fontSize: 14
              }}>
                  <TimeBlock v={c.d} l="d" />
                  <Sep />
                  <TimeBlock v={c.h} l="h" />
                  <Sep />
                  <TimeBlock v={c.m} l="m" />
                  <Sep />
                  <TimeBlock v={c.s} l="s" />
                </div>
              </div>
            }

            <div style={{ textAlign: 'center', marginBottom: 36 }}>
              <h2 style={{
                fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 700, margin: '0 0 14px',
                letterSpacing: '-0.025em', lineHeight: 1.05
              }}>
                {t('pricing.titlePre')}<span className="grad-text">{t('pricing.titleGrad')}</span>
              </h2>
              <p style={{ color: 'var(--text-dim)', fontSize: 17, maxWidth: 520, margin: '0 auto', lineHeight: 1.55 }}>{t('pricing.sub')}</p>
            </div>

            {/* PRICE ZONE */}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              gap: 36, flexWrap: 'wrap', marginBottom: 14
            }}>
              {/* Original price (strikethrough) */}
              <div style={{ textAlign: 'right' }}>
                <div style={{ color: 'var(--text-muted)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>
                  {t('pricing.regular')}
                </div>
                <div style={{ position: 'relative', display: 'inline-block' }}>
                  <span style={{
                    fontSize: 44, color: 'var(--text-dim)', fontWeight: 600,
                    letterSpacing: '-0.02em', lineHeight: 1
                  }}>
                    {FULL_PRICE}€
                  </span>
                  <span style={{
                    position: 'absolute', left: -4, right: -4, top: '52%',
                    height: 2, background: 'var(--pink)', transform: 'rotate(-8deg)', borderRadius: 2
                  }} />
                </div>
              </div>

              {/* Active price */}
              <div style={{ position: 'relative' }}>
                <div style={{
                  position: 'absolute', top: -10, right: -10, zIndex: 2,
                  background: 'var(--grad-cta)', color: 'white',
                  padding: '6px 12px', borderRadius: 999,
                  fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
                  boxShadow: '0 8px 24px -6px rgba(255,94,168,0.6)',
                  animation: 'pricingPulse 2s ease-in-out infinite'
                }}>
                  {t('pricing.badge')}
                </div>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
                  <span style={{ fontSize: 32, color: 'var(--text-dim)', marginTop: 22, fontWeight: 500 }}>€</span>
                  <span className="grad-text" style={{
                    fontSize: 124, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.04em',
                    display: 'inline-block', paddingRight: '0.08em', paddingBottom: '0.04em'
                  }}>{PROMO_PRICE}</span>
                </div>
              </div>
            </div>

            <div style={{
              textAlign: 'center', margin: '0 0 8px',
              color: '#ffa8db', fontSize: 15, fontWeight: 600
            }}>
              {t('pricing.save').replace('{savings}', SAVINGS)}
            </div>
            <p style={{ textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, margin: '0 0 36px' }}>
              {t('pricing.afterNote')
                .replace('{date}', earlyBirdActive ? t('pricing.afterDate') : t('pricing.afterCampaign'))
                .replace('{price}', FULL_PRICE)}
            </p>

            {/* Bullets */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, maxWidth: 640, margin: '0 auto 40px' }} className="grid-bullets">
              {bullets.map((b, i) =>
              <div key={i} className="card" style={{
                padding: '12px 16px', display: 'flex', gap: 10, alignItems: 'flex-start',
                fontSize: 14, textAlign: 'left', lineHeight: 1.4,
                background: 'rgba(124,92,255,0.04)',
                borderColor: 'rgba(124,92,255,0.15)'
              }}>
                  <span className="check-bullet" style={{ marginTop: 2 }}>
                    <Icon name="check" size={11} stroke={3} />
                  </span>
                  {b}
                </div>
              )}
            </div>

            <div style={{ textAlign: 'center' }}>
              <a href="inscricao.html" className="btn btn-primary pricing-cta" style={{
                fontSize: 17, padding: '18px 36px', position: 'relative'
              }}>
                {t('pricing.cta')}
              </a>
              <div style={{ marginTop: 14, color: 'var(--text-muted)', fontSize: 12 }}>
                {t('pricing.ctaSub')}
              </div>
            </div>

            <div style={{
              display: 'flex', gap: 24, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap',
              color: 'var(--text-dim)', fontSize: 13
            }}>
              <MiniBullet icon="users" label={t('pricing.mini.seats')} color="var(--pink)" />
              <MiniBullet icon="globe" label={t('pricing.mini.remote')} color="var(--cyan)" />
              <MiniBullet icon="calendar" label={t('pricing.mini.start')} color="var(--violet-2)" />
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 600px) { .grid-bullets { grid-template-columns: 1fr !important; } }
        .pricing-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--pink);
          box-shadow: 0 0 14px var(--pink);
          animation: pricingPulseDot 1.4s infinite;
        }
        @keyframes pricingPulseDot {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%      { opacity: 0.35; transform: scale(0.8); }
        }
        @keyframes pricingPulse {
          0%, 100% { transform: scale(1); box-shadow: 0 8px 24px -6px rgba(255,94,168,0.6); }
          50%      { transform: scale(1.04); box-shadow: 0 10px 32px -4px rgba(255,94,168,0.85); }
        }
      `}</style>
    </section>);

};

const TimeBlock = ({ v, l }) =>
<span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 3 }}>
    <span>{String(v).padStart(2, '0')}</span>
    <span style={{ color: 'inherit', opacity: 0.85, fontSize: 11 }}>{l}</span>
  </span>;


const Sep = () =>
<span style={{ color: 'var(--text-muted)', opacity: 0.5 }}>:</span>;


const MiniBullet = ({ icon, label, color }) =>
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
    <span style={{ color }}><Icon name={icon} size={13} /></span>
    {label}
  </span>;


const Footer = () => {
  const { t, dict } = useI18n();
  const projects = (dict.footerProjects && dict.footerProjects.length) ? dict.footerProjects : [
    { name: 'Magic Pill', sub: 'AI mindset shift' },
    { name: 'AI Repository', sub: 'Research lab' },
    { name: 'ConversAI', sub: 'Podcast' }];
  return (
  <footer style={{ padding: '80px 0 40px', borderTop: '1px solid var(--border)', marginTop: 40 }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 40, marginBottom: 50 }} className="footer-top">
        <div>
          <div className="logo-svg" style={{ display: 'flex', alignItems: 'center', marginBottom: 14 }}
        dangerouslySetInnerHTML={{ __html: window.LOGO_SVG || '' }}>
          </div>
          <div style={{ color: 'var(--text-muted)', fontSize: 13, marginBottom: 14 }}>{t('footer.madeBy')}</div>
          <p style={{ color: 'var(--text-dim)', fontSize: 14, maxWidth: 420, margin: 0, lineHeight: 1.6 }}>{t('footer.desc')}</p>
        </div>

        <div style={{ textAlign: 'right' }}>
          <div style={{ color: 'var(--text-muted)', fontSize: 12, letterSpacing: '0.1em', marginBottom: 16 }}>{t('footer.contact')}</div>
          <div style={{ display: 'grid', gap: 10, fontSize: 14 }}>
            <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end', color: 'var(--violet-2)' }}>
              fffdesignassembly.com <Icon name="external" size={12} />
            </a>
            <a href="mailto:fffdesignassembly@gmail.com" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end', color: 'var(--text-dim)' }}>
              <Icon name="mail" size={14} /> fffdesignassembly@gmail.com
            </a>
            <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end', color: 'var(--text-dim)' }}>
              <Icon name="instagram" size={14} /> @fff.design.assembly
            </a>
          </div>
        </div>
      </div>

      <hr className="divider" style={{ marginBottom: 30 }} />

      <div style={{ marginBottom: 40 }}>
        <div style={{ color: 'var(--text-muted)', fontSize: 11, letterSpacing: '0.1em', marginBottom: 14 }}>{t('footer.authors')}</div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {projects.
        map((p, i) =>
        <div key={i} className="card" style={{
          padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13
        }}>
              <strong style={{ fontWeight: 600 }}>{p.name}</strong>
              <span style={{ color: 'var(--text-muted)' }}>— {p.sub}</span>
            </div>
        )}
        </div>
      </div>

      <p style={{
      color: 'var(--text-muted)', fontSize: 12, lineHeight: 1.7, margin: '0 0 30px',
      paddingTop: 20, borderTop: '1px solid var(--border)'
    }}>
        {t('footer.legal1')}<strong style={{ color: 'var(--text-dim)' }}>{t('footer.legalB1')}</strong>{t('footer.legal2')}<strong style={{ color: 'var(--text-dim)' }}>{t('footer.legalB2')}</strong>{t('footer.legal3')}<strong style={{ color: 'var(--text-dim)' }}>{t('footer.legalB3')}</strong>{t('footer.legal4')}
      </p>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'var(--text-muted)', fontSize: 12, flexWrap: 'wrap', gap: 12 }}>
        <div>{t('footer.copyright')}</div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
          {t('footer.builtPre')}<strong style={{ color: 'var(--text-dim)' }}>{t('footer.builtStrong')}</strong>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 700px) {
        .footer-top { grid-template-columns: 1fr !important; }
        .footer-top > div:last-child { text-align: left !important; }
        .footer-top > div:last-child a { justify-content: flex-start !important; }
      }
    `}</style>
  </footer>);
};


Object.assign(window, { FAQ, ContactForm, Pricing, Footer });