// Services — "The Back Office, Built and Run for You." — iridescent hover, featured code card.
const Services = () => {
  const t = useTweaks();
  const iridOn = t.iridescent !== false;

  const cardBase = {
    position: 'relative',
    background: '#FFFFFF',
    border: '1px solid rgba(44,54,90,0.09)',
    borderRadius: 14,
    overflow: 'hidden',
    transition: 'transform 240ms cubic-bezier(0.2,0.6,0.2,1), box-shadow 240ms cubic-bezier(0.2,0.6,0.2,1)',
    '--card-r': '14px',
  };

  const Card = ({ className = '', style = {}, children, tall = false }) => {
    const [hov, setHov] = React.useState(false);
    return (
      <div
        className={iridOn ? `irid ${className}` : className}
        onMouseEnter={() => setHov(true)}
        onMouseLeave={() => setHov(false)}
        style={{
          ...cardBase,
          ...style,
          transform: hov ? 'translateY(-5px)' : 'none',
          boxShadow: hov ? '0 16px 40px rgba(44,54,90,0.13)' : '0 2px 8px rgba(44,54,90,0.06)',
        }}
      >
        {children}
      </div>
    );
  };

  // Featured IDE mock
  const IDEWell = () => (
    <div style={{
      background: '#1C2540',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '36px 32px', height: '100%',
    }}>
      <div style={{
        width: '100%', borderRadius: 10, overflow: 'hidden',
        boxShadow: '0 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3)',
        border: '1px solid rgba(238,232,223,0.1)',
        fontFamily: '"SF Mono", "Fira Code", Consolas, monospace',
        fontSize: 11.5, lineHeight: 1.6,
      }}>
        <div style={{
          background: '#151D35', padding: '8px 14px',
          display: 'flex', alignItems: 'center', gap: 7,
          borderBottom: '1px solid rgba(238,232,223,0.07)',
        }}>
          <div style={{ display: 'flex', gap: 5 }}>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FFBD2E' }} />
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
          </div>
          <div style={{ flex: 1, textAlign: 'center', fontSize: 10.5, color: 'rgba(196,188,176,0.5)' }}>
            back-office / workflows / estimate-follow-up.ts
          </div>
        </div>
        <div style={{ display: 'flex', background: '#151D35' }}>
          <div style={{ width: 152, background: '#1C2540', borderRight: '1px solid rgba(238,232,223,0.07)', padding: '12px 0', flexShrink: 0 }}>
            {[
              { indent: 0, icon: '▾', label: 'back-office', dim: false },
              { indent: 1, icon: '▾', label: 'workflows', dim: false },
              { indent: 2, icon: ' ', label: 'estimate-follow-up.ts', active: true },
              { indent: 2, icon: ' ', label: 'invoice-chase.ts', dim: true },
              { indent: 2, icon: ' ', label: 'job-scheduler.ts', dim: true },
              { indent: 1, icon: '▸', label: 'integrations', dim: true },
            ].map((it, i) => (
              <div key={i} style={{
                padding: `2px 10px 2px ${10 + it.indent * 12}px`,
                fontSize: 11,
                color: it.active ? '#EEE8DF' : it.dim ? 'rgba(196,188,176,0.3)' : 'rgba(196,188,176,0.65)',
                background: it.active ? 'rgba(238,232,223,0.07)' : 'transparent',
                display: 'flex', gap: 5, alignItems: 'center', whiteSpace: 'nowrap',
              }}>
                <span style={{ color: 'rgba(196,188,176,0.4)', fontSize: 9, flexShrink: 0 }}>{it.icon}</span>
                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.label}</span>
              </div>
            ))}
          </div>
          <div style={{ flex: 1, padding: '16px 18px', overflow: 'hidden' }}>
            {[
              [['import', '#C792EA'], [' { workflow } ', '#C4BCB0'], ['from', '#C792EA'], [" 'back-office/core'", '#C3E88D']],
              [],
              [['export const ', '#C792EA'], ['followUp', '#82AAFF'], [' = workflow({', '#C4BCB0']],
              [['  trigger', '#C4BCB0'], [': ', '#89DDFF'], ["'schedule'", '#C3E88D'], [',  // daily', 'rgba(196,188,176,0.35)']],
              [['  steps', '#C4BCB0'], [': [', '#89DDFF']],
              [['    getUnsent(', '#82AAFF'], ['CRM', '#FFCB6B'], ['),', '#C4BCB0']],
              [['    filter(', '#82AAFF'], ['e => e.age', '#C4BCB0'], [' > ', '#89DDFF'], ['3', '#F78C6C'], ['),', '#C4BCB0']],
              [['    sendSMS(', '#82AAFF'], ["'followUp'", '#C3E88D'], ['),', '#C4BCB0']],
              [['    logToSheet(', '#82AAFF'], ['Reports', '#FFCB6B'], ['),', '#C4BCB0']],
              [['  ],', '#C4BCB0']],
              [['});', '#C4BCB0']],
            ].map((row, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, minHeight: '1.6em' }}>
                <span style={{ color: 'rgba(196,188,176,0.22)', minWidth: 16, textAlign: 'right', flexShrink: 0, fontSize: 10 }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ whiteSpace: 'nowrap' }}>
                  {row.map((tok, j) => <span key={j} style={{ color: tok[1] }}>{tok[0]}</span>)}
                </span>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          background: '#151D35', borderTop: '1px solid rgba(238,232,223,0.07)',
          padding: '5px 14px', display: 'flex', justifyContent: 'space-between',
          fontSize: 10, color: 'rgba(196,188,176,0.45)',
        }}>
          <span>TypeScript · Your operation</span>
          <span>✓ 3 workflows active</span>
        </div>
      </div>
    </div>
  );

  // Small mocks
  const WorkflowMock = () => {
    const nodes = [
      { label: 'Trigger', color: '#5A7ABE' },
      { label: 'Filter',  color: '#8892A4' },
      { label: 'Action',  color: '#4A7A5A' },
      { label: 'Notify',  color: '#2C365A' },
    ];
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {nodes.map((n, i) => (
            <React.Fragment key={i}>
              <div style={{
                padding: '7px 12px', borderRadius: 7,
                background: `${n.color}15`, border: `1.5px solid ${n.color}40`,
                fontSize: 11.5, fontWeight: 700, color: n.color, whiteSpace: 'nowrap',
              }}>{n.label}</div>
              {i < nodes.length - 1 && (
                <div style={{ flex: 1, height: 1.5, background: 'rgba(44,54,90,0.15)', position: 'relative', minWidth: 14 }}>
                  <div style={{ position: 'absolute', right: -5, top: '50%', transform: 'translateY(-50%)', fontSize: 10, color: 'rgba(44,54,90,0.3)' }}>▶</div>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            { label: 'New inquiry received', done: true },
            { label: 'Routed to right workflow', done: true },
            { label: 'Owner assigned + notified', done: true },
            { label: 'Follow-up scheduled', active: true },
          ].map((row, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <div style={{
                width: 18, height: 18, borderRadius: '50%', flexShrink: 0,
                background: row.done ? 'rgba(44,54,90,0.12)' : '#5A7ABE22',
                border: row.active ? '1.5px solid #5A7ABE' : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 9, color: '#2C365A', fontWeight: 700,
              }}>{row.done ? '✓' : ''}</div>
              <div style={{ fontSize: 12.5, color: '#2C365A', opacity: row.active ? 1 : 0.6, fontWeight: row.active ? 600 : 400 }}>{row.label}</div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const IntegrationsMock = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
      <div style={{
        padding: '10px 22px', borderRadius: 10,
        background: '#2C365A', color: '#EEE8DF',
        fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em',
      }}>Your Operations</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center' }}>
        {[
          { name: 'CRM', color: '#5A7ABE' },
          { name: 'Invoicing', color: '#C8874A' },
          { name: 'Calendar', color: '#4A7A5A' },
          { name: 'Email/SMS', color: '#8892A4' },
          { name: 'Reports', color: '#6A5A9A' },
          { name: 'Any tool', color: '#2C365A' },
        ].map((x, i) => (
          <div key={i} style={{
            padding: '6px 12px', borderRadius: 7,
            background: `${x.color}12`, border: `1.5px solid ${x.color}35`,
            fontSize: 11.5, fontWeight: 600, color: x.color,
          }}>↔ {x.name}</div>
        ))}
      </div>
      <div style={{ fontSize: 11.5, color: 'rgba(44,54,90,0.5)' }}>
        Connected. One source of truth.
      </div>
    </div>
  );

  const StrategyMock = () => {
    const phases = [
      { label: 'Audit',        weeks: 'Week 1',    pct: 100 },
      { label: 'Scope',        weeks: 'Week 1–2',  pct: 80 },
      { label: 'Roadmap',      weeks: 'Week 2',    pct: 55 },
      { label: 'Build plan',   weeks: 'Approved',  pct: 30 },
    ];
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#C8874A', marginBottom: 10 }}>
          Pre-build audit
        </div>
        {phases.map((p, i) => (
          <div key={i} style={{ marginBottom: 8 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
              <span style={{ fontSize: 12.5, fontWeight: 600, color: '#2C365A' }}>{p.label}</span>
              <span style={{ fontSize: 11, color: '#C4BCB0' }}>{p.weeks}</span>
            </div>
            <div style={{ height: 6, borderRadius: 99, background: 'rgba(44,54,90,0.08)', overflow: 'hidden' }}>
              <div style={{ width: `${p.pct}%`, height: '100%', background: '#2C365A', borderRadius: 99 }} />
            </div>
          </div>
        ))}
      </div>
    );
  };

  // 2×2 grid — all four services from the brief
  const fourCards = [
    { key: 'backoffice',   n: '01', label: 'Back Office Systems',
      body: 'Your operation runs on a hundred moving parts. I map where time and money are leaking, build the systems to fix it, and run them every month.',
      Mock: () => <IDEMini /> },
    { key: 'workflow',     n: '02', label: 'Workflow Automation',
      body: 'The tasks eating your week get handled automatically.',
      Mock: WorkflowMock },
    { key: 'integrations', n: '03', label: 'Systems Integration',
      body: 'CRM, invoicing, calendar, comms. Connected so nothing falls through the cracks.',
      Mock: IntegrationsMock },
    { key: 'strategy',     n: '04', label: 'Operations Strategy',
      body: "I audit what's broken and map exactly what needs to change before a dollar gets spent.",
      Mock: StrategyMock },
  ];

  // Compact IDE-style mock for the Back Office card
  const IDEMini = () => (
    <div style={{
      background: '#1C2540', borderRadius: 8, overflow: 'hidden',
      border: '1px solid rgba(238,232,223,0.1)',
      fontFamily: '"SF Mono", "Fira Code", Consolas, monospace',
      fontSize: 11, lineHeight: 1.55,
      boxShadow: '0 8px 24px rgba(0,0,0,0.28)',
    }}>
      <div style={{
        background: '#151D35', padding: '6px 12px',
        display: 'flex', alignItems: 'center', gap: 6,
        borderBottom: '1px solid rgba(238,232,223,0.07)',
      }}>
        <div style={{ display: 'flex', gap: 4 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF5F57' }} />
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#FFBD2E' }} />
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#28C840' }} />
        </div>
        <div style={{ flex: 1, textAlign: 'center', fontSize: 10, color: 'rgba(196,188,176,0.5)' }}>
          back-office / run.ts
        </div>
      </div>
      <div style={{ padding: '12px 14px' }}>
        {[
          [['// runs monthly', 'rgba(196,188,176,0.4)']],
          [['const ', '#C792EA'], ['ops', '#82AAFF'], [' = ', '#89DDFF'], ['backOffice({', '#C4BCB0']],
          [['  quoting', '#C4BCB0'], [': ', '#89DDFF'], ['auto', '#FFCB6B'], [',', '#C4BCB0']],
          [['  invoicing', '#C4BCB0'], [': ', '#89DDFF'], ['auto', '#FFCB6B'], [',', '#C4BCB0']],
          [['  followUp', '#C4BCB0'], [':  ', '#89DDFF'], ['auto', '#FFCB6B'], [',', '#C4BCB0']],
          [['  scheduling', '#C4BCB0'], [':', '#89DDFF'], [' auto', '#FFCB6B'], [',', '#C4BCB0']],
          [['});', '#C4BCB0']],
          [],
          [['// ✓ running', '#C3E88D']],
        ].map((row, i) => (
          <div key={i} style={{ minHeight: '1.55em' }}>
            {row.map((tok, j) => <span key={j} style={{ color: tok[1] }}>{tok[0]}</span>)}
          </div>
        ))}
      </div>
    </div>
  );

  const mob = useIsMobile();

  return (
    <section
      id="services"
      data-screen-label="02 Services"
      className="bg-grid"
      style={{ backgroundColor: '#EEE8DF', color: '#2C365A', padding: mob ? '64px 20px 60px' : '140px 32px 120px' }}
    >
      <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: mob ? 40 : 64 }}>

        {/* Header */}
        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#C4BCB0' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
              What I build
            </span>
          </div>
          <h2 style={{
            margin: 0,
            fontFamily: 'Clash Display, General Sans, system-ui',
            fontSize: mob ? 'clamp(36px, 10vw, 52px)' : 'clamp(40px, 5.6vw, 76px)',
            fontWeight: 700, lineHeight: 1.02,
            letterSpacing: '-0.03em', color: '#2C365A',
          }}>
            The Back Office,<br />Built and Run<br />for You.
          </h2>
          <p style={{
            margin: 0, fontSize: mob ? 15 : 17, lineHeight: 1.65,
            color: '#2C365A', opacity: 0.68, maxWidth: 460,
          }}>
            Four capabilities, one system. I design them around your specific operation,
            wire them together, and run them every month. The back office stops being
            a thing you manage.
          </p>
        </div>

        {/* Cards — single column on mobile, 2×2 on desktop */}
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(2, 1fr)', gap: mob ? 16 : 20 }}>
          {fourCards.map(({ key, n, label, body, Mock }, i) => (
            <Card key={key} className="reveal is-in" style={{ transitionDelay: `${(i % 2) * 0.08}s` }}>
              {!mob && (
                <div style={{
                  padding: '36px 36px 28px',
                  background: 'rgba(238,232,223,0.55)',
                  borderBottom: '1px solid rgba(44,54,90,0.07)',
                  minHeight: 260,
                  display: 'flex', flexDirection: 'column', justifyContent: 'center',
                }}>
                  <Mock />
                </div>
              )}
              <div style={{ padding: mob ? '24px 24px 28px' : '28px 32px 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: '#C8874A',
                }}>{n}</div>
                <div style={{
                  fontFamily: 'Clash Display, General Sans, system-ui',
                  fontSize: mob ? 22 : 'clamp(22px, 2vw, 28px)', fontWeight: 700,
                  color: '#2C365A', letterSpacing: '-0.025em', lineHeight: 1.1,
                }}>{label}</div>
                <div style={{ fontSize: 15, color: '#2C365A', opacity: 0.65, lineHeight: 1.6 }}>
                  {body}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Services = Services;