// contact.jsx — umów demo (telefon + email)
function Contact() {
  return (
    <section id="contact" className="contact">
      <div className="container">
        <div className="contact-grid">

          {/* LEFT — pitch + benefits */}
          <div className="contact-left">
            <Eyebrow>Umów rozmowę</Eyebrow>
            <h2 className="contact-h2">
              20 minut.<br/>
              <em>Konkretna</em> liczba na koniec.
            </h2>
            <p className="contact-sub">
              Pokażemy, jak działa Gorilla na Twojej branży i&nbsp;policzymy ROI na Twoich danych. Bez handlowca z&nbsp;banalnymi slajdami.
            </p>
            <ul className="contact-benefits">
              <li><span className="bullet">01</span>Audyt 3 największych przecieków sprzedaży</li>
              <li><span className="bullet">02</span>Realny wzrost obrotu — wyliczony na Twoim koszyku</li>
              <li><span className="bullet">03</span>Plan wdrożenia 30 dni · konkretne kroki</li>
            </ul>

            <div className="contact-meta">
              <div>
                <div className="contact-meta-label">Telefon</div>
                <a href="tel:+48789022921" className="contact-meta-val">+48 789 022 921</a>
              </div>
              <div>
                <div className="contact-meta-label">E-mail</div>
                <a href="mailto:contact@softgorillas.com" className="contact-meta-val">contact@softgorillas.com</a>
              </div>
              <div>
                <div className="contact-meta-label">Odpowiadamy</div>
                <div className="contact-meta-val">do 2h roboczych</div>
              </div>
            </div>
          </div>

          {/* RIGHT — direct contact (no form) */}
          <div className="contact-card">
            <div className="contact-direct-head">
              <span className="contact-step">Skontaktuj się bezpośrednio</span>
              <span className="contact-time">Odpowiadamy do 2h</span>
            </div>

            <a className="contact-direct" href="tel:+48789022921">
              <div className="contact-direct-ico" aria-hidden>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"
                    stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <div className="contact-direct-text">
                <div className="contact-direct-label">Zadzwoń</div>
                <div className="contact-direct-val">+48 789 022 921</div>
                <div className="contact-direct-sub">Pon–pt 9:00–18:00 · Polska</div>
              </div>
              <div className="contact-direct-arrow"><ArrowRight/></div>
            </a>

            <a className="contact-direct" href="mailto:contact@softgorillas.com">
              <div className="contact-direct-ico" aria-hidden>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/>
                  <path d="M3.5 6.5l8.5 7 8.5-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <div className="contact-direct-text">
                <div className="contact-direct-label">Napisz</div>
                <div className="contact-direct-val">contact@softgorillas.com</div>
                <div className="contact-direct-sub">Odpowiadamy do 2h roboczych</div>
              </div>
              <div className="contact-direct-arrow"><ArrowRight/></div>
            </a>

            <div className="contact-direct-foot">
              <span className="contact-direct-pulse"><span/></span>
              <span>Aktualnie online — średni czas odpowiedzi <strong>11 min</strong></span>
            </div>
          </div>

        </div>
      </div>

      <style>{`
        .contact{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
        .contact-grid{
          display:grid; grid-template-columns: 1fr 1.1fr;
          gap: 64px; align-items: start;
        }
        .contact-h2{
          font-size: clamp(40px, 5.5vw, 64px);
          margin: 18px 0 18px;
          line-height: 1;
        }
        .contact-h2 em{
          font-style: italic;
          font-family: 'Instrument Serif', serif;
          font-weight: 400;
          color: var(--brand);
        }
        .contact-sub{ color: var(--ink-2); max-width: 460px; margin-bottom: 32px; }
        .contact-benefits{
          list-style:none; padding:0; margin: 0 0 36px;
          display:flex; flex-direction:column; gap:14px;
        }
        .contact-benefits li{
          display:flex; align-items: center; gap: 16px;
          font-size: 15px;
          padding-bottom: 14px;
          border-bottom: 1px solid var(--line);
        }
        .contact-benefits li:last-child{ border-bottom: 0; }
        .contact-benefits .bullet{
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--brand);
          background: rgba(200,255,0,0.1);
          padding: 6px 10px;
          border-radius: 999px;
          letter-spacing: 0.04em;
        }
        .contact-meta{
          display:grid; grid-template-columns: repeat(3, auto);
          gap: 24px;
          padding-top: 24px;
          border-top: 1px solid var(--line);
        }
        .contact-meta-label{
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-3);
          margin-bottom: 4px;
        }
        .contact-meta-val{
          font-family: var(--font-display);
          font-size: 16px;
          color: var(--ink);
        }

        .contact-card{
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 32px;
          box-shadow: 0 30px 60px rgba(0,0,0,.3);
          display:flex; flex-direction:column; gap: 14px;
        }
        .contact-direct-head{
          display:flex; justify-content: space-between;
          margin-bottom: 10px;
          font-family: var(--font-mono);
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--ink-3);
        }
        .contact-step{ color: var(--brand); }

        .contact-direct{
          display:grid;
          grid-template-columns: 56px 1fr auto;
          gap: 18px;
          align-items: center;
          padding: 22px 22px;
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
          color: var(--ink);
          transition: border-color .25s, background .25s, transform .25s var(--ease-out);
        }
        .contact-direct:hover{
          border-color: var(--brand);
          background: var(--bg);
          transform: translateY(-1px);
        }
        .contact-direct:hover .contact-direct-arrow{ color: var(--brand); transform: translateX(2px); }
        .contact-direct:hover .contact-direct-ico{
          background: var(--brand); color: var(--brand-ink); border-color: transparent;
        }
        .contact-direct-ico{
          width: 56px; height: 56px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: 16px;
          display: grid; place-items: center;
          color: var(--brand);
          transition: background .25s, color .25s, border-color .25s;
        }
        .contact-direct-text{ min-width: 0; }
        .contact-direct-label{
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-3);
          margin-bottom: 4px;
        }
        .contact-direct-val{
          font-family: var(--font-display);
          font-size: clamp(20px, 2.2vw, 26px);
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1.1;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .contact-direct-sub{
          font-size: 12.5px;
          color: var(--ink-3);
        }
        .contact-direct-arrow{
          color: var(--ink-3);
          transition: color .25s, transform .25s var(--ease-out);
        }

        .contact-direct-foot{
          display:flex; align-items: center; gap: 10px;
          padding: 14px 18px;
          background: rgba(200,255,0,0.05);
          border: 1px dashed rgba(200,255,0,0.3);
          border-radius: var(--radius);
          font-size: 13px;
          color: var(--ink-2);
          margin-top: 6px;
        }
        .contact-direct-foot strong{ color: var(--ink); font-weight: 500; }
        .contact-direct-pulse{
          width: 10px; height: 10px;
          position: relative; flex-shrink: 0;
        }
        .contact-direct-pulse span{
          position: absolute; inset: 0;
          background: var(--brand);
          border-radius: 50%;
          animation: pulse-dot 1.4s infinite;
        }

        @media (max-width: 980px){
          .contact-grid{ grid-template-columns: 1fr; gap: 36px; }
          .contact-meta{ grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 540px){
          .contact-card{ padding: 24px 20px; }
          .contact-direct{ padding: 18px; grid-template-columns: 48px 1fr auto; gap: 14px; }
          .contact-direct-ico{ width: 48px; height: 48px; border-radius: 12px; }
          .contact-meta{ grid-template-columns: 1fr; gap: 16px; }
        }
      `}</style>
    </section>
  );
}

window.Contact = Contact;