// MobileAuthor.jsx — Aliza intro block on mobile (author/role +
// "Об авторе" CTA + italic quote with leading guillemets icon).

const MobileAuthor = ({ onAbout = () => {} }) => (
  <section style={authorStyles.wrap}>
    <div style={authorStyles.head}>
      <div>
        <h3 style={authorStyles.name}>Ализа Керен</h3>
        <a href="#" onClick={(e) => { e.preventDefault(); onAbout(); }} style={authorStyles.about}>
          Об авторе <Icon name="arrow" size={16} color="#EE077D" />
        </a>
      </div>
      <div style={authorStyles.role}>Скрипачка и Композитор</div>
    </div>
    <div style={authorStyles.quote}>
      <Icon name="quote-left" size={18} />
      <p style={authorStyles.quoteText}>
        Импровизация — это не только музыка, но и стиль жизни: свобода и текучесть, опирающиеся на крепкую профессиональную базу, человеческие и духовные ценности.
      </p>
    </div>
  </section>
);

const authorStyles = {
  wrap: { padding: "20px 16px 6px", display: "flex", flexDirection: "column", gap: 14 },
  head: { display: "flex", flexDirection: "column", gap: 4 },
  name: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 20, fontWeight: 700, letterSpacing: "-0.04em", color: "#171717" },
  about: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 13, color: "#EE077D", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 },
  role: { fontFamily: "'Nunito Sans', sans-serif", fontSize: 13, color: "#171717" },
  quote: { display: "flex", gap: 10, padding: "14px 16px", borderRadius: 10, border: "1px solid var(--color-line)" },
  quoteText: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 12, fontStyle: "italic", color: "#171717", lineHeight: 1.55 },
};

window.MobileAuthor = MobileAuthor;