// Top navigation for the portfolio. Replaces Clay's wordmark with Beshoy's.

const Nav = () => (
  <nav className="top-nav">
    <div className="container">
      <a href="#top" className="wordmark">
        <span className="name">Beshoy</span>
        <span className="dot" />
      </a>
        <div className="links">
          <a href="#work">Work</a>
          <a href="#about">About</a>
          <a href="#skills">Skills</a>
          <a href="#contact">Contact</a>
        </div>
      <div className="right">
        <a href="assets/Beshoy_Reda_CV.pdf" target="_blank" rel="noreferrer"
           style={{ font: '500 14px/1 var(--font-body)', color: 'var(--color-ink)', textDecoration: 'none' }}>
          Resume
        </a>
        <a href="mailto:beshoy.reda.r@gmail.com" className="btn btn-primary btn-sm">Get in touch</a>
      </div>
    </div>
  </nav>
);

// Hero — display-xl headline + sub + button row, with three swappable variants.
// `headlineVariant` is driven by the Tweaks panel (0/1/2).

const HERO_VARIANTS = [
  {
    eyebrow: 'Senior Product Designer · Cairo',
    title: <>Designing <em style={{ fontStyle: 'normal', color: 'var(--color-brand-pink)' }}>thoughtful</em> SaaS products that ship.</>,
    sub: 'I help product teams turn messy problems into clear, useful interfaces — from user research to pixel-perfect design systems.',
  },
  {
    eyebrow: "Hi, I'm Beshoy",
    title: <>I simplify complex SaaS workflows.</>,
    sub: 'Product Designer with 8+ years of experience across SaaS, logistics, media, education, and travel. Currently designing transportation technology at IMPARGO and exploring AI-driven products.',
  },
  {
    eyebrow: 'Portfolio · 2026',
    title: <>The <em style={{ fontStyle: 'normal', color: 'var(--color-brand-pink)' }}>boring</em> parts of SaaS, made delightful.</>,
    sub: 'Senior product designer working on the unsexy interfaces — dispatch tables, fleet ops, news editors — that real people use all day.',
  },
];

const Hero = ({ variant = 0 }) => {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS[0];
  return (
    <section id="top" style={{ paddingTop: 64, paddingBottom: 96 }}>
      <div className="container">
        <div className="hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>{v.eyebrow}</div>
            <h1 className="display-xl" style={{ marginBottom: 24, textWrap: 'balance' }}>{v.title}</h1>
            <p className="lead" style={{ marginBottom: 32, maxWidth: 560 }}>{v.sub}</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#work" className="btn btn-primary">See selected work</a>
              <a href="assets/Beshoy_Reda_CV.pdf" target="_blank" rel="noreferrer" className="btn btn-secondary">
                Download resume
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <path d="M7 10l5 5 5-5"/><path d="M12 15V3"/>
                </svg>
              </a>
            </div>
            <div style={{
              marginTop: 36, display: 'flex', alignItems: 'center', gap: 18,
              color: 'var(--color-muted)', fontSize: 13, flexWrap: 'wrap',
            }}>
              <span>My current role is senior product designer at IMPARGO GmbH</span>
            </div>
          </div>
          <div className="hero-media" style={{
            position: 'relative',
            minHeight: 520,
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
          }}>
            <Magnet
              padding={150}
              strength={3}
              activeTransition="transform 0.3s ease-out"
              inactiveTransition="transform 0.6s ease-in-out"
              style={{ width: '100%', maxWidth: 520, display: 'block' }}
            >
              <img
                src="../assets/hero-coffee.png"
                alt="Coffee cup with Figma logo — Design. Sip. Repeat."
                style={{
                  display: 'block',
                  width: '100%',
                  height: 'auto',
                  pointerEvents: 'none',
                  userSelect: 'none',
                }}
                draggable={false}
              />
            </Magnet>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Nav = Nav;
window.Hero = Hero;
window.HERO_VARIANTS = HERO_VARIANTS;