// Testimonials, Pricing, FAQ, CallBand, Footer, Tweaks
function Testimonials() {
  return (
    <section className="section" id="stories">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Stories from families</span>
            <h2>Quiet, ordinary days — <span className="italic">and what they mean</span> to the people living them.</h2>
          </div>
          <p className="aside">We asked families to tell us, in their own words, what changed after WeCare started coming round.</p>
        </div>
        <div className="testimonials">
          <div className="testimonial feature">
            <div>
              <div className="quote-mark">"</div>
              <p className="quote-body">
                My mum had stopped cooking. Not because she couldn't — because eating alone felt sad. Eleanor comes Tuesdays and Thursdays now and they make <em>lunch together.</em> Mum lost six pounds of worry and gained a friend.
              </p>
            </div>
            <div className="quote-by">
              <div className="avatar">R</div>
              <div>
                <div className="quote-name">Rachel M.</div>
                <div className="quote-rel">Daughter · North York</div>
              </div>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:24}}>
            <div className="testimonial" style={{minHeight:0, padding:'32px'}}>
              <div className="quote-mark">"</div>
              <p className="quote-body" style={{fontSize:22}}>
                They send the <em>same person</em>. Dad calls her by name now. That, for us, is everything.
              </p>
              <div className="quote-by">
                <div className="avatar">D</div>
                <div>
                  <div className="quote-name">David K.</div>
                  <div className="quote-rel">Son · Etobicoke</div>
                </div>
              </div>
            </div>
            <div className="testimonial" style={{minHeight:0, padding:'32px'}}>
              <div className="quote-mark">"</div>
              <p className="quote-body" style={{fontSize:22}}>
                I wanted help — not a <em>stranger in scrubs.</em> Marcus just feels like a friend who happens to help.
              </p>
              <div className="quote-by">
                <div className="avatar">M</div>
                <div>
                  <div className="quote-name">Margaret W.</div>
                  <div className="quote-rel">Client · Scarborough</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;

function Pricing() {
  const plans = [
    { name:['Home Support', {it:'Worker'}], tag:'Companionship and everyday help — games, movies, conversation, and time well spent.', price:'36', per:'/ hour', feats:[
      ['Companionship & conversation', 1],
      ['Games, movies, activities together', 1],
      ['Meal prep', 1],
      ['Laundry', 1],
      ['Errands', 1],
      ['Walks & outings', 1],
      ['Light housekeeping', 1],
      ['Minimum 3 hours per visit', 1],
    ]},
    { name:['Personal Support', {it:'Worker'}], tag:'Everything a Home Support Worker does — plus certified personal and clinical care.', price:'48', per:'/ hour', feats:[
      ['Certified PSW — all Home Support included', 1],
      ['Bathing, showering, grooming, dressing, toileting', 1],
      ['Transfers bed ⇄ wheelchair, repositioning', 1],
      ['Dementia & mental‑health support', 1],
      ['End‑of‑life & palliative care', 1],
      ['Documents changes in physical or mental condition', 1],
      ['Minimum 3 hours per visit', 1],
    ], featured:true, flag:'Full care' },
  ];
  const renderName = (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 warm" id="pricing">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Simple pricing</span>
            <h2>Pay for the hours you want, <span className="italic">nothing else.</span></h2>
          </div>
          <p className="aside">No onboarding fees, no cancellation penalties, no long contracts. Every plan is month‑to‑month — we handle the paperwork.</p>
        </div>
        <div className="plans">
          {plans.map((p, i) => (
            <div key={i} className={'plan' + (p.featured ? ' featured' : '')}>
              {p.flag && <div className="plan-flag">{p.flag}</div>}
              <span className="eyebrow no-rule">Plan · 0{i+1}</span>
              <h3 className="plan-name">{renderName(p.name)}</h3>
              <p className="plan-tag">{p.tag}</p>
              <div className="plan-price">
                <span className="cur">$</span>
                <span className="amt">{p.price}</span>
                <span className="per">{p.per}</span>
              </div>
              <ul className="plan-list">
                {p.feats.map(([t, on], j) => <li key={j} className={on?'':'off'}>{t}</li>)}
              </ul>
              <a href="#contact" className={'btn ' + (p.featured ? 'btn-primary' : 'btn-ghost')}>
                Choose {p.name[0].trim()} <Ic.Arrow />
              </a>
            </div>
          ))}
        </div>
        <p style={{textAlign:'center', marginTop:40, color:'var(--muted)', fontSize:14}}>
          Both services require a minimum of 3 hours per visit — <a href="tel:6474924630" style={{color:'var(--accent)', borderBottom:'1px solid currentColor'}}>call us</a> to arrange.
        </p>
      </div>
    </section>
  );
}
window.Pricing = Pricing;

