const CASES = [
  {
    client: 'Marrickville Dental',
    sector: 'Family practice · 2 dentists · Sydney',
    tag: 'Website + local SEO',
    scope: 'Rebuilt the site, cleaned up their Google Business Profile, wrote 4 suburb pages.',
    time: '5 weeks',
    price: '$3,400 + $690/mo',
    pullquote: 'Honestly I was sceptical about paying for SEO. Six months in, the phone rings more, and I can actually see where the bookings come from. Sam explains things without making me feel silly.',
    author: 'Dr Priya R., Principal',
    metrics: [
      ['~18', 'new bookings/mo from Google'],
      ['6 mo', 'to rank for "dentist marrickville"'],
      ['$40', 'cost per new patient'],
    ],
  },
  {
    client: 'Harbour Athletic',
    sector: 'Independent running shop · 1 store + online',
    tag: 'Meta Ads + email',
    scope: 'Took over Meta ads, rewrote the welcome email flow, filmed 12 short product clips on an iPhone.',
    time: 'Ongoing · 14 months',
    price: '$490/mo + ad spend',
    pullquote: 'Our previous agency wanted a $6k retainer and kept showing us "engagement". These two just show us the sales. Ad spend\'s gone up because it\'s working.',
    author: 'Jake M., owner',
    metrics: [
      ['2.9x', 'blended ROAS (was 1.6x)'],
      ['$38', 'avg cost per purchase'],
      ['41%', 'of revenue from email'],
    ],
  },
  {
    client: 'Foundry Bookkeeping',
    sector: 'Bookkeeping · 4 staff · Parramatta',
    tag: 'Small internal tool',
    scope: 'Built a simple client-onboarding portal. Replaced a shared spreadsheet and three email templates.',
    time: '3 weeks',
    price: '$4,200 one-off',
    pullquote: 'We asked for something fancier. They talked us out of it and built a smaller thing that actually got used. Wish more people did that.',
    author: 'Leanne C., partner',
    metrics: [
      ['~3 h/wk', 'saved per staff member'],
      ['1', 'spreadsheet retired'],
      ['0', 'support tickets since launch'],
    ],
  },
  {
    client: 'Northbeach Autos',
    sector: 'Mechanic · family-owned · 12 staff',
    tag: 'Google Ads + landing page',
    scope: 'Paused their broken campaign, rebuilt it around 3 services, wrote a landing page that loads on 4G.',
    time: '2 weeks to launch',
    price: '$490/mo + ad spend',
    pullquote: 'We were spending $2,400 a month on Google and getting tyre-kickers. Avani cut it to $1,600, the phone hasn\'t stopped. I\'m not going back.',
    author: 'Tom N., GM',
    metrics: [
      ['$52', 'cost per booked job (was $140)'],
      ['~22/wk', 'qualified phone calls'],
      ['33%', 'less ad spend, more leads'],
    ],
  },
];

