// Direction D — Hybrid (Editorial bones + Magazine practices + Corporate awards + Corporate testimonials)
// Keeps A's nav, hero, marquee, about, numbers, contact, footer
// Swaps in: C's "Four practices" services, B's award cards, B's testimonial cards

const hybColors = {
  ink: '#0A0A0A',
  paper: '#F5F2EC',
  teal: '#29B5C8',
  tealDark: '#1E8FA1',
  orange: '#F39237',
  rust: '#9B3B1B',
  border: '#E5E9EE',
  muted: '#5F6E80',
};

const hybStyles = {
  root: {
    width: '100%',
    background: hybColors.paper,
    color: hybColors.ink,
    fontFamily: '"Inter Tight", "Helvetica Neue", system-ui, sans-serif',
    fontFeatureSettings: '"ss01", "cv11"',
    overflow: 'hidden',
    position: 'relative',
  },
};

// WhatsApp contact number (international format, no + or dashes).
const WHATSAPP_NUMBER = '971543948630';

// One-time CSS injection: marquee keyframes, reveal-on-scroll classes, hover affordances,
// responsive media queries (1100 / 768 / 480 px breakpoints, tuned down to 320 px),
// and a prefers-reduced-motion override. Same pattern as design-canvas.jsx — keeps
// motion + breakpoint logic in one place instead of scattered across inline styles.
if (typeof document !== 'undefined' && !document.getElementById('hyb-styles')) {
  const s = document.createElement('style');
  s.id = 'hyb-styles';
  s.textContent = `
@keyframes hybMarquee { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }

.hyb-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.2,.7,.3,1); }
.hyb-reveal.is-in { opacity: 1; transform: none; }

.hyb-lift { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease-out, border-color .2s ease-out; }
.hyb-lift:hover { transform: translateY(-3px); }

.hyb-navlink { position: relative; padding: 4px 0; }
.hyb-navlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.hyb-navlink:hover::after { transform: scaleX(1); }

.hyb-arrowbtn .hyb-arrow { display: inline-block; transition: transform .2s ease-out; }
.hyb-arrowbtn:hover .hyb-arrow { transform: translateX(4px); }

.hyb-book-cta { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease-out; }
.hyb-book-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(10,10,10,0.35), 0 6px 14px rgba(0,0,0,0.18); }

.hyb-marquee { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); }

.hyb-burger { display: none; }
.hyb-mobile-menu { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hyb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hyb-lift, .hyb-arrowbtn .hyb-arrow, .hyb-navlink::after { transition: none !important; }
  .hyb-marquee-track { animation: none !important; }
}

/* ≤ 1100 px — tablet landscape */
@media (max-width: 1100px) {
  .hyb-hero { padding: 72px 40px 88px !important; gap: 48px !important; grid-template-columns: 1fr !important; }
  .hyb-hero-title { font-size: 64px !important; }
  .hyb-hero-aside { max-width: 560px; margin: 0 auto; }
  .hyb-marquee-track { font-size: 52px !important; }
  .hyb-about { padding: 120px 40px !important; }
  .hyb-about-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .hyb-about-title { font-size: 72px !important; }
  .hyb-services { padding: 120px 40px 64px !important; }
  .hyb-services-header { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .hyb-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hyb-services-title { font-size: 88px !important; }
  .hyb-numbers { padding: 100px 40px !important; }
  .hyb-numbers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 48px !important; }
  .hyb-numbers-stat { font-size: 96px !important; }
  .hyb-awards { padding: 120px 40px !important; }
  .hyb-awards-header { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .hyb-awards-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; gap: 16px !important; }
  .hyb-awards-tile { grid-column: auto !important; grid-row: auto !important; min-height: 240px; }
  .hyb-awards-quote-text { font-size: 30px !important; }
  .hyb-awards-title { font-size: 88px !important; }
  .hyb-testimonials { padding: 120px 40px !important; }
  .hyb-testimonials-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .hyb-testimonials-title { font-size: 72px !important; }
  .hyb-contact { padding: 120px 40px 64px !important; }
  .hyb-contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .hyb-contact-title { font-size: 96px !important; }
  .hyb-footer { padding: 56px 40px 32px !important; }
}

/* ≤ 768 px — tablet portrait */
@media (max-width: 768px) {
  .hyb-nav { padding: 14px 24px !important; }
  .hyb-nav-links { display: none !important; }
  .hyb-nav-cta { display: none !important; }
  .hyb-burger { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid #E5E9EE; border-radius: 8px; cursor: pointer; padding: 0; color: #0A0A0A; }
  .hyb-mobile-menu.is-open { display: flex !important; flex-direction: column; gap: 4px; padding: 8px 24px 20px; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #E5E9EE; position: absolute; top: 100%; left: 0; right: 0; }
  .hyb-mobile-menu a { padding: 14px 0; font-size: 16px; color: #0A0A0A; text-decoration: none; border-bottom: 1px solid rgba(10,10,10,0.06); font-weight: 500; }
  .hyb-mobile-menu .hyb-mobile-cta { margin-top: 12px; padding: 14px 22px; background: #0A0A0A; color: #fff; border-radius: 8px; text-align: center; border-bottom: none; font-weight: 600; }

  .hyb-hero { padding: 56px 24px 64px !important; gap: 40px !important; }
  .hyb-hero-title { font-size: 44px !important; line-height: 1.05 !important; }
  .hyb-hero-sub { font-size: 17px !important; }
  .hyb-hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin-bottom: 36px !important; }
  .hyb-hero-cta { justify-content: center !important; }
  .hyb-hero-aside-card { left: -12px !important; }
  .hyb-hero-brands { gap: 20px !important; }

  .hyb-marquee { padding: 24px 0 !important; }
  .hyb-marquee-track { font-size: 40px !important; gap: 28px !important; }

  .hyb-about { padding: 88px 24px !important; }
  .hyb-about-title { font-size: 52px !important; }
  .hyb-about-text { font-size: 18px !important; }

  .hyb-services { padding: 88px 24px 56px !important; }
  .hyb-services-title { font-size: 60px !important; }

  .hyb-numbers { padding: 80px 24px !important; }
  .hyb-numbers-stat { font-size: 80px !important; }

  .hyb-awards { padding: 88px 24px !important; }
  .hyb-awards-title { font-size: 60px !important; }
  .hyb-awards-tile { min-height: 220px !important; }
  .hyb-awards-quote-text { font-size: 26px !important; }

  .hyb-testimonials { padding: 88px 24px !important; }
  .hyb-testimonials-title { font-size: 52px !important; }
  .hyb-quote { padding: 22px !important; }
  .hyb-quote-text { font-size: 17px !important; }

  .hyb-contact { padding: 88px 24px 48px !important; }
  .hyb-contact-title { font-size: 76px !important; }
  .hyb-contact-form { padding: 28px !important; }
  .hyb-contact-info { font-size: 16px !important; }

  .hyb-footer { padding: 48px 24px 32px !important; }
  .hyb-footer-bottom { flex-direction: column !important; gap: 14px !important; align-items: flex-start !important; }
}

/* ≤ 480 px — phone (tuned down to 320 px iPhone SE) */
@media (max-width: 480px) {
  .hyb-nav { padding: 12px 16px !important; }
  .hyb-mobile-menu.is-open { padding: 8px 16px 16px !important; }

  .hyb-hero { padding: 40px 16px 48px !important; gap: 32px !important; }
  .hyb-hero-title { font-size: 32px !important; }
  .hyb-hero-sub { font-size: 16px !important; }
  .hyb-hero-aside-card { display: none !important; }
  .hyb-hero-brands { gap: 16px 24px !important; }

  .hyb-marquee-track { font-size: 32px !important; }

  .hyb-about { padding: 72px 16px !important; }
  .hyb-about-title { font-size: 40px !important; }
  .hyb-about-text { font-size: 16px !important; }
  .hyb-about-tag { font-size: 13px !important; padding: 8px 14px !important; }

  .hyb-services { padding: 72px 16px 40px !important; }
  .hyb-services-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .hyb-services-title { font-size: 44px !important; }
  .hyb-services-aside { font-size: 15px !important; }

  .hyb-numbers { padding: 64px 16px !important; }
  .hyb-numbers-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hyb-numbers-stat { font-size: 64px !important; }
  .hyb-numbers-label { font-size: 13px !important; }

  .hyb-awards { padding: 72px 16px !important; }
  .hyb-awards-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hyb-awards-tile { min-height: 200px !important; }
  .hyb-awards-title { font-size: 44px !important; }
  .hyb-awards-quote { padding: 22px !important; }
  .hyb-awards-quote-text { font-size: 24px !important; }

  .hyb-testimonials { padding: 72px 16px !important; }
  .hyb-testimonials-title { font-size: 40px !important; }
  .hyb-testimonials-sub { font-size: 15px !important; }
  .hyb-quote { padding: 18px !important; gap: 14px !important; }
  .hyb-quote-text { font-size: 16px !important; }

  .hyb-contact { padding: 72px 16px 40px !important; }
  .hyb-contact-title { font-size: 56px !important; }
  .hyb-contact-form { padding: 22px !important; gap: 16px !important; }
  .hyb-contact-info { font-size: 15px !important; }

  .hyb-footer { padding: 40px 16px 28px !important; }
  .hyb-footer-wordmark { margin-bottom: 36px !important; }
  .hyb-footer-bottom-links { gap: 14px !important; flex-wrap: wrap !important; }

  .hyb-book-cta { bottom: 18px !important; right: 18px !important; padding: 12px 18px !important; font-size: 14px !important; }
}
  `;
  document.head.appendChild(s);
}

