/* Hi-fi — Sections part 2: cases, team, FAQ, CTA, footer */

const LOGO_TOKEN_C = 'pk_LbhDh0o7S7SEtCE7aOlL5Q';
const caseLogoUrl = (d) => `https://img.logo.dev/${d}?token=${LOGO_TOKEN_C}&retina=true`;

const CasesSection = ({ lang }) => {
  const t = COPY[lang].cases;
  const cases = window.SITE_TEXTS[lang].cases_cards;

  return (
    <section className="u-section" style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="u-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 50 }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
            <h2>{t.h2a} <span className="u-mark">{t.h2mark}</span>{t.h2b}</h2>
          </div>
          <a className="u-btn u-btn-ghost" href="#/use-cases" onClick={(e) => { e.preventDefault(); window.location.hash = '/use-cases'; window.scrollTo({ top: 0, behavior: 'auto' }); }}>{lang === 'fr' ? 'Tous les use cases' : 'All case studies'} →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {cases.map((c, i) =>
          <div key={i} className="u-card" style={{ padding: 22, display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <img src={caseLogoUrl(c.d)} alt={c.co} width="28" height="28" style={{ width: 28, height: 28, borderRadius: 6, objectFit: 'contain' }} onError={(e) => {e.target.style.display = 'none';}} />
                  <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, fontWeight: 400 }}>{c.co}</span>
                </div>
                <span style={{ fontSize: 12, color: 'var(--gray-3)' }}>→</span>
              </div>
              <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 56, lineHeight: 1, fontWeight: 400 }}>{c.m}</p>
              <p style={{ fontSize: 13, color: 'var(--gray-3)', marginTop: 6 }}>{c.l}</p>
              <hr className="u-divider" style={{ margin: '18px 0' }} />
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, flex: 1 }}>"{c.q}"</p>
              {c.n && <p style={{ fontSize: 12, color: 'var(--gray-3)', marginTop: 12 }}>— {c.n}{c.r ? `, ${c.r}` : ''}</p>}
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FeatureQuote = ({ lang }) => null;

const TeamSection = ({ lang }) => {
  const t = COPY[lang].team;
  const team = [
  { n: 'Antoine', r: 'COO' },
  { n: 'Antoine', r: 'COO' },
  { n: 'Antoine', r: 'COO' },
  { n: 'Antoine', r: 'COO' }];

  return (
    <section className="u-section" style={{ paddingTop: 100, paddingBottom: 100, background: 'var(--bg-2)' }}>
      <div className="u-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 50 }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
            <h2 style={{ fontSize: 48 }}>{t.h2}</h2>
          </div>
          <p style={{ fontSize: 16, color: 'var(--gray-4)', maxWidth: 360 }}>{t.sub}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {team.map((p, i) =>
          <div key={i} className="u-card" style={{ padding: 16 }}>
              <div style={{
              aspectRatio: '4/5', borderRadius: 10, marginBottom: 14,
              background: 'var(--bg-2)', border: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--gray-3)', fontSize: 11, fontFamily: 'var(--font-mono)',
              backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(28,29,31,0.03) 8px, rgba(28,29,31,0.03) 9px)'
            }}>portrait</div>
              <p style={{ fontSize: 16, fontWeight: 600 }}>{p.n}</p>
              <p style={{ fontSize: 13, color: 'var(--gray-3)' }}>{p.r}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FaqSection = ({ lang }) => {
  const t = COPY[lang].faq;
  const [open, setOpen] = useState(0);
  return (
    <section className="u-section" style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="u-container">
        <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.5fr', gap: 80, alignItems: 'flex-start' }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
            <h2>{t.h2}</h2>
          </div>
          <div>
            {t.items.map((q, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: '100%', padding: '24px 0', background: 'none', border: 'none',
                    textAlign: 'left', cursor: 'pointer', outline: 'none',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                    fontFamily: 'var(--font-sans)', color: 'var(--ink)'
                  }}>
                    <span style={{ fontSize: 18, fontWeight: 500, color: 'var(--ink)' }}>{q[0]}</span>
                    <span style={{
                      width: 32, height: 32, borderRadius: '50%',
                      background: isOpen ? 'var(--accent)' : 'var(--bg-2)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 18, transition: 'all 0.2s', flexShrink: 0,
                      color: 'var(--ink)',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0)'
                    }}>+</span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 200 : 0,
                    overflow: 'hidden',
                    transition: 'max-height 0.35s ease, padding 0.2s',
                    paddingBottom: isOpen ? 24 : 0
                  }}>
                    <p style={{ fontSize: 15, color: 'var(--gray-4)', lineHeight: 1.6, maxWidth: 640 }}>{q[1]}</p>
                  </div>
                </div>);

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

};

