// Case studies — the main section. Three feature cards cycling the brand palette.
// Each card links to a dedicated case-study page.

const CASES = [
  {
    href: 'case-studies/halla.html',
    bg: 'var(--color-brand-teal)', tone: 'dark',
    thumb: 'assets/halla-thumbnail.png',
    logo: 'assets/halla-logo.png',
    eyebrow: 'Travel · iOS & Android',
    title: 'Halla.app',
    desc: 'Redesigning a travel booking experience for Egypt’s modern travelers.',
    meta: ['2026', 'UI/UX', 'Branding'],
    color: '#1a3a3a',
  },
  {
    href: 'case-studies/al-qahera.html',
    bg: 'var(--color-brand-pink)', tone: 'dark',
    thumb: 'assets/al-qahera-thumbnail.png',
    logo: 'assets/al-qahera-logo.png',
    eyebrow: 'News · iOS & Android',
    title: 'Al-Qahera News',
    desc: 'Shaping the UX of a national news platform from the ground up.',
    meta: ['2023', 'UI/UX'],
    color: '#ff4d8b',
  },
  {
    href: 'case-studies/web-design.html',
    bg: 'var(--color-brand-lavender)', tone: 'dark',
    thumb: 'assets/web-design-thumbnail.png',
    logo: 'assets/web-design-logo.png',
    wideLogo: true,
    eyebrow: 'Web · Selected work',
    title: 'Web Design Collection',
    desc: 'A selection of websites crafted to communicate value, strengthen brands, and drive user engagement.',
    meta: ['Multiple clients', 'UI/UX', 'Web'],
    color: '#b8a4ed',
  },
  {
    href: 'case-studies/geofencing.html',
    bg: 'var(--color-brand-peach)', tone: 'light',
    locked: true,
    eyebrow: 'SaaS · Under NDA',
    title: 'Geofencing & Automatic Status Detection',
    desc: 'Automating stop-status detection so dispatchers get a real-time feed they can actually trust.',
    meta: ['Logistics', 'Automation'],
    color: '#ff8a4a',
  },
  {
    href: 'case-studies/analytics-dashboard.html',
    bg: 'var(--color-brand-ochre)', tone: 'light',
    locked: true,
    eyebrow: 'SaaS · Under NDA',
    title: 'Business / Operational Analytics Dashboard',
    desc: 'Designing KPI visibility for business/operational decision-making.',
    meta: ['Data visualization'],
    comingSoon: true,
    color: '#e8b94a',
  },
  {
    href: 'case-studies/document-automation.html',
    bg: 'var(--color-brand-mint)', tone: 'light',
    locked: true,
    eyebrow: 'SaaS · Under NDA',
    title: 'Intelligent Document-to-Workflow Automation',
    desc: 'Turning complex documents into structured data in seconds.',
    meta: ['AI'],
    comingSoon: true,
    color: '#a4d4c5',
  },
];

// Case studies — horizontal scroll within the standard page scroll.
// The section is tall enough that scrolling through it sticks the inner content
// to the viewport and translates the cards horizontally. When the cards have
// finished traveling, the page resumes its normal vertical scroll.

const CaseStudies = () => {
  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const [x, setX] = React.useState(0);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    if (typeof window === 'undefined') return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return; // skip the effect, the section falls back to a vertical layout

    let raf = 0;
    const update = () => {
      raf = 0;
      const wrap = wrapRef.current;
      const track = trackRef.current;
      if (!wrap || !track) return;
      const rect = wrap.getBoundingClientRect();
      const vh = window.innerHeight;
      const vw = window.innerWidth;
      const totalScroll = wrap.offsetHeight - vh;
      // distance the track must travel horizontally so the last card aligns
      // with the right edge of the viewport
      const trackW = track.scrollWidth;
      const maxX = Math.max(0, trackW - vw + 64);
      const p = totalScroll > 0 ? Math.min(1, Math.max(0, -rect.top / totalScroll)) : 0;
      setProgress(p);
      setX(p * maxX);
    };
    const schedule = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule);
    update();
    return () => {
      window.removeEventListener('scroll', schedule);
      window.removeEventListener('resize', schedule);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section
      id="work"
      ref={wrapRef}
      className="hscroll-wrap"
      style={{ background: 'var(--color-canvas)' }}
    >
      <div className="hscroll-pin">
      <div className="container work-head" style={{
        width: '100%',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        paddingTop: 80, paddingBottom: 40, gap: 32,
      }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="eyebrow">Selected work</div>
            <h2 className="display-lg work-title" style={{ maxWidth: 'none', whiteSpace: 'nowrap', margin: 0 }}>
              Selected work that shaped me.
            </h2>
          </div>
          <ScrollProgress value={progress} />
        </div>
        <div className="hscroll-viewport">
          <div
            ref={trackRef}
            className="hscroll-track"
            style={{ transform: `translate3d(${-x}px, 0, 0)` }}
          >
            {CASES.map((c, i) => <HorizCaseCard key={i} c={c} index={i} />)}
            <div className="hscroll-end" aria-hidden="true">
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: 1.5,
                            textTransform: 'uppercase', color: 'var(--color-muted)' }}>
                That's everything
              </div>
              <a href="#about" style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 28, letterSpacing: '-0.6px',
                color: 'var(--color-ink)', textDecoration: 'none', marginTop: 12,
              }}>Keep scrolling →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Small scroll-progress indicator — three dots that fill as cards pass through.