// ---- B: Nav (swapped in for D's hero compatibility) ----
function HybNav() {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <nav className="hyb-nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid #E5E9EE`,
    }}>
      <a href="#top" onClick={close} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none' }}>
        <div style={{
          width: 38, height: 38, borderRadius: 8, background: '#fff',
          border: `1px solid ${hybColors.border}`, overflow: 'hidden', flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <img src="assets/logo-mark.jpeg" alt="The Good HR" style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          }} />
        </div>
        <div>
          <div style={{ fontSize: 15, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.01em', color: hybColors.ink }}>The Good HR</div>
          <div style={{ fontSize: 11, color: hybColors.muted, marginTop: 2 }}>by Mohamed Elaidy</div>
        </div>
      </a>
      <div className="hyb-nav-links" style={{ display: 'flex', gap: 32, fontSize: 14, fontWeight: 500 }}>
        <a href="#services" className="hyb-navlink" style={{ color: hybColors.ink, textDecoration: 'none' }}>Services</a>
        <a href="#about" className="hyb-navlink" style={{ color: hybColors.ink, textDecoration: 'none' }}>About</a>
        <a href="#awards" className="hyb-navlink" style={{ color: hybColors.ink, textDecoration: 'none' }}>Awards</a>
        <a href="#testimonials" className="hyb-navlink" style={{ color: hybColors.ink, textDecoration: 'none' }}>Testimonials</a>
      </div>
      <a href="#contact" className="hyb-nav-cta" style={{
        background: hybColors.ink, color: '#fff',
        padding: '12px 22px', borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: 'pointer',
        textDecoration: 'none', display: 'inline-block',
      }}>
        Book a consultation
      </a>
      <button
        type="button"
        className="hyb-burger"
        aria-label={open ? 'Close menu' : 'Open menu'}
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
          {open ? (
            <g><line x1="3.5" y1="3.5" x2="12.5" y2="12.5" /><line x1="12.5" y1="3.5" x2="3.5" y2="12.5" /></g>
          ) : (
            <g><line x1="2.5" y1="5.5" x2="13.5" y2="5.5" /><line x1="2.5" y1="10.5" x2="13.5" y2="10.5" /></g>
          )}
        </svg>
      </button>
      <div className={`hyb-mobile-menu${open ? ' is-open' : ''}`}>
        <a href="#services" onClick={close}>Services</a>
        <a href="#about" onClick={close}>About</a>
        <a href="#awards" onClick={close}>Awards</a>
        <a href="#testimonials" onClick={close}>Testimonials</a>
        <a href="#contact" onClick={close} className="hyb-mobile-cta">Book a consultation</a>
      </div>
    </nav>
  );
}

