/* global React, Container, Section, Eyebrow, Reveal */
const { useState: useStateSvc } = React;

const SERVICES_FALLBACK = [
  { num: '01', title: 'Meta Ads', body: "Built around your funnel and your offer, not someone else's template. Creative loops, targeting and measurement, rebuilt monthly.", outcomes: ['Creative testing', 'Audience architecture', 'Measurement'] },
  { num: '02', title: 'Creative direction', body: "Ads and organic content that sound like you and convert like us.", outcomes: ['Ad creative', 'Organic content', 'Art direction'] },
  { num: '03', title: 'Lead generation systems', body: 'Forms, nurture, qualification.', outcomes: ['Qualification logic', 'Nurture sequences', 'Hand-off'] },
  { num: '04', title: 'CRM & automation', body: "The invisible machinery behind the revenue.", outcomes: ['Pipeline design', 'Routing', 'Automation'] },
  { num: '05', title: 'Tracking & attribution', body: 'First-party, event-based, honest.', outcomes: ['First-party events', 'Server-side', 'Reporting'] },
];
const services = (window.CONTENT && window.CONTENT.services && window.CONTENT.services.items) || SERVICES_FALLBACK;

function Services({ variant }) {
  return (
    <Section id="services" pad={140} topRule>
      <Container>
        <Reveal>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80,
            marginBottom: 80, alignItems: 'end',
          }}>
            <div>
              <Eyebrow>§ Services</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(44px, 5.2vw, 72px)', lineHeight: 1.02,
                letterSpacing: '-0.02em', margin: '16px 0 0', fontWeight: 400,
              }}>
                Five disciplines.<br/>
                <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>One system.</em>
              </h2>
            </div>
            <div>
              <p style={{
                fontSize: 19, lineHeight: 1.55, color: 'var(--fg-muted)',
                maxWidth: 560, margin: 0,
              }}>
                Each discipline feeds the next. Ads without CRM leaks. CRM without tracking is blind. Creative without a funnel burns budget. We only engage when all five can run together. That's the only version that compounds.
              </p>
            </div>
          </div>
        </Reveal>

        {variant === 'grid' ? <ServicesGrid /> : <ServicesEditorial />}
      </Container>
    </Section>
  );
}

/* ---------- Layout A: Numbered editorial list (default) ---------- */
function ServicesEditorial() {
  const [active, setActive] = useStateSvc(0);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 96, alignItems: 'start' }}>
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
        @keyframes svcExpand { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 400px; } }
        .svc-aside { display: block; }
        .svc-inline-panel { display: none; }
        @media (max-width: 920px) {
          .svc-aside { display: none !important; }
          .svc-inline-panel { display: block !important; }
        }
      `}</style>

      <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {services.map((s, i) => (
          <React.Fragment key={s.num}>
            <li
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}
              style={{
                display: 'grid', gridTemplateColumns: '72px 1fr auto', gap: 24,
                alignItems: 'baseline', padding: '28px 0',
                borderTop: '1px solid var(--border)',
                cursor: 'pointer',
                color: active === i ? 'var(--fg)' : 'var(--fg-muted)',
                transition: 'color 180ms var(--ease-out)',
              }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 13,
                color: active === i ? 'var(--accent)' : 'var(--fg-subtle)',
                transition: 'color 180ms',
              }}>{s.num}</span>
              <span style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 3.4vw, 44px)',
                lineHeight: 1.05, letterSpacing: '-0.02em',
              }}>{s.title}</span>
              <span aria-hidden style={{
                fontSize: 20, color: active === i ? 'var(--accent)' : 'var(--fg-faint)',
                transform: active === i ? 'rotate(90deg)' : 'none',
                transition: 'transform 220ms, color 180ms',
              }}>→</span>
            </li>

            {/* Mobile-only inline accordion panel */}
            <li className="svc-inline-panel" style={{ display: 'none', listStyle: 'none' }}>
              {active === i && (
                <div style={{
                  background: 'var(--paper-100)', border: '1px solid var(--border)',
                  padding: 24, borderRadius: 4, marginBottom: 4,
                  animation: 'svcExpand 240ms var(--ease-out)',
                  overflow: 'hidden',
                }}>
                  <p style={{
                    fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.4,
                    color: 'var(--fg)', margin: '0 0 16px', fontWeight: 400,
                  }}>{s.body}</p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {s.outcomes.map(o => (
                      <span key={o} style={{
                        fontSize: 11, padding: '4px 10px', borderRadius: 999,
                        border: '1px solid var(--border-strong)', color: 'var(--fg-muted)',
                      }}>{o}</span>
                    ))}
                  </div>
                </div>
              )}
            </li>
          </React.Fragment>
        ))}
        <li style={{ borderTop: '1px solid var(--border)', height: 1 }}/>
      </ol>

      <aside className="svc-aside" style={{ position: 'sticky', top: 120 }}>
        <div key={active} style={{
          background: 'var(--paper-100)', border: '1px solid var(--border)',
          padding: 36, borderRadius: 4,
          animation: 'fadeIn 280ms var(--ease-out)',
        }}>
          <Eyebrow color="var(--accent)">{services[active].num} · {services[active].title}</Eyebrow>
          <p style={{
            fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: 1.3,
            letterSpacing: '-0.01em', color: 'var(--fg)', margin: '20px 0 0',
            fontWeight: 400,
          }}>
            {services[active].body}
          </p>
          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 28,
            paddingTop: 24, borderTop: '1px solid var(--border)',
          }}>
            {services[active].outcomes.map(o => (
              <span key={o} style={{
                fontSize: 12, padding: '5px 12px', borderRadius: 999,
                border: '1px solid var(--border-strong)', color: 'var(--fg-muted)',
              }}>{o}</span>
            ))}
          </div>
        </div>
        <p style={{ marginTop: 24, fontSize: 13, color: 'var(--fg-subtle)', maxWidth: 400 }}>
          Tap a service to preview. In engagement, all five
          are running in concert, not stacked as retainers.
        </p>
      </aside>
    </div>
  );
}

/* ---------- Layout B: Grid (Tweak) ---------- */
function ServicesGrid() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
      background: 'var(--border)', border: '1px solid var(--border)',
    }}>
      {services.map(s => <ServiceCell key={s.num} {...s}/>)}
    </div>
  );
}

function ServiceCell({ num, title, body, outcomes }) {
  const [hover, setHover] = useStateSvc(false);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'var(--paper-100)' : 'var(--bg)',
        padding: '36px 28px', display: 'flex', flexDirection: 'column',
        gap: 14, minHeight: 260, transition: 'background 220ms var(--ease-out)',
      }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: hover ? 'var(--accent)' : 'var(--fg-subtle)',
          transition: 'color 120ms',
        }}>{num}</span>
        <span aria-hidden style={{
          fontSize: 16, color: hover ? 'var(--accent)' : 'var(--fg-faint)',
          transition: 'transform 180ms',
          transform: hover ? 'translateX(2px)' : 'translateX(-4px)',
          opacity: hover ? 1 : 0,
        }}>→</span>
      </div>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400,
        margin: 0, letterSpacing: '-0.01em', lineHeight: 1.08,
      }}>{title}</h3>
      <p style={{
        fontSize: 15, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0,
      }}>{body}</p>
      <div style={{
        marginTop: 'auto', display: 'flex', gap: 6, flexWrap: 'wrap',
        paddingTop: 16, borderTop: '1px solid var(--border)',
      }}>
        {outcomes.map(o => (
          <span key={o} style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>· {o}</span>
        ))}
      </div>
    </article>
  );
}

window.Services = Services;