// jsx/Hero.jsx
function Hero() {
  return (
    <section id="hero" className="hero">
      <div
        className="container hero-inner"
        style={{ display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between" }}
      >
        <div className="hero-text" style={{ flex: "1 1 420px" }}>
          <h1>Будущее медицины начинается здесь</h1>
          <p className="lead">
            Добро пожаловать в <strong>neuromedic</strong> — экосистему умных помощников для врачей. Анализ данных,
            интерпретация исследований и поддержка в постановке диагнозов на базе обученных медицинских нейросетей.
          </p>
          <div className="hero-cta" style={{ display: "flex", gap: 12, marginTop: 12 }}>
            <a className="btn primary" href="#directions">Наши направления</a>
            <a className="btn ghost" href="#contact">Связаться с нами</a>
          </div>
        </div>

        <div className="hero-visual" aria-hidden="true" style={{ flex: "0 0 420px" }}>
          <svg viewBox="0 0 600 400" className="hero-illustration" role="img" focusable="false" width="100%" height="100%">
            <defs>
              <linearGradient id="g1" x1="0" x2="1">
                <stop offset="0" stopColor="#06b6d4" />
                <stop offset="1" stopColor="#4f46e5" />
              </linearGradient>
            </defs>
            <rect x="0" y="0" width="600" height="400" rx="16" fill="url(#g1)" opacity="0.12" />
            <g fill="#fff" opacity="0.9">
              <circle cx="120" cy="120" r="36" />
              <rect x="200" y="80" width="260" height="180" rx="12" />
              <path d="M420 120c-18 0-32 14-32 32s14 32 32 32 32-14 32-32-14-32-32-32z" fill="#fff" opacity="0.06" />
            </g>
          </svg>
        </div>
      </div>
    </section>
  );
}