const CtaFinal = ({ lang }) => {
  const t = COPY[lang].cta_final;
  return (
    <section className="u-section cta-final-section" style={{ paddingTop: 120, paddingBottom: 120, background: 'var(--ink)', color: 'var(--bg)' }}>
      <div className="u-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <h2 style={{ fontSize: 64, color: 'var(--bg)', marginBottom: 24, position: 'relative' }}>
              {t.h2a} <span className="u-mark u-mark-on-dark" style={{ color: 'var(--ink)' }}>{t.h2mark}</span>{t.h2b}
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(244,241,234,0.7)', maxWidth: 460, marginBottom: 36 }}>{t.sub}</p>
            <div style={{ display: 'flex', gap: 12, marginBottom: 40 }}>
              <a className="u-btn u-btn-accent" data-cal-link="antoineguine/appel-de-decouverte-website" data-cal-namespace="appel-de-decouverte-website" data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}' style={{ padding: '14px 24px', fontSize: 16, cursor: 'pointer' }}>{window.SITE_TEXTS[lang].cta_buttons.primary} →</a>
            </div>
            <div style={{ display: 'flex', gap: 36 }}>
              {t.kpis.map(([l, v], i) =>
              <div key={i}>
                  <p style={{ fontSize: 12, color: 'rgba(244,241,234,0.5)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{l}</p>
                  <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 28 }}>{v}</p>
                </div>
              )}
            </div>
          </div>
          <CtaMeetingsStack lang={lang} />
        </div>
      </div>
    </section>);

};

const CtaMeetingsStack = ({ lang }) => {
  const meetings = lang === 'fr' ? [
    { name: 'Camille Laurent', role: 'Head of Sales', co: 'Norélio', tag: 'NEW BIZ', when: 'Jeu · 14:00', dur: '30 min', source: 'Linkedin · Out', meet: 'meet.google.com/yqz-rfvm-ksb' },
    { name: 'Julien Mercier', role: 'COO', co: 'Galvane', tag: 'NEW BIZ', when: 'Ven · 10:30', dur: '30 min', source: 'Lead Magnet', meet: 'meet.google.com/dxh-pktw-mns' },
    { name: 'Sophie Lefèvre', role: 'VP Revenue', co: 'Atelio', tag: 'NEW BIZ', when: 'Ven · 15:00', dur: '45 min', source: 'CRM · Reactivation', meet: 'meet.google.com/jvr-bcat-pwq' }
  ] : [
    { name: 'Camille Laurent', role: 'Head of Sales', co: 'Norélio', tag: 'NEW BIZ', when: 'Thu · 14:00', dur: '30 min', source: 'Linkedin · Out', meet: 'meet.google.com/yqz-rfvm-ksb' },
    { name: 'Julien Mercier', role: 'COO', co: 'Galvane', tag: 'NEW BIZ', when: 'Fri · 10:30', dur: '30 min', source: 'Lead Magnet', meet: 'meet.google.com/dxh-pktw-mns' },
    { name: 'Sophie Lefèvre', role: 'VP Revenue', co: 'Atelio', tag: 'NEW BIZ', when: 'Fri · 15:00', dur: '45 min', source: 'CRM · Reactivation', meet: 'meet.google.com/jvr-bcat-pwq' }
  ];

  // Stacked fan layout: top, middle, bottom — each offset and rotated
  const positions = [
    { top: 0,   left: 40,  rotate: -3.5, z: 1, delay: 0 },
    { top: 110, left: 0,   rotate: 1.8,  z: 3, delay: 0.4 },
    { top: 230, left: 80,  rotate: -1.2, z: 2, delay: 0.8 }
  ];

  return (
    <div className="u-cta-stack" style={{
      position: 'relative',
      height: 460,
      perspective: 1200
    }}>
      {meetings.map((m, i) => {
        const p = positions[i];
        return (
          <div
            key={i}
            className={`u-cta-stack-card${i > 0 ? ' u-cta-mobile-hide' : ''}`}
            style={{
              position: 'absolute',
              top: p.top,
              left: p.left,
              right: 0,
              maxWidth: 360,
              zIndex: p.z,
              animation: `ctaCardEnter 0.7s cubic-bezier(0.22, 0.9, 0.32, 1) ${p.delay}s both, ctaCardFloat 6s ease-in-out ${0.7 + p.delay + i * 0.4}s infinite`,
              '--ctaR': `${p.rotate}deg`,
              transformOrigin: 'center center'
            }}
          >
            <MeetingCard m={m} index={i} lang={lang} />
            {/* +1 badge (desktop) / +45 badge (mobile first card only) */}
            <span className="u-desktop-only" style={{
              position: 'absolute', top: -8, right: -8,
              minWidth: 22, height: 22, borderRadius: 999,
              background: '#E53935', color: '#fff',
              fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-sans)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 0 0 2px var(--ink)', letterSpacing: '-0.02em',
              zIndex: 10, padding: '0 5px',
            }}>+1</span>
            {i === 0 && (
              <span className="u-mobile-only" style={{
                position: 'absolute', top: -8, right: -8,
                minWidth: 28, height: 28, borderRadius: 999,
                background: '#E53935', color: '#fff',
                fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-sans)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 0 0 2px var(--bg)', letterSpacing: '-0.02em',
                zIndex: 10, padding: '0 6px',
              }}>+45</span>
            )}
          </div>
        );
      })}
    </div>
  );
};

