/* ==========================================================================
   Middle Sections — Social Proof Categories, Problem, Systems
   ========================================================================== */

/* ---- Scroll reveal hook ---- */
function useReveal() {
  const { useEffect } = React;
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vis'); obs.unobserve(e.target); } });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal:not(.vis)').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });
}

/* ===== SOCIAL PROOF CATEGORIES ===== */
function SocialProof() {
  const categories = ['Health & Fitness', 'Mindset & Performance', 'Advanced Coaching', 'Online Education'];
  return (
    <section className="proof">
      <div className="wrap">
        <div className="proof-label reveal">
          <p className="eyebrow">Built for coaches in person</p>
        </div>
        <div className="proof-categories reveal reveal-d1">
          {categories.map((cat, i) => (
            <span key={i} className="proof-cat">{cat}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== INTEGRATIONS STRIP ===== */
function IntegrationsSection() {
  const I = window.ELVAIO_IMAGES || {};
  const tools = [
    { name: 'n8n',      img: I['n8n'] },
    { name: 'Claude',   img: I['claude'] },
    { name: 'Airtable', img: I['airtable'] },
    { name: 'Instantly',img: I['instantly'] },
    { name: 'Calendly', img: I['calendly'] },
    { name: 'Gmail',    img: I['gmail'] },
    { name: 'Slack',    img: I['slack'] },
    { name: 'LinkedIn', img: I['linkedin'] },
    { name: 'Drive',    img: I['drive'] },
    { name: 'Stripe',   img: I['stripe'] },
    { name: 'ManyChat', img: I['manychat'] },
  ];

  return (
    <section className="integrations-strip">
      <div className="wrap">
        <p className="eyebrow reveal" style={{ textAlign: 'center', marginBottom: 'var(--s-8)' }}>
          Built on the tools coaches already use
        </p>
        <div className="int-strip reveal reveal-d1">
          {tools.map((t, i) => (
            <div key={i} className="int-tool">
              <img src={t.img} alt={t.name} className="int-tool-img" />
              <span className="int-tool-name">{t.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== PROBLEM SECTION ===== */
function ProblemSection() {
  const bullets = [
    'Manually qualifying and following up with every lead',
    'Answering the same DMs and emails on repeat',
    'Spending hours on content that could be batched in minutes',
    'Client onboarding falling through the cracks',
    'No system to convert warm followers into buyers',
  ];

  const tasks = [
    { label: 'Standardize all system', pct: 'All due', color: 'var(--accent)' },
    { label: 'Leads bot to online follow-up', pct: '91%', color: 'var(--accent)' },
    { label: 'Promote from manual outreach', pct: '67%', color: 'var(--warm-gold)' },
    { label: 'Content repurposing\n(scheduling & formatting)', pct: '', color: 'var(--fg-muted)' },
  ];

  return (
    <section className="problem section-pad" id="problem">
      <div className="wrap">
        <div className="problem-header reveal">
          <p className="eyebrow">The real problem</p>
          <h2 className="section-title">Your growth is capped<br />by your time</h2>
        </div>
        <div className="problem-grid">
          <div className="problem-left reveal">
            <p className="problem-intro">
              You built an audience. You launched offers.
              But most of your week still disappears into
              tasks that don't move revenue.
            </p>
            <ul className="problem-bullets">
              {bullets.map((b, i) => (
                <li key={i} className="problem-bullet">
                  <span className="problem-bullet-dot"></span>
                  {b}
                </li>
              ))}
            </ul>
          </div>
          <div className="problem-right reveal reveal-d2">
            <div className="problem-tasks">
              {tasks.map((t, i) => (
                <div key={i} className="problem-task">
                  <span className="problem-task-label">{t.label}</span>
                  {t.pct && <span className="problem-task-pct" style={{ color: t.color }}>{t.pct}</span>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== FIVE SYSTEMS ===== */
function SystemsSection() {
  const I = window.ELVAIO_IMAGES || {};
  const systems = [
    {
      title: 'Admin Autopilot',
      desc: 'Automates intake forms, scheduling reminders, and repetitive back-and-forth so your operations run without you in every loop.',
      tag: 'Operations',
      tools: ['calendly', 'gmail', 'stripe', 'airtable'],
    },
    {
      title: 'Lead Nurture Engine',
      desc: 'Captures leads from Instagram and email, triggers personalized follow-up sequences, and books discovery calls while you sleep.',
      tag: 'Sales',
      tools: ['manychat', 'instantly', 'linkedin', 'calendly'],
    },
    {
      title: 'Content Machine',
      desc: 'Repurposes your long-form content into short-form scripts, captions, and emails — one recording turns into a week of output.',
      tag: 'Marketing',
      tools: ['claude', 'drive', 'linkedin', 'n8n'],
    },
    {
      title: 'Client Success Bot',
      desc: 'An AI-powered listener that answers common client questions and nurtures ongoing engagement above their current subscriptions.',
      tag: 'Retention',
      tools: ['slack', 'claude', 'manychat', 'gmail'],
    },
    {
      title: 'Integration Hub',
      desc: 'Connects your CRM, payment processor, course platform, and calendar into one automated workflow — no more copy-pasting between tools.',
      tag: 'Infrastructure',
      tools: ['n8n', 'airtable', 'stripe', 'slack'],
    },
  ];

  return (
    <section className="systems section-pad-lg" id="systems">
      <div className="wrap">
        <div className="systems-header reveal">
          <p className="eyebrow">The AI suite</p>
          <h2 className="section-title">Five systems. One machine.</h2>
          <p className="systems-sub">Every system targets a specific revenue or time bottleneck in your coaching business.</p>
        </div>
        <div className="systems-list">
          {systems.map((s, i) => (
            <div key={i} className={`system-card reveal reveal-d${(i % 4) + 1}`}>
              <h3 className="system-title">{s.title}</h3>
              <p className="system-desc">{s.desc}</p>
              <div className="system-footer">
                <div className="system-tools">
                  {s.tools.map((t, j) => (
                    <span key={j} className="system-tool" title={t}>
                      <img src={I[t]} alt={t} loading="lazy" />
                    </span>
                  ))}
                </div>
                <span className="system-tag">{s.tag}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.useReveal = useReveal;
window.SocialProof = SocialProof;
window.IntegrationsSection = IntegrationsSection;
window.ProblemSection = ProblemSection;
window.SystemsSection = SystemsSection;