// MEET2 — Variant A · Conservative
// Standard high-conversion homepage: trust-first, clear hierarchy,
// centred hero, three-column features, 1-2-3 process, headshot row,
// testimonial cards, events list, trust logos, stats, FAQ, final CTA.

function HomeConservative() {
  return (
    <div className="va">
      <Nav variant="light" sticky={true} />
      <HeroA />
      <TrustBarA />
      <BrandStoryA />
      <ServiceA />
      <ProcessA />
      <TeamA />
      <StoriesA />
      <EventsA />
      <StatsA />
      <FAQA />
      <CTAClosingA />
      <Footer variant="light" />
    </div>
  );
}

// ── A1 · Hero ────────────────────────────────────────────────
function HeroA() {
  return (
    <header className="va-hero">
      <div className="va-hero-bg" aria-hidden="true">
        <div className="va-hero-blob va-hero-blob--pink" />
        <div className="va-hero-blob va-hero-blob--gold" />
      </div>
      <div className="va-hero-inner">
       <div className="va-hero-text">
        <div className="va-hero-eyebrow">
          <span className="m-eyebrow">Find · Meet · Feel</span>
        </div>
        <h1 className="va-hero-title">
          <T zh={<>在尋覓之中，<br/>遇見剛剛好的你。</>}
             en={<>In every search,<br/>a meaningful meet.</>} />
        </h1>
        <p className="va-hero-sub">
          <T zh="覓 MEET2 是專為認真擇偶的成熟單身者打造的一對一顧問配對服務。每一段相遇，由真人顧問用心牽線。"
             en="MEET2 is a dedicated 1-on-1 matchmaking advisory for sincere singles seeking lasting love. Every introduction is hand-curated by our consultants." />
        </p>
        <div className="va-hero-cta">
          <a href="apply.html" className="m-btn m-btn-primary">
            <T zh="立即開始尋覓" en="Begin your search" />
            <Arrow />
          </a>
        </div>
        <ul className="va-hero-trust">
          <li><Check/> <T zh="顧問實名背書" en="Verified matchmakers" /></li>
          <li><Check/> <T zh="會員嚴格身分審核" en="Identity-verified members" /></li>
          <li><Check/> <T zh="隱私保密，安心配對" en="Private &amp; confidential" /></li>
        </ul>
       </div>
      <div className="va-hero-image">
        <Photo tone="pink" ratio="3/4" src="assets/photos/hero.png" alt="一對在黃昏窗邊安靜對話的伴侶" />
        <div className="va-hero-card">
          <div className="va-hero-card-row">
            <span className="va-hero-card-dot" />
            <span className="va-hero-card-label">
              <T zh="本月配對成功" en="Matches this month" />
            </span>
          </div>
          <div className="va-hero-card-num">128</div>
          <div className="va-hero-card-hint">
            <T zh="平均媒合時間 47 天" en="Avg. 47 days to first date" />
          </div>
        </div>
      </div>
      </div>
    </header>
  );
}

function Arrow() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10m-4-4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>; }
function Check() { return <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>; }

