/* global React */
const { useState: useStatePilot } = React;

function Pilot() {
  const t = useT();
  return (
    <section id="pilot" className="section surface-divider" style={{ overflow: 'hidden' }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr',
          gap: 48,
          alignItems: 'center'
        }} className="pilot-grid">
          <div data-reveal>
            <span className="eyebrow">{t('/ 07 · Pilot', '/ 07 · Pilote')}</span>
            <h2 style={{ font: '400 clamp(32px,4.5vw,56px)/1.05 var(--md-sys-typeface-brand)', letterSpacing: '-0.015em', margin: '12px 0 0' }}>
              {t('Bring clinical AI', 'Faites entrer l’IA clinique')}<br/>{t('inside your walls.', 'entre vos murs.')}
            </h2>
            <p style={{ font: '400 18px/28px var(--md-sys-typeface-plain)', color: 'var(--md-sys-on-surface-variant)', marginTop: 20, maxWidth: 500 }}>
              {t(
                'Designed for HIPAA, PIPEDA, and provincial health information acts.',
                'Conçu pour HIPAA, la LPRPDE et les lois provinciales sur les renseignements de santé.'
              )}
            </p>
            <div style={{ marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              <a href="#contact" className="m3-btn m3-btn--filled">
                <span className="material-symbols-outlined">send</span>
                {t('Request a pilot', 'Demander un pilote')}
              </a>
              <a href="https://moneliautomation.com" className="m3-btn m3-btn--outlined">
                {t('Visit Moneli Automation', 'Visiter Moneli Automation')}
              </a>
            </div>
          </div>
          <div data-reveal data-reveal-delay="1" style={{ position: 'relative', minHeight: 420 }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--md-sys-primary) 18%, transparent), transparent 65%)'
            }} aria-hidden="true" />
            <img src="assets/device-3.png" alt={t('Healthcare AI on iMac', 'Healthcare AI sur iMac')} style={{
              position: 'absolute', top: 0, right: 0, width: '70%', maxWidth: 460,
              filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.18))'
            }} />
            <img src="assets/device-1.png" alt={t('Healthcare AI on MacBook', 'Healthcare AI sur MacBook')} style={{
              position: 'absolute', bottom: 20, left: 0, width: '62%', maxWidth: 420,
              filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.18))'
            }} />
            <img src="assets/device-2.png" alt="Mac mini" style={{
              position: 'absolute', bottom: 10, right: 40, width: '32%', maxWidth: 220,
              filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.2))'
            }} />
          </div>
        </div>
      </div>
      <style>{`
        @media (min-width: 900px) {
          .pilot-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Contact({ onSubmit }) {
  const t = useT();
  const [form, setForm] = useStatePilot({ name: '', email: '', org: '', message: '' });
  const [, setTouched] = useStatePilot({});
  const handle = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const onSub = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      setTouched({ name: true, email: true, message: true });
      onSubmit && onSubmit({ ok: false, message: t('Please fill the required fields.', 'Veuillez remplir les champs obligatoires.') });
      return;
    }
    onSubmit && onSubmit({ ok: true, message: t('Request queued. Opening your email client…', 'Demande en file. Ouverture de votre client de courriel…') });
    const subject = encodeURIComponent(t('Request a Local Healthcare AI Pilot', 'Demande de pilote Healthcare AI local'));
    const body = encodeURIComponent(
      `${t('Name', 'Nom')}: ${form.name}\n${t('Email', 'Courriel')}: ${form.email}\n${t('Organization', 'Organisation')}: ${form.org}\n\n${form.message}`
    );
    window.location.href = `mailto:info@moneliautomation.com?subject=${subject}&body=${body}`;
  };

  return (
    <section id="contact" className="section surface-divider">
      <div className="container" style={{ maxWidth: 960 }}>
        <div data-reveal>
          <span className="eyebrow">{t('/ 08 · Contact', '/ 08 · Contact')}</span>
          <h2 style={{ font: '400 clamp(32px,4.5vw,56px)/1.05 var(--md-sys-typeface-brand)', letterSpacing: '-0.015em', margin: '12px 0 0' }}>
            {t('Request a private AI pilot.', 'Demander un pilote d’IA privé.')}
          </h2>
          <p style={{ font: '400 18px/28px var(--md-sys-typeface-plain)', color: 'var(--md-sys-on-surface-variant)', marginTop: 20, maxWidth: 620 }}>
            {t(
              'Share your clinical workflow, privacy requirements, and preferred timeline. Moneli Automation will follow up directly.',
              'Partagez votre flux clinique, vos exigences de confidentialité et votre échéancier. Moneli Automation vous répondra directement.'
            )}
          </p>
        </div>

        <form onSubmit={onSub} data-reveal data-reveal-delay="1" style={{ marginTop: 40, display: 'grid', gap: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
            <div className="m3-textfield">
              <input id="name" placeholder=" " value={form.name} onChange={handle('name')} required />
              <label htmlFor="name">{t('Name', 'Nom')}</label>
            </div>
            <div className="m3-textfield">
              <input id="email" type="email" placeholder=" " value={form.email} onChange={handle('email')} required />
              <label htmlFor="email">{t('Work email', 'Courriel professionnel')}</label>
            </div>
          </div>
          <div className="m3-textfield">
            <input id="org" placeholder=" " value={form.org} onChange={handle('org')} />
            <label htmlFor="org">{t('Organization', 'Organisation')}</label>
          </div>
          <div className="m3-textfield">
            <textarea id="message" placeholder=" " rows="5" value={form.message} onChange={handle('message')} required />
            <label htmlFor="message">{t('What do you want to explore?', 'Que voulez-vous explorer ?')}</label>
          </div>
          <p style={{ font: '400 13px/18px var(--md-sys-typeface-plain)', color: 'var(--md-sys-on-surface-variant)', margin: 0 }}>
            {t(
              'Basic spam protection is enabled. This version opens an email draft to info@moneliautomation.com.',
              'Une protection anti-spam de base est activée. Cette version ouvre un brouillon de courriel vers info@moneliautomation.com.'
            )}
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
            <button type="submit" className="m3-btn m3-btn--filled">
              <span className="material-symbols-outlined">send</span>
              {t('Submit request', 'Envoyer la demande')}
            </button>
            <a href="mailto:info@moneliautomation.com" className="m3-btn m3-btn--text">
              {t('Or email info@moneliautomation.com', 'Ou écrivez à info@moneliautomation.com')}
            </a>
          </div>
        </form>
      </div>
    </section>
  );
}

function Footer() {
  const t = useT();
  return (
    <footer className="m3-footer" role="contentinfo">
      <div className="container">
        <div className="m3-footer__grid">
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <span className="m3-appbar__brand-mark">
                <span className="material-symbols-outlined">shield_lock</span>
              </span>
              <span style={{ font: '500 18px/1 var(--md-sys-typeface-brand)' }}>WalledCare</span>
            </div>
            <p style={{ marginTop: 16, maxWidth: 340, font: '400 14px/20px var(--md-sys-typeface-plain)', color: 'var(--md-sys-on-surface-variant)' }}>
              {t(
                'AI that stays inside the walls. On-premises clinical AI for Canadian hospitals, by Moneli Automation.',
                'Une IA qui reste entre vos murs. IA clinique sur site pour les hôpitaux canadiens, par Moneli Automation.'
              )}
            </p>
          </div>
          <div>
            <h4>{t('Product', 'Produit')}</h4>
            <a href="#apps">{t('Apps', 'Applications')}</a>
            <a href="#architecture">{t('Architecture', 'Architecture')}</a>
            <a href="blog/">Blog</a>
            <a href="mailto:info@moneliautomation.com?subject=Pricing">{t('Pricing', 'Tarifs')}</a>
          </div>
          <div>
            <h4>{t('Security', 'Sécurité')}</h4>
            <a href="#">{t('PIPEDA', 'LPRPDE')}</a>
            <a href="#">HIPAA</a>
            <a href="#">{t('Audit logs', 'Journaux d’audit')}</a>
            <a href="mailto:info@moneliautomation.com?subject=Security%20Disclosure">{t('Disclosure', 'Divulgation')}</a>
          </div>
          <div>
            <h4>{t('Company', 'Entreprise')}</h4>
            <a href="https://moneliautomation.com">{t('About', 'À propos')}</a>
            <a href="#contact">{t('Contact', 'Contact')}</a>
            <a href="https://moneliautomation.com">{t('Careers', 'Carrières')}</a>
            <a href="mailto:info@moneliautomation.com?subject=Press">{t('Press', 'Presse')}</a>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--md-sys-outline-variant)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <span style={{ font: '400 12px/16px var(--md-sys-typeface-plain)', color: 'var(--md-sys-on-surface-variant)' }}>© 2026 Moneli Automation</span>
          <span style={{ font: '500 12px/16px var(--md-sys-typeface-mono)', letterSpacing: '0.22em', color: 'var(--md-sys-on-surface-variant)' }}>EN · FR</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Pilot, Contact, Footer });