// About, Assessment Center, Trust & Safety, Contact pages

// ===== About Us =====
const AboutPage = ({ go }) => {
  return (
    <div className="page">
      {/* Hero */}
      <section style={{background:'linear-gradient(180deg, var(--t-bg), var(--t-paper))', padding:'64px 0 48px', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px', textAlign:'center'}}>
          <div className="eyebrow" style={{marginBottom:10}}>About HelperMatch</div>
          <h1 className="display" style={{fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', marginBottom:18, maxWidth:900, margin:'0 auto 18px'}}>
            A transparent way to hire a helper<br/>for your family
          </h1>
          <p style={{fontSize:19, lineHeight:1.6, color:'var(--t-ink-muted)', maxWidth:680, margin:'0 auto'}}>
            Most families today hire through agencies they've never met, based on paper resumes. We think employers and helpers both deserve better — a chance to meet, talk, and decide together.
          </p>
        </div>
      </section>

      {/* Mission */}
      <section style={{padding:'80px 0'}}>
        <div className="container" style={{padding:'0 32px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:56, alignItems:'center'}}>
          <div>
            <div className="eyebrow" style={{marginBottom:10}}>Our mission</div>
            <h2 className="display" style={{fontSize:36, marginBottom:20, letterSpacing:'-0.02em'}}>Bring trust and dignity to domestic work</h2>
            <p style={{fontSize:16, lineHeight:1.75, color:'var(--t-ink-soft)', marginBottom:14}}>
              In Taiwan, Hong Kong, and Singapore alone, over 1.2 million foreign domestic helpers live and work in family homes. The hiring process has stayed largely unchanged for 30 years — paper resumes, opaque agency fees, and no direct conversation between the two people who will actually share a household.
            </p>
            <p style={{fontSize:16, lineHeight:1.75, color:'var(--t-ink-soft)'}}>
              HelperMatch is our attempt to modernise this: standardised assessments, verified profiles, and direct communication — so families know who they're welcoming into their home, and helpers know the families they're joining.
            </p>
          </div>
          <div style={{height:420, borderRadius:20, overflow:'hidden', background:`url(https://images.unsplash.com/photo-1609220136736-443140cffec6?w=1200&q=80) center/cover`}}/>
        </div>
      </section>

      {/* Numbers */}
      <section style={{padding:'60px 0', background:'var(--t-paper)', borderTop:'1px solid var(--t-line)', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20}}>
          {[
            {n:'12,400+', l:'Verified helper profiles'},
            {n:'3,200+', l:'Families matched since 2023'},
            {n:'96%', l:'Contracts renewed at year 1'},
            {n:'4.8/5', l:'Average family rating'},
          ].map((s, i) => (
            <div key={i} style={{textAlign:'center'}}>
              <div className="display" style={{fontSize:40, letterSpacing:'-0.02em', color:'var(--t-accent)', marginBottom:6}}>{s.n}</div>
              <div style={{fontSize:13, color:'var(--t-ink-muted)', fontWeight:500}}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Values */}
      <section style={{padding:'80px 0'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{textAlign:'center', marginBottom:48}}>
            <div className="eyebrow" style={{marginBottom:10}}>What we believe</div>
            <h2 className="display" style={{fontSize:36, letterSpacing:'-0.02em'}}>Four principles that guide every decision</h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:24}}>
            {[
              { num:'01', h:'Transparency over convenience', p:'We show the same information to employers and helpers. No hidden fees, no placement bonuses, no matching algorithms that favour whoever pays us more.' },
              { num:'02', h:'Direct conversation', p:'The most important relationship is between the family and the helper — not the platform. We make it easy for them to talk before committing to anything.' },
              { num:'03', h:'Verified, not guessed', p:'Every profile is identity-checked, every assessment video is recorded at our centres, and every claim about skills or experience is something we have verified ourselves.' },
              { num:'04', h:'Helpers are professionals', p:'We treat domestic work as skilled work. Our helpers set their own pay expectations, review their own employers, and choose which families to work with.' },
            ].map((v, i) => (
              <div key={i} style={{padding:32, background:'var(--t-paper)', border:'1px solid var(--t-line)', borderRadius:16}}>
                <div style={{fontSize:13, color:'var(--t-accent)', fontWeight:700, letterSpacing:'0.04em', marginBottom:10}}>{v.num}</div>
                <h3 className="display" style={{fontSize:22, marginBottom:10, letterSpacing:'-0.01em'}}>{v.h}</h3>
                <p style={{fontSize:15, lineHeight:1.7, color:'var(--t-ink-soft)'}}>{v.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'80px 0 100px'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{padding:48, background:'var(--trust-bg)', border:'1px solid var(--trust-soft)', borderRadius:20, textAlign:'center'}}>
            <h2 className="display" style={{fontSize:30, letterSpacing:'-0.02em', marginBottom:10}}>Want to meet your next helper?</h2>
            <p style={{fontSize:16, color:'var(--t-ink-soft)', maxWidth:540, margin:'0 auto 24px', lineHeight:1.6}}>
              Browse verified profiles, watch real assessment videos, and start a conversation — no middleman.
            </p>
            <div style={{display:'flex', gap:10, justifyContent:'center', flexWrap:'wrap'}}>
              <button className="btn btn-trust btn-lg" onClick={()=>go('candidates')}>Browse helpers</button>
              <button className="btn btn-outline btn-lg" onClick={()=>go('contact')}>Contact us</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// ===== Assessment Center =====
const AssessmentPage = ({ go }) => {
  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'64px 0', background:'linear-gradient(180deg, var(--t-paper), var(--t-bg))', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <div className="eyebrow" style={{marginBottom:10}}>Assessment Center</div>
            <h1 className="display" style={{fontSize:48, lineHeight:1.1, letterSpacing:'-0.025em', marginBottom:16}}>
              Skills you can actually see, not just claims on a resume
            </h1>
            <p style={{fontSize:17, lineHeight:1.6, color:'var(--t-ink-muted)', marginBottom:20}}>
              Every helper on HelperMatch completes a two-hour hands-on assessment at our Surabaya center. Cooking. Caregiving. Cleaning. Language. All recorded, all reviewed by our team.
            </p>
            <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
              <button className="btn btn-primary" onClick={()=>go('candidates')}>See assessed helpers</button>
              <button className="btn btn-outline" onClick={()=>go('guides')}>Read the methodology</button>
            </div>
          </div>
          <div style={{aspectRatio:'4/3', borderRadius:20, overflow:'hidden', background:`linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.35)), url(https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1400&q=80) center/cover`, position:'relative', display:'grid', placeItems:'center'}}>
            <div style={{width:80, height:80, borderRadius:99, background:'rgba(255,255,255,0.92)', display:'grid', placeItems:'center', color:'var(--t-accent)', fontSize:28}}>
              <Icon name="play" size={26}/>
            </div>
            <div style={{position:'absolute', bottom:18, left:18, right:18, color:'white'}}>
              <div style={{fontSize:12, opacity:0.85, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase'}}>Facility tour · 2:14</div>
              <div style={{fontSize:17, fontWeight:600, marginTop:4}}>Inside the Surabaya Assessment Center</div>
            </div>
          </div>
        </div>
      </section>

      {/* Numbers bar */}
      <section style={{padding:'32px 0', background:'var(--t-ink)', color:'white'}}>
        <div className="container" style={{padding:'0 32px', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20}}>
          {[
            {n:'2hrs', l:'Average assessment time'},
            {n:'18', l:'Skills tested'},
            {n:'3', l:'Reviewers per video'},
            {n:'8,400+', l:'Helpers assessed'},
          ].map((s, i) => (
            <div key={i} style={{textAlign:'center'}}>
              <div className="display" style={{fontSize:32, marginBottom:2, color:'var(--mint)'}}>{s.n}</div>
              <div style={{fontSize:12, opacity:0.75}}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Process */}
      <section style={{padding:'80px 0'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{textAlign:'center', marginBottom:48}}>
            <div className="eyebrow" style={{marginBottom:10}}>The process</div>
            <h2 className="display" style={{fontSize:36, letterSpacing:'-0.02em'}}>Four stations, one focused day</h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {[
              {step:'01', title:'Cooking', time:'35 min', desc:'Prepare a 3-dish meal from a set grocery list. We score knife skills, multitasking, food safety, cleanup, and taste.'},
              {step:'02', title:'Caregiving', time:'30 min', desc:'Simulated scenarios with elder-care and childcare actors. Patience, protocol adherence, and gentleness are all observed.'},
              {step:'03', title:'Cleaning', time:'25 min', desc:'Thoroughness and speed on a standard 3-room module. Includes laundry, ironing, and bathroom sanitisation.'},
              {step:'04', title:'Language', time:'20 min', desc:'Conversational English and Mandarin — comprehension, pronunciation, and the ability to explain simple instructions back to us.'},
            ].map((s, i) => (
              <div key={i} className="card-flat" style={{padding:24}}>
                <div style={{fontSize:11, color:'var(--t-accent)', fontWeight:700, letterSpacing:'0.08em', marginBottom:10}}>{s.step}</div>
                <h3 style={{fontSize:20, fontWeight:700, letterSpacing:'-0.01em', marginBottom:4}}>{s.title}</h3>
                <div style={{fontSize:12, color:'var(--t-ink-muted)', marginBottom:14}}>{s.time}</div>
                <p style={{fontSize:14, lineHeight:1.6, color:'var(--t-ink-soft)'}}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tier system */}
      <section style={{padding:'80px 0', background:'var(--t-paper)', borderTop:'1px solid var(--t-line)', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{marginBottom:40, maxWidth:700}}>
            <div className="eyebrow" style={{marginBottom:10}}>Scoring</div>
            <h2 className="display" style={{fontSize:32, letterSpacing:'-0.02em', marginBottom:14}}>Four tiers — measured, not guessed</h2>
            <p style={{fontSize:16, color:'var(--t-ink-muted)', lineHeight:1.6}}>
              Each helper receives a composite score across the four stations. Tiers are a floor on demonstrated skill, not a ceiling on character. Watch the full video before deciding.
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
            {[
              {tier:'A', pct:'18%', label:'Strong across 3+ stations. Ready for senior or complex placements.', color:'#48B8A0'},
              {tier:'B', pct:'34%', label:'Reliable in 2–3 stations. Solid default for most families.', color:'#7CBF8F'},
              {tier:'C', pct:'31%', label:'Competent fundamentals. Excels in 1 specialised skill.', color:'#D4A554'},
              {tier:'D', pct:'17%', label:'Just completed training. Best suited to simpler households.', color:'#C9845B'},
            ].map((t, i) => (
              <div key={i} className="card" style={{padding:24, borderTop:`4px solid ${t.color}`}}>
                <div className="display" style={{fontSize:44, color:t.color, letterSpacing:'-0.02em', marginBottom:4}}>{t.tier}</div>
                <div style={{fontSize:12, color:'var(--t-ink-muted)', fontWeight:600, marginBottom:14}}>{t.pct} of assessed helpers</div>
                <p style={{fontSize:14, lineHeight:1.6, color:'var(--t-ink-soft)'}}>{t.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Facility */}
      <section style={{padding:'80px 0'}}>
        <div className="container" style={{padding:'0 32px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:56, alignItems:'center'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            {[
              'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&q=80',
              'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&q=80',
              'https://images.unsplash.com/photo-1556911220-e15b29be8c8f?w=800&q=80',
              'https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=800&q=80',
            ].map((src, i) => (
              <div key={i} style={{aspectRatio:'4/3', borderRadius:14, backgroundImage:`url(${src})`, backgroundSize:'cover', backgroundPosition:'center', gridColumn: i === 0 ? '1 / 3' : 'auto'}}/>
            ))}
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom:10}}>The Surabaya facility</div>
            <h2 className="display" style={{fontSize:32, letterSpacing:'-0.02em', marginBottom:18}}>A real kitchen, a real nursery, a real living room</h2>
            <p style={{fontSize:16, lineHeight:1.7, color:'var(--t-ink-soft)', marginBottom:14}}>
              Our assessment center isn't a classroom. It's a purpose-built house in Surabaya, Indonesia — equipped like the homes our helpers will actually work in. Gas stove, rice cooker, ironing board, crib, elder-care bed, floor mop, pressure cooker.
            </p>
            <p style={{fontSize:16, lineHeight:1.7, color:'var(--t-ink-soft)', marginBottom:24}}>
              Every station is filmed from three angles. Every assessment is reviewed by a three-person panel before scores are finalised.
            </p>
            <div style={{display:'flex', gap:16, flexWrap:'wrap'}}>
              {['Two assessment suites','Child & elder-care actors','3-camera recording setup','Open for scheduled tours'].map(f => (
                <div key={f} style={{display:'flex', alignItems:'center', gap:8, fontSize:13, color:'var(--t-ink-soft)'}}>
                  <Icon name="check" size={14} style={{color:'var(--trust)'}}/> {f}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{padding:'60px 0 100px', background:'var(--t-paper)', borderTop:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px', maxWidth:780}}>
          <h2 className="display" style={{fontSize:28, letterSpacing:'-0.02em', marginBottom:28, textAlign:'center'}}>Common questions</h2>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {[
              {q:'Is the assessment mandatory?', a:'Yes — every profile on HelperMatch is assessed before going live. Self-reported skills are clearly labelled separately and do not contribute to the tier.'},
              {q:'How long is an assessment score valid?', a:'24 months. Helpers can request a re-assessment if they\'ve completed significant new training, or if they\'re returning to work after a break longer than 12 months.'},
              {q:'Can I see my helper\'s full assessment video?', a:'Yes — with a Standard or Premium plan, you can watch the full 2-hour recording from every station, including unedited footage.'},
              {q:'Who runs the assessments?', a:'A panel of trained evaluators. Our lead assessor, Aisyah Rahim, has 14 years of home-care training experience and runs the Surabaya center.'},
            ].map((f, i) => (
              <details key={i} className="card-flat" style={{padding:'18px 22px', cursor:'pointer'}}>
                <summary style={{fontSize:15, fontWeight:600, listStyle:'none'}}>{f.q}</summary>
                <p style={{fontSize:14, lineHeight:1.6, color:'var(--t-ink-muted)', marginTop:12}}>{f.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ===== Trust & Safety =====
const TrustPage = ({ go }) => {
  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'72px 0 48px', background:'var(--trust-bg)', borderBottom:'1px solid var(--trust-soft)'}}>
        <div className="container" style={{padding:'0 32px', textAlign:'center', maxWidth:760, margin:'0 auto'}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'6px 14px', background:'white', border:'1px solid var(--trust-soft)', color:'var(--trust-ink)', borderRadius:99, fontSize:12, fontWeight:700, letterSpacing:'0.06em', marginBottom:16}}>
            <Icon name="shield" size={12}/> TRUST & SAFETY
          </div>
          <h1 className="display" style={{fontSize:48, lineHeight:1.1, letterSpacing:'-0.025em', marginBottom:16}}>
            How we keep families and helpers safe
          </h1>
          <p style={{fontSize:17, lineHeight:1.6, color:'var(--t-ink-soft)'}}>
            Hiring someone to live and work in your home — or going to live in a stranger's home — is a leap of trust. We take this seriously. Here's exactly what we do.
          </p>
        </div>
      </section>

      {/* Pillars */}
      <section style={{padding:'80px 0'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20, marginBottom:64}}>
            {[
              { icon:'shield', title:'Verified identities', desc:'Every profile — both families and helpers — is checked against a government-issued ID. Passports, national IDs, and employer registration for Taiwan, HK, and Singapore.' },
              { icon:'verified', title:'Assessed skills', desc:'Helpers are evaluated in person at our Surabaya center. No fake certificates, no exaggerated claims — just what we saw in a 2-hour hands-on assessment.' },
              { icon:'chat', title:'Protected conversations', desc:'All messaging stays on-platform and is logged. If something goes wrong — harassment, scams, pressure — we have the record and can step in fast.' },
            ].map((p, i) => (
              <div key={i} className="card" style={{padding:28}}>
                <div style={{width:44, height:44, borderRadius:10, background:'var(--trust-bg)', color:'var(--trust)', display:'grid', placeItems:'center', marginBottom:18}}>
                  <Icon name={p.icon} size={20}/>
                </div>
                <h3 className="display" style={{fontSize:20, letterSpacing:'-0.01em', marginBottom:10}}>{p.title}</h3>
                <p style={{fontSize:14, lineHeight:1.65, color:'var(--t-ink-soft)'}}>{p.desc}</p>
              </div>
            ))}
          </div>

          {/* Verification checklist */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, alignItems:'start'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:10}}>For employers</div>
              <h2 className="display" style={{fontSize:28, letterSpacing:'-0.02em', marginBottom:18}}>What we check about families</h2>
              <div style={{display:'flex', flexDirection:'column', gap:12}}>
                {[
                  'Government-issued ID verification',
                  'Phone number (SMS OTP)',
                  'Email address confirmation',
                  'Employment or household registration',
                  'Compliance check against public sanctions lists',
                  'Manual review for first-time employers',
                ].map((c, i) => (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 0', borderBottom: i < 5 ? '1px solid var(--t-line)' : 'none'}}>
                    <span style={{width:24, height:24, borderRadius:99, background:'var(--trust-bg)', color:'var(--trust)', display:'grid', placeItems:'center', flexShrink:0}}><Icon name="check" size={12}/></span>
                    <span style={{fontSize:14, fontWeight:500}}>{c}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom:10}}>For helpers</div>
              <h2 className="display" style={{fontSize:28, letterSpacing:'-0.02em', marginBottom:18}}>What we check about helpers</h2>
              <div style={{display:'flex', flexDirection:'column', gap:12}}>
                {[
                  'Passport and national ID verification',
                  'Police clearance from home country',
                  'Medical fitness certificate',
                  'Reference letters from previous employers',
                  'In-person 2-hour skills assessment',
                  'Face-match verification against ID photo',
                ].map((c, i) => (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 0', borderBottom: i < 5 ? '1px solid var(--t-line)' : 'none'}}>
                    <span style={{width:24, height:24, borderRadius:99, background:'var(--trust-bg)', color:'var(--trust)', display:'grid', placeItems:'center', flexShrink:0}}><Icon name="check" size={12}/></span>
                    <span style={{fontSize:14, fontWeight:500}}>{c}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Safety tips */}
      <section style={{padding:'60px 0', background:'var(--t-paper)', borderTop:'1px solid var(--t-line)', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{textAlign:'center', marginBottom:40}}>
            <div className="eyebrow" style={{marginBottom:10}}>Stay safe</div>
            <h2 className="display" style={{fontSize:30, letterSpacing:'-0.02em'}}>Five rules we tell every user</h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:18}}>
            {[
              {n:'1', t:'Never pay off-platform', p:'Legitimate agencies and helpers never ask for bank transfers outside HelperMatch. If someone does, report them and we will investigate.'},
              {n:'2', t:'Keep chats on-platform', p:'We can only help resolve disputes if we have the conversation history. Keep messaging inside HelperMatch until contracts are signed.'},
              {n:'3', t:'Verify before visiting', p:'Before any in-person meeting, confirm the other party\'s verified badge and job details. Meet in a public or official setting first.'},
              {n:'4', t:'Read the contract twice', p:'Always review the signed contract in both languages. Any verbal promise not in writing does not count under MOL, MOM, or ImmD.'},
              {n:'5', t:'Report anything off', p:'Pressure, scams, unfair conditions, or requests for documents we would not ask for — report it through the ⚑ flag icon on any page.'},
            ].map((r, i) => (
              <div key={i} style={{padding:24, background:'white', border:'1px solid var(--t-line)', borderRadius:14}}>
                <div style={{display:'inline-flex', width:30, height:30, borderRadius:99, background:'var(--coral-bg)', color:'var(--coral-dark)', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:14, marginBottom:12}}>{r.n}</div>
                <h3 style={{fontSize:16, fontWeight:700, letterSpacing:'-0.01em', marginBottom:6}}>{r.t}</h3>
                <p style={{fontSize:13, lineHeight:1.6, color:'var(--t-ink-soft)'}}>{r.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Report */}
      <section style={{padding:'80px 0 100px'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{padding:48, background:'var(--t-ink)', color:'white', borderRadius:20, display:'grid', gridTemplateColumns:'1fr auto', gap:32, alignItems:'center'}}>
            <div>
              <div style={{fontSize:12, fontWeight:700, letterSpacing:'0.08em', opacity:0.7, marginBottom:8}}>REPORT A CONCERN</div>
              <h2 className="display" style={{fontSize:30, letterSpacing:'-0.02em', marginBottom:10}}>See something that feels wrong? Tell us.</h2>
              <p style={{fontSize:15, lineHeight:1.6, opacity:0.85, maxWidth:560}}>
                Our trust team answers every report within 24 hours. Reports are confidential — we will never share your name with the person you reported.
              </p>
            </div>
            <button className="btn btn-mint btn-lg" onClick={()=>go('contact')}>Report now</button>
          </div>
        </div>
      </section>
    </div>
  );
};

// ===== Contact =====
const ContactPage = ({ go }) => {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name:'', email:'', topic:'general', market:'Taiwan', message:'' });

  const topics = [
    { id:'general', label:'General inquiry' },
    { id:'employer', label:'I want to hire a helper' },
    { id:'helper', label:'I am a helper looking for work' },
    { id:'agency', label:'Partnership / agency' },
    { id:'press', label:'Press & media' },
    { id:'trust', label:'Report a trust & safety concern' },
  ];

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="page">
      {/* Hero — same structure as About */}
      <section style={{background:'linear-gradient(180deg, var(--t-bg), var(--t-paper))', padding:'64px 0 40px', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px', textAlign:'center', maxWidth:720, margin:'0 auto'}}>
          <div className="eyebrow" style={{marginBottom:10}}>Contact</div>
          <h1 className="display" style={{fontSize:48, lineHeight:1.1, letterSpacing:'-0.025em', marginBottom:16}}>
            Send us a message
          </h1>
          <p style={{fontSize:17, lineHeight:1.6, color:'var(--t-ink-muted)'}}>
            Tell us what's going on — questions, feedback, partnerships, trust concerns. We read every message and reply within one business day.
          </p>
        </div>
      </section>

      {/* Form */}
      <section style={{padding:'64px 0 100px'}}>
        <div className="container" style={{padding:'0 32px', maxWidth:720, margin:'0 auto'}}>
          <div className="card" style={{padding:40}}>
            {submitted ? (
              <div style={{textAlign:'center', padding:'32px 0'}}>
                <div style={{width:56, height:56, borderRadius:99, background:'var(--trust-bg)', color:'var(--trust)', display:'grid', placeItems:'center', margin:'0 auto 18px'}}>
                  <Icon name="check" size={24}/>
                </div>
                <h2 className="display" style={{fontSize:28, letterSpacing:'-0.02em', marginBottom:10}}>Message received</h2>
                <p style={{fontSize:15, color:'var(--t-ink-muted)', maxWidth:440, margin:'0 auto 24px', lineHeight:1.6}}>
                  Thanks, {form.name || 'friend'}. One of our team will reply to {form.email || 'your email'} within one business day.
                </p>
                <button className="btn btn-ghost btn-sm" onClick={()=>{setSubmitted(false); setForm({name:'',email:'',topic:'general',market:'Taiwan',message:''});}}>Send another →</button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:16}}>
                  <div>
                    <div className="label">Your name</div>
                    <input className="input" value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required placeholder="Wei-Chen Lin"/>
                  </div>
                  <div>
                    <div className="label">Email</div>
                    <input className="input" type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} required placeholder="you@example.com"/>
                  </div>
                </div>

                <div style={{marginBottom:16}}>
                  <div className="label">What is this about?</div>
                  <div style={{display:'flex', flexWrap:'wrap', gap:8, marginTop:6}}>
                    {topics.map(t => (
                      <label key={t.id} style={{display:'flex', alignItems:'center', gap:6, padding:'8px 14px', border:`1px solid ${form.topic===t.id?'var(--t-accent)':'var(--t-line)'}`, background: form.topic===t.id?'var(--coral-bg)':'transparent', color: form.topic===t.id?'var(--coral-dark)':'var(--t-ink)', borderRadius:99, fontSize:13, cursor:'pointer', fontWeight:500, transition:'all .15s'}}>
                        <input type="radio" name="topic" style={{display:'none'}} checked={form.topic===t.id} onChange={()=>setForm({...form, topic:t.id})}/>
                        {t.label}
                      </label>
                    ))}
                  </div>
                </div>

                <div style={{marginBottom:16}}>
                  <div className="label">Which market?</div>
                  <select className="input" value={form.market} onChange={e=>setForm({...form, market:e.target.value})}>
                    <option>Taiwan</option>
                    <option>Hong Kong</option>
                    <option>Singapore</option>
                    <option>Indonesia (helpers only)</option>
                    <option>Other / not applicable</option>
                  </select>
                </div>

                <div style={{marginBottom:24}}>
                  <div className="label">Your message</div>
                  <textarea className="input" rows={7} value={form.message} onChange={e=>setForm({...form, message:e.target.value})} required placeholder="Tell us what's going on. The more detail the better."/>
                </div>

                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap', paddingTop:20, borderTop:'1px solid var(--t-line)'}}>
                  <div style={{fontSize:12, color:'var(--t-ink-muted)', maxWidth:360, lineHeight:1.5}}>
                    By sending, you agree we may email you about your enquiry. We don't share your info.
                  </div>
                  <button className="btn btn-primary btn-lg" type="submit">Send message</button>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
};

// ===== Partner Network (Agencies) =====
const AgenciesPage = ({ go }) => {
  const agencies = [
    { name:'Eastern Home Services', city:'Taipei', market:'Taiwan', founded:2008, languages:['Mandarin','English'], specialty:'Elder care & long-term placements', logo:'E' },
    { name:'Lotus Family Agency', city:'Kaohsiung', market:'Taiwan', founded:2014, languages:['Mandarin','Taiwanese','Bahasa'], specialty:'Childcare & new baby support', logo:'L' },
    { name:'Harbour Helper Co.', city:'Hong Kong', market:'Hong Kong', founded:2011, languages:['Cantonese','English','Tagalog'], specialty:'Live-in, multi-generational homes', logo:'H' },
    { name:'Kowloon Care Partners', city:'Hong Kong', market:'Hong Kong', founded:2017, languages:['Cantonese','English'], specialty:'Executive households, fast placement', logo:'K' },
    { name:'Orchid Domestic Services', city:'Singapore', market:'Singapore', founded:2009, languages:['English','Mandarin','Malay'], specialty:'HDB & condo families, young kids', logo:'O' },
    { name:'Merlion Placement Group', city:'Singapore', market:'Singapore', founded:2013, languages:['English','Malay','Tamil'], specialty:'Special-needs & elder-care homes', logo:'M' },
  ];

  const [market, setMarket] = useState('All');
  const markets = ['All', 'Taiwan', 'Hong Kong', 'Singapore'];
  const filtered = market === 'All' ? agencies : agencies.filter(a => a.market === market);

  return (
    <div className="page">
      {/* Hero — matches About */}
      <section style={{background:'linear-gradient(180deg, var(--t-bg), var(--t-paper))', padding:'64px 0 48px', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px', textAlign:'center'}}>
          <div className="eyebrow" style={{marginBottom:10}}>Partner network</div>
          <h1 className="display" style={{fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', marginBottom:18, maxWidth:900, margin:'0 auto 18px'}}>
            Prefer a full-service agency?<br/>We partner with the best.
          </h1>
          <p style={{fontSize:19, lineHeight:1.6, color:'var(--t-ink-muted)', maxWidth:680, margin:'0 auto'}}>
            Six independent agencies across Taiwan, Hong Kong, and Singapore handle contracts, visas, and logistics end-to-end. Each one is vetted by our team and signs our code of conduct.
          </p>
        </div>
      </section>

      {/* Agency directory */}
      <section style={{padding:'64px 0'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{display:'flex', gap:8, justifyContent:'center', marginBottom:32}}>
            {markets.map(m => (
              <button key={m} className={`chip ${market===m?'chip-active':''}`} onClick={()=>setMarket(m)}>{m}</button>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:24}}>
            {filtered.map((a, i) => (
              <div key={i} style={{padding:32, background:'var(--t-paper)', border:'1px solid var(--t-line)', borderRadius:16, display:'flex', flexDirection:'column'}}>
                <div style={{display:'flex', alignItems:'flex-start', gap:16, marginBottom:18}}>
                  <div style={{width:56, height:56, borderRadius:14, background:'linear-gradient(135deg, var(--t-accent), var(--coral-dark))', color:'white', display:'grid', placeItems:'center', fontSize:22, fontWeight:700, flexShrink:0}}>{a.logo}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <h3 className="display" style={{fontSize:22, marginBottom:4, letterSpacing:'-0.01em'}}>{a.name}</h3>
                    <div style={{fontSize:13, color:'var(--t-ink-muted)'}}>{a.city} · Est. {a.founded}</div>
                  </div>
                </div>
                <p style={{fontSize:14, lineHeight:1.65, color:'var(--t-ink-soft)', marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--t-line)'}}>{a.specialty}</p>
                <div style={{marginBottom:20, fontSize:13, flex:1}}>
                  <div style={{color:'var(--t-ink-muted)', marginBottom:4, fontSize:12}}>Languages</div>
                  <div style={{fontWeight:500}}>{a.languages.join(', ')}</div>
                </div>
                <button className="btn btn-outline btn-sm" style={{alignSelf:'flex-start'}}>More details →</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works — matches About Values */}
      <section style={{padding:'80px 0', background:'var(--t-paper)', borderTop:'1px solid var(--t-line)', borderBottom:'1px solid var(--t-line)'}}>
        <div className="container" style={{padding:'0 32px'}}>
          <div style={{textAlign:'center', marginBottom:48}}>
            <div className="eyebrow" style={{marginBottom:10}}>How it works</div>
            <h2 className="display" style={{fontSize:36, letterSpacing:'-0.02em'}}>What to expect when you use a partner</h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:24}}>
            {[
              { num:'01', h:'Tell the agency what you need', p:'Your family situation, the skills that matter most, and any language or cultural preferences. First conversation usually takes 30 minutes.' },
              { num:'02', h:'They shortlist from our pool', p:'The agency draws from the same verified HelperMatch helpers you would see yourself — no hidden candidates, no pay-to-place. You get 3–5 profiles within a week.' },
              { num:'03', h:'Interview and decide', p:'The agency arranges video or in-person interviews, handles translation if needed, and gives you space to choose without pressure. No obligation if none of them feel right.' },
              { num:'04', h:'They handle paperwork', p:'Contracts, visa filing, government registration, flight booking, and arrival briefing. Flat fee, paid only on successful placement — no deposits, no hidden charges.' },
            ].map((v, i) => (
              <div key={i} style={{padding:32, background:'white', border:'1px solid var(--t-line)', borderRadius:16}}>
                <div style={{fontSize:13, color:'var(--t-accent)', fontWeight:700, letterSpacing:'0.04em', marginBottom:10}}>{v.num}</div>
                <h3 className="display" style={{fontSize:22, marginBottom:10, letterSpacing:'-0.01em'}}>{v.h}</h3>
                <p style={{fontSize:15, lineHeight:1.7, color:'var(--t-ink-soft)'}}>{v.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

    </div>
  );
};

Object.assign(window, { AboutPage, AssessmentPage, TrustPage, ContactPage, AgenciesPage });