const ScrollProgress = ({ value }) => {
  const dots = CASES.length;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, paddingBottom: 12 }}>
      {Array.from({ length: dots }).map((_, i) => {
        const filled = value > (i + 0.5) / dots;
        return (
          <span key={i} style={{
            width: filled ? 28 : 10, height: 6, borderRadius: 9999,
            background: filled ? 'var(--color-ink)' : 'var(--color-surface-strong)',
            transition: 'width 240ms ease, background 240ms ease',
          }} />
        );
      })}
    </div>
  );
};

// Wider, taller card tuned for horizontal display.
const HorizCaseCard = ({ c, index }) => (
  <a href={c.href} className={`case-card hcase ${c.tone}`}
     style={{ background: c.bg, position: 'relative', overflow: 'hidden' }}>
    {c.thumb && (
      <img src={c.thumb} alt="" aria-hidden="true"
           style={{
             position: 'absolute', inset: 0, width: '100%', height: '100%',
             objectFit: 'cover', zIndex: 0, pointerEvents: 'none',
           }} />
    )}
    <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', gap: 16, height: '100%' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div className={`eyebrow ${c.tone}`}>{c.eyebrow}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {c.locked && (
          <span aria-label="Password protected" title="Password protected" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 24, height: 24, borderRadius: 9999,
            background: 'rgba(10,10,10,0.1)',
          }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
          </span>
        )}
        <span style={{
          fontSize: 12, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase',
          opacity: 0.55,
        }}>0{index + 1} / 0{CASES.length}</span>
      </div>
    </div>
    {c.comingSoon && (
      <span style={{
        display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center',
        fontSize: 11, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase',
        padding: '4px 10px', borderRadius: 9999, marginBottom: 12,
        background: 'rgba(10,10,10,0.08)', color: 'currentColor',
      }}>Coming soon</span>
    )}
    <h3 className="title" style={{ fontSize: 40, letterSpacing: '-1.2px' }}>{c.title}</h3>
    <p className="desc" style={{ fontSize: 16, maxWidth: 420 }}>{c.desc}</p>

    <div className="hcase-mid">
      {c.logo && (
        <img src={c.logo} alt={`${c.title} logo`} className={`case-logo${c.wideLogo ? ' case-logo-wide' : ''}`}
             aria-hidden="true" style={{ pointerEvents: 'none' }} />
      )}
    </div>

    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
      <span style={{
        fontSize: 12, opacity: 0.7, minWidth: 0,
        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
      }}>{c.meta.join(' · ')}</span>
      <span className="arrow">
        {c.comingSoon ? 'Coming soon' : (c.locked ? 'Unlock to view' : 'View case study')}
        {!c.comingSoon && (
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
          </svg>
        )}
      </span>
    </div>
    </div>
  </a>
);

