// Page: Services index — 5 alternating editorial cards

const svcPhotos = [
  'assets/photos/painting-mission-vines.png',   // Lead Response & Follow-Up
  'assets/photos/painting-beach-dunes.png',     // Missed Call Text-Back
  'assets/photos/painting-cliffs-sunset.png',   // Reviews & Reputation
  'assets/photos/painting-sea-stack.png',       // Internal Reporting
  'assets/photos/painting-vineyard-rows.png',   // Document Processing
];

const svcData = [
  {
    slug: 'lead-response-followup',
    name: 'Lead Response & Follow-Up',
    desc: 'Reply in under a minute. Stay until they buy.',
    fixes: [
      'Leads going to your competitor because you were 16 hours late on the first reply',
      'Deals dying because touch number five never happened',
      'Carrying the mental weight of every open conversation in your head',
    ],
  },
  {
    slug: 'missed-call-textback',
    name: 'Missed Call Text-Back',
    desc: 'Every missed call becomes a 30-second text. The lead never goes cold.',
    fixes: [
      'Calls going to voicemail while you\u2019re on a ladder or in a job',
      '85% of unanswered callers who never call back \u2014 they call your competitor',
      'No idea how many calls you missed last week or what they wanted',
    ],
  },
  {
    slug: 'reviews-reputation',
    name: 'Reviews & Reputation',
    desc: 'More 5-star reviews. Faster responses. Without ever opening Google.',
    fixes: [
      'Happy customers who said they\u2019d leave a review and then forgot',
      'A negative review sitting on your profile for three weeks unanswered',
      'Watching the guy down the road climb past you in stars while you\u2019re busy doing the work',
    ],
  },
  {
    slug: 'internal-reporting',
    name: 'Internal Reporting',
    desc: 'One daily summary instead of opening five tools every morning.',
    fixes: [
      'The hour lost every morning logging into dashboards and pulling numbers by hand',
      'Deals stuck in your pipeline for three weeks before anyone flags them',
      'Revenue dips that don\u2019t surface until they\u2019re already a problem',
    ],
  },
  {
    slug: 'document-processing',
    name: 'Document Processing',
    desc: 'Invoices that send themselves out and read themselves in. Both ends of the loop.',
    fixes: [
      'Sending an invoice means stopping the job, opening QuickBooks, and burning twenty minutes',
      '60+ hrs a month buried in vendor invoice data entry',
      'The kitchen-table admin at ten p.m. after the kids are in bed',
    ],
  },
];

function Services() {
  return <>
    <section style={{background:'var(--bg-cream)',padding:'140px var(--container-pad) 80px'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}>
        <Eyebrow>Services</Eyebrow>
        <h1 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(44px,6vw,74px)',lineHeight:1.04,letterSpacing:'-0.02em',color:'var(--text-charcoal)',margin:'20px 0 28px',maxWidth:980}}>
          5 systems for the work that&rsquo;s eating your week.
        </h1>
        <p style={{fontFamily:'var(--font-body)',fontSize:21,lineHeight:1.55,color:'var(--text-charcoal)',opacity:0.85,maxWidth:700,margin:0}}>
          Each one is a fixed-scope build with a documented hand-off. You see the math before you commit. Nothing recurring you didn&rsquo;t sign up for.
        </p>
      </div>
    </section>

    <section style={{background:'var(--bg-cream)',padding:'40px var(--container-pad) 120px'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'flex',flexDirection:'column',gap:96}}>
        {svcData.map((s, i) => {
          const reverse = i % 2 === 1;
          return (
            <Reveal key={s.slug} y={32}>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'center'}} className="svc-row">
              <div style={{aspectRatio:'5/4',borderRadius:16,
                background:`url(${svcPhotos[i]}) center / cover no-repeat`,
                order: reverse ? 2 : 1,
                boxShadow:'var(--shadow-photo)'}}/>
              <div style={{order: reverse ? 1 : 2, display:'flex', flexDirection:'column', gap:18}}>
                <div style={{fontFamily:'var(--font-body)',fontSize:12,color:'var(--accent-clay)',fontWeight:500,letterSpacing:'0.14em',textTransform:'uppercase'}}>
                  {String(i+1).padStart(2,'0')} &nbsp;&mdash;&nbsp; {s.name}
                </div>
                <h3 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:42,lineHeight:1.1,letterSpacing:'-0.02em',color:'var(--text-charcoal)',margin:0,maxWidth:500}}>
                  {s.desc}
                </h3>
                <ul style={{margin:'8px 0 0',padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:14}}>
                  {s.fixes.map(f =>
                    <li key={f} style={{display:'flex',gap:12,fontFamily:'var(--font-body)',fontSize:16.5,lineHeight:1.5,color:'var(--text-muted)',maxWidth:480}}>
                      <i data-lucide="check" style={{width:18,height:18,color:'var(--accent-olive)',flexShrink:0,marginTop:4}}></i>
                      <span>{f}</span>
                    </li>
                  )}
                </ul>
                <div style={{marginTop:14}}>
                  <Button to={`/services/${s.slug}`} variant="link">Read more &rarr;</Button>
                </div>
              </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>

    <ClosingBand/>
  </>;
}

function ClosingBand() {
  return (
    <section style={{background:'var(--bg-forest)',padding:'120px var(--container-pad)',textAlign:'center'}}>
      <h3 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:'clamp(30px,3.8vw,44px)',lineHeight:1.2,letterSpacing:'-0.02em',color:'var(--text-cream)',margin:'0 auto 36px',maxWidth:720}}>
        Not sure which one fits first?
      </h3>
      <Button to="/book" variant="cream" icon="calendar">Book a 45-min call</Button>
    </section>
  );
}

Object.assign(window, { Services, ClosingBand });