// ---- B: Hero (swapped in for A's hero) ----
function HybHero() {
  return (
    <section className="hyb-hero" style={{
      padding: '88px 56px 100px',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64,
      alignItems: 'center', position: 'relative',
      background: `linear-gradient(180deg, #FFFFFF 0%, #F4F6F9 100%)`,
      color: hybColors.ink,
      fontFamily: '"Manrope", "Inter", system-ui, sans-serif',
    }}>
      <div>
        <h1 className="hyb-reveal hyb-hero-title" style={{
          fontSize: 84, lineHeight: 1.02, letterSpacing: '-0.035em',
          fontWeight: 700, margin: 0, marginBottom: 24,
          transitionDelay: '80ms',
        }}>
          HR that puts
          <span style={{
            display: 'inline-block',
            background: `linear-gradient(120deg, ${hybColors.teal} 0%, ${hybColors.tealDark} 100%)`,
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            paddingRight: 8,
          }}> people </span>
          first, because Satisfaction is not a luxury.
        </h1>

        <p className="hyb-reveal hyb-hero-sub" style={{ fontSize: 19, lineHeight: 1.55, color: hybColors.muted, maxWidth: 540, margin: 0, marginBottom: 36, transitionDelay: '160ms' }}>
          I support companies that want their people to feel valued, supported, and able to grow — and I help individuals find clarity, purpose, and a career that actually feels good to wake up to.
        </p>

        <div className="hyb-reveal hyb-hero-ctas" style={{ display: 'flex', gap: 12, marginBottom: 48, transitionDelay: '240ms' }}>
          <a href="#contact" className="hyb-arrowbtn hyb-hero-cta" style={{
            background: hybColors.ink, color: '#fff', border: 'none',
            padding: '16px 28px', borderRadius: 10, fontSize: 15, fontWeight: 600,
            cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
            textDecoration: 'none',
          }}>
            Let's talk <span className="hyb-arrow">→</span>
          </a>
          <a href="#services" className="hyb-hero-cta" style={{
            background: '#fff', color: hybColors.ink, border: `1px solid #E5E9EE`,
            padding: '16px 28px', borderRadius: 10, fontSize: 15, fontWeight: 600, cursor: 'pointer',
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
          }}>
            See services
          </a>
        </div>

        <div className="hyb-reveal" style={{ transitionDelay: '320ms' }}>
          <div style={{ fontSize: 12, color: hybColors.muted, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>
            Industries
          </div>
          <div className="hyb-hero-brands" style={{ display: 'flex', gap: 32, alignItems: 'center', opacity: 0.85, flexWrap: 'wrap' }}>
            {['Real Estate', 'Education', 'Sports', 'Banking', 'F&B', 'Entrepreneurship', 'Events'].map(b => (
              <div key={b} style={{ fontSize: 16, fontWeight: 700, color: hybColors.muted, letterSpacing: '-0.01em' }}>
                {b}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="hyb-reveal hyb-hero-aside" style={{ position: 'relative', aspectRatio: '4/5', transitionDelay: '160ms' }}>
        <div style={{
          position: 'absolute', inset: 0, borderRadius: 20, overflow: 'hidden',
          boxShadow: '0 40px 80px rgba(14,27,44,0.15)',
        }}>
          <img src="assets/portrait-formal.jpeg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="Mohamed Elaidy" />
        </div>
        <div className="hyb-hero-aside-card" style={{
          position: 'absolute', top: 40, left: -32,
          background: '#fff', borderRadius: 14, padding: '16px 20px',
          boxShadow: '0 20px 40px rgba(14,27,44,0.18)',
          display: 'flex', alignItems: 'center', gap: 14, maxWidth: 280,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: hybColors.orange, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22,
          }}>★</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Best Recruiter ×17</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- A: Marquee (kept) ----
function HybMarquee() {
  const items = ['Recruitment', '✦', 'Employee Satisfaction', '✦', 'Training', '✦', 'Career Coaching', '✦', 'Financial Freedom', '✦', 'Well-Being', '✦'];
  return (
    <section className="hyb-marquee" style={{
      background: hybColors.orange, color: hybColors.ink, padding: '34px 0',
      overflow: 'hidden', borderTop: `1px solid ${hybColors.ink}`, borderBottom: `1px solid ${hybColors.ink}`,
    }}>
      <div className="hyb-marquee-track" style={{
        display: 'flex', gap: 40, whiteSpace: 'nowrap',
        animation: 'hybMarquee 20s linear infinite',
        fontFamily: '"Fraunces", serif', fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em',
      }}>
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} style={{ fontStyle: it === '✦' ? 'normal' : 'italic', fontWeight: 400 }}>{it}</span>
        ))}
      </div>
    </section>
  );
}

// ---- A: About (kept) ----
const ABOUT_VIDEO_ID = 's_U4bv1gcDg';

function HybAbout() {
  const [muted, setMuted] = React.useState(true);
  const [expanded, setExpanded] = React.useState(false);
  return (
    <section id="about" className="hyb-about" style={{ padding: '140px 56px', background: hybColors.paper, position: 'relative' }}>
      <div className="hyb-about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div className="hyb-reveal" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 24, opacity: 0.6 }}>
            (01) — About
          </div>
          <h2 className="hyb-reveal hyb-about-title" style={{
            fontFamily: '"Fraunces", serif', fontSize: 96, lineHeight: 0.95, letterSpacing: '-0.03em',
            fontWeight: 400, margin: 0, marginBottom: 40,
            transitionDelay: '80ms',
          }}>
            Who is <span style={{ fontStyle: 'italic', color: hybColors.teal }}>THE GOOD HR</span>
          </h2>
          <p className="hyb-reveal hyb-about-text" style={{ fontSize: 21, lineHeight: 1.5, maxWidth: 520, marginBottom: 24, transitionDelay: '160ms' }}>
            I'm Mohamed Elaidy, and my work is rooted in a simple belief: people deserve to feel good at work. When employees feel valued, supported, and connected to a meaningful culture, organizations don't just perform better, they transform. That belief isn't just a philosophy for me; it's my ikigai, the purpose that gives my career direction and meaning.
          </p>
          <p className="hyb-reveal hyb-about-text" style={{ fontSize: 21, lineHeight: 1.5, maxWidth: 520, marginBottom: 24, transitionDelay: '200ms' }}>
            My journey has taken me across a wide range of industries, from Real Estate and Education to Sports, Banking, F&B, Sales, Investment, Entrepreneurship, Events, and Business Development. Each experience taught me something new about people, motivation, and the cultural dynamics that shape performance.
          </p>
          {expanded && (
            <>
              <p className="hyb-about-text" style={{ fontSize: 21, lineHeight: 1.5, maxWidth: 520, marginBottom: 24 }}>
                I've hired, trained, coached, and built teams from the ground up, helping companies uncover the hidden issues that quietly affect morale and productivity. Over time, one truth became clear: employee satisfaction is one of the strongest drivers of organizational success.
              </p>
              <p className="hyb-about-text" style={{ fontSize: 21, lineHeight: 1.5, maxWidth: 520, marginBottom: 24 }}>
                That insight led me to pursue a Doctorate in Employee Satisfaction and Organizational Performance at the University of Murcia in Spain, building on my Master's in Entrepreneurship and my Bachelor's in Business Information Systems. My academic work and professional experience share the same purpose, understanding how people and performance connect.
              </p>
              <p className="hyb-about-text" style={{ fontSize: 21, lineHeight: 1.5, maxWidth: 520, marginBottom: 24 }}>
                The Good HR is where all of this comes together. It's my way of bringing HR back to its core: human, honest, and genuinely helpful. I help organizations build cultures where people thrive, leaders grow, and performance becomes a natural outcome of a healthy workplace.
              </p>
              <p className="hyb-about-text" style={{ fontSize: 21, lineHeight: 1.5, maxWidth: 520, marginBottom: 24 }}>
                This isn't just my career, it's the work I'm meant to do. It's my ikigai.
              </p>
            </>
          )}
          <button
            type="button"
            onClick={() => setExpanded(e => !e)}
            style={{
              background: 'none', border: 'none', padding: 0, marginBottom: 40,
              color: hybColors.teal, fontSize: 15, fontWeight: 600, cursor: 'pointer',
              fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 6,
            }}
          >
            {expanded ? 'See less' : <>See more <span aria-hidden>→</span></>}
          </button>
          <div className="hyb-reveal" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', transitionDelay: '360ms' }}>
            {['PhD candidate · Univ. of Murcia', 'MA Entrepreneurship', 'BSc Business Info Systems', 'Speaker'].map(t => (
              <span key={t} className="hyb-about-tag" style={{ padding: '10px 18px', borderRadius: 999, border: `1px solid ${hybColors.ink}`, fontSize: 14, fontWeight: 500 }}>{t}</span>
            ))}
          </div>
        </div>
        <div className="hyb-reveal" style={{ position: 'relative', transitionDelay: '120ms' }}>
          <div style={{
            position: 'relative', aspectRatio: '9/16',
            width: '100%', maxWidth: 320, margin: '0 auto',
          }}>
            <div style={{
              position: 'absolute', inset: 0, borderRadius: 28, overflow: 'hidden',
              boxShadow: '0 40px 80px rgba(14,27,44,0.18)', background: '#000',
            }}>
              <iframe
                title="The Good HR — Mohamed Elaidy"
                src={`https://www.youtube.com/embed/${ABOUT_VIDEO_ID}?autoplay=1&mute=${muted ? 1 : 0}&loop=1&playlist=${ABOUT_VIDEO_ID}&controls=1&modestbranding=1&playsinline=1&rel=0`}
                allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
                style={{ width: '100%', height: '100%', border: 0 }}
              />
            </div>
            {muted && (
              <button
                type="button"
                onClick={() => setMuted(false)}
                aria-label="Unmute video"
                style={{
                  position: 'absolute', bottom: 16, left: '50%', transform: 'translateX(-50%)',
                  zIndex: 2,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '10px 18px', borderRadius: 999,
                  background: 'rgba(10,10,10,0.85)', color: '#fff',
                  border: '1px solid rgba(255,255,255,0.2)',
                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  backdropFilter: 'blur(8px)',
                  WebkitBackdropFilter: 'blur(8px)',
                  fontFamily: 'inherit',
                }}
              >
                🔊 Tap for sound
              </button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- C: Practice section (swapped in for A's services) — restyled to fit dark editorial flow ----
function HybPractice() {
  const pieces = [
    { num: '01', title: 'Recruitment & Talent Support', kicker: 'The hiring practice', img: 'assets/laptop-work-2.jpeg', body: "I help companies hire the right people — calmly, clearly, and without the usual noise. From sourcing to interviews to offer negotiation, I handle the full process with intention. The goal isn't to fill a seat. The goal is to bring in someone who actually fits and stays." },
    { num: '02', title: 'Employee Satisfaction & Well-Being', kicker: 'The heart of the work', img: 'assets/consult-wood.jpeg', body: 'I help companies build environments where people feel supported, respected, and able to grow — and I help employees find clarity and satisfaction in their day-to-day work. Better culture. Better communication. Better performance.' },
    { num: '03', title: 'Training & Development', kicker: 'Live & in person', img: 'assets/speaking-1.jpeg', body: "Training that feels real, not theoretical. Manager bootcamps, sales enablement, soft-skills sessions — practical, engaging, built around the team's actual challenges. No boring slides. No generic content. Just learning that sticks." },
    { num: '04', title: 'Career Coaching & Financial Freedom', kicker: 'For your career', img: 'assets/meeting-3.jpeg', body: 'For people who want more clarity, more confidence, and more control over their careers and lives. CVs, LinkedIn, interviews, salary conversations — and for those who want to go further, healthier money habits and real financial freedom, step by step.' },
  ];
  return (
    <section id="services" className="hyb-services" style={{ padding: '140px 56px 80px', background: hybColors.ink, color: hybColors.paper }}>
      <div className="hyb-services-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80 }}>
        <div>
          <div className="hyb-reveal" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 24, opacity: 0.5 }}>
            (02) — Practice
          </div>
          <h2 className="hyb-reveal hyb-services-title" style={{
            fontFamily: '"Fraunces", serif', fontSize: 112, lineHeight: 0.92, letterSpacing: '-0.03em',
            fontWeight: 400, margin: 0,
            transitionDelay: '80ms',
          }}>
            The support that <span style={{ fontStyle: 'italic', color: hybColors.teal }}>helps people grow</span>,<br/>and companies grow with them.
          </h2>
        </div>
        <div className="hyb-reveal hyb-services-aside" style={{ fontSize: 16, maxWidth: 320, opacity: 0.7, lineHeight: 1.5, fontStyle: 'italic', fontFamily: '"Fraunces", serif', transitionDelay: '160ms' }}>
          Four areas of work, one human approach.
        </div>
      </div>

      <div className="hyb-services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {pieces.map((p, i) => (
          <article key={p.num} className="hyb-reveal hyb-lift" style={{ display: 'flex', flexDirection: 'column', transitionDelay: `${i * 80}ms` }}>
            <div style={{ aspectRatio: '3/4', overflow: 'hidden', marginBottom: 18, border: `1px solid rgba(245,242,236,0.15)`, borderRadius: 6 }}>
              <img src={p.img} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'sepia(0.06) saturate(0.95)' }} alt="" />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
              <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 20, color: hybColors.orange }}>{p.num}.</span>
              <span style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 600, opacity: 0.55 }}>{p.kicker}</span>
            </div>
            <h3 style={{ fontFamily: '"Fraunces", serif', fontSize: 36, fontWeight: 500, margin: 0, marginBottom: 12, letterSpacing: '-0.015em' }}>
              {p.title}
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0, opacity: 0.75 }}>{p.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ---- A: Numbers (kept) ----
function HybNumbers() {
  const stats = [
    { n: '300+', label: 'Roles Closed' },
    { n: '10+', label: 'Industries Served' },
    { n: '17+', label: 'Best Recruiter Certificates' },
    { n: '94%', label: 'Retention Rate' },
  ];
  return (
    <section className="hyb-numbers" style={{
      padding: '120px 56px', background: hybColors.paper, color: hybColors.ink,
      borderTop: `1px solid ${hybColors.ink}`, borderBottom: `1px solid ${hybColors.ink}`,
    }}>
      <div className="hyb-numbers-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {stats.map((s, i) => (
          <div key={s.label} className="hyb-reveal" style={{ transitionDelay: `${i * 80}ms` }}>
            <div className="hyb-numbers-stat" style={{ fontFamily: '"Fraunces", serif', fontSize: 120, lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 400 }}>
              {s.n}
            </div>
            <div className="hyb-numbers-label" style={{ fontSize: 16, marginTop: 16, opacity: 0.6, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
              {s.label}
            </div>
          </div>
        ))}
      </div>
      <div className="hyb-reveal" style={{
        marginTop: 64, textAlign: 'center',
        fontFamily: '"Fraunces", serif', fontStyle: 'italic',
        fontSize: 'clamp(28px, 4vw, 48px)', lineHeight: 1.2, letterSpacing: '-0.02em',
      }}>
        Exceptional Talents Require <span style={{ color: hybColors.teal }}>THE GOOD HR</span>
      </div>
    </section>
  );
}

