// Services, How-it-works, Caregivers
function Services() {
  const items = [
    { n:'01', title:['Conversation &', { it:'companionship' }], desc:'A friendly, familiar face for a cup of tea, a card game, or a long afternoon chat. We match personalities, not just shifts.', icon: <Ic.Chat /> },
    { n:'02', title:['Light', { it:'housekeeping' }], desc:'Tidying, laundry, folding, a fresh bed — the quiet kind of help that keeps a home feeling like home.', icon: <Ic.Broom /> },
    { n:'03', title:['Home‑cooked', { it:'meals' }], desc:'Proper meals prepared in your kitchen, the way you like them — plus a little something saved for later.', icon: <Ic.Meal />, featured:true },
    { n:'04', title:['Errands &', { it:'rides' }], desc:'Groceries, prescriptions, appointments. We drive, we carry, we wait in the rain.', icon: <Ic.Cart /> },
    { n:'05', title:['Walks &', { it:'outings' }], desc:'Around the block, to the park, or out for coffee. Movement, fresh air, and a steady arm when it helps.', icon: <Ic.Walk /> },
    { n:'06', title:['Personal care &', { it:'wellness' }], desc:'Bathing, dressing, grooming, medication reminders. Dignified, patient, never rushed.', icon: <Ic.Heart /> },
  ];
  const renderTitle = (parts) => parts.map((p,i) => typeof p === 'string' ? <React.Fragment key={i}>{p} </React.Fragment> : <span key={i} className="italic">{p.it}</span>);
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">What we do</span>
            <h2>Care that looks a lot like <span className="italic">a good neighbour</span> — only trained, reliable, and on time.</h2>
          </div>
          <p className="aside">Every visit is planned around what actually matters that day. You choose the hours, we bring the right person. No minimum contracts, no care you didn't ask for.</p>
        </div>
        <div className="services">
          {items.map((s, i) => (
            <div key={i} className={'service' + (s.featured ? ' featured' : '')}>
              <div className="svc-head">
                <span className="svc-num">— {s.n}</span>
                <span className="svc-glyph">{s.icon}</span>
              </div>
              <div>
                <h3 className="svc-title">{renderTitle(s.title)}</h3>
                <p className="svc-desc">{s.desc}</p>
                <div className="svc-arrow">Learn more <Ic.Arrow /></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;

function HowItWorks() {
  const steps = [
    { n:'01', title:'A warm call', desc:'Tell us about your parent, spouse, or yourself — routines, worries, the things that make them light up. Twenty minutes, no pressure.' },
    { n:'02', title:['In‑home assessment', 'It’s free'], title2:'Free in‑home assessment', desc:'A care coordinator drops by to meet the family and suggest a rhythm of care that fits the budget and the week.' },
    { n:'03', title:'Matched caregiver', desc:'We introduce one or two caregivers we think will click. You choose. Keep the same person week after week.', deep:true },
    { n:'04', title:'Care that adjusts', desc:'Seasons change, needs change. Move hours up or down any week — no fees, no awkward conversations.' },
  ];
  return (
    <section className="section warm" id="how">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">How it works</span>
            <h2>Four quiet steps from <span className="italic">hello</span> to having someone you trust at the door.</h2>
          </div>
          <p className="aside">Most families are matched within 48 hours. Urgent situation? Call the line up top and we'll move today.</p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className={'step' + (s.deep ? ' deep' : '')}>
              <div className="step-dot">{s.n}</div>
              <h3 className="step-title">{s.title2 || s.title}</h3>
              <p className="step-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;

function Caregivers() {
  const team = [
    { name:'Eleanor', role:'Senior caregiver · 11 yrs', bio:'Patient, warm, lifelong baker.', meta:['PSW certified','First aid','Drives'] },
    { name:'Marcus',  role:'Companion care · 6 yrs',  bio:'Former teacher, crossword champion.', meta:['Dementia care','Bilingual FR/EN','Drives'] },
    { name:'Priya',   role:'Wellness specialist · 8 yrs', bio:'Gentle mornings, strong tea.', meta:['RPN','Medication','First aid'] },
    { name:'Joan',    role:'Housekeeping lead · 14 yrs', bio:'The linen closet will know.', meta:['Deep clean','Laundry','Drives'] },
  ];
  return (
    <section className="section deep" id="caregivers">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">The people we send</span>
            <h2>Trusted, reliable, <span className="italic">and the kind of person</span> you'd happily hand a house key to.</h2>
          </div>
          <p className="aside">Every WeCare caregiver is employed by us directly — not a contractor. Hand‑picked for warmth and dependability, trained in gerontology, safe transfers, and the hundred small things that make a day feel good. The same familiar face, week after week.</p>
        </div>
        <div className="caregivers">
          {team.map((p, i) => (
            <div className="cg-card" key={i}>
              <div className="cg-photo" data-label={`portrait · ${p.name.toLowerCase()}`} />
              <div className="cg-body">
                <div className="cg-name">{p.name}</div>
                <div className="cg-role">{p.role}</div>
                <div style={{fontFamily:'Cormorant Garamond, serif', fontStyle:'italic', fontSize:18, color:'rgba(251,246,238,0.78)'}}>
                  "{p.bio}"
                </div>
                <div className="cg-meta">
                  {p.meta.map((m,j) => <span key={j}>· {m}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Caregivers = Caregivers;