const CalEmbed = ({ lang }) => {
  const days = lang === 'fr' ? ['L', 'M', 'M', 'J', 'V', 'S', 'D'] : ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
  const [picked, setPicked] = useState(8);
  const [time, setTime] = useState(2);
  const slots = ['09:00', '09:30', '10:00', '11:00', '14:00', '15:30'];
  return (
    <div style={{ padding: 24, background: 'rgba(244,241,234,0.04)', border: '1px solid rgba(244,241,234,0.15)', borderRadius: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div>
          <p style={{ fontSize: 14, fontWeight: 600 }}>30 min · Antoine Guiné</p>
          <p style={{ fontSize: 12, color: 'rgba(244,241,234,0.5)', fontFamily: 'var(--font-mono)' }}>cal.com/upscale</p>
        </div>
        <span style={{ fontSize: 12, color: 'rgba(244,241,234,0.5)' }}>Avr 2026</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 4 }}>
        {days.map((d, i) => <div key={i} style={{ textAlign: 'center', fontSize: 11, color: 'rgba(244,241,234,0.5)', padding: 4, fontFamily: 'var(--font-mono)' }}>{d}</div>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 16 }}>
        {Array.from({ length: 28 }).map((_, i) => {
          const isWk = (i + 5) % 7 === 0 || (i + 6) % 7 === 0;
          const avail = !isWk && (i + 1) % 4 !== 1;
          const isP = picked === i;
          return (
            <button key={i} onClick={() => avail && setPicked(i)} disabled={!avail} style={{
              aspectRatio: '1', border: 'none', borderRadius: 6, cursor: avail ? 'pointer' : 'default',
              background: isP ? 'var(--accent)' : avail ? 'rgba(244,241,234,0.06)' : 'transparent',
              color: isP ? 'var(--ink)' : avail ? 'var(--bg)' : 'rgba(244,241,234,0.2)',
              fontSize: 12, fontWeight: isP ? 600 : 400
            }}>{i % 30 + 1}</button>);

        })}
      </div>
      <p style={{ fontSize: 11, color: 'rgba(244,241,234,0.5)', marginBottom: 8, fontFamily: 'var(--font-mono)' }}>{lang === 'fr' ? 'Créneaux disponibles' : 'Available slots'}</p>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {slots.map((s, i) =>
        <button key={i} onClick={() => setTime(i)} style={{
          border: '1px solid rgba(244,241,234,0.2)',
          borderRadius: 999,
          padding: '6px 12px',
          background: i === time ? 'var(--accent)' : 'transparent',
          color: i === time ? 'var(--ink)' : 'var(--bg)',
          fontSize: 12, cursor: 'pointer', fontFamily: 'var(--font-mono)'
        }}>{s}</button>
        )}
      </div>
    </div>);

};