// ── A2 · Trust bar (press) ───────────────────────────────────
function TrustBarA() {
  const promises = [
    { zh: '顧問實名背書',     en: 'Named matchmakers',  sub_zh: '每位顧問皆實名公開資歷',         sub_en: 'Every matchmaker publicly named' },
    { zh: '會員嚴格審核',     en: 'Verified members',   sub_zh: '雙證件 + 婚姻狀態 + 經歷查核', sub_en: 'ID, status & background checked' },
    { zh: '隱私三層保護',     en: 'Privacy first',      sub_zh: '資料加密 · 匿名瀏覽 · 同意制', sub_en: 'Encrypted, anonymous, consent-based' },
    { zh: '不滿意即退費',     en: 'Money-back promise', sub_zh: '首月未配對 · 全額退費',           sub_en: 'No match in month one — full refund' },
  ];
  return (
    <div className="va-promise">
      <span className="va-promise-label">
        <T zh="我們的承諾" en="Our promise" />
      </span>
      <ul>
        {promises.map((p, i) => (
          <li key={i}>
            <span className="va-promise-no">0{i + 1}</span>
            <div>
              <b><T zh={p.zh} en={p.en} /></b>
              <span><T zh={p.sub_zh} en={p.sub_en} /></span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ── A3 · Brand story ─────────────────────────────────────────
function BrandStoryA() {
  return (
    <Section id="about" padding="lg">
      <div className="va-story">
        <div className="va-story-text">
          <span className="m-eyebrow"><T zh="品牌故事" en="Our story" /></span>
          <h2><T
            zh={<>不是為了遇見更多，<br/>而是遇見對的人。</>}
            en={<>Not more matches.<br/>The right one.</>}
          /></h2>
          <p><T
            zh="在這個快速變動的世界裡，人們不斷相遇，也不斷錯過。覓 MEET2 誕生的初衷，是為了讓每一次相遇，都不只是經過，而是真正的連結。"
            en="In a world that moves too fast, we cross paths and miss them just as quickly. MEET2 exists so every encounter becomes more than a passing moment."
          /></p>
          <p><T
            zh="「覓」是對自己、對生活、對理想關係的探索；「MEET」是相遇的瞬間。當尋覓與相遇交會，就是故事開始的地方。"
            en="‘Find’ is the search — for self, for life, for the right kind of love. ‘Meet’ is the moment two paths converge. Where they cross, your story begins."
          /></p>
          <div className="va-fmf">
            <div><b>Find.</b> <T zh="在世界中尋覓可能" en="Search the possible" /></div>
            <div><b>Meet.</b> <T zh="在時間裡遇見對的人" en="Meet the right one" /></div>
            <div><b>Feel.</b> <T zh="讓每一次相遇都有感覺" en="Feel each connection" /></div>
          </div>
        </div>
        <div className="va-story-art">
          <Photo tone="cream" ratio="3/4" src="assets/photos/story-woman.png" alt="窗邊咖啡廳的女性肖像"
                 style={{ marginTop: 40 }} />
          <Photo tone="gold" ratio="1/1" src="assets/photos/story-detail.png" alt="桌面上輕觸的雙手細節"
                 className="va-story-art-2" />
        </div>
      </div>
    </Section>
  );
}

// ── A4 · Service / Why us ────────────────────────────────────
function ServiceA() {
  const items = [
    {
      n: '01',
      zh: { t: '專屬顧問一對一', d: '每位會員由資深媒合顧問親自陪伴，深度了解你的價值觀、生活節奏與擇偶條件。' },
      en: { t: '1-on-1 advisory', d: 'Every member is paired with a senior matchmaker who learns your values, rhythm and ideals — not just your filters.' },
    },
    {
      n: '02',
      zh: { t: '嚴選擇優審核制', d: '所有會員皆通過身分、職業與背景核實，篩選比例不到 3%。每一場相遇，都是值得的。' },
      en: { t: 'Verified members', d: 'Identity, profession and background are vetted. Less than 3% of applicants pass. Quality over quantity.' },
    },
    {
      n: '03',
      zh: { t: '面對面、不只滑卡', d: '結合線下精緻聯誼、單獨牽線與生活風格活動，讓緣分發生在真實的場景裡。' },
      en: { t: 'Real-world dates', d: 'Curated dinners, private introductions and lifestyle gatherings. Chemistry happens in person, not in a swipe.' },
    },
    {
      n: '04',
      zh: { t: '全程陪跑顧問', d: '從初次見面到關係建立，顧問持續回饋與調整方向，把模糊不安，變成清晰的下一步。' },
      en: { t: 'End-to-end coaching', d: 'From first meeting to commitment, your matchmaker stays close — turning uncertainty into a clear next step.' },
    },
  ];
  return (
    <Section id="service" bg="var(--bg-tint)">
      <div className="va-sec-head">
        <span className="m-eyebrow"><T zh="為什麼選擇覓" en="Why MEET2" /></span>
        <h2><T zh="認真的人，值得認真的服務。" en="Serious about love. Serious about service." /></h2>
      </div>
      <div className="va-service-grid">
        {items.map((it) => (
          <div className="va-service-card" key={it.n}>
            <div className="va-service-n">{it.n}</div>
            <h3><T zh={it.zh.t} en={it.en.t} /></h3>
            <p><T zh={it.zh.d} en={it.en.d} /></p>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ── A5 · Process 1-2-3-4 ─────────────────────────────────────
function ProcessA() {
  const steps = [
    { zh: { t: '線上申請與面談', d: '填寫申請表並預約 60 分鐘 1:1 顧問面談，了解你目前的狀態與期待。' },
      en: { t: 'Apply & meet', d: 'Submit your profile and book a 60-min consult to share where you are and what you long for.' } },
    { zh: { t: '量身打造配對策略', d: '顧問依據你的條件、價值觀與生活節奏，提出客製化的擇偶策略與時程。' },
      en: { t: 'Tailored strategy', d: 'Your matchmaker designs a personalised plan around your values, lifestyle and timing.' } },
    { zh: { t: '精選對象與安排見面', d: '每月推薦 1-2 位高度相符對象，安排在精緻場域裡的安心見面。' },
      en: { t: 'Curated intros', d: 'Receive 1–2 highly-matched introductions a month, met in our private, comfortable spaces.' } },
    { zh: { t: '關係建立與長期陪伴', d: '從約會到走入長期關係，顧問持續陪跑、回饋與調整，直到你找到答案。' },
      en: { t: 'Lasting love', d: 'From the first date to the long road ahead, your matchmaker stays beside you until love lasts.' } },
  ];
  return (
    <Section id="process">
      <div className="va-sec-head">
        <span className="m-eyebrow"><T zh="配對流程" en="How it works" /></span>
        <h2><T zh="四個步驟，找回對的節奏。" en="Four steps to find your pace." /></h2>
      </div>
      <div className="va-process">
        {steps.map((s, i) => (
          <div className="va-process-step" key={i}>
            <div className="va-process-n">0{i+1}</div>
            <div className="va-process-line" aria-hidden="true" />
            <h4><T zh={s.zh.t} en={s.en.t} /></h4>
            <p><T zh={s.zh.d} en={s.en.d} /></p>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ── A6 · Team ────────────────────────────────────────────────
function TeamA() {
  const team = [
    { name: 'Iris Chen',  zh: '首席媒合顧問', en: 'Lead matchmaker',  tag: '12 yr · 320 couples', img: 'assets/photos/team-iris.png' },
    { name: 'Jason Wu',   zh: '配對策略師',   en: 'Match strategist', tag: '9 yr · 240 couples',  img: 'assets/photos/team-jason.png' },
    { name: 'Yvonne Hsu', zh: '心理諮詢顧問', en: 'Relationship coach', tag: 'Licensed psych.',   img: 'assets/photos/team-yvonne.png' },
  ];
  return (
    <Section id="team" bg="var(--bg-tint)">
      <div className="va-sec-head">
        <span className="m-eyebrow"><T zh="顧問團隊" en="Matchmakers" /></span>
        <h2><T zh="懂你的人，才幫得了你。" en="Matchmakers who actually understand you." /></h2>
        <p className="va-sec-sub"><T
          zh="我們的顧問皆有 7 年以上專業媒合經驗，平均每人成功配對超過 200 對。"
          en="Every matchmaker has 7+ years of professional practice and 200+ successful pairings on record." /></p>
      </div>
      <div className="va-team">
        {team.map((p) => (
          <div className="va-team-card" key={p.name}>
            <Photo tone="cream" ratio="4/5" src={p.img} alt={p.name} />
            <div className="va-team-info">
              <h4>{p.name}</h4>
              <div className="va-team-role"><T zh={p.zh} en={p.en} /></div>
              <div className="va-team-tag">{p.tag}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ── A7 · Stories / Testimonials ──────────────────────────────
function StoriesA() {
  const stories = [
    { who: 'Wendy, 34 · Jay, 37', months: 8, img: 'assets/photos/couple-a.png',
      zh: '「我以為過了 30 歲，就只能將就。覓的顧問花了三次面談，才推薦第一個人——那也是我現在的先生。」',
      en: '"After 30 I thought I had to settle. My matchmaker took three meetings before her first intro — he\'s now my husband."' },
    { who: 'Tina, 41 · Eric, 43', months: 14, img: 'assets/photos/couple-b.png',
      zh: '「重點不在配對的數量，而是顧問願意花時間真的了解我。每一次推薦都很有道理。」',
      en: '"It\'s not about more matches. It\'s about being truly understood. Every intro made sense."' },
    { who: 'May, 38 · Allen, 40', months: 6, img: 'assets/photos/couple-c.png',
      zh: '「過程中很安心，沒有壓力。我們在第四次的精緻晚宴中相遇，現在準備明年結婚。」',
      en: '"The whole process felt safe. We met at our fourth curated dinner — getting married next spring."' },
  ];
  return (
    <Section id="stories">
      <div className="va-sec-head">
        <span className="m-eyebrow"><T zh="會員見證" en="Member stories" /></span>
        <h2><T zh="他們在這裡，遇見了答案。" en="Here, they found their answer." /></h2>
      </div>
      <div className="va-stories">
        {stories.map((s, i) => (
          <article className="va-story-card" key={i}>
            <Photo tone={i % 2 ? 'pink' : 'gold'} ratio="4/3" src={s.img} alt={s.who} />
            <div className="va-story-card-body">
              <div className="va-story-meta">
                <span><T zh={`配對 ${s.months} 個月後`} en={`Matched · ${s.months} months`} /></span>
              </div>
              <blockquote><T zh={s.zh} en={s.en} /></blockquote>
              <div className="va-story-who">— {s.who}</div>
            </div>
          </article>
        ))}
      </div>
    </Section>
  );
}

// ── A8 · Events ──────────────────────────────────────────────
function EventsA() {
  const events = [
    { date: '06.14', zh: '初夏精緻酒會 · 信義場', en: 'Early-summer Soirée · Xinyi', sub: '20:00 · 18 位限額' },
    { date: '06.22', zh: '週末手作 × 品酒午後',   en: 'Crafts &amp; Wine Afternoon',  sub: '14:00 · 12 位限額' },
    { date: '07.05', zh: '私廚晚宴 · 義式七道',   en: 'Private Italian Dinner · 7 courses', sub: '19:00 · 10 位限額' },
  ];
  return (
    <Section id="events" bg="var(--bg-pink)">
      <div className="va-sec-head va-sec-head--row">
        <div>
          <span className="m-eyebrow"><T zh="近期活動" en="Upcoming events" /></span>
          <h2><T zh="緣分，從一場精緻聚會開始。" en="Where chemistry begins." /></h2>
        </div>
        <a href="#all-events" className="m-btn m-btn-ghost">
          <T zh="查看全部活動" en="See all events" /> <Arrow/>
        </a>
      </div>
      <div className="va-events">
        {events.map((e, i) => (
          <div className="va-event" key={i}>
            <div className="va-event-date">
              <span>{e.date.split('.')[0]}</span>
              <span>月 {e.date.split('.')[1]}</span>
            </div>
            <div className="va-event-body">
              <h4><T zh={e.zh} en={e.en} /></h4>
              <div className="va-event-sub">{e.sub}</div>
            </div>
            <a className="va-event-cta" href="#"><T zh="預約" en="RSVP" /> <Arrow/></a>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ── A9 · Stats ───────────────────────────────────────────────
function StatsA() {
  const stats = [
    { n: '12yr', zh: '專業媒合經驗', en: 'Years of practice' },
    { n: '4,800+', zh: '審核通過會員', en: 'Verified members' },
    { n: '1,260', zh: '成功配對對數', en: 'Couples matched' },
    { n: '92%', zh: '會員滿意度',     en: 'Member satisfaction' },
  ];
  return (
    <Section padding="md">
      <div className="va-stats">
        {stats.map((s, i) => (
          <div className="va-stat" key={i}>
            <div className="va-stat-n">{s.n}</div>
            <div className="va-stat-l"><T zh={s.zh} en={s.en} /></div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ── A10 · FAQ ────────────────────────────────────────────────
function FAQA() {
  const faqs = [
    { zh: { q: '會員制如何收費？', a: '我們提供半年、一年與兩年三種方案；單次顧問諮詢免費，正式入會後一次性繳費，無隱藏費用。' },
      en: { q: 'How does membership pricing work?', a: 'Half-year, one-year and two-year plans. The first consult is free; membership is a one-off fee with nothing hidden.' } },
    { zh: { q: '如果一直找不到合適對象怎麼辦？', a: '若於約定的服務期間內未能配對成功，我們提供延長期或顧問轉介服務，直到你找到答案。' },
      en: { q: 'What if I don\'t find a match in time?', a: 'If no match is made within your service period, we extend it or reassign your matchmaker — at no extra cost.' } },
    { zh: { q: '我的個人資料會被公開嗎？', a: '所有資料皆嚴格保密；只有負責顧問可見，且絕不出現在公開平台或社群上。' },
      en: { q: 'Will my profile be public?', a: 'Never. Your profile is only visible to your dedicated matchmaker, never published or shared.' } },
    { zh: { q: '需要花多久時間準備？', a: '一般從申請到首次見面，平均 21 天；視個人條件與時程而定。' },
      en: { q: 'How long until I meet someone?', a: '21 days on average from application to first introduction — varies with your circumstances and schedule.' } },
  ];
  return (
    <Section id="faq" bg="var(--bg-tint)">
      <div className="va-sec-head">
        <span className="m-eyebrow"><T zh="常見問題" en="Questions" /></span>
        <h2><T zh="你想知道的，我們先說。" en="The honest answers first." /></h2>
      </div>
      <div className="va-faq">
        {faqs.map((f, i) => (
          <details key={i} open={i === 0}>
            <summary>
              <T zh={f.zh.q} en={f.en.q} />
              <span className="va-faq-icon" aria-hidden="true">+</span>
            </summary>
            <div className="va-faq-a"><T zh={f.zh.a} en={f.en.a} /></div>
          </details>
        ))}
      </div>
    </Section>
  );
}

// ── A11 · Closing CTA ────────────────────────────────────────
function CTAClosingA() {
  return (
    <Section id="signup" bg="var(--bg-deep)" style={{ color: '#fff' }}>
      <div className="va-cta">
        <span className="m-eyebrow" style={{ color: 'var(--gold-soft)' }}>
          <T zh="開始尋覓" en="Begin" />
        </span>
        <h2><T zh={<>讓下一段關係，<br/>從這裡開始。</>}
              en={<>Let your next chapter<br/>begin here.</>} /></h2>
        <p><T
          zh="填寫一份簡短的個人申請，讓我們的顧問為你客製化下一場相遇。"
          en="Fill out a short application — our matchmakers will hand-curate your next encounter." /></p>
        <div className="va-hero-cta">
          <a href="apply.html" className="m-btn m-btn-primary">
            <T zh="立即開始尋覓" en="Begin your search" /> <Arrow/>
          </a>
        </div>
      </div>
    </Section>
  );
}

window.HomeConservative = HomeConservative;