// ---- A: Awards (kept) ----
function HybAwards() {
  const ig = {
    marketing: 'https://www.instagram.com/p/DV33F-Tjenr/',
    bestRecruiter: 'https://www.instagram.com/p/DSISWPKgQ_d/',
    realEstate: 'https://www.instagram.com/p/DMh6DdwzN3_/',
    handgoal: 'https://www.instagram.com/p/DL2eq8UzVxg/',
    recruiterOfMonth: 'https://www.instagram.com/p/DErpyYbpjI8/',
  };
  const tileLink = { display: 'block', width: '100%', height: '100%', textDecoration: 'none', color: 'inherit' };
  return (
    <section id="awards" className="hyb-awards" style={{ padding: '140px 56px', background: hybColors.paper }}>
      <div className="hyb-awards-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
        <div>
          <div className="hyb-reveal" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 24, opacity: 0.6 }}>
            (03) — Recognition
          </div>
          <h2 className="hyb-reveal hyb-awards-title" style={{
            fontFamily: '"Fraunces", serif', fontSize: 112, lineHeight: 0.92, letterSpacing: '-0.03em',
            fontWeight: 400, margin: 0,
            transitionDelay: '80ms',
          }}>
            A few <span style={{ fontStyle: 'italic', color: hybColors.orange }}>shelves</span><br/>worth of trophies.
          </h2>
        </div>
      </div>
      <div className="hyb-awards-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gridAutoRows: '180px', gap: 16 }}>
        <div className="hyb-reveal hyb-lift hyb-awards-tile" style={{ gridColumn: 'span 4', gridRow: 'span 3', borderRadius: 8, overflow: 'hidden', position: 'relative', transitionDelay: '0ms' }}>
          <a href={ig.marketing} target="_blank" rel="noopener noreferrer" style={tileLink}>
            <img src="assets/marketing-trophy.jpeg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
            <HybCap label="Marketing Innovation" sub="Agency of the Year · 2025" />
          </a>
        </div>
        <div className="hyb-reveal hyb-lift hyb-awards-tile" style={{ gridColumn: 'span 4', gridRow: 'span 3', borderRadius: 8, overflow: 'hidden', position: 'relative', transitionDelay: '80ms' }}>
          <a href={ig.bestRecruiter} target="_blank" rel="noopener noreferrer" style={tileLink}>
            <img src="assets/certs-large.jpeg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
            <HybCap label="Best Recruiter ×17" sub="" />
          </a>
        </div>
        <div className="hyb-reveal hyb-lift hyb-awards-tile" style={{ gridColumn: 'span 4', gridRow: 'span 2', borderRadius: 8, overflow: 'hidden', position: 'relative', transitionDelay: '160ms' }}>
          <a href={ig.realEstate} target="_blank" rel="noopener noreferrer" style={tileLink}>
            <img src="assets/green-awards.jpeg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
            <HybCap label="Real Estate Awards" sub="Winner · 2024" />
          </a>
        </div>
        <div className="hyb-reveal hyb-lift hyb-awards-tile hyb-awards-quote" style={{ gridColumn: 'span 4', gridRow: 'span 1', background: hybColors.teal, color: '#fff', borderRadius: 8, padding: '24px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', transitionDelay: '240ms' }}>
          <div className="hyb-awards-quote-text" style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 32, lineHeight: 1.1 }}>
            Exceptional Talents Require The Good HR
          </div>
        </div>
        <div className="hyb-reveal hyb-lift hyb-awards-tile" style={{ gridColumn: 'span 6', gridRow: 'span 3', borderRadius: 8, overflow: 'hidden', position: 'relative', transitionDelay: '320ms' }}>
          <a href={ig.handgoal} target="_blank" rel="noopener noreferrer" style={tileLink}>
            <img src="assets/trophy-1.jpeg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
            <HybCap label="Handgoal Cup" sub="Champions · Ramadan 2026" />
          </a>
        </div>
        <div className="hyb-reveal hyb-lift hyb-awards-tile" style={{ gridColumn: 'span 6', gridRow: 'span 3', borderRadius: 8, overflow: 'hidden', position: 'relative', transitionDelay: '400ms' }}>
          <a href={ig.recruiterOfMonth} target="_blank" rel="noopener noreferrer" style={tileLink}>
            <img src="assets/certificate-row.jpeg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="" />
            <HybCap label="Recruiter of the Month" sub="6× honored" />
          </a>
        </div>
      </div>
    </section>
  );
}

