/* bloo.app — Contact page: Calendly-style link (primary) + async form (secondary). */
(function () {
const { Button, Card, Input, Textarea, Select } = window.BlooAppDesignSystem_ab7292;
const { LINKS, EXT, Icons, S } = window.Site;
const { useT } = window.I18n;
const { IconSpark, IconArrow, IconMail } = Icons;

/* Local success note — the DS bundle's Alert.jsx fails to compile (bundle bug,
   not fixable here), so the success state is styled by hand to match it. */
function SuccessNote({ title, children }) {
  return (
    <div style={{
      display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14, lineHeight: 1.5,
      background: 'var(--success-bg)', border: '1px solid color-mix(in oklch, var(--success) 30%, white)',
      borderRadius: 'var(--radius-md)', padding: 'var(--space-3) var(--space-4)',
    }}>
      <span style={{ flex: 'none', marginTop: 1, color: 'var(--success)', display: 'flex' }}>
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14M22 4L12 14.01l-3-3" /></svg>
      </span>
      <div>
        <div style={{ fontWeight: 600, color: 'var(--text-strong)', marginBottom: 2 }}>{title}</div>
        <div style={{ color: 'var(--text-body)' }}>{children}</div>
      </div>
    </div>
  );
}

const ContactS = {
  grid: { display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 24, alignItems: 'start' },
  directRow: { display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, color: 'var(--text-body)', textDecoration: 'none', marginTop: 10, whiteSpace: 'nowrap' },
  form: { display: 'flex', flexDirection: 'column', gap: 16 },
};

function BookCard() {
  const { t } = useT();
  return (
    <Card variant="raised" padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <span style={S.serviceIcon}><IconSpark /></span>
      <div>
        <h3 style={S.h3}>{t('The fastest way to talk', 'O jeito mais rápido de conversar')}</h3>
        <p style={{ ...S.cardBody, marginTop: 8 }}>{t("30 minutes, no prep needed. Bring whatever you're stuck on.", 'Trinta minutos, sem precisar se preparar. Traga o que estiver te travando.')}</p>
      </div>
      <Button as="a" href={LINKS.book} {...EXT} size="lg" block trailingIcon={<Icons.IconExternal />}>{t('Book a call', 'Agendar uma call')}</Button>
      <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 16, display: 'flex', flexDirection: 'column' }}>
        <a href={`mailto:${LINKS.companyEmail}`} style={ContactS.directRow}><IconMail size={16} /> {LINKS.companyEmail}</a>
        <a href={`mailto:${LINKS.personalEmail}`} style={ContactS.directRow}><IconMail size={16} /> {LINKS.personalEmail}</a>
        <div style={{ display: 'flex', gap: 16, marginTop: 14, flexWrap: 'wrap' }}>
          <a href={LINKS.linkedin} {...EXT} style={{ fontSize: 13.5, color: 'var(--text-link)', textDecoration: 'none' }}>LinkedIn</a>
          <a href={LINKS.medium} {...EXT} style={{ fontSize: 13.5, color: 'var(--text-link)', textDecoration: 'none' }}>Medium</a>
          <a href={LINKS.youtube} {...EXT} style={{ fontSize: 13.5, color: 'var(--text-link)', textDecoration: 'none' }}>YouTube</a>
        </div>
      </div>
    </Card>
  );
}

function ContactForm() {
  const { t } = useT();
  const [sent, setSent] = React.useState(false);
  if (sent) {
    return (
      <Card padding="lg">
        <SuccessNote title={t('Message sent.', 'Mensagem enviada.')}>
          {t("Thanks — we'll reply within a day or two. Prefer not to wait? Book a call above.", 'Obrigado — responderemos em até dois dias úteis. Prefere não esperar? Agende uma call acima.')}
        </SuccessNote>
      </Card>
    );
  }
  return (
    <Card padding="lg">
      <form style={ContactS.form} onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
        <Input label={t('Name', 'Nome')} placeholder={t('Your name', 'Seu nome')} required />
        <Input label={t('Work email', 'E-mail profissional')} type="email" placeholder={t('you@company.com', 'voce@empresa.com')} required />
        <Select
          label={t('What do you need help with?', 'Com o que você precisa de ajuda?')}
          placeholder={t('Choose one', 'Escolha uma opção')}
          required
          options={[
            t('Flutter & UX front-end', 'Front-end em Flutter & UX'),
            t('AI dev workflows', 'Fluxos de dev com IA'),
            t('AI onboarding for teams', 'Onboarding de IA para times'),
            t('Products', 'Produtos'),
            t('Something else', 'Outro assunto'),
          ]}
        />
        <Textarea label={t('Tell us more', 'Conte mais')} placeholder={t("What are you building, and what's slowing you down?", 'O que você está construindo, e o que está te travando?')} rows={4} required />
        <Button type="submit" size="lg" block trailingIcon={<IconArrow />}>{t('Send message', 'Enviar mensagem')}</Button>
      </form>
    </Card>
  );
}

function ContactContent() {
  const { t } = useT();
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('CONTACT', 'CONTATO')}</span>
          <h2 style={S.h2} className="site-h1">{t("Tell us what you're trying to ship.", 'Conte o que você está tentando lançar.')}</h2>
          <p style={S.sectionSub}>{t('A short call is the fastest way to find out if bloo is a fit. No decks, no pressure.', 'Uma call rápida é o jeito mais direto de saber se a bloo é a escolha certa. Sem slides, sem pressão.')}</p>
        </div>
        <div style={ContactS.grid} className="site-grid-2">
          <BookCard />
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

window.Pages = window.Pages || {};
window.Pages.contact = { Content: ContactContent, label: 'Contact' };
})();