// About ----------------------------------------------------------------
const About = () => (
  <section id="about" className="section" style={{ background: 'var(--color-surface-soft)' }}>
    <div className="container resp-2col" style={{
      display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start',
    }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 16 }}>About</div>
        <h2 className="display-md">A bit about me.</h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <p className="lead">
          I'm a senior product designer based in Cairo, working across SaaS, mobile and content
          products since 2018. I care about the kind of design no one talks about in conference
          talks — the table row densities, the empty states, the keyboard shortcuts, the moments
          where a product feels like it actually respects your time.
        </p>
        <p className="lead">
          I currently lead end-to-end design at <strong>IMPARGO</strong>, a logistics SaaS used by
          European fleet operators. Before that I was at Parent, Argaam Media and magdsoft. I work
          in tight loops with product and engineering, lean on user research when it earns its
          keep, and try to leave every codebase with a design system that outlasts me.
        </p>
        <p className="lead">
          Outside work I'm building Halla.app — a travel companion for friends who never plan
          ahead — and spending way too much time figuring out how AI tools (Claude Code, Figma
          MCP, the rest) change the day-to-day of a designer.
        </p>
      </div>
    </div>
  </section>
);

// Skills ---------------------------------------------------------------
const SKILL_GROUPS = [
  {
    heading: 'Core UX & design',
    items: ['User research', 'Usability testing', 'Information architecture',
            'User journey mapping', 'Interaction design', 'Prototyping',
            'Visual & UI design', 'Typography & layout'],
  },
  {
    heading: 'Product & strategy',
    items: ['Product thinking', 'Problem framing', 'Data-driven design',
            'Systems thinking', 'Prioritization'],
  },
  {
    heading: 'Design systems',
    items: ['Tokens & primitives', 'Component libraries', 'Developer handoff',
            'HTML & CSS basics'],
  },
  {
    heading: 'Collaboration',
    items: ['Stakeholder communication', 'Design presentation',
            'Cross-functional collaboration', 'Mentoring designers'],
  },
];

const TOOLS = ['Figma', 'Figma MCP', 'FigJam', 'Notion', 'Linear', 'Mixpanel',
               'After Effects', 'Claude Code', 'Cursor'];

const Skills = () => (
  <section id="skills" className="section">
    <div className="container">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 48 }}>
        <div className="eyebrow">Skills & tools</div>
        <h2 className="display-lg" style={{ maxWidth: 720 }}>
          What I bring to a team.
        </h2>
      </div>
      <div className="resp-2col" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
        {SKILL_GROUPS.map((g, i) => (
          <div key={i} className="outlined-card" style={{ padding: 28 }}>
            <div style={{
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16,
              color: 'var(--color-ink)', marginBottom: 16,
            }}>{g.heading}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {g.items.map((it) => <span key={it} className="pill">{it}</span>)}
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 32 }} className="cream-card">
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16,
          color: 'var(--color-ink)', marginBottom: 16,
        }}>Tools I reach for</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {TOOLS.map((t) => <span key={t} className="pill pill-outline">{t}</span>)}
        </div>
      </div>
    </div>
  </section>
);

// Side projects -------------------------------------------------------
const SideProjects = () => (
  <section className="section" style={{ background: 'var(--color-surface-soft)' }}>
    <div className="container">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 48 }}>
        <div className="eyebrow">Side projects</div>
        <h2 className="display-md" style={{ maxWidth: 720 }}>
          Things I build on nights and weekends.
        </h2>
      </div>
      <div className="resp-2col" style={{
        background: 'var(--color-brand-peach)', borderRadius: 24, padding: 48,
        display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center',
        color: 'var(--color-ink)',
      }}>
        <div>
          <div className="eyebrow" style={{ color: 'rgba(10,10,10,0.65)', marginBottom: 12 }}>
            Halla.app
          </div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 36, lineHeight: 1.1, letterSpacing: '-1px', margin: '0 0 16px',
          }}>
            A travel companion for friends who never plan ahead.
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(10,10,10,0.78)', margin: '0 0 24px' }}>
            One shared trip canvas. Drag flights, hotels and ideas onto a day. See who's
            booked what. Argue about restaurants without losing the thread. Going live in 2026.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <a href="case-studies/halla.html" className="btn btn-primary">Read the case study</a>
            <a href="#" className="btn btn-secondary" style={{ background: 'transparent' }}>
              Join the waitlist
            </a>
          </div>
        </div>
        <div style={{
          background: 'rgba(255,255,255,0.5)', borderRadius: 20,
          height: 280, display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'rgba(10,10,10,0.4)', fontSize: 13,
        }}>
          Halla.app mockup placeholder
        </div>
      </div>
    </div>
  </section>
);

// Currently exploring -------------------------------------------------
const EXPLORING = [
  { tag: 'AI', title: 'Claude Code',
    body: 'Using it to spike production-ready prototypes that engineers actually take seriously.' },
  { tag: 'AI', title: 'Figma MCP',
    body: 'Wiring design context directly into LLMs so the model speaks fluent design system.' },
  { tag: 'Process', title: 'Vibe coding',
    body: 'Designing at the boundary where Figma ends and a real coded interface begins.' },
];