function HybCap({ label, sub }) {
  return (
    <div style={{
      position: 'absolute', left: 16, bottom: 16, right: 16,
      padding: '12px 16px', borderRadius: 6,
      background: 'rgba(10,10,10,0.7)', backdropFilter: 'blur(6px)',
      WebkitBackdropFilter: 'blur(6px)', color: '#fff',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{label}</div>
        {sub && <div style={{ fontSize: 12, opacity: 0.8 }}>{sub}</div>}
      </div>
      <div style={{ fontSize: 18 }}>↗</div>
    </div>
  );
}

// ---- B: Testimonials (swapped in) — restyled with editorial type rhythm ----
function HybTestimonials() {
  const quotes = [
    { text: "From the very first minute, I felt like Mohamed was an old friend. He quickly understood exactly what I needed just by asking a few questions and reviewing my CV beforehand. He guided me in a practical way, offering clear solutions and direct suggestions to my career questions and doubts.", who: "Career-coaching client", role: "2025" },
    { text: "Although we didn't work directly together, I had the chance to engage with him on several occasions, and every conversation left a great impression. Mohamed is highly knowledgeable in recruitment and brings a positive, professional attitude to every interaction. He's approachable, insightful, and always willing to share his expertise.", who: "Industry peer", role: "HR community" },
    { text: "I appreciate his significant contributions in recruiting and selecting the right talent for our company. Beyond his recruitment skills, Mohamed has a wonderful humanitarian spirit — he genuinely cares about candidates and creates a comfortable, supportive environment for everyone he works with.", who: "Hiring partner", role: "Long-term client" },
  ];
  return (
    <section id="testimonials" className="hyb-testimonials" style={{ padding: '140px 56px', background: hybColors.ink, color: hybColors.paper }}>
      <div className="hyb-testimonials-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, marginBottom: 56 }}>
        <div>
          <div className="hyb-reveal" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 24, opacity: 0.5 }}>
            (04) — Testimonials
          </div>
          <h2 className="hyb-reveal hyb-testimonials-title" style={{
            fontFamily: '"Fraunces", serif', fontSize: 96, lineHeight: 0.95, letterSpacing: '-0.03em',
            fontWeight: 400, margin: 0, marginBottom: 24,
            transitionDelay: '80ms',
          }}>
            What clients say after a <span style={{ fontStyle: 'italic', color: hybColors.teal }}>quarter</span> together.
          </h2>
          <p className="hyb-reveal hyb-testimonials-sub" style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.7, maxWidth: 380, transitionDelay: '160ms' }}>
            A small sample. Full references and case studies available on request.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {quotes.map((q, i) => (
            <HybQuote key={q.who} {...q} delay={i * 80} />
          ))}
        </div>
      </div>
    </section>
  );
}

