// Renderiza markdown leve: **bold** e _italic_/*italic* — usado em copy gerenciada pelo CMS
function MD({ text }) {
  if (!text) return null;
  const parts = [];
  let s = String(text);
  // tokenize **bold**, *italic* and _italic_
  const re = /\*\*([^*]+)\*\*|\*([^*]+)\*|_([^_]+)_/g;
  let last = 0, m, key = 0;
  while ((m = re.exec(s))) {
    if (m.index > last) parts.push(s.slice(last, m.index));
    if (m[1]) parts.push(<strong key={key++}>{m[1]}</strong>);
    else if (m[2]) parts.push(<em key={key++} style={{ color: 'var(--ink)', fontFamily: 'var(--serif)' }}>{m[2]}</em>);
    else if (m[3]) parts.push(<em key={key++} style={{ color: 'var(--ink)', fontFamily: 'var(--serif)' }}>{m[3]}</em>);
    last = re.lastIndex;
  }
  if (last < s.length) parts.push(s.slice(last));
  return <>{parts}</>;
}
window.MD = MD;

function About() {
  const D = (window.SITE && window.SITE.about) || {};
  const settings = (window.SITE && window.SITE.settings) || {};
  const waDigits = (settings.contact && settings.contact.whatsappDigits) || '5544999451010';
  const phone = (settings.contact && settings.contact.phone) || '(44) 99972-0798';
  const phoneTel = '+55' + ((settings.contact && settings.contact.phoneDigits) || '5544999720798').replace(/^55/, '');

  return (
    <section id="sobre" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="about-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center',
        }}>
          <div style={{ position: 'relative' }}>
            <div className="ph" style={{
              aspectRatio: '4/5', borderRadius: 'var(--radius-lg)',
              background: D.photo ? `center/cover no-repeat url(${D.photo})` : 'var(--warm)',
              border: 'none',
              boxShadow: 'var(--shadow-lg)',
              position: 'relative', overflow: 'hidden',
            }}>
              {!D.photo && (
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)' }}>foto · {D.title || 'Carlos Soriani'}</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', opacity: .7 }}>retrato profissional, sorridente</span>
                </div>
              )}
            </div>

            <div style={{
              position: 'absolute', bottom: 28, left: -28,
              background: 'var(--surface)', border: '1px solid var(--line)',
              borderRadius: 14, padding: '16px 18px',
              boxShadow: 'var(--shadow-md)',
              display: 'flex', alignItems: 'center', gap: 14,
            }} className="about-card-1">
              <div style={{
                width: 44, height: 44, borderRadius: 10, background: 'var(--accent-soft)',
                color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon.Shield width="22" height="22" />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.14em' }}>{D.susepLabel || 'Registro SUSEP'}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink)', marginTop: 2 }}>{D.susepNumber}</div>
              </div>
            </div>

            <style>{`
              @media (max-width: 900px) { .about-card-1 { left: 16px !important; } }
            `}</style>
          </div>

          <div>
            <span className="eyebrow">{D.eyebrow}</span>
            <h2 style={{ margin: '14px 0 18px' }}>{D.title}<br/><span style={{ fontSize: '0.5em', color: 'var(--muted)', fontStyle: 'italic', fontWeight: 400 }}>{D.subtitle}</span></h2>
            <p style={{ fontSize: 17, marginBottom: 18 }}>
              <MD text={D.p1} />
            </p>
            <p style={{ fontSize: 17, marginBottom: 32 }}>
              <MD text={D.p2} />
            </p>

            <div style={{ display: 'grid', gap: 14, marginBottom: 32 }}>
              {(D.pillars || []).map((p, i) => <Pillar key={i} icon={p.icon} title={p.title} desc={p.desc} />)}
            </div>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href={`https://wa.me/${waDigits}`} target="_blank" rel="noopener" className="btn btn-primary">
                <Icon.Whatsapp width="16" height="16" />
                Falar com o Soriani
              </a>
              <a href={phoneTel} className="btn btn-ghost">
                <Icon.Phone width="16" height="16" />
                {phone}
              </a>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .about-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function Pillar({ icon, title, desc }) {
  const Ico = Icon[icon] || Icon.Shield;
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
      <div style={{
        width: 40, height: 40, borderRadius: 10,
        background: 'var(--primary-50)', color: 'var(--primary)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Ico width="20" height="20" />
      </div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--ink)', marginBottom: 2 }}>{title}</div>
        <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>{desc}</div>
      </div>
    </div>
  );
}

window.About = About;