// sections.jsx — feature cards, integrations, testimonials, pricing, etc.

const FEATURES = [
  {
    icon: 'sparkle',
    title: 'Scoring IA des leads',
    desc: 'Chaque lead reçoit un score 0-100 basé sur 47 signaux : ouverture e-mail, revenus DPE, type de travaux, historique. Les commerciaux appellent les bons prospects en premier.',
    vizType: 'score',
  },
  {
    icon: 'phone',
    title: 'Next Best Action',
    desc: 'L\'IA dit à chaque commercial qui rappeler, quand, et pourquoi. Finis les relances au pif et les dossiers oubliés dans un coin.',
    vizType: 'actions',
  },
  {
    icon: 'bolt',
    title: 'Simulation MPR / CEE auto',
    desc: 'Dès qu\'un lead arrive, on calcule son éligibilité MaPrimeRénov\', CEE et Éco-PTZ. Le commercial annonce le reste à charge au premier appel.',
    vizType: 'eligibility',
  },
  {
    icon: 'chart',
    title: 'Pipeline + pondération',
    desc: 'Kanban avec probabilité de signature par étape. Vous savez à l\'avance votre CA pondéré à 7, 30, 90 jours — avec une précision de ±8%.',
    vizType: 'pipeline',
  },
  {
    icon: 'ads',
    title: 'Attribution Facebook + Google',
    desc: 'Chaque euro dépensé en pub remonte jusqu\'au contrat signé. Le CPL par source, par campagne, par zone — en temps réel.',
    vizType: 'attribution',
  },
  {
    icon: 'team',
    title: 'Coach équipe',
    desc: 'L\'IA analyse les appels et les RDV. Elle pointe ce qui marche chez vos top performers et ce qui plombe les autres. Onboarding commercial en 7 jours.',
    vizType: 'coach',
  },
];

function FeatureViz({ type }) {
  const common = { fontFamily: 'JetBrains Mono, monospace', fontSize: 10 };
  switch (type) {
    case 'score':
      return (
        <div style={{ display: 'flex', gap: 8, width: '100%', alignItems: 'flex-end' }}>
          {[94, 87, 72, 68, 54, 41, 28, 22].map((s, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
              <div style={{ height: s * 0.6 + 6, width: '100%', borderRadius: 3,
                background: `color-mix(in oklab, var(--accent) ${Math.max(s, 30)}%, #1a1d1a)`,
                border: s >= 85 ? '1px solid var(--accent)' : 'none',
              }}/>
              <div style={{ ...common, color: s >= 85 ? 'var(--accent)' : 'var(--text-mute)' }}>{s}</div>
            </div>
          ))}
        </div>
      );
    case 'actions':
      return (
        <div style={{ width: '100%' }}>
          {['Appeler Lefèvre', 'Relancer Garcia', 'Rappeler Almeida'].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 8px', borderLeft: '2px solid var(--accent)', marginBottom: 3, background: 'color-mix(in oklab, var(--accent) 4%, transparent)', borderRadius: 2 }}>
              <div style={{ width: 5, height: 5, borderRadius: 5, background: 'var(--accent)' }}/>
              <div style={{ ...common, color: 'var(--text)', fontSize: 11 }}>{t}</div>
              <div style={{ ...common, marginLeft: 'auto', color: 'var(--accent)' }}>{94 - i*7}</div>
            </div>
          ))}
        </div>
      );
    case 'eligibility':
      return (
        <div style={{ width: '100%', display: 'grid', gap: 5 }}>
          {[
            ['MaPrimeRénov\'', '+ 11 000 €', 90],
            ['CEE',           '+ 4 200 €', 65],
            ['Éco-PTZ',       '+ 25 000 €', 78],
          ].map(([n, v, w], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ ...common, width: 82, color: 'var(--text-dim)' }}>{n}</div>
              <div style={{ flex: 1, height: 5, background: '#1a1d1a', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${w}%`, background: 'var(--accent)' }}/>
              </div>
              <div style={{ ...common, color: 'var(--accent)' }}>{v}</div>
            </div>
          ))}
        </div>
      );
    case 'pipeline':
      return (
        <svg viewBox="0 0 200 70" style={{ width: '100%' }}>
          {[0,1,2,3,4].map(i => {
            const w = 170 - i * 28;
            return <rect key={i} x={(200 - w)/2} y={i * 12} width={w} height={10} rx="2" fill={`color-mix(in oklab, var(--accent) ${80 - i*14}%, #151815)`}/>;
          })}
        </svg>
      );
    case 'attribution':
      return (
        <div style={{ width: '100%' }}>
          {[
            ['Facebook Ads', 42, 68, '#4267B2'],
            ['Google Ads',   58, 52, '#34A853'],
            ['Instagram',    51, 40, '#E1306C'],
          ].map(([n, cpl, w, c], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
              <div style={{ width: 5, height: 5, borderRadius: 5, background: c }}/>
              <div style={{ ...common, color: 'var(--text-dim)', width: 70 }}>{n}</div>
              <div style={{ flex: 1, height: 4, background: '#1a1d1a', borderRadius: 2 }}>
                <div style={{ height: '100%', width: `${w}%`, background: c, borderRadius: 2 }}/>
              </div>
              <div style={{ ...common, color: 'var(--text)' }}>{cpl}€</div>
            </div>
          ))}
        </div>
      );
    case 'coach':
      return (
        <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {[
            ['✓ Cite le CPL par canal au 1er appel', 'var(--accent)'],
            ['✓ Propose la simulation en < 3 min', 'var(--accent)'],
            ['! Pas de récapitulatif avant relance', 'var(--warn)'],
          ].map(([t, c], i) => (
            <div key={i} style={{ ...common, fontSize: 10.5, color: c, padding: '3px 0' }}>{t}</div>
          ))}
        </div>
      );
    default: return null;
  }
}

