function ExampleCard({ slug, industry, beforeTime, afterTime, before, after, delay }) {
  var href = 'example.html?id=' + slug;
  return (
    <motion.a {...fadeUp(delay)}
      href={href}
      style={{
        background: 'var(--card)',
        border: '1px solid var(--border)',
        borderRadius: 4,
        padding: 26,
        cursor: 'pointer',
        textDecoration: 'none',
        color: 'inherit',
        display: 'flex', flexDirection: 'column', gap: 18,
        transition: 'border-color 200ms ease, background 200ms ease, transform 200ms ease',
      }}
      onMouseEnter={function(e) { e.currentTarget.style.borderColor = 'rgba(var(--accent-rgb),0.4)'; }}
      onMouseLeave={function(e) { e.currentTarget.style.borderColor = 'var(--border)'; }}>

      <div className="eyebrow" style={{ color: 'var(--muted)' }}>{industry}</div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 12, alignItems: 'center' }}>
        <div style={{
          background: 'rgba(var(--fg-tint),0.04)',
          border: '1px solid var(--border)',
          borderRadius: 2, padding: '14px 14px',
        }}>
          <div className="eyebrow" style={{ color: 'var(--muted)', marginBottom: 6 }}>BEFORE</div>
          <div style={{
            fontFamily: "'Space Mono', monospace", fontWeight: 700,
            fontSize: 18, letterSpacing: '-0.01em',
            color: 'rgba(var(--fg-tint),0.45)',
          }}>{beforeTime}</div>
        </div>

        <div style={{ color: 'var(--accent)', fontSize: 16, fontFamily: "'Space Mono', monospace" }}>{'→'}</div>

        <div style={{
          background: 'rgba(var(--accent-rgb),0.06)',
          border: '1px solid rgba(var(--accent-rgb),0.25)',
          borderRadius: 2, padding: '14px 14px',
        }}>
          <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 6 }}>AFTER</div>
          <div style={{
            fontFamily: "'Space Mono', monospace", fontWeight: 700,
            fontSize: 18, letterSpacing: '-0.01em',
            color: 'var(--accent)',
          }}>{afterTime}</div>
        </div>
      </div>

      <p className="body-muted" style={{ fontSize: 12 }}>{before}</p>

      <div style={{
        marginTop: 'auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingTop: 12, borderTop: '1px solid var(--border)',
      }}>
        <span className="eyebrow" style={{ color: 'var(--accent)' }}>
          SEE HOW IT WORKS
        </span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 22, height: 22, color: 'var(--accent)', fontSize: 13, lineHeight: 1,
          border: '1px solid rgba(var(--accent-rgb),0.4)', borderRadius: 2,
        }}>{'→'}</span>
      </div>
    </motion.a>
  );
}

function Examples() {
  const mobile = useIsMobile();
  const examples = [
    {
      slug: "data-consolidation",
      industry: "PROFESSIONAL SERVICES · DATA",
      beforeTime: "3-4 hrs",
      afterTime: "5 min",
      before: "Every cycle, someone opens each file, pulls the rows that matter, and pastes them into the master sheet. Then checks their work. Same output every time, built by hand every time.",
      after: "Tool reads every source file, pulls the relevant data, and builds the output in your existing format automatically. Review and send."
    },
    {
      slug: "billing",
      industry: "PROFESSIONAL SERVICES · BILLING",
      beforeTime: "3-4 hrs",
      afterTime: "20 min",
      before: "Collect time logs from the team, sort by client code, apply the right rates, check for gaps, build the invoices. Done from a pile of spreadsheets at the end of every billing cycle.",
      after: "Tool takes the time logs, matches them to client codes and rates, and produces invoices in your format ready to send."
    },
    {
      slug: "engagement-letters",
      industry: "PROFESSIONAL SERVICES · PROPOSALS",
      beforeTime: "60-90 min",
      afterTime: "10 min",
      before: "Open last month's version. Delete the client name. Update the scope, fees, and timeline. Read the whole thing to make sure nothing from the previous client leaked through.",
      after: "Enter the client details and scope. Tool generates a complete draft in your format, ready to review and send."
    },
    {
      slug: "intake",
      industry: "PROFESSIONAL SERVICES · INTAKE",
      beforeTime: "45 min",
      afterTime: "8 min",
      before: "New client fills out a generic form. Someone reads it, follows up for missing info, and reformats it into whatever your team actually uses.",
      after: "Collects the right information upfront in the format your team needs and flags anything missing before it becomes a problem."
    },
    {
      slug: "reporting",
      industry: "OWNER · WEEKLY REPORT",
      beforeTime: "SUN PM",
      afterTime: "FRI 4PM",
      before: "Every Sunday, someone pulls the week's numbers, pastes them into a spreadsheet, formats it, and writes a summary. Forty-eight times a year.",
      after: "Runs automatically. Same format, same structure, hits your inbox Friday at 4pm. You open it Monday instead of building it Sunday night."
    },
    {
      slug: "hr-onboarding",
      industry: "PROFESSIONAL SERVICES · HR",
      beforeTime: "6 hrs/hire",
      afterTime: "20 min",
      before: "New hire gets an onboarding packet on day one. They skim it. Then they ask the same questions for the next six weeks.",
      after: "An assistant that knows your SOPs, your policies, and handles every new-hire question the same way, every time."
    },
  ];

  return (
    <section id="examples">
      <div className="container">
        <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
          <span className="eyebrow" style={{ color: 'var(--muted)' }}>05 · WHAT GETS FIXED</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} className="h2" style={{ maxWidth: 760, marginBottom: 24 }}>
          BEFORE.<br />
          <span className="accent-it" style={{
            fontWeight: 400, fontSize: 'clamp(28px, 4vw, 44px)',
            textTransform: 'none', letterSpacing: '0',
          }}>{'→'} after.</span>
        </motion.h2>

        <motion.p {...fadeUp(0.14)} className="body-muted" style={{ maxWidth: 600, marginBottom: 56 }}>
          Six tasks teams run by hand today. Six tools that handle them tomorrow.
          Click any card to see the full breakdown: what goes in, what comes out,
          and what using it looks like on day one.
        </motion.p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 16,
        }}>
          {examples.map(function(ex, i) { return <ExampleCard key={i} {...ex} delay={i * 0.05} />; })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Examples, ExampleCard });