// Features.jsx. Full Spectrum Management (6 service cards)
function Features({ theme }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--night-owl)' : 'var(--linen)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const cardBg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const border = isDark ? 'rgba(196,162,101,0.14)' : 'var(--sandstone)';

  const feats = [
    { num: '01', title: 'Tenant Screening', body: 'Credit, background, income verification, and rental history. We qualify residents who protect your asset, not damage it.', icon: 'screen' },
    { num: '02', title: 'Rent Collection', body: 'Automated collection, on time disbursement, and enforcement. You get paid. Without the awkward conversations.', icon: 'cash' },
    { num: '03', title: 'Maintenance & Repairs', body: '24/7 maintenance coordination with vetted vendors. We protect the condition of your asset and control costs.', icon: 'wrench' },
    { num: '04', title: 'Market Analysis', body: "Monthly rental comps, occupancy trends, and strategy recommendations so you're always priced to perform.", icon: 'chart' },
    { num: '05', title: 'Leasing & Legal', body: 'Compliant lease agreements, renewals, notice serving, and eviction coordination when necessary.', icon: 'doc' },
    { num: '06', title: 'Owner Reporting', body: 'Monthly P&L statements, occupancy reports, and YTD summaries. Know your numbers without asking for them.', icon: 'report' },
  ];

  return (
    <section id="services" style={{ padding: '140px 40px', background: bg, color: fg }}>
      <div style={{ maxWidth: 1240, margin: '0 auto 72px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }} className="sv-grid-collapse">
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)' }}>// WHAT WE HANDLE</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 60, lineHeight: 1.04, letterSpacing: '-0.015em', margin: '20px 0 0', color: fg, textWrap: 'pretty' }}>Full Spectrum <em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Management</em>.</h2>
        </div>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.6, margin: 0, maxWidth: 520, color: mute }}>Ownership is a hundred small decisions a month. We take ninety eight of them. From first tenant application to year end tax statement.</p>
      </div>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${border}` }} className="sv-feat-grid">
        {feats.map((f, i) => {
          const col = i % 3;
          const row = Math.floor(i / 3);
          return (
            <article key={i} style={{
              padding: '40px 34px',
              background: cardBg,
              borderRight: col < 2 ? `1px solid ${border}` : 'none',
              borderBottom: row < 1 ? `1px solid ${border}` : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 34, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--sovana-gold)' }}>{f.num}</span>
                <FeatureIcon kind={f.icon} />
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 26, lineHeight: 1.15, margin: '0 0 14px', letterSpacing: '-0.005em', color: fg }}>{f.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65, margin: 0, color: mute }}>{f.body}</p>
            </article>
          );
        })}
      </div>
    </section>
  );
}

function FeatureIcon({ kind }) {
  const s = { width: 26, height: 26, stroke: 'var(--sovana-gold)', strokeWidth: 1.4, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'screen': return <svg {...s} viewBox="0 0 28 28"><circle cx="12" cy="12" r="7" /><path d="M17 17l5 5" /></svg>;
    case 'cash': return <svg {...s} viewBox="0 0 28 28"><rect x="3" y="7" width="22" height="14" rx="1" /><circle cx="14" cy="14" r="3" /><path d="M7 14h.01M21 14h.01" /></svg>;
    case 'wrench': return <svg {...s} viewBox="0 0 28 28"><path d="M22 6a4 4 0 0 1-5 5L7 21a2.5 2.5 0 0 1-3.5-3.5L13 8a4 4 0 0 1 5-5l-2 2 2 2 2 2 2-2z" /></svg>;
    case 'chart': return <svg {...s} viewBox="0 0 28 28"><path d="M4 23h20M6 19V13M12 19V8M18 19V15M22 19V10" /></svg>;
    case 'doc': return <svg {...s} viewBox="0 0 28 28"><path d="M7 3h10l5 5v17a0 0 0 0 1 0 0H7a0 0 0 0 1 0 0V3z" /><path d="M17 3v5h5M10 14h9M10 18h9M10 10h4" /></svg>;
    case 'report': return <svg {...s} viewBox="0 0 28 28"><rect x="5" y="4" width="18" height="20" rx="1" /><path d="M9 9h10M9 13h10M9 17h6" /></svg>;
    default: return null;
  }
}

window.Features = Features;