---
// 영어 홈. 헤더의 언어 전환(KO/EN)이 도착하는 곳. 구성은 한국어 홈과 같은 섹션 리듬(라이트 히어로 → 틴트 카드 → 다크 통계 → 라이트 → 다크)이고,
// 내용은 영어로 읽을 수 있는 것만 싣는다: 회복 일정 플래너, 오는 길, 진료시간, 병원 사실, 원칙. 한국어 글은 번역 없이 링크만 안내한다.
import Base from '../../layouts/Base.astro';
import { fact, site as S, clinicSchema, surface, has, v } from '../../lib';
import EN from '../../data/factSheetEn.json';
import VisitMap from '../../components/VisitMap.astro';
const f = fact as Record<string, any>;
const site = Astro.site!.toString().replace(/\/$/, '');
const yt = surface('youtube'); const gu = surface('gangnamunni'); const gg = surface('google');
const hoursDays = EN.hoursDays as Record<string, string>;
const ld = [
  { '@type': 'WebPage', '@id': `${site}/en#page`, name: `${EN.shortName} Supporters (English)`, url: `${site}/en`, inLanguage: 'en', isPartOf: { '@id': `${site}/#website` }, about: { '@id': `${fact.url}/#clinic` } },
  clinicSchema(site),
];
---
<Base lang="en" title={`${EN.shortName}, Seoul · Recovery planner, getting here, clinic facts`} description={`${EN.shortName} is a ${EN.kind} at ${EN.areaLabel}, founded in ${v(f.founded)}. Plan your recovery stay around your surgery date, find the way from the airport, and check opening hours and clinic facts in English.`} jsonLd={ld} alternates={[{ lang: 'ko', href: '/' }, { lang: 'en', href: '/en' }]}>
  <section class="hero-light">
    <div class="blob a"></div><div class="blob b"></div>
    <div class="wrap-wide inner">
      <div>
        <div class="eyebrow">{S.siteNameEn || 'VIEW SUPPORTERS'} · English</div>
        <h1>{EN.shortName},<br /><span class="accent">plan your stay before you fly.</span></h1>
        <p class="lede">{EN.shortName} is a {EN.kind} at {EN.areaLabel}{has(f.founded) && <>, founded in {f.founded}</>}. This site is run by supporters who answer the questions people ask before visiting. In English you can plan your recovery stay, find the way here and check clinic facts. Articles are in Korean.</p>
        <div class="chips">
          <span class="chip"><span class="dot"></span>Founded {v(f.founded)} · Sinnonhyeon Station Exit 3</span>
          <span class="chip"><span class="dot"></span>Based on the clinic's published guidance</span>
        </div>
        <div style="display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.6rem">
          <a class="btn primary" href="/en/plan">Recovery Planner</a>
          <a class="btn secondary" href="#visit">Getting here</a>
        </div>
      </div>
      {has(S.heroImage?.src) && <div class="hero-img collage"><img src={S.heroImage.src} alt="View Plastic Surgery building exterior and interior collage: consultation center, operating room, surgery center corridor" width={S.heroImage.width} height={S.heroImage.height} /></div>}
    </div>
  </section>

  <section class="section tint" style="padding:3.2rem 0"><div class="wrap-wide">
    <div class="sec-head"><div class="eyebrow">Start Here</div><h2>Where Are You Now?</h2><p class="sub">Pick the step that matches where you are.</p></div>
    <div class="grid">
      <a class="card entry" href="/en/plan"><div class="cat">Surgery date set</div><h3>Plan arrival, departure and recovery days</h3><p>Choose your procedure and date. See when to arrive, the earliest you can fly home, which days you can go out, and hotels near the clinic.</p><span class="more">Open the Recovery Planner</span></a>
      <a class="card entry" href="#visit"><div class="cat">Preparing to visit</div><h3>Airport to clinic, hours and parking</h3><p>Line 9 from Gimpo Airport with no transfer, opening hours by day, and where to go when you arrive.</p><span class="more">Getting here</span></a>
      <a class="card entry" href="#clinic"><div class="cat">Checking the clinic</div><h3>Facts, building and reviews</h3><p>Founded {v(f.founded)}, 19-storey clinic building, specialties, and where reviews can be read.</p><span class="more">Clinic facts</span></a>
    </div>
  </div></section>

  <section class="section dark"><div class="wrap-wide">
    <div class="sec-head"><div class="eyebrow" style="color:var(--purple-300)">At A Glance</div><h2>Clinic In Numbers</h2><p class="sub">Figures from the clinic's public profiles. Dates checked are shown with each number.</p></div>
    <div class="stats">
      <div class="stat"><b>{v(f.founded)}</b><span class="label">Founded</span><span class="desc">{EN.areaLabel}. {EN.building}</span></div>
      <div class="stat"><b>{v(gu.doctors)}</b><span class="label">Doctors listed</span><span class="desc">Gangnam Unni clinic profile, checked {v(gu.checked)}</span></div>
      <div class="stat"><b>{v(yt.videos)}</b><span class="label">Doctor videos</span><span class="desc">Official YouTube channel (Korean), checked {v(yt.checked)}</span></div>
      <div class="stat"><b>{v(gu.reviews)}</b><span class="label">Reviews on Gangnam Unni</span><span class="desc">We link to where reviews can be read and do not reproduce patient stories.</span></div>
    </div>
  </div></section>

  <section class="section light" id="visit"><div class="wrap-wide">
    <div class="sec-head"><div class="eyebrow">Visit</div><h2>Getting Here</h2><p class="sub">Address, transit, airport route, opening hours and what to do when you arrive.</p></div>
    <div class="grid">
      <div class="card"><div class="cat">Address</div><h3>{EN.address.full}</h3><p>{EN.transit}</p><p><a href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(EN.address.mapQuery)}`} rel="noopener" target="_blank">Open in Google Maps</a></p></div>
      <div class="card"><div class="cat">From the airport</div><h3>Incheon to Sinnonhyeon</h3><p>{EN.airport}</p></div>
      <div class="card"><div class="cat">On arrival</div><h3>Where to go in the building</h3><p>{EN.arrival}</p><p>{EN.parking}</p></div>
    </div>
    <VisitMap lang="en" hideHead nameEn={EN.shortName} addressEn={EN.address.full} />
    <h3 style="margin-top:2rem">Opening hours</h3>
    <div class="table-wrap"><table><thead><tr><th>Day</th><th>Hours</th></tr></thead><tbody>
      {(f.hours?.rows ?? []).map((r: any) => <tr><td>{hoursDays[r.days] ?? r.days}</td><td>{r.open ? `${r.open} to ${r.close}` : EN.hoursClosed}</td></tr>)}
    </tbody></table></div>
    <p style="font-size:0.88rem;color:var(--slate-500)">Source: {has(f.hours?.source) ? <a href={f.hours.source} rel="noopener">clinic profile</a> : 'clinic'}. Hours can change, so call or message before you travel.</p>
    <p style="margin-top:1.2rem"><a class="btn primary" href={f.reservationUrl || f.url} rel="noopener">Book a consultation</a> {has(f.urlEn) && <a class="btn secondary" href={f.urlEn} rel="noopener">Official English website</a>}</p>
  </div></section>

  <section class="section tint" id="clinic"><div class="wrap-wide">
    <div class="sec-head"><div class="eyebrow">Fact Sheet</div><h2>Clinic Facts</h2><p class="sub">What the clinic states publicly, with the date we checked.</p></div>
    <div class="grid">
      <div class="card"><div class="cat">Specialties</div><h3>What the clinic does</h3><ul style="margin:0;padding-left:1.1rem;font-size:0.93rem;color:var(--slate-600)">{EN.specialties.map((s) => <li>{s}</li>)}</ul></div>
      <div class="card"><div class="cat">Contact</div><h3>{EN.name}</h3><p>Tel {v(f.phone)}{has(f.kakao) && <> · <a href={f.kakao} rel="noopener">KakaoTalk channel</a></>}</p><p>{has(f.url) && <a href={f.url} rel="noopener">Korean website</a>}{has(f.urlEn) && <> · <a href={f.urlEn} rel="noopener">English website</a></>}</p></div>
      <div class="card"><div class="cat">Reviews</div><h3>Where to read them</h3><p>{has(gu.url) && <a href={gu.url} rel="noopener">Gangnam Unni</a>}{has(gu.rating) && <> rating {gu.rating}, {v(gu.reviews)} reviews</>}{has(gg.url) && <> · <a href={gg.url} rel="noopener">Google Maps</a>{has(gg.rating) && <> rating {gg.rating}</>}</>}. We do not quote individual patient stories.</p></div>
    </div>
  </div></section>

  <section class="section dark"><div class="wrap-wide">
    <div class="sec-head"><div class="eyebrow" style="color:var(--purple-300)">Principles</div><h2>What We Do, What We Don't</h2><p class="sub">Three rules so you can judge for yourself.</p></div>
    <div class="grid">
      <div class="card"><h3>How we answer</h3><p>One question, one article, the answer first. Medical content is reviewed by the clinic's attending surgeon and the review date is shown. Articles are in Korean.</p></div>
      <div class="card"><h3>What we leave out</h3><p>Before-and-after photos, other patients' stories, comparisons with other clinics, and any promise of results. For reviews we only say where they can be read.</p></div>
      <div class="card"><h3>What we disclose</h3><p>Who wrote each piece, whether a surgeon reviewed it, what sources were used, and that this site is supported by {EN.shortName}.</p></div>
    </div>
  </div></section>
</Base>
<style>
  .card.entry { text-decoration: none; color: inherit; }
  .card .more { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
</style>