const Exploring = () => (
  <section id="exploring" className="section">
    <div className="container">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 48 }}>
        <div className="eyebrow">Currently exploring</div>
        <h2 className="display-md" style={{ maxWidth: 720 }}>
          What I'm learning right now.
        </h2>
        <p className="lead" style={{ maxWidth: 640 }}>
          The job is changing. I'd rather be the designer who knows what an MCP is than the
          one who finds out from a recruiter.
        </p>
      </div>
      <div className="resp-3col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {EXPLORING.map((e, i) => (
          <div key={i} className="outlined-card" style={{ padding: 28, minHeight: 200 }}>
            <span className="pill" style={{
              background: 'var(--color-brand-mint)', fontSize: 11, fontWeight: 600,
              letterSpacing: 1, textTransform: 'uppercase', padding: '4px 10px',
            }}>{e.tag}</span>
            <h4 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.4px',
              margin: '16px 0 10px',
            }}>{e.title}</h4>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--color-body)', margin: 0 }}>{e.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Testimonials --------------------------------------------------------
// Recommendations sourced from LinkedIn (linkedin.com/in/beshoy-reda-476101168).
const QUOTES = [
  {
    quote: '"Beshoy is one of the most skilled UX/UI designers I know. He works very hard and is always updated with the latest iOS, Android, and web guidelines. He is capable of creating everything from a single idea to mockups to the final draft. He will always work side by side with the client to suggest the best implementation possible for the user experience. His solutions to difficult business decisions are endless and his creativity has absolutely no limit. After working with him on multiple products for a long period of time it\'s safe to say he is a very talented person and a valuable asset to any team that he joins."',
    name: 'Ali Elsokary',
    role: 'Senior iOS Software Engineer @ BuildingLink',
    relation: 'Worked with Beshoy on the same team · Jun 2020',
    grad: 'linear-gradient(135deg, #ffb084, #ff6b5a)',
    avatar: 'assets/testimonial-ali.png',
  },
  {
    quote: '"Beshoy is one of the most valuable people I have ever met. Both smart and professional. Experienced, deadline oriented and intelligent person. Highly recommended."',
    name: 'Eslam Magdy',
    role: 'Senior Frontend Engineer @ Salla · Founder, Selia Tech',
    relation: 'Worked with Beshoy on the same team · May 2020',
    grad: 'linear-gradient(135deg, #b8a4ed, #ff4d8b)',
    avatar: 'assets/testimonial-eslam.png',
  },
  {
    quote: '"Beshoy is a talented Product Designer with a nice touch and fast deliverables. He is very keen to details and providing unlimited options and ideas. Keep up the great work, Beshoy!"',
    name: 'Ayman Fouad',
    role: 'Agile Transformation & Delivery Excellence Lead',
    relation: 'Managed Beshoy directly · May 2020',
    grad: 'linear-gradient(135deg, #a4d4c5, #e8b94a)',
    avatar: 'assets/testimonial-ayman.png',
  },
  {
    quote: '"Beshoy Reda is such a talented user experience designer. He has a breakthrough eye of colors and a fresh creative mind. I hope to work together again."',
    name: 'Yasser Lotfy',
    role: 'Experience Design Manager at AAIB · NN/g & IxDF Member',
    relation: 'Managed Beshoy directly · Jun 2021',
    grad: 'linear-gradient(135deg, #6fb3d4, #b8a4ed)',
    avatar: 'assets/testimonial-yasser.png',
  },
];

