function TaskRow({ idx, category, task, time, detail, delay }) {
  const [open, setOpen] = React.useState(false);
  const isMobile = useIsMobile();
  return (
    <motion.div {...fadeUp(delay)}
      onClick={() => setOpen(o => !o)}
      style={{
        cursor: 'pointer',
        borderTop: idx === 0 ? '1px solid var(--border)' : 'none',
        borderBottom: '1px solid var(--border)',
        padding: '20px 0',
        display: 'grid',
        gridTemplateColumns: '36px 1fr auto',
        gap: 20, alignItems: 'flex-start',
        transition: 'background 200ms ease',
      }}
      onMouseEnter={e => e.currentTarget.style.background = 'rgba(var(--fg-tint),0.015)'}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>

      <div style={{
        fontFamily: "'Space Mono', monospace", fontSize: 10,
        color: 'var(--muted)', letterSpacing: '0.16em',
        paddingTop: 4,
      }}>
        {String(idx + 1).padStart(2, '0')}
      </div>

      <div>
        {category && (
          <div style={{
            fontFamily: "'Space Mono', monospace", fontWeight: 700,
            fontSize: 9, letterSpacing: '0.26em', textTransform: 'uppercase',
            color: 'var(--accent)', marginBottom: 8,
          }}>{category}</div>
        )}
        <div style={{
          fontFamily: "'Space Mono', monospace", fontWeight: 700,
          fontSize: 13, letterSpacing: '0.02em',
          color: 'var(--fg)', textTransform: 'uppercase',
          lineHeight: 1.4,
        }}>{task}</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, minWidth: 110 }}>
        <span style={{
          fontFamily: "'Space Mono', monospace", fontWeight: 700,
          fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--accent)',
        }}>{time}</span>
        <motion.span
          animate={{ rotate: open ? 45 : 0 }}
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 22, height: 22, color: 'var(--muted)', fontSize: 16, lineHeight: 1,
            border: '1px solid var(--border-2)', borderRadius: 2,
          }}>+</motion.span>
      </div>

      <motion.div
        initial={false}
        animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0, marginTop: open ? 12 : 0 }}
        transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
        style={{ overflow: 'hidden', gridColumn: '1 / -1' }}>
        <div className="body-muted" style={{ maxWidth: isMobile ? 'none' : 620 }}>{detail}</div>
      </motion.div>
    </motion.div>
  );
}

function Problem() {
  const tasks = [
    { category: "Data Consolidation",
      task: "Thirty spreadsheets. One output. Done by hand, every two weeks.",
      time: "3–4 hrs / cycle",
      detail: "Someone opens each file, finds the rows that matter, pulls the numbers, and pastes them into the master sheet. Then checks their work. The output is identical every cycle. The only thing that changes is which cells moved since last time. The person doing it has it memorized. That is the problem." },
    { category: "Client Intake",
      task: "New client form came in. Half the fields are empty.",
      time: "45 min / client",
      detail: "The form goes out. It comes back missing three things you always need. Someone emails asking for them. The client sends one. You follow up again for the other two. By the time the file is complete, four days have passed and whoever needs to start the work is still waiting on intake." },
    { category: "Engagement Letters",
      task: "Every new client gets a proposal built from last month's version.",
      time: "60–90 min / proposal",
      detail: "Open the last one. Delete the client name. Update the scope. Adjust the fees. Rewrite the timeline. Check that nothing from the previous client leaked through. It takes an hour every time and the output looks nearly identical to the one before it." },
    { category: "Client Reporting",
      task: "Monthly report. Same format. Built from scratch. Every single month.",
      time: "2–3 hrs / report",
      detail: "Pull the period's data, drop it into last month's template, update the numbers, rewrite the commentary, fix the formatting, send it out. The structure never changes. The inputs shift slightly. The two hours it takes does not." },
    { category: "Billing From Timesheets",
      task: "End of the month. Time logs are in. Nobody agrees on the format.",
      time: "3–4 hrs / month",
      detail: "Collect everyone's hours. Sort by client code. Apply the right rates. Flag anything that looks off. Generate the invoices. Someone does this from a pile of spreadsheets and notes every billing cycle, in a format that varies depending on who submitted what and when." },
    { category: "Pre-Meeting Prep",
      task: "Client call is in an hour. Someone is pulling the file together right now.",
      time: "30–45 min / call",
      detail: "Recent activity. Open items. Last invoice status. Outstanding questions. It lives in three different places and someone spends half an hour before every call assembling context that should be one click away. By the time they dial in they are current. Then it happens again next month." },
  ];

  return (
    <section id="problem">
      <div className="container">
        <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
          <span className="eyebrow" style={{ color: 'var(--muted)' }}>01 · THE PROBLEM</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} className="h2" style={{ maxWidth: 880, marginBottom: 24 }}>
          SOMEWHERE IN YOUR OPERATION,<br />
          HOURS ARE SPENT EVERY DAY ON<br />
          THINGS THAT SHOULD TAKE MINUTES.
        </motion.h2>

        <motion.p {...fadeUp(0.14)} className="body-muted" style={{ maxWidth: 620, marginBottom: 56 }}>
          You run a successful business. It works. But people on your team spend hours a day on
          tasks that should not take that long. They've stopped thinking of it as a problem.
          It's just how things work. It does not have to be.
        </motion.p>

        <div>
          {tasks.map((t, i) => <TaskRow key={i} idx={i} {...t} delay={i * 0.04} />)}
        </div>

        <motion.div {...fadeUp(0.2)} style={{ marginTop: 28 }}>
          <span className="body-muted" style={{ fontSize: 11, letterSpacing: '0.04em' }}>
            <span style={{ color: 'var(--accent)' }}>{'↳'}</span> Click any row to read more.
          </span>
        </motion.div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, TaskRow });