const Cases = () => {
  const [i, setI] = useState(0);
  const ref = useReveal();
  const cur = CASES[i];

  return (
    <section id="work" className="section" style={{ position:'relative', background: 'var(--section-alt)' }}>
      <div className="container">
        <div ref={ref} className="reveal">
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 40, flexWrap:'wrap', gap: 20 }}>
            <div>
              <span className="eyebrow">Four clients, written up honestly</span>
              <h2 className="h-xl" style={{ marginTop: 20, maxWidth: 820 }}>
                Case studies with <span className="serif-i" style={{color:'var(--accent)'}}>actual prices, actual timelines,</span> and numbers we didn't round up.
              </h2>
            </div>
            <div style={{ display:'flex', gap: 8 }}>
              <button className="btn btn-ghost" onClick={() => setI((i - 1 + CASES.length) % CASES.length)} style={{ padding: '12px 14px' }}>
                <span style={{ transform: 'scaleX(-1)', display: 'inline-block' }}><Icon name="arrow" size={14}/></span>
              </button>
              <button className="btn btn-ghost" onClick={() => setI((i + 1) % CASES.length)} style={{ padding: '12px 14px' }}>
                <Icon name="arrow" size={14}/>
              </button>
            </div>
          </div>

          <div className="glass split-even" style={{
            gap: 0,
            overflow:'hidden',
          }}>
            {/* left — the facts */}
            <div style={{
              padding: 'clamp(28px, 4vw, 40px)',
              borderRight: '1px solid var(--line)',
              display: 'flex', flexDirection:'column', gap: 24,
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing:'.14em', color: 'var(--fg-3)', textTransform:'uppercase' }}>
                  {cur.tag}
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
                  {String(i+1).padStart(2,'0')} / 0{CASES.length}
                </span>
              </div>

              <div>
                <div style={{ fontSize: 'clamp(26px, 4vw, 34px)', fontWeight: 500, letterSpacing:'-0.02em', lineHeight: 1.1 }}>{cur.client}</div>
                <div style={{ fontSize: 14, color: 'var(--fg-3)', marginTop: 6 }}>{cur.sector}</div>
              </div>

              <div style={{ fontSize: 15, lineHeight: 1.55, color:'var(--fg-2)' }}>
                {cur.scope}
              </div>

              <div style={{
                display:'grid', gridTemplateColumns:'auto 1fr', gap: '10px 20px',
                paddingTop: 20, borderTop: '1px solid var(--line)',
                fontSize: 13,
              }}>
                <span className="mono" style={{color:'var(--fg-3)', letterSpacing:'.06em'}}>time</span>
                <span>{cur.time}</span>
                <span className="mono" style={{color:'var(--fg-3)', letterSpacing:'.06em'}}>cost</span>
                <span>{cur.price}</span>
              </div>

              <div style={{
                paddingTop: 20, borderTop: '1px solid var(--line)',
                display: 'flex', flexDirection:'column', gap: 14,
              }}>
                {cur.metrics.map(([v, l]) => (
                  <div key={l} style={{ display:'flex', alignItems:'baseline', gap: 14 }}>
                    <div style={{
                      fontFamily:'var(--serif)',
                      fontSize: 30, fontWeight: 400, letterSpacing:'-0.02em',
                      minWidth: 110, color:'var(--fg)',
                    }}>{v}</div>
                    <div style={{ fontSize: 13, color:'var(--fg-2)', lineHeight: 1.4 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* right — quote */}
            <div style={{ padding: 'clamp(32px, 5vw, 48px) clamp(28px, 4.5vw, 44px)', display:'flex', flexDirection:'column', gap: 28, justifyContent:'space-between' }}>
              <div>
                <div style={{
                  fontFamily:'var(--serif)',
                  fontSize: 60, lineHeight: 0.6, color:'var(--accent)',
                  marginBottom: 8,
                }}>“</div>
                <blockquote style={{
                  fontFamily: 'var(--serif)',
                  fontSize: 'clamp(22px, 2.1vw, 30px)',
                  lineHeight: 1.35,
                  letterSpacing: '-0.01em',
                  margin: 0,
                  color: 'var(--fg)',
                }}>
                  {cur.pullquote}
                </blockquote>
                <div style={{ fontSize: 13, color:'var(--fg-3)', marginTop: 20, fontStyle:'italic' }}>— {cur.author}</div>
              </div>

              <div style={{
                fontSize: 12, color:'var(--fg-3)', lineHeight: 1.55,
                paddingTop: 20, borderTop: '1px solid var(--line)',
                fontFamily:'var(--serif)', fontStyle:'italic',
              }}>
                Quotes shortened for length; full ones (and our reply times, the bits we got wrong, etc.) available on request.
              </div>
            </div>
          </div>

          <div style={{ display:'flex', justifyContent:'center', gap: 6, marginTop: 24 }}>
            {CASES.map((_, idx) => (
              <button key={idx} onClick={() => setI(idx)} style={{
                width: idx === i ? 32 : 8, height: 8, borderRadius: 4,
                background: idx === i ? 'var(--accent)' : 'var(--line-2)',
                transition: 'all .4s', padding: 0, border: 'none', cursor: 'pointer',
              }}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Cases = Cases;