const FooterNewsletter = ({ lang }) => {
  const checkboxId = 'nl-consent';
  const [email, setEmail] = useState('');
  const [accepted, setAccepted] = useState(false);
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [shakeConsent, setShakeConsent] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!accepted) {
      setShakeConsent(true);
      setTimeout(() => setShakeConsent(false), 500);
      return;
    }
    if (!email.trim()) return;
    setLoading(true);
    setError(false);
    try {
      await window.beehiivSubscribe(email.trim(), {
        utm_source: 'upscale-homepage',
        utm_medium: 'footer',
        utm_campaign: 'newsletter',
      });
      setSent(true);
    } catch (_) {
      setError(true);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      borderRadius: 20,
      marginBottom: 52,
      background: 'var(--ink)',
      overflow: 'hidden',
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      minHeight: 180,
    }}>
      {/* Left: accent bar + copy */}
      <div className="u-newsletter-panel" style={{
        padding: '36px 40px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10,
        borderRight: '1px solid rgba(244,241,234,0.08)',
        minWidth: 0,
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'var(--accent)', fontFamily: 'var(--font-mono)',
          marginBottom: 2,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }}></span>
          Newsletter
        </span>
        <p style={{ fontSize: 20, fontWeight: 700, color: 'var(--bg)', lineHeight: 1.2, letterSpacing: '-0.02em' }}>
          {lang === 'fr' ? 'La newsletter GTM numéro #1 en France.' : 'The #1 GTM newsletter in France.'}
        </p>
        <p style={{ fontSize: 13, color: 'rgba(244,241,234,0.5)', lineHeight: 1.5 }}>
          {lang === 'fr' ? 'Use cases clients, méthodes et stratégies.' : 'Client use cases, methods and strategies.'}
        </p>
      </div>

      {/* Right: form */}
      <div className="u-newsletter-panel" style={{ padding: '36px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 12, minWidth: 0 }}>
        {sent ? (
          <p style={{ fontSize: 15, fontWeight: 600, color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1.5 5L3.8 7.5L8.5 2.5" stroke="var(--ink)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
            {lang === 'fr' ? 'Inscription confirmée !' : "You're subscribed!"}
          </p>
        ) : (
          <>
            <form className="u-newsletter-form" onSubmit={handleSubmit} style={{ display: 'flex', gap: 8 }}>
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder={lang === 'fr' ? 'ton@email.com' : 'your@email.com'}
                style={{
                  flex: 1, height: 42, padding: '0 16px',
                  borderRadius: 10,
                  border: '1px solid rgba(244,241,234,0.15)',
                  background: 'rgba(244,241,234,0.07)',
                  color: 'var(--bg)',
                  fontSize: 13,
                  fontFamily: 'var(--font-sans)',
                  outline: 'none',
                  minWidth: 0,
                }}
              />
              <button type="submit" disabled={loading} className="u-btn u-btn-accent u-newsletter-btn" style={{ height: 42, padding: '0 18px', fontSize: 13, borderRadius: 10, flexShrink: 0, opacity: loading ? 0.7 : 1 }}>
                {loading ? '...' : (lang === 'fr' ? "S'inscrire" : 'Subscribe') + ' →'}
              </button>
            </form>
            {error && (
              <p style={{ fontSize: 12, color: '#E53935', marginTop: -4 }}>
                {lang === 'fr' ? 'Une erreur est survenue, réessaie.' : 'Something went wrong, please try again.'}
              </p>
            )}

            {/* Consent */}
            <label
              htmlFor={checkboxId}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                cursor: 'pointer',
                animation: shakeConsent ? 'consentShake 0.4s ease' : 'none',
              }}
            >
              <span style={{
                width: 16, height: 16, borderRadius: 4, flexShrink: 0,
                border: `1.5px solid ${accepted ? 'var(--accent)' : shakeConsent ? '#C77B0A' : 'rgba(244,241,234,0.25)'}`,
                background: accepted ? 'var(--accent)' : 'transparent',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background .15s, border-color .15s',
                pointerEvents: 'none',
              }}>
                {accepted && <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1.5 5L3.8 7.5L8.5 2.5" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>}
              </span>
              <input id={checkboxId} type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }} />
              <span style={{ fontSize: 12, color: shakeConsent && !accepted ? '#C77B0A' : 'rgba(244,241,234,0.4)', lineHeight: 1.4, transition: 'color .15s' }}>
                {lang === 'fr' ? "J'accepte de recevoir la newsletter par mail" : 'I agree to receive the newsletter by email'}
              </span>
            </label>
          </>
        )}
      </div>
    </div>
  );
};