function HybQuote({ text, who, role, delay = 0 }) {
  return (
    <article className="hyb-reveal hyb-lift hyb-quote" style={{
      background: 'rgba(245,242,236,0.04)', border: '1px solid rgba(245,242,236,0.12)',
      borderRadius: 12, padding: 28,
      transitionDelay: `${delay}ms`,
    }}>
      <p className="hyb-quote-text" style={{ fontSize: 19, lineHeight: 1.5, margin: 0, marginBottom: 14 }}>"{text}"</p>
      <div style={{ fontSize: 13 }}>
        <span style={{ fontWeight: 600 }}>{who}</span>
        <span style={{ opacity: 0.6 }}> · {role}</span>
      </div>
    </article>
  );
}

// ---- A: Contact (kept) ----
function HybContact() {
  const [needs, setNeeds] = React.useState([]);
  const toggleNeed = (t) => setNeeds(c => c.includes(t) ? c.filter(x => x !== t) : [...c, t]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const f = new FormData(e.target);
    const lines = [
      `Hi Mohamed, I'd like to discuss working together.`,
      ``,
      `Name: ${f.get('name') || '—'}`,
      `Email: ${f.get('email') || '—'}`,
      `Company: ${f.get('company') || '—'}`,
      `Need: ${needs.length ? needs.join(', ') : '—'}`,
      `Details: ${f.get('details') || '—'}`,
    ];
    const msg = encodeURIComponent(lines.join('\n'));
    window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${msg}`, '_blank', 'noopener,noreferrer');
  };

  return (
    <section id="contact" className="hyb-contact" style={{ padding: '140px 56px 80px', background: hybColors.paper, color: hybColors.ink }}>
      <div className="hyb-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div className="hyb-reveal" style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 24, opacity: 0.6 }}>
            (05) — Book a call
          </div>
          <h2 className="hyb-reveal hyb-contact-title" style={{
            fontFamily: '"Fraunces", serif', fontSize: 128, lineHeight: 0.9, letterSpacing: '-0.03em',
            fontWeight: 400, margin: 0, marginBottom: 32,
            transitionDelay: '80ms',
          }}>
            Let's<br/>
            <span style={{ fontStyle: 'italic', color: hybColors.orange }}>talk</span> people.
          </h2>
          <p className="hyb-reveal" style={{ fontSize: 20, lineHeight: 1.5, maxWidth: 480, marginBottom: 24, transitionDelay: '160ms' }}>
            Let's talk about what you need — clearly, simply, and without pressure. A 30-minute discovery call where you tell me what's happening, and I help you understand your next step. No slides. No selling. Just a real conversation.
          </p>
          <ul className="hyb-reveal" style={{
            listStyle: 'none', padding: 0, margin: '0 0 40px',
            display: 'flex', flexDirection: 'column', gap: 8,
            fontSize: 16, opacity: 0.85, maxWidth: 480, transitionDelay: '200ms',
          }}>
            <li style={{ display: 'flex', gap: 10 }}><span style={{ color: hybColors.teal }}>→</span> hiring and need support</li>
            <li style={{ display: 'flex', gap: 10 }}><span style={{ color: hybColors.teal }}>→</span> improving employee satisfaction</li>
            <li style={{ display: 'flex', gap: 10 }}><span style={{ color: hybColors.teal }}>→</span> planning training</li>
            <li style={{ display: 'flex', gap: 10 }}><span style={{ color: hybColors.teal }}>→</span> looking for career clarity or financial direction</li>
          </ul>
          <div className="hyb-reveal hyb-contact-info" style={{ display: 'flex', flexDirection: 'column', gap: 16, fontSize: 18, transitionDelay: '240ms' }}>
            <a href="mailto:thegoodhr1@gmail.com" style={{ color: hybColors.ink, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ width: 40, textAlign: 'center', opacity: 0.5 }}>✉</span>
              thegoodhr1@gmail.com
            </a>
            <a href="https://www.linkedin.com/in/mohamed-elaidy-228aa2162/" target="_blank" rel="noopener noreferrer" style={{ color: hybColors.ink, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ width: 40, textAlign: 'center', opacity: 0.5 }}>↗</span>
              linkedin.com/in/mohamed-elaidy
            </a>
            <a style={{ color: hybColors.ink, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ width: 40, textAlign: 'center', opacity: 0.5 }}>◐</span>
              UAE · Egypt · Remote
            </a>
          </div>
        </div>
        <form className="hyb-reveal hyb-contact-form" style={{
          background: hybColors.ink, color: hybColors.paper,
          borderRadius: 12, padding: 40, display: 'flex', flexDirection: 'column', gap: 20,
          transitionDelay: '120ms',
        }} onSubmit={handleSubmit}>
          <HybField name="name" label="Your name" placeholder="e.g. Sara Kassem" />
          <HybField name="email" type="email" label="Work email" placeholder="sara@company.com" />
          <HybField name="company" label="Company" placeholder="Where you work" />
          <div>
            <div style={{ fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 10 }}>What do you need?</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Recruitment', 'Employee Satisfaction', 'Training', 'Career Coaching', 'Financial Freedom', 'Other'].map(t => {
                const active = needs.includes(t);
                return (
                  <button
                    key={t}
                    type="button"
                    onClick={() => toggleNeed(t)}
                    aria-pressed={active}
                    style={{
                      padding: '10px 16px', borderRadius: 999,
                      border: `1px solid rgba(245,242,236,${active ? 0.65 : 0.25})`,
                      background: active ? 'rgba(245,242,236,0.1)' : 'transparent',
                      color: hybColors.paper,
                      fontSize: 14, cursor: 'pointer', fontFamily: 'inherit',
                      transition: 'background .15s, border-color .15s',
                    }}
                  >{t}</button>
                );
              })}
            </div>
          </div>
          <HybField name="details" label="Tell me about it" placeholder="A line or two is enough" textarea />
          <div style={{ fontSize: 12, opacity: 0.6, textAlign: 'center', marginTop: 8 }}>
            I'll reply personally — usually within a day.
          </div>
          <button type="submit" className="hyb-arrowbtn" style={{
            marginTop: 4, padding: '20px', borderRadius: 999,
            background: hybColors.orange, color: hybColors.ink, border: 'none', fontSize: 16, fontWeight: 600, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
          }}>
            Send via WhatsApp <span className="hyb-arrow">→</span>
          </button>
        </form>
      </div>
    </section>
  );
}

function HybField({ label, placeholder, textarea, name, type = 'text' }) {
  return (
    <div>
      <div style={{ fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 8 }}>{label}</div>
      {textarea ? (
        <textarea name={name} placeholder={placeholder} rows={3} style={{
          width: '100%', background: 'transparent', border: 'none',
          borderBottom: '1px solid rgba(245,242,236,0.3)', color: hybColors.paper,
          fontSize: 18, padding: '8px 0', fontFamily: 'inherit', resize: 'none', outline: 'none',
        }} />
      ) : (
        <input name={name} type={type} placeholder={placeholder} style={{
          width: '100%', background: 'transparent', border: 'none',
          borderBottom: '1px solid rgba(245,242,236,0.3)', color: hybColors.paper,
          fontSize: 18, padding: '8px 0', fontFamily: 'inherit', outline: 'none',
        }} />
      )}
    </div>
  );
}

// ---- A: Footer (kept) ----
function HybFooter() {
  return (
    <footer className="hyb-footer" style={{
      background: hybColors.ink, color: hybColors.paper,
      padding: '60px 56px 40px', borderTop: '1px solid rgba(245,242,236,0.1)',
    }}>
      <div className="hyb-footer-lockup" style={{
        display: 'flex', alignItems: 'center', gap: 32,
        marginBottom: 60, flexWrap: 'wrap',
      }}>
        <div className="hyb-footer-wordmark" style={{
          fontFamily: '"Fraunces", serif', fontSize: 'clamp(48px, 18vw, 200px)', lineHeight: 0.85,
          letterSpacing: '-0.04em', fontWeight: 400,
        }}>
          The <span style={{ fontStyle: 'italic', color: hybColors.teal }}>good</span> HR<span style={{ color: hybColors.orange }}>.</span>
        </div>
        <img src="assets/logo-mark.jpeg" alt="The Good HR" style={{
          width: 'clamp(72px, 12vw, 140px)', height: 'clamp(72px, 12vw, 140px)',
          borderRadius: 16, objectFit: 'cover', display: 'block', flexShrink: 0,
        }} />
      </div>
      <div className="hyb-footer-bottom" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
        <div style={{ opacity: 0.6 }}>
          © 2026 Mohamed Elaidy · The Good HR consultancy · developed by{' '}
          <a href="https://sharafshams.net" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 3 }}>
            SharafShams
          </a>
        </div>
        <div className="hyb-footer-bottom-links" style={{ display: 'flex', gap: 24, opacity: 0.85 }}>
          <a href="https://www.linkedin.com/in/mohamed-elaidy-228aa2162/" target="_blank" rel="noopener noreferrer" style={{ color: hybColors.paper, textDecoration: 'none' }}>LinkedIn</a>
          <a href="https://www.instagram.com/thegoodhr1/" target="_blank" rel="noopener noreferrer" style={{ color: hybColors.paper, textDecoration: 'none' }}>Instagram</a>
          <a href="https://www.youtube.com/@ThegoodHR/" target="_blank" rel="noopener noreferrer" style={{ color: hybColors.paper, textDecoration: 'none' }}>YouTube</a>
          <a href="mailto:thegoodhr1@gmail.com" style={{ color: hybColors.paper, textDecoration: 'none' }}>Email</a>
        </div>
      </div>
    </footer>
  );
}

// ---- Floating Book CTA — fixed bottom-right, scrolls to #contact. ----
function HybBookCTA() {
  return (
    <a
      href="#contact"
      aria-label="Book a call"
      className="hyb-arrowbtn hyb-book-cta"
      style={{
        position: 'fixed', bottom: 24, right: 24, zIndex: 100,
        padding: '14px 22px', borderRadius: 999,
        background: hybColors.ink, color: '#fff',
        fontSize: 15, fontWeight: 600, textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 8,
        boxShadow: '0 12px 28px rgba(10,10,10,0.25), 0 4px 12px rgba(0,0,0,0.15)',
        fontFamily: 'inherit',
      }}
    >
      Book <span className="hyb-arrow">→</span>
    </a>
  );
}

function SiteHybrid() {
  // Reveal-on-scroll: one IntersectionObserver toggles `is-in` on every `.hyb-reveal`
  // element as it enters the viewport. One-shot — unobserves once revealed so we don't
  // re-trigger when scrolling back up. Skips silently if IO is unsupported.
  React.useEffect(() => {
    const els = document.querySelectorAll('.hyb-reveal');
    if (els.length === 0) return;
    if (typeof IntersectionObserver === 'undefined') {
      els.forEach(el => el.classList.add('is-in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-in');
          io.unobserve(entry.target);
        }
      });
    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div style={hybStyles.root}>
      <HybNav />
      <HybHero />
      <HybMarquee />
      <HybAbout />
      <HybPractice />
      <HybNumbers />
      <HybAwards />
      <HybTestimonials />
      <HybContact />
      <HybFooter />
      <HybBookCTA />
    </div>
  );
}

window.SiteHybrid = SiteHybrid;