function FAQ() {
  const items = [
    { q:'How quickly can care start?', a:"Most families are matched and have their first visit within 48 hours. For urgent situations — a fall, a hospital discharge — we can usually have someone there the same day. Call the number up top and we'll sort it in a single conversation." },
    { q:'Will the same caregiver come every time?', a:"Yes, that is the whole point. We match one primary caregiver (and a backup for illness or vacation), and they come on the same days each week. Continuity is what makes the relationship work — for your loved one, and for us." },
    { q:"What if we don't click with the caregiver you send?", a:"Tell us. No awkwardness, no fee. We'll introduce someone different. About 1 in 7 families re‑match in the first month and end up delighted — the right person matters more than the perfect résumé." },
    { q:'Are caregivers trained for dementia or complex needs?', a:'Every caregiver completes 40 hours of WeCare training including gerontology, safe transfers, dementia‑first communication, and emergency response. For complex medical needs we assign specialists — RPNs, PSWs with dementia accreditation, or palliative‑trained team members.' },
    { q:'What happens in an emergency?', a:'Our caregivers are trained in first aid and emergency response. A 24/7 clinical coordinator is reachable any hour, and families are notified immediately of any incident. We work hand‑in‑hand with your GP, pharmacy, and next of kin.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div style={{textAlign:'center', marginBottom:56}}>
          <span className="eyebrow no-rule">Questions, answered</span>
          <h2 style={{fontFamily:'Cormorant Garamond, serif', fontSize:'clamp(40px, 4.6vw, 64px)', fontWeight:500, lineHeight:1.02, letterSpacing:'-0.02em', marginTop:16, maxWidth:820, margin:'16px auto 0'}}>
            The things families ask <span style={{fontStyle:'italic', color:'var(--accent)', fontWeight:400}}>before</span> they call.
          </h2>
        </div>
        <div className="faq-wrap">
          {items.map((f, i) => (
            <div key={i} className={'faq-item' + (open===i ? ' open' : '')} onClick={() => setOpen(open===i ? -1 : i)}>
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="faq-toggle">+</span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;

function CallBand() {
  return (
    <section className="call-band" id="contact">
      <div className="container inner">
        <span className="eyebrow no-rule">Let's start with a conversation</span>
        <h2>
          It begins with one<br/>
          <span className="italic">simple phone call.</span>
        </h2>
        <p className="call-sub">Talk to a care coordinator (not a chatbot, not a call centre) about what your family actually needs. No obligation, no pressure — just help thinking it through.</p>
        <a href="tel:6474924630" className="phone-big">647‑492‑4630</a>
        <div style={{display:'flex', gap:14, justifyContent:'center', marginTop:16, flexWrap:'wrap'}}>
          <a href="tel:6474924630" className="btn btn-ink">Call us now <Ic.Arrow /></a>
          <a href="#" className="btn btn-ghost">Email us instead</a>
        </div>
      </div>
    </section>
  );
}
window.CallBand = CallBand;

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Logo />
            <p className="footer-tag">Thoughtful homecare for seniors across the Greater Toronto Area. Trusted, reliable caregivers — built on long relationships, never shifts.</p>
            <div style={{marginTop:20, fontSize:13, color:'rgba(251,246,238,0.55)', display:'flex', alignItems:'center', gap:10}}>
              <Ic.Phone s={14} /> 647‑492‑4630
            </div>
          </div>
          <div className="footer-col">
            <h5>Care</h5>
            <ul>
              <li><a href="#services">Companionship</a></li>
              <li><a href="#services">Housekeeping</a></li>
              <li><a href="#services">Meals</a></li>
              <li><a href="#services">Personal care</a></li>
              <li><a href="#services">Dementia specialty</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#">About WeCare</a></li>
              <li><a href="#caregivers">Our caregivers</a></li>
              <li><a href="#stories">Family stories</a></li>
              <li><a href="#">Careers — we're hiring</a></li>
              <li><a href="#">Press</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Help</h5>
            <ul>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#pricing">Pricing & funding</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#">Family portal</a></li>
              <li><a href="#">Caregiver login</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 WeCare Homecare Services Inc. · Serving Toronto, Mississauga, Vaughan, Markham, Oakville.</span>
          <div className="links">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Accessibility</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;

function Tweaks() {
  const defaults = /*EDITMODE-BEGIN*/{
    "accent": "#1F5A55",
    "serif": "'Cormorant Garamond', serif",
    "density": "comfortable"
  }/*EDITMODE-END*/;
  const [state, setState] = useState(defaults);
  const [visible, setVisible] = useState(false);

  const apply = (s) => {
    document.documentElement.style.setProperty('--accent', s.accent);
    const deepMap = { '#1F5A55':'#143F3B', '#7A3E2E':'#5A2C20', '#2B3A55':'#1E2A42', '#6B4E71':'#4A3550', '#1A1A1A':'#000' };
    document.documentElement.style.setProperty('--accent-deep', deepMap[s.accent] || '#143F3B');
    document.documentElement.style.setProperty('font-size', s.density === 'compact' ? '15px' : s.density === 'spacious' ? '18px' : '17px');
  };

  useEffect(() => { apply(state); }, [state]);

  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type: '__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const set = (k, v) => {
    const next = {...state, [k]: v};
    setState(next);
    window.parent.postMessage({type: '__edit_mode_set_keys', edits: {[k]: v}}, '*');
  };

  const swatches = [
    { c:'#1F5A55', name:'Teal (default)' },
    { c:'#7A3E2E', name:'Terracotta' },
    { c:'#2B3A55', name:'Indigo' },
    { c:'#6B4E71', name:'Plum' },
    { c:'#1A1A1A', name:'Ink' },
  ];

  return (
    <div className={'tweaks-panel' + (visible ? ' open' : '')}>
      <h4>Tweaks <span style={{fontSize:11, opacity:0.5, letterSpacing:'0.12em'}}>WECARE</span></h4>
      <div className="tweak-row">
        <div className="tweak-label">Accent</div>
        <div className="swatches">
          {swatches.map(s => (
            <div key={s.c}
              className={'swatch' + (state.accent === s.c ? ' on' : '')}
              style={{background: s.c}}
              title={s.name}
              onClick={() => set('accent', s.c)}
            />
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Density</div>
        <div style={{display:'flex', gap:6}}>
          {['compact','comfortable','spacious'].map(d => (
            <button key={d} onClick={() => set('density', d)}
              style={{
                padding:'7px 10px', borderRadius:6, fontSize:11,
                background: state.density === d ? 'var(--cream)' : 'transparent',
                color: state.density === d ? 'var(--ink)' : 'var(--cream)',
                border:'1px solid rgba(251,246,238,0.2)',
                textTransform:'capitalize'
              }}>{d}</button>
          ))}
        </div>
      </div>
      <p style={{fontSize:11, color:'rgba(251,246,238,0.5)', marginTop:12, lineHeight:1.4}}>
        Changes apply live. Toggle the toolbar switch to close.
      </p>
    </div>
  );
}
window.Tweaks = Tweaks;