/* Contact + Footer — i18n-aware */

function Contact() {
  const t = window.t;
  const head = t('contact.headline');
  const [time, setTime] = React.useState('');
  React.useEffect(() => {
    const tick = () => {
      const now = new Date();
      setTime(now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Paris' }) + ' CET');
    };
    tick();
    const id = setInterval(tick, 10000);
    return () => clearInterval(id);
  }, []);

  const renderHeadline = () => {
    const [part1, part2] = (head.after || '').split('\n');
    return (
      <>
        {head.before}<em>{head.em}</em>{part1}
        {part2 !== undefined && <><br />{part2}</>}
      </>
    );
  };

  return (
    <section className="section" id="contact">
      <div className="container">

        <div className="section-label reveal">
          <span className="num">07</span>
          <span>{t('contact.label')}</span>
          <span className="bar" />
          <span>{t('contact.tagline')}</span>
        </div>

        <div className="contact-wrap">
          <div>
            <h2 className="contact-huge reveal">{renderHeadline()}</h2>

            <a href="mailto:abonnard.dev@outlook.com" className="contact-email reveal delay-1">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <rect x="3" y="5" width="18" height="14" rx="2" />
                <path d="M3 7l9 6 9-6" />
              </svg>
              <span>abonnard.dev@outlook.com</span>
            </a>

            <div className="contact-socials reveal delay-2">
              <a className="contact-social" href="https://github.com/Elyeden0" target="_blank" rel="noopener noreferrer">
                <span className="label">{t('contact.socials.github')}</span>
                <span>@Elyeden0</span>
                <span className="arrow">
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </a>
              <a className="contact-social" href="https://www.linkedin.com/in/alexis-bonnard-60b436340" target="_blank" rel="noopener noreferrer">
                <span className="label">{t('contact.socials.linkedin')}</span>
                <span>in/alexis-bonnard</span>
                <span className="arrow">
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </a>
              <a className="contact-social" href="/assets/Alexis_Bonnard_CV_AI_EN.pdf" target="_blank" rel="noopener noreferrer">
                <span className="label">{t('contact.socials.resumeAI')}</span>
                <span>{t('contact.socials.resumeAIMeta')}</span>
                <span className="arrow">
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </a>
              <a className="contact-social" href="/assets/Alexis_Bonnard_CV_Cyber_EN.pdf" target="_blank" rel="noopener noreferrer">
                <span className="label">{t('contact.socials.resumeCyber')}</span>
                <span>{t('contact.socials.resumeCyberMeta')}</span>
                <span className="arrow">
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </a>
            </div>
          </div>

          <div className="contact-card reveal delay-2">
            <div className="contact-card-label">{t('contact.card.available')}</div>
            <h3>{t('contact.card.title')}</h3>
            <p>{t('contact.card.desc')}</p>
            <div className="contact-card-meta">
              <div className="row"><span className="k">{t('contact.card.localTime')}</span><span className="v">{time || '—'}</span></div>
              <div className="row"><span className="k">{t('contact.card.response')}</span><span className="v">{t('contact.card.responseValue')}</span></div>
              <div className="row"><span className="k">{t('contact.card.minEngagement')}</span><span className="v">{t('contact.card.minEngagementValue')}</span></div>
              <div className="row"><span className="k">{t('contact.card.rate')}</span><span className="v">{t('contact.card.rateValue')}</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const t = window.t;
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-row">
          <span>{t('footer.copy').replace('{year}', year)}</span>
          <span>{t('footer.tag')}</span>
        </div>
      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;