/* global React, HERO_DIAGRAMS */
const heroStyles = {
  section: {
    position: 'relative',
    minHeight: 'calc(100vh - 64px)',
    display: 'flex', alignItems: 'center',
    overflow: 'hidden',
    paddingTop: 'var(--s-8)', paddingBottom: 'var(--s-9)'
  },
  bg: {
    position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
    background: 'linear-gradient(180deg, var(--bg-1) 0%, var(--bg-1) 60%, #F4F6FA 100%)'
  },
  inner: { position: 'relative', zIndex: 1, width: '100%' },
  grid: {
    display: 'grid', gridTemplateColumns: '6fr 6fr', gap: 'var(--s-8)', alignItems: 'center'
  },
  meta: {
    display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
    fontSize: 13, color: 'var(--fg-3)', marginBottom: 'var(--s-6)'
  },
  dot: { width: 6, height: 6, borderRadius: 999, background: 'var(--success)', display: 'inline-block' },
  // Name eyebrow — small label above the headline
  nameLine: {
    display: 'block', fontSize: 12,
    fontWeight: 500, color: 'var(--fg-3)',
    letterSpacing: '0.14em', textTransform: 'uppercase',
    marginBottom: 'var(--s-5)'
  },
  // ---- Display headline: role only ---------------------------------------
  headline: {
    fontSize: 'clamp(48px, 6.8vw, 88px)',
    fontWeight: 500, letterSpacing: 'var(--tracking-tight)',
    lineHeight: 0.95,
    color: 'var(--fg-1)',
    margin: '0 0 var(--s-5) 0',
    whiteSpace: 'nowrap'
  },
  // ---- Body block (two short paragraphs, single weight) --------------------
  body: {
    display: 'flex', flexDirection: 'column', gap: 'var(--s-4)',
    margin: '0 0 var(--s-6) 0',
    maxWidth: 580
  },
  bodyPara: {
    fontSize: 'clamp(17px, 1.5vw, 21px)',
    fontWeight: 300, letterSpacing: 0, lineHeight: 1.5,
    color: 'var(--fg-1)', margin: 0
  },
  proof: {
    borderTop: 'var(--border-hair)', borderBottom: 'var(--border-hair)',
    padding: 'var(--s-5) 0',
    margin: '0 0 var(--s-6) 0'
  },
  proofLabel: {
    fontSize: 11, fontWeight: 500, textTransform: 'uppercase',
    letterSpacing: '0.12em', color: 'var(--fg-3)',
    marginBottom: 'var(--s-4)', display: 'block'
  },
  proofGrid: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--s-5)'
  },
  proofItem: { display: 'flex', flexDirection: 'column', gap: 4 },
  proofClient: { fontSize: 14, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: 0 },
  proofPeriod: { fontSize: 12, color: 'var(--fg-3)', letterSpacing: 0 },
  ctaRow: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }
};

function FlowDiagram_DEPRECATED() {
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '5/4', maxWidth: 480, marginLeft: 'auto' }} aria-hidden="true">
      <svg viewBox="0 0 500 400" width="100%" height="100%" style={{ display: 'block' }}>
        <defs>
          <pattern id="hgrid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(3,31,88,0.06)" strokeWidth="1" />
          </pattern>
          <linearGradient id="hfade" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="white" stopOpacity="0" />
            <stop offset="0.15" stopColor="white" stopOpacity="1" />
            <stop offset="0.85" stopColor="white" stopOpacity="1" />
            <stop offset="1" stopColor="white" stopOpacity="0" />
          </linearGradient>
          <mask id="hmask"><rect width="500" height="400" fill="url(#hfade)" /></mask>
        </defs>

        <rect width="500" height="400" fill="url(#hgrid)" />

        <g stroke="rgba(3,31,88,0.18)" fill="none" strokeWidth="1.25">
          <rect x="60" y="60" width="380" height="280" />
          <rect x="60" y="60" width="380" height="160" />
          <rect x="60" y="60" width="380" height="60" />
          <line x1="60" y1="220" x2="440" y2="220" />
        </g>

        <g mask="url(#hmask)">
          <line x1="0" y1="110" x2="500" y2="110" stroke="rgba(3,31,88,0.22)" strokeWidth="1" />
          <line x1="0" y1="200" x2="500" y2="200" stroke="rgba(3,31,88,0.22)" strokeWidth="1" />
          <line x1="0" y1="290" x2="500" y2="290" stroke="rgba(3,31,88,0.22)" strokeWidth="1" />
        </g>

        <g fill="var(--latus-off-white)" stroke="var(--latus-dark-blue)" strokeWidth="1.25">
          <rect x="115" y="190" width="20" height="20" />
          <rect x="240" y="190" width="20" height="20" />
          <rect x="365" y="190" width="20" height="20" />
        </g>

        <circle r="4" fill="var(--latus-indigo)">
          <animateMotion dur="9s" repeatCount="indefinite" path="M 0 110 L 500 110" />
        </circle>
        <circle r="3" fill="var(--latus-indigo)" opacity="0.7">
          <animateMotion dur="11s" begin="-3s" repeatCount="indefinite" path="M 0 200 L 500 200" />
        </circle>
        <circle r="3" fill="var(--latus-indigo)" opacity="0.5">
          <animateMotion dur="13s" begin="-6s" repeatCount="indefinite" path="M 0 290 L 500 290" />
        </circle>
      </svg>
    </div>);

}

function Hero({ heroDiagram = 'foundation' }) {
  const DiagramComponent = HERO_DIAGRAMS && HERO_DIAGRAMS[heroDiagram] || HERO_DIAGRAMS && HERO_DIAGRAMS.foundation;
  return (
    <section id="top" style={heroStyles.section}>
      <div style={heroStyles.bg} />
      <div className="container" style={heroStyles.inner}>
        <div style={heroStyles.grid} className="hero-grid">
          <div style={{ maxWidth: 560 }}>
            <span style={{ ...heroStyles.nameLine, fontSize: 12, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-5)' }} className="reveal">De Vos Meaker</span>

            <h1 style={heroStyles.headline} className="reveal">
              Full-stack<br />AI engineer.
            </h1>

            <div style={heroStyles.body} className="reveal">
              <p style={heroStyles.bodyPara}>
                I'm the senior AI engineer you bring in when the roadmap actually has to ship: strategy, architecture, code, ops. Seven years of it; the last four for Dutch banks, healthcare, and other regulated industries. Remote from Portugal, monthly onsite in Amsterdam.
              </p>
            </div>

            <div style={heroStyles.ctaRow} className="reveal">
              <Button variant="primary" href="#contact" icon={<ArrowRight />} style={{ padding: '12px 18px', fontSize: 14 }}>Book a 30-min intro call</Button>
              <Button variant="secondary" href="#" icon={<ArrowUpRight />} style={{ padding: '12px 18px', fontSize: 14 }}>Download CV (PDF)</Button>
            </div>
          </div>

          <div className="hero-right reveal">
            {DiagramComponent && <DiagramComponent />}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: var(--s-7) !important; }
          .hero-right { order: -1; max-width: 360px; }
        }
        @media (max-width: 540px) {
          .hero-proof-grid { grid-template-columns: 1fr !important; gap: var(--s-3) !important; }
        }
      `}</style>
    </section>);

}

window.Hero = Hero;