function FeatureIcon({ type }) {
  const paths = {
    sparkle: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6.3 6.3l2.8 2.8M14.9 14.9l2.8 2.8M6.3 17.7l2.8-2.8M14.9 9.1l2.8-2.8"/></>,
    phone: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1A19.5 19.5 0 0 1 5 13.2 19.8 19.8 0 0 1 1.9 4.6 2 2 0 0 1 3.9 2.4h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.4 2.1L8 10.1a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2z"/>,
    bolt: <path d="M13 2 3 14h7l-1 8 10-12h-7z"/>,
    chart: <><path d="M4 20V6M4 20h16"/><path d="M8 16v-4M12 16V9M16 16v-6"/></>,
    ads: <><path d="M3 11v2a3 3 0 0 0 3 3h2l9 5V3L8 8H6a3 3 0 0 0-3 3z"/></>,
    team: <><circle cx="9" cy="8" r="3"/><path d="M3 20c1-3.5 3.5-5 6-5s5 1.5 6 5"/><circle cx="17" cy="10" r="2.5"/></>,
  };
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      {paths[type]}
    </svg>
  );
}

function Features({ t }) {
  return (
    <section id="features">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.features_eyebrow}</span>
          <h2>{t.features_title}</h2>
          <p>{t.features_desc}</p>
        </div>
        <div className="features-grid">
          {FEATURES.map((f, i) => (
            <div key={i} className="feature-card">
              <div className="feature-icon"><FeatureIcon type={f.icon}/></div>
              <h3>{t.features_items?.[i]?.title || f.title}</h3>
              <p>{t.features_items?.[i]?.desc || f.desc}</p>
              <div className="viz"><FeatureViz type={f.vizType}/></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Steps({ t }) {
  const steps = [
    { n: '01', title: t.step1_t, desc: t.step1_d },
    { n: '02', title: t.step2_t, desc: t.step2_d },
    { n: '03', title: t.step3_t, desc: t.step3_d },
    { n: '04', title: t.step4_t, desc: t.step4_d },
  ];
  return (
    <section id="how" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.how_eyebrow}</span>
          <h2>{t.how_title}</h2>
          <p>{t.how_desc}</p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const BRAND_LOGOS = {
  'Facebook Ads': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <circle cx="16" cy="16" r="15" fill="#1877F2"/>
      <path d="M18.5 17h2.3l.4-3h-2.7v-1.9c0-.9.3-1.5 1.6-1.5h1.2V8c-.2 0-.9-.1-1.8-.1-1.8 0-3 1.1-3 3.1V14h-2.1v3h2.1v7.8c.4.1.9.1 1.4.1s.9 0 1.4-.1V17z" fill="#fff"/>
    </svg>
  ),
  'Google Ads': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <path d="M12.7 6.8L6.4 17.7c-.9 1.5-.4 3.5 1.1 4.4s3.5.4 4.4-1.1L18.2 10c.9-1.5.4-3.5-1.1-4.4-1.5-.8-3.5-.3-4.4 1.2z" fill="#FBBC04"/>
      <path d="M25.6 17.7L19.3 6.8c-.9-1.5-2.8-2-4.4-1.1-1.5.9-2 2.8-1.1 4.4l6.3 10.9c.9 1.5 2.8 2 4.4 1.1 1.5-.9 2-2.9 1.1-4.4z" fill="#4285F4"/>
      <circle cx="9.3" cy="22.7" r="3.2" fill="#34A853"/>
    </svg>
  ),
  'Instagram': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <defs>
        <radialGradient id="ig-g" cx="30%" cy="100%" r="120%">
          <stop offset="0" stopColor="#FFDB2C"/>
          <stop offset="0.3" stopColor="#FF543E"/>
          <stop offset="0.7" stopColor="#C837AB"/>
          <stop offset="1" stopColor="#3B5FBA"/>
        </radialGradient>
      </defs>
      <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#ig-g)"/>
      <rect x="8" y="8" width="16" height="16" rx="5" fill="none" stroke="#fff" strokeWidth="2"/>
      <circle cx="16" cy="16" r="4" fill="none" stroke="#fff" strokeWidth="2"/>
      <circle cx="22" cy="10" r="1.3" fill="#fff"/>
    </svg>
  ),
  'WhatsApp': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <path d="M16 2C8.3 2 2 8.3 2 16c0 2.5.7 4.8 1.8 6.9L2 30l7.3-1.9c2 1.1 4.3 1.7 6.7 1.7 7.7 0 14-6.3 14-14S23.7 2 16 2z" fill="#25D366"/>
      <path d="M22.5 19.3c-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2s-.9 1.1-1.1 1.3c-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.7-2-1.9-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.8-1.8-1-2.5-.3-.7-.5-.6-.8-.6h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.6 0 1.5 1.1 3 1.3 3.2.2.3 2.2 3.3 5.3 4.7 2.6 1.1 3.1.9 3.7.8.5-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.2-.2-.4-.2-.7-.4z" fill="#fff"/>
    </svg>
  ),
  'Ringover': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#5B28DD"/>
      <path d="M11 9h6.5c2.5 0 4.5 1.9 4.5 4.3 0 1.8-1.1 3.3-2.6 4l3.1 5.7h-3.2l-2.7-5.3H14v5.3h-3V9zm3 2.7v4h3c1.2 0 2-.8 2-2s-.8-2-2-2h-3z" fill="#fff"/>
    </svg>
  ),
  'Aircall': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#00B388"/>
      <path d="M22.2 19.6l-2.1-.4a1.2 1.2 0 0 0-1.2.4l-1.1 1.2c-2.3-1.1-4.2-3-5.3-5.3l1.2-1.1c.3-.3.5-.8.4-1.2l-.4-2.1c-.2-.8-.9-1.3-1.7-1.1L10.3 10c-.7.1-1.2.8-1.1 1.5.5 5.5 4.8 9.8 10.3 10.3.7.1 1.4-.4 1.5-1.1l.4-1.6c.1-.8-.4-1.5-1.2-1.5z" fill="#fff"/>
    </svg>
  ),
  'Pennylane': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#0C1F3D"/>
      <path d="M9 9h7c3 0 5 2 5 5s-2 5-5 5h-4v4H9V9zm3 3v4h3.5c1.2 0 2-.8 2-2s-.8-2-2-2H12z" fill="#16D894"/>
    </svg>
  ),
  'Qonto': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#2D1C66"/>
      <path d="M16 9c-3.9 0-7 3.1-7 7s3.1 7 7 7c1.2 0 2.2-.3 3.2-.8l1.5 1.8 2.1-1.8-1.4-1.6c.9-1.2 1.5-2.7 1.5-4.3 0-3.9-3.1-7-7-7zm0 11c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z" fill="#fff"/>
    </svg>
  ),
  'Gmail': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <path d="M4 8h24v16H4z" fill="#fff"/>
      <path d="M4 8l12 8.5L28 8v16h-4V14l-8 5.5L8 14v10H4V8z" fill="#EA4335"/>
      <path d="M28 8v3L16 19.5 4 11V8l12 8.5L28 8z" fill="#C5221F"/>
      <path d="M4 8v3l12 8.5V16.5L4 8z" fill="#4285F4"/>
      <path d="M28 8v3L16 19.5v-3L28 8z" fill="#34A853"/>
      <path d="M28 8h-3L16 14.5 7 8H4l12 8.5L28 8z" fill="#FBBC04"/>
    </svg>
  ),
  'Outlook': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="8" width="16" height="16" rx="1" fill="#0A2767"/>
      <path d="M10 11c-2.2 0-4 2.2-4 5s1.8 5 4 5 4-2.2 4-5-1.8-5-4-5zm0 2c1.1 0 2 1.3 2 3s-.9 3-2 3-2-1.3-2-3 .9-3 2-3z" fill="#fff"/>
      <rect x="18" y="10" width="12" height="12" fill="#0078D4"/>
      <rect x="18" y="10" width="12" height="4" fill="#0364B8"/>
    </svg>
  ),
  'Calendly': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#006BFF"/>
      <rect x="8" y="6" width="2" height="4" rx="1" fill="#fff"/>
      <rect x="22" y="6" width="2" height="4" rx="1" fill="#fff"/>
      <rect x="7" y="11" width="18" height="14" rx="2" fill="#fff"/>
      <rect x="10" y="14" width="3" height="3" rx="0.5" fill="#006BFF"/>
      <rect x="15" y="14" width="3" height="3" rx="0.5" fill="#006BFF"/>
      <rect x="20" y="14" width="2" height="3" rx="0.5" fill="#006BFF"/>
      <rect x="10" y="19" width="3" height="3" rx="0.5" fill="#006BFF"/>
    </svg>
  ),
  'DocuSign': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#FFCC22"/>
      <path d="M11 9h6l5 5v9c0 1.1-.9 2-2 2H11c-1.1 0-2-.9-2-2V11c0-1.1.9-2 2-2z" fill="#4B0082"/>
      <path d="M17 9v4c0 .6.4 1 1 1h4" fill="none" stroke="#4B0082" strokeWidth="1"/>
      <text x="16" y="22" fill="#FFCC22" textAnchor="middle" fontFamily="Arial" fontWeight="900" fontSize="9">DS</text>
    </svg>
  ),
  'MaPrimeRénov\'': (
    <svg width="36" height="32" viewBox="0 0 36 32">
      <rect x="2" y="4" width="10" height="24" fill="#002395"/>
      <rect x="12" y="4" width="12" height="24" fill="#fff"/>
      <rect x="24" y="4" width="10" height="24" fill="#ED2939"/>
      <text x="18" y="20" textAnchor="middle" fontSize="5.5" fontFamily="Arial" fontWeight="700" fill="#002395">RF</text>
    </svg>
  ),
  'France Rénov\'': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#18753C"/>
      <path d="M16 7l8 7v10H18v-6h-4v6H8V14l8-7z" fill="#fff"/>
      <path d="M14 14l2-1.5 2 1.5v3h-4z" fill="#18753C"/>
    </svg>
  ),
  'Slack': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <path d="M9 18.5a2.5 2.5 0 1 1 0 5H6.5a2.5 2.5 0 0 1 0-5H9zm1.3 0a2.5 2.5 0 0 1 5 0v6.2a2.5 2.5 0 0 1-5 0v-6.2z" fill="#E01E5A"/>
      <path d="M13.5 9a2.5 2.5 0 1 1-5 0V6.5a2.5 2.5 0 1 1 5 0V9zm0 1.3a2.5 2.5 0 0 1 0 5H7.3a2.5 2.5 0 0 1 0-5h6.2z" fill="#36C5F0"/>
      <path d="M23 13.5a2.5 2.5 0 1 1 0-5h2.5a2.5 2.5 0 1 1 0 5H23zm-1.3 0a2.5 2.5 0 0 1-5 0V7.3a2.5 2.5 0 0 1 5 0v6.2z" fill="#2EB67D"/>
      <path d="M18.5 23a2.5 2.5 0 1 1 5 0v2.5a2.5 2.5 0 1 1-5 0V23zm0-1.3a2.5 2.5 0 0 1 0-5h6.2a2.5 2.5 0 0 1 0 5h-6.2z" fill="#ECB22E"/>
    </svg>
  ),
  'Zapier': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#FF4A00"/>
      <path d="M16 8v5l3.5-3.5 1.5 1.5-3.5 3.5h5v2h-5l3.5 3.5-1.5 1.5-3.5-3.5v5h-2v-5l-3.5 3.5-1.5-1.5 3.5-3.5h-5v-2h5l-3.5-3.5 1.5-1.5 3.5 3.5V8z" fill="#fff"/>
    </svg>
  ),
  'Sellsy': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#1A1A1A"/>
      <path d="M21 12c-1-1.5-2.5-2.5-4.5-2.5-3 0-5 1.8-5 4 0 2 1.5 3 4 3.5l1.5.3c1.5.3 2 .7 2 1.5s-1 1.5-2.5 1.5c-1.8 0-2.8-.7-3.5-1.8L10 20c1 2 3 3 5.5 3 3.3 0 5.5-1.8 5.5-4.3 0-2.2-1.5-3.3-4.2-3.8l-1.3-.3c-1.4-.3-2-.6-2-1.3 0-.8.8-1.3 2-1.3 1.3 0 2.2.5 2.7 1.4L21 12z" fill="#00B8AE"/>
    </svg>
  ),
  'HubSpot': (
    <svg width="32" height="32" viewBox="0 0 32 32">
      <rect x="2" y="2" width="28" height="28" rx="7" fill="#FF7A59"/>
      <circle cx="22" cy="20" r="4" fill="none" stroke="#fff" strokeWidth="1.8"/>
      <path d="M22 16V9" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/>
      <circle cx="22" cy="8" r="2" fill="none" stroke="#fff" strokeWidth="1.8"/>
      <path d="M19 20l-5-3" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/>
      <circle cx="12" cy="16" r="2.5" fill="#fff"/>
    </svg>
  ),
};