const Footer = ({ lang }) => {
  const t = COPY[lang].footer;
  return (
    <footer style={{ padding: '60px 0 40px', borderTop: '1px solid var(--line)' }}>
      <div className="u-container">
        <FooterNewsletter lang={lang} />
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 60, marginBottom: 60 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <img src="https://img.logo.dev/up-scale.fr?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true" width="32" height="32" alt="Upscale" style={{ borderRadius: 6, objectFit: 'contain' }} />
              <span style={{ fontSize: 20, fontWeight: 600 }}>upscale</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--gray-3)', maxWidth: 280, marginBottom: 20 }}>{t.tagline}</p>
            <div style={{ display: 'flex', gap: 12 }}>
              {[
                {
                  id: 'LI',
                  label: 'LinkedIn',
                  svg: (
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
                      <path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14zM8.34 18v-7.5H5.92V18h2.42zm-1.21-8.55a1.4 1.4 0 100-2.8 1.4 1.4 0 000 2.8zM18.08 18v-4.13c0-2.24-1.2-3.28-2.79-3.28-1.29 0-1.86.71-2.18 1.21V10.5h-2.42c.03.68 0 7.5 0 7.5h2.42v-4.19c0-.22.02-.44.08-.59.18-.43.58-.88 1.25-.88.88 0 1.23.67 1.23 1.66V18h2.41z" />
                    </svg>
                  )
                },
                {
                  id: 'YT',
                  label: 'YouTube',
                  svg: (
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
                      <path d="M21.58 7.19a2.51 2.51 0 00-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42a2.51 2.51 0 00-1.77 1.77A26.06 26.06 0 002 12a26.06 26.06 0 00.42 4.81 2.51 2.51 0 001.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42a2.51 2.51 0 001.77-1.77A26.06 26.06 0 0022 12a26.06 26.06 0 00-.42-4.81zM10 15.02V8.98L15.2 12 10 15.02z" />
                    </svg>
                  )
                }
              ].map((s) => (
                <a key={s.id} href="#" aria-label={s.label} onClick={(e) => e.preventDefault()} style={{
                  width: 44,
                  height: 44,
                  borderRadius: 12,
                  background: 'linear-gradient(145deg, rgba(255,253,249,0.85) 0%, rgba(244,242,238,0.55) 100%)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: 'var(--ink)',
                  border: '1px solid rgba(28,29,31,0.08)',
                  boxShadow: '0 0 0 1px rgba(227,225,222,0.4), 0 1px 2px rgba(95,74,46,0.08), 0 8px 18px -6px rgba(95,74,46,0.10), inset 0 1px 0 rgba(255,255,255,0.6)',
                  backdropFilter: 'blur(8px)',
                  WebkitBackdropFilter: 'blur(8px)',
                  cursor: 'pointer',
                  textDecoration: 'none',
                  transition: 'transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease'
                }}>
                  {s.svg}
                </a>
              ))}
            </div>
          </div>
          {t.cols.map(([h, items], i) =>
          <div key={i}>
              <p className="u-eyebrow" style={{ marginBottom: 14 }}>{h}</p>
              {items.map(([label, href], j) => {
                const isHash = href && href.startsWith('#/');
                const isCal = href && href.includes('cal.com/antoineguine');
                return isCal ? (
                  <a
                    key={j}
                    role="button"
                    tabIndex={0}
                    data-cal-link="antoineguine/appel-de-decouverte-website"
                    data-cal-namespace="appel-de-decouverte-website"
                    data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}'
                    style={{ display: 'block', fontSize: 14, marginBottom: 8, color: 'var(--gray-4)', textDecoration: 'none', transition: 'color 0.15s', cursor: 'pointer' }}
                    onMouseEnter={e => e.target.style.color = 'var(--ink)'}
                    onMouseLeave={e => e.target.style.color = 'var(--gray-4)'}
                  >{label}</a>
                ) : href ? (
                  <a
                    key={j}
                    href={href}
                    target={isHash ? undefined : '_blank'}
                    rel={isHash ? undefined : 'noopener noreferrer'}
                    onClick={isHash ? (e) => { e.preventDefault(); window.location.hash = href.replace(/^#/, ''); window.scrollTo({ top: 0, behavior: 'auto' }); } : undefined}
                    style={{ display: 'block', fontSize: 14, marginBottom: 8, color: 'var(--gray-4)', textDecoration: 'none', transition: 'color 0.15s' }}
                    onMouseEnter={e => e.target.style.color = 'var(--ink)'}
                    onMouseLeave={e => e.target.style.color = 'var(--gray-4)'}
                  >{label}</a>
                ) : (
                  <p key={j} style={{ fontSize: 14, marginBottom: 8, color: 'var(--gray-3)' }}>{label}</p>
                );
              })}
            </div>
          )}
        </div>
        <div style={{ borderTop: '1px solid var(--line)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <p style={{ fontSize: 13, color: 'var(--gray-3)' }}>© 2026 Upscale</p>
        </div>
      </div>
    </footer>);

};

window.CasesSection = CasesSection;

// ----- CasesSectionDark: black-background variant of CasesSection
const CasesSectionDark = ({ lang }) => {
  const t = COPY[lang].cases;
  const cases = window.SITE_TEXTS[lang].cases_cards;

  return (
    <section className="u-section" style={{ paddingTop: 100, paddingBottom: 100, background: 'var(--ink)', color: 'var(--bg)' }}>
      <div className="u-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 50 }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 14, color: 'rgba(244,241,234,0.55)' }}>— {t.eyebrow}</p>
            <h2 style={{ color: 'var(--bg)' }}>{t.h2a} <span className="u-mark">{t.h2mark}</span>{t.h2b}</h2>
          </div>
          <a className="u-btn u-btn-ghost u-btn-ghost-dark" href="#/use-cases" onClick={(e) => { e.preventDefault(); window.location.hash = '/use-cases'; window.scrollTo({ top: 0, behavior: 'auto' }); }}>{lang === 'fr' ? 'Tous les use cases' : 'All case studies'} →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {cases.map((c, i) =>
          <div key={i} style={{
            padding: 22, display: 'flex', flexDirection: 'column',
            background: 'rgba(244,241,234,0.04)',
            border: '1px solid rgba(244,241,234,0.10)',
            borderRadius: 16
          }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <img src={caseLogoUrl(c.d)} alt={c.co} width="28" height="28" style={{ width: 28, height: 28, borderRadius: 6, objectFit: 'contain', background: 'var(--bg)' }} onError={(e) => {e.target.style.display = 'none';}} />
                  <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, fontWeight: 400, color: 'var(--bg)' }}>{c.co}</span>
                </div>
                <span style={{ fontSize: 12, color: 'rgba(244,241,234,0.55)' }}>→</span>
              </div>
              <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 56, lineHeight: 1, fontWeight: 400, color: 'var(--bg)' }}>{c.m}</p>
              <p style={{ fontSize: 13, color: 'rgba(244,241,234,0.55)', marginTop: 6 }}>{c.l}</p>
              <hr style={{ margin: '18px 0', border: 'none', borderTop: '1px solid rgba(244,241,234,0.12)' }} />
              <p style={{ fontSize: 13, color: 'rgba(244,241,234,0.85)', lineHeight: 1.5, flex: 1 }}>"{c.q}"</p>
              {c.n && <p style={{ fontSize: 12, color: 'rgba(244,241,234,0.55)', marginTop: 12 }}>— {c.n}{c.r ? `, ${c.r}` : ''}</p>}
            </div>
          )}
        </div>
      </div>
    </section>);

};

window.CasesSectionDark = CasesSectionDark;
window.FeatureQuote = FeatureQuote;
window.TeamSection = TeamSection;
window.FaqSection = FaqSection;
window.CtaFinal = CtaFinal;
window.Footer = Footer;