// Founder — Шамиль Сафаров, light

function Founder() {
  return (
    <section id="founder" className="sec founder">
      <div className="wrap row row-2 fnd-grid">
        <div className="reveal">
          <span className="eyebrow">Основатель</span>
          <h2 style={{ marginTop: 18, marginBottom: 28 }}>
            Шамиль<br /><span className="em-red">Сафаров.</span>
          </h2>
          <p className="lead" style={{ marginBottom: 24 }}>
            10 лет в продажах, маркетинге и переговорах. Прошёл путь от менеджера по продажам
            до руководителя digital-направлений. С 2020 года занимается продвижением локального
            бизнеса в геосервисах — лично провёл больше 1000 консультаций.
          </p>
          <blockquote className="fnd-quote">
            «За 6 лет в геомаркетинге я провёл больше 1000 консультаций.
            И главное, что понял: бизнес теряет деньги не потому, что плохой,
            а потому что его не видно. Наша задача — сделать так, чтобы клиент
            нашёл именно вас.»
          </blockquote>

          <div className="fnd-meta">
            <div className="fm-cell">
              <div className="fm-l">Опыт</div>
              <div className="fm-v">10+ лет в продажах и маркетинге</div>
            </div>
            <div className="fm-cell">
              <div className="fm-l">Спикер</div>
              <div className="fm-v">Synergy, Geek Picnic, локальные форумы</div>
            </div>
            <div className="fm-cell">
              <div className="fm-l">Команда</div>
              <div className="fm-v">14 специалистов в штате</div>
            </div>
          </div>
        </div>

        <div className="reveal" style={{ transitionDelay: '.1s' }}>
          <div className="fnd-portrait">
            <div className="fp-frame">
              <img className="fp-photo" src="assets/shamil.png" alt="Шамиль Сафаров" />
              <div className="fp-quote">
                <span className="fpq-mark">“</span>
                <span>Я не продаю продвижение. Я продаю позиции, которые превращаются в деньги.</span>
              </div>
            </div>
            <div className="fp-card">
              <div className="fpc-row">
                <div className="fpc-l">Опыт в продажах<br />и маркетинге</div>
                <div className="fpc-v mono">10 лет</div>
              </div>
              <hr className="hr-line" />
              <div className="fpc-row">
                <div className="fpc-l">Консультаций<br />проведено</div>
                <div className="fpc-v mono">1000+</div>
              </div>
              <hr className="hr-line" />
              <div className="fpc-row">
                <div className="fpc-l">Отделов продаж<br />построено</div>
                <div className="fpc-v mono">50+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .fnd-grid{align-items:center;gap:64px}
        .fnd-quote{
          margin:0 0 32px;padding:18px 0 18px 22px;
          border-left:3px solid var(--accent);
          font-style:italic;font-family:Georgia,serif;font-size:18px;line-height:1.4;
          color:var(--fg-2);max-width:60ch;
        }
        .fnd-meta{display:grid;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
        .fm-cell{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:baseline}
        .fm-l{font-size:11px;color:var(--mute);letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-mono);font-weight:500}
        .fm-v{font-size:15px;color:var(--fg);font-weight:500}

        .fnd-portrait{position:relative;max-width:480px;margin-left:auto}
        .fp-frame{
          width:100%;aspect-ratio:4/5;position:relative;border-radius:24px;overflow:hidden;
          background:#1a1a1a;
          border:1px solid var(--line);
        }
        .fp-photo{
          position:absolute;inset:0;width:100%;height:100%;
          object-fit:cover;object-position:center 30%;
          display:block;
        }
        .fp-quote{
          position:absolute;bottom:0;left:0;right:0;padding:28px 24px;
          background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
          color:#fff;font-style:italic;font-family:Georgia,serif;font-size:17px;line-height:1.3;
          display:flex;gap:8px;align-items:flex-start;
        }
        .fpq-mark{font-size:56px;line-height:.7;color:var(--accent);font-family:Georgia,serif}

        .fp-card{
          margin-top:16px;
          background:#fff;border:1px solid var(--line);border-radius:16px;
          padding:16px 20px;
          display:grid;grid-template-columns:repeat(3, 1fr);gap:0;
          box-shadow:0 12px 32px -16px rgba(0,0,0,.12);
        }
        .fpc-row{
          display:flex;flex-direction:column;gap:6px;padding:6px 14px;
          border-right:1px solid var(--line);
        }
        .fpc-row:last-child{border-right:0}
        .fpc-row:first-child{padding-left:0}
        .fpc-row:last-child{padding-right:0}
        .fpc-l{font-size:11px;color:var(--mute);line-height:1.25}
        .fpc-v{font-size:22px;font-weight:700;color:var(--fg);letter-spacing:-.02em;white-space:nowrap}
        .fp-card .hr-line{display:none}
        @media (max-width:560px){
          .fp-card{grid-template-columns:1fr;gap:0;padding:8px 18px}
          .fpc-row{flex-direction:row;justify-content:space-between;align-items:center;
            padding:12px 0;border-right:0;border-bottom:1px solid var(--line)}
          .fpc-row:last-child{border-bottom:0}
        }
      `}</style>
    </section>);

}

window.Founder = Founder;