function Integrations({ t }) {
  const items = [
    'Facebook Ads','Google Ads','Instagram','WhatsApp','Ringover','Aircall',
    'Pennylane','Qonto','Gmail','Outlook','Calendly','DocuSign',
    'MaPrimeRénov\'','France Rénov\'','Slack','Zapier','Sellsy','HubSpot',
  ].map(name => ({ name }));
  return (
    <section id="integrations" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.integ_eyebrow}</span>
          <h2>{t.integ_title}</h2>
          <p>{t.integ_desc}</p>
        </div>
        <div className="integrations-grid">
          {items.map((it, i) => (
            <div key={i} className="integ-card">
              <IntegIcon item={it}/>
              <div className="integ-name">{it.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function IntegIcon({ item }) {
  const logo = BRAND_LOGOS[item.name];
  if (logo) return logo;
  return (
    <div style={{
      width: 30, height: 30, borderRadius: 7,
      background: 'linear-gradient(135deg, #1a1d1a, #2a2d2a)',
      border: '1px solid var(--border-hi)',
      color: 'var(--text-dim)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 14, fontWeight: 600,
    }}>?</div>
  );
}

function Testimonials({ t }) {
  const list = t.testimonials;
  return (
    <section id="clients" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.testi_eyebrow}</span>
          <h2>{t.testi_title}</h2>
        </div>
        <div className="testimonial-grid">
          {list.map((te, i) => (
            <div key={i} className={`testimonial${i === 0 ? ' featured' : ''}`}>
              {te.metric && <div className="metric">▲ {te.metric}</div>}
              <div className="quote">{te.quote}</div>
              <div className="author">
                <div className="avatar" style={{ background: te.color, color: '#0a0a0a' }}>{te.initials}</div>
                <div className="author-info">
                  <div className="author-name">{te.name}</div>
                  <div className="author-role">{te.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ t }) {
  return (
    <section id="pricing" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', margin: '0 auto 56px' }}>
          <span className="eyebrow">{t.pricing_eyebrow}</span>
          <h2>{t.pricing_title}</h2>
          <p>{t.pricing_desc}</p>
        </div>
        <div className="pricing-grid">
          {t.plans.map((p, i) => (
            <div key={i} className={`plan${p.popular ? ' popular' : ''}`}>
              {p.popular && <div className="plan-badge">{t.plan_popular}</div>}
              <div>
                <div className="plan-name">{p.name}</div>
                <div className="plan-desc" style={{ marginTop: 6 }}>{p.desc}</div>
              </div>
              <div className="plan-price">
                {p.price}<span className="per"> {p.per}</span>
              </div>
              <ul>
                {p.features.map((f, j) => (
                  <li key={j}>
                    <svg className="chk" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6"/></svg>
                    {f}
                  </li>
                ))}
              </ul>
              <button className={`btn ${p.popular ? 'btn-primary' : 'btn-secondary'}`}>{p.cta}</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', margin: '0 auto 40px' }}>
          <span className="eyebrow">{t.faq_eyebrow}</span>
          <h2>{t.faq_title}</h2>
        </div>
        <div className="faq-wrap">
          {t.faqs.map((f, i) => (
            <div key={i} className={`faq-item${open === i ? ' open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{f.q}</span>
                <svg className="chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Features = Features;
window.Steps = Steps;
window.Integrations = Integrations;
window.Testimonials = Testimonials;
window.Pricing = Pricing;
window.FAQ = FAQ;