const Testimonials = () => (
  <section className="section" style={{ background: 'var(--color-surface-soft)' }}>
    <div className="container">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 48 }}>
        <div className="eyebrow">Kind words</div>
        <h2 className="display-md" style={{ maxWidth: 720 }}>
          What people I've worked with say.
        </h2>
      </div>
      <div className="resp-2col" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, alignItems: 'start' }}>
        {QUOTES.map((q, i) => (
          <div key={i} className="cream-card" style={{
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            <div style={{
              fontFamily: 'var(--font-body)', fontWeight: 500,
              fontSize: 16, lineHeight: 1.55, color: 'var(--color-ink)', flexGrow: 1,
            }}>{q.quote}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 20, borderTop: '1px solid var(--color-border)' }}>
              <div style={{
                width: 44, height: 44, borderRadius: 9999, background: q.grad, flexShrink: 0,
                backgroundImage: q.avatar ? `url(${q.avatar})` : undefined,
                backgroundSize: 'cover', backgroundPosition: 'center',
              }} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-ink)' }}>{q.name}</div>
                <div style={{ fontSize: 13, color: 'var(--color-muted)' }}>{q.role}</div>
                <div style={{ fontSize: 12, color: 'var(--color-muted-soft)', marginTop: 2 }}>{q.relation}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Contact -------------------------------------------------------------
const Contact = () => (
  <section id="contact" className="section">
    <div className="container">
      <div className="resp-2col cta-card" style={{
        background: 'var(--color-surface-card)', borderRadius: 24, padding: '80px 64px',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center',
      }}>
        <div>
          <h2 className="display-lg" style={{ marginBottom: 28, maxWidth: 520 }}>
            Let's build something good.
          </h2>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="mailto:beshoy.reda.r@gmail.com" className="btn btn-primary">
              beshoy.reda.r@gmail.com
            </a>
            <a href="https://linkedin.com/in/beshoy-reda-476101168" target="_blank" rel="noreferrer"
               className="btn btn-secondary">LinkedIn</a>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <ContactRow label="Email" value="beshoy.reda.r@gmail.com" />
          <ContactRow label="Phone" value="+20 101 085 2407" />
          <ContactRow label="Location" value="Cairo, Egypt" />
        </div>
      </div>
    </div>
  </section>
);

const ContactRow = ({ label, value }) => (
  <div style={{
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '12px 0', borderBottom: '1px solid var(--color-surface-strong)',
  }}>
    <span style={{ fontSize: 13, color: 'var(--color-muted)', textTransform: 'uppercase',
                   letterSpacing: 1.2, fontWeight: 600 }}>{label}</span>
    <span style={{ fontSize: 15, color: 'var(--color-ink)', fontWeight: 500 }}>{value}</span>
  </div>
);

// Footer --------------------------------------------------------------
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="resp-footer" style={{
        display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48,
        paddingBottom: 48,
      }}>
        <div>
          <a href="#top" className="wordmark" style={{ marginBottom: 16 }}>
            <span className="name">Beshoy</span>
            <span className="dot" />
          </a>
          <p style={{ fontSize: 14, color: 'var(--color-muted)', maxWidth: 280, margin: '16px 0 0' }}>
            Senior product designer · Cairo, Egypt. Building thoughtful SaaS interfaces
            since 2018.
          </p>
        </div>
        <FooterCol heading="Work" items={[
          { l: 'Al-Qahera News', h: 'case-studies/al-qahera.html' },
          { l: 'Halla.app', h: 'case-studies/halla.html' },
          { l: 'Web Design Collection', h: 'case-studies/web-design.html' },
          { l: 'Analytics Dashboard', h: 'case-studies/analytics-dashboard.html' },
          { l: 'Document Automation', h: 'case-studies/document-automation.html' },
        ]} />
        <FooterCol heading="About" items={[
          { l: 'Skills', h: '#skills' },
          { l: 'Currently exploring', h: '#exploring' },
          { l: 'Resume (PDF)', h: 'assets/Beshoy_Reda_CV.pdf' },
        ]} />
        <FooterCol heading="Elsewhere" items={[
          { l: 'LinkedIn', h: 'https://linkedin.com/in/beshoy-reda-476101168' },
          { l: 'Email', h: 'mailto:beshoy.reda.r@gmail.com' },
        ]} />
      </div>
      <div style={{
        paddingTop: 24, paddingBottom: 24, borderTop: '1px solid var(--color-surface-strong)',
        display: 'flex', justifyContent: 'space-between',
        fontSize: 13, color: 'var(--color-muted)',
      }}>
        <span>© 2026 Beshoy Reda Roshdy. Designed in Figma, coded with help from Claude.</span>
        <a href="#top" style={{ color: 'var(--color-muted)' }}>Back to top ↑</a>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ heading, items }) => (
  <div>
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13,
      color: 'var(--color-ink)', marginBottom: 16,
    }}>{heading}</div>
    <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map((it) => (
        <li key={it.l}><a href={it.h}>{it.l}</a></li>
      ))}
    </ul>
  </div>
);

Object.assign(window, {
  CaseStudies, About, Skills, SideProjects, Exploring, Testimonials, Contact, Footer,
});