/* Pages — Home, About, Clinical, Education, Research, Faculty, Contact, Partnership */
/* global React, Placeholder, SectionHead, Reveal, useT, COUNTRY_LIST */

const { useState: useStateP, useMemo: useMemoP } = React;

// Faculty members — single flat list (per ON BOARD MEMBERS docx)
const FACULTY_MEMBERS = [
{
  src: 'assets/faculty-massimo-vitale.png',
  name: 'Dr. Andrea Lazzarotto',
  role: 'Maxillofacial Surgeon · Aesthetic Medicine',
  country: 'Italy · Milan',
  objectPosition: 'center 20%',
  bio: 'Italian board-certified maxillofacial surgeon focused on facial aesthetic surgery and aesthetic medicine. Graduated in Medicine and Surgery from the University of Milan, with specialty training in maxillofacial surgery at the University of Verona and advanced academic work in nasal surgery techniques. Practices across Milan, Como, and Udine, with interests in facial surgery, injectables, and regenerative aesthetics; active speaker at international congresses (IMCAS).'
},
{
  src: 'assets/faculty-noura-lebbar.jpg',
  name: 'Prof. Noura Lebbar, MD, PhD',
  role: 'Professor of Aesthetic Surgery · International Speaker',
  country: 'Italy · Genoa',
  objectPosition: 'center 18%',
  bio: 'Cosmetic surgeon and academic professor affiliated with the University of Genoa. Combines clinical surgical practice with academic and international educational activity, speaking at major aesthetic congresses including IMCAS. Recipient of the Euro-Mediterranean Excellence & Sustainability Award. Focus on technique refinement, personalised treatment planning, and sustainable innovation in aesthetic medicine.'
},
{
  src: 'assets/faculty-kyuho-yi.png',
  name: 'Dr. Kyu-Ho Yi, MD, PhD',
  role: 'Anatomist · Aesthetic Physician',
  country: 'Korea · Yonsei University',
  objectPosition: 'center 22%',
  bio: 'Korea-based anatomist and aesthetic physician focused on procedural anatomy and evidence-based aesthetic techniques. Adjunct Professor at Yonsei University, College of Dentistry, and Director at You and I Clinic (Seoul). Published author on skin boosters, biostimulation, and exosome-related clinical applications, bridging anatomical science with clinic-ready protocols. Active speaker at IMCAS and other international platforms.'
},
{
  src: 'assets/faculty-andrea-lazzarotto.png',
  name: 'Dr. Massimo Vitale, MD',
  role: 'Aesthetic Medicine · Injectables & Laser',
  country: 'Italy',
  objectPosition: 'center 18%',
  bio: 'Italian aesthetic medicine physician specialising in advanced injectable procedures, facial rejuvenation, and laser-based treatments. International speaker and trainer at major aesthetic congresses. Expertise across facial contouring, regenerative aesthetic medicine, energy-based therapies, and evidence-based treatment approaches focused on procedural precision and safety.'
},
{
  src: 'assets/faculty-neen-nam.jpg',
  name: 'Dr. Neen Nam, MD',
  role: 'Hair Transplantation Specialist',
  country: 'Thailand · Namnin Clinic',
  objectPosition: 'center 22%',
  bio: 'Medical doctor specialising in hair transplantation, affiliated with Namnin Clinic in Bangkok. Focus on surgical hair restoration procedures and clinical research in topical chitosan and folliculitis prevention after microcoring.'
},
{
  src: 'assets/faculty-sergiy-oliynyk.webp',
  name: 'Dr. Sergiy Oliynyk, MD, PhD, DSc',
  role: 'Clinician–Scientist · Sports Medicine & Biochemistry',
  country: 'Ukraine · Kyiv',
  objectPosition: 'center 18%',
  bio: 'Clinician, researcher, and educator bridging exercise biochemistry, clinical pharmacology, and rehabilitation. MD and PhD from the National Medical University in Kyiv; Doctor of Science in Biology / Biochemistry. Advisor to Ukraine\u2019s National Olympic teams across athletics, boxing, and rowing. Author of 200+ scientific publications, 10 inventions, and two university textbooks. Introduced actoprotectors as a new pharmacological class to the Korean and international medical communities during his work at Ewha Womans University, Seoul.'
}];


// ════════════════════════════════════════════════════════════════════
// HOME
// ════════════════════════════════════════════════════════════════════

function HomePage({ onNavigate, tweaks }) {
  return (
    <div className="page" data-screen-label="Home">
      <Hero onNavigate={onNavigate} tweaks={tweaks} />
      <HomePillars onNavigate={onNavigate} />
      <ConferenceBridge />
      <HomeExclusivity />
      <HomeNetwork />
      <HomeResearch onNavigate={onNavigate} />
    </div>);

}

function Hero({ onNavigate, tweaks }) {
  const { t } = useT();
  return (
    <section className="hero hero--fullbleed">
      <div className="hero__video">
        <HeroVideoPlaceholder />
      </div>
      <div className="hero__caption">
        <div className="hero__meta hero-meta-card">
          <div className="hero-meta-card__index mono">— 01</div>
          <div className="hero-meta-card__pill">Network</div>
          <div className="hero-meta-card__body">
            <img
              src="assets/hero-seminar-audience.jpeg"
              alt="International physicians attending an Aesthefora clinical seminar"
              loading="lazy" />
            
          </div>
          <div className="hero-meta-card__foot">
            <div className="hero-meta-card__title">INTERNATIONAL</div>
            <div className="hero-meta-card__sub mono">Medical Network</div>
          </div>
        </div>
        <div>
          <h1 className="display-xl hero__title" style={{ fontFamily: "\"Pretendard Variable\"" }}>
            {t('hero.title.l1')}<br />{t('hero.title.l2')} {t('hero.title.l3')}
          </h1>
          <p className="lede hero__sub">{t('hero.sub')}</p>
          <div className="hero__ctas">
            <a href="#education" onClick={(e) => {e.preventDefault();onNavigate('education');}} className="btn btn--primary">
              {t('cta.cadaver')} <span className="btn__arrow">→</span>
            </a>
            <a href="#clinical" onClick={(e) => {e.preventDefault();onNavigate('clinical');}} className="btn btn--ghost">
              {t('cta.distribution')}
            </a>
          </div>
        </div>
      </div>
      <a href="#next" className="hero__scroll-cue" aria-label="Scroll to next section"
      onClick={(e) => {e.preventDefault();window.scrollTo({ top: window.innerHeight, behavior: 'smooth' });}}>
        <span className="hero__scroll-cue-text mono">Scroll</span>
        <span className="hero__scroll-cue-arrow" aria-hidden="true">↓</span>
      </a>
    </section>);

}

function HeroVideoPlaceholder() {
  const { t } = useT();
  const [loaded, setLoaded] = React.useState(false);
  return (
    <React.Fragment>
      <div className="placeholder__stripes" style={{ position: 'absolute', inset: 0, opacity: loaded ? 0 : 1, transition: 'opacity 0.4s ease' }}></div>
      <video
        autoPlay
        muted
        loop
        playsInline
        onLoadedData={() => setLoaded(true)}
        style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: loaded ? 1 : 0, transition: 'opacity 0.4s ease' }}>
        
        <source src="assets/hero.mp4" type="video/mp4" />
      </video>
      {!loaded &&
      <React.Fragment>
          <div className="hero__videoOverlay">
            <span>{t('hero.video.label')}</span>
            <span>{t('hero.video.pending')}</span>
          </div>
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', pointerEvents: 'none' }}>
            <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 12,
            letterSpacing: '0.16em',
            color: 'var(--ink-mute)',
            textTransform: 'uppercase',
            textAlign: 'center',
            padding: '12px 18px',
            border: '1px solid var(--line)',
            background: 'rgba(255,255,255,0.7)',
            backdropFilter: 'blur(4px)'
          }}>
              {t('hero.video.spec')}<br />
              <span style={{ color: 'var(--ink-soft)', fontSize: 10 }}>{t('hero.video.upload')}</span>
            </div>
          </div>
        </React.Fragment>
      }
    </React.Fragment>);

}

// ───── §02 Pillars ──────────────────────────────────────────────

function HomePillars({ onNavigate }) {
  const { t } = useT();
  const pillars = [
  { no: '01', key: 'pillar.01', route: 'education' },
  { no: '02', key: 'pillar.02', route: 'education' },
  { no: '03', key: 'pillar.03', route: 'research' },
  { no: '04', key: 'pillar.04', route: 'clinical' }];

  return (
    <section className="section">
      <div className="pillars">
        {pillars.map((p, i) =>
        <Reveal key={p.no} delay={i * 80}>
            <a
            href={`#${p.route}`}
            onClick={(e) => {e.preventDefault();onNavigate(p.route);}}
            className="pillar">
            
              <div className="pillar__no">{p.no}</div>
              <h3 className="pillar__title">{t(`${p.key}.t`)}</h3>
              <p className="pillar__body">{t(`${p.key}.b`)}</p>
              <div className="pillar__cta">{t('cta.openPage')} →</div>
            </a>
          </Reveal>
        )}
      </div>
    </section>);

}

// ───── §02b Conference bridge — editorial full-bleed band ──────

function ConferenceBridge() {
  const { t } = useT();
  return (
    <section className="conf-bridge" aria-label="International conference">
      <div className="conf-bridge__media">
        <img
          src="assets/conference-anatomy-talk.jpg"
          alt="Aesthefora faculty presenting at an international anatomy & aesthetic medicine conference"
          loading="lazy" />
        
        <div className="conf-bridge__shade" aria-hidden="true"></div>
      </div>
      <div className="conf-bridge__caption">
        <div className="eyebrow eyebrow--blue">— {t('conf.eb')}</div>
        <h3 className="conf-bridge__title">{t('conf.title')}</h3>
        <div className="conf-bridge__meta mono">{t('conf.meta')}</div>
      </div>
    </section>);

}

// ───── §03 Exclusivity ─────────────────────────────────────────

function HomeExclusivity() {
  const { t } = useT();
  const items = ['01', '02', '03', '04', '05', '06'];
  return (
    <section className="section section--ink">
      <div className="section__head section__head--invert">
        <div className="section__meta">
          <div className="section__no" style={{ color: 'rgba(255,255,255,0.55)' }}>§ 03</div>
          <div className="eyebrow eyebrow--invert">{t('home.s03.eb')}</div>
        </div>
        <div>
          <h2 className="display-m section__title">{t('home.s03.title')}</h2>
        </div>
      </div>
      <div className="excl-grid">
        {items.map((n, i) =>
        <Reveal key={n} delay={i * 50}>
            <div className="excl-row">
              <span className="excl-row__no">{n}</span>
              <span className="excl-row__label">{t(`excl.${n}`)}</span>
              <span className="excl-row__bar" aria-hidden="true"></span>
            </div>
          </Reveal>
        )}
      </div>
      <div className="shell excl-micro">
        <span aria-hidden="true">※</span> {t('excl.micro')}
      </div>
    </section>);

}

// ───── §04 Our Approach ────────────────────────────────────────

function HomeApproach() {
  const { t } = useT();
  const items = ['01', '02', '03'];
  return (
    <section className="section section--wave">
      <Reveal>
        <div className="values">
          {items.map((no) =>
          <div className="value" key={no}>
              <div className="value__no">— {no}</div>
              <h3 className="value__title">{t(`app.${no}.t`)}</h3>
              <p className="value__body">{t(`app.${no}.b`)}</p>
            </div>
          )}
        </div>
      </Reveal>
    </section>);

}

// ───── §05 Global Network with Map ─────────────────────────────

const MAP_CITIES = [
{ name: 'Seoul', lng: 126.97, lat: 37.56, anchor: 'start' },
{ name: 'Bangkok', lng: 100.50, lat: 13.75, anchor: 'start' },
{ name: 'Ho Chi Minh', lng: 106.66, lat: 10.78, anchor: 'end' },
{ name: 'Warsaw', lng: 21.01, lat: 52.23, anchor: 'start' },
{ name: 'Dubai', lng: 55.27, lat: 25.20, anchor: 'start' },
{ name: 'Kyiv', lng: 30.52, lat: 50.45, anchor: 'start' },
{ name: 'Rome', lng: 12.49, lat: 41.90, anchor: 'end' },
{ name: 'Madrid', lng: -3.70, lat: 40.42, anchor: 'end' },
{ name: 'New York', lng: -74.00, lat: 40.71, anchor: 'end' },
{ name: 'Mexico City', lng: -99.13, lat: 19.43, anchor: 'end' },
{ name: 'São Paulo', lng: -46.63, lat: -23.55, anchor: 'start' }];


function HomeNetwork() {
  const { t } = useT();
  const stats = [1, 2, 3, 4];
  return (
    <section className="section section--map">
      <SectionHead
        no="05"
        eyebrow={t('home.s05.eb')}
        title={t('home.s05.title')}
        kicker={t('home.s05.kicker')} />
      
      <Reveal>
        <WorldMap />
      </Reveal>
      <Reveal>
        <div className="stats">
          {stats.map((i) =>
          <div className="stat" key={i}>
              <div className="stat__no">{t(`stat.${i}.no`)}<sup>{t(`stat.${i}.sup`)}</sup></div>
              <div className="stat__label">{t(`stat.${i}.label`)}</div>
            </div>
          )}
        </div>
      </Reveal>
    </section>);

}

function WorldMap() {
  // Equirectangular projection into 1000×500 viewBox
  const W = 1000,H = 500;
  const project = (lng, lat) => [(lng + 180) / 360 * W, (90 - lat) / 180 * H];

  // Graticule lines
  const lats = [-60, -30, 0, 30, 60];
  const lngs = [-150, -120, -90, -60, -30, 0, 30, 60, 90, 120, 150];

  return (
    <div className="worldmap">
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        {/* Dot-grid representing continents — very faint */}
        <DotGridLand />

        {/* Graticule */}
        <g className="worldmap__grat">
          {lats.map((la) => {
            const [, y] = project(0, la);
            return <line key={`la${la}`} x1="0" x2={W} y1={y} y2={y} />;
          })}
          {lngs.map((lo) => {
            const [x] = project(lo, 0);
            return <line key={`lo${lo}`} x1={x} x2={x} y1="0" y2={H} />;
          })}
        </g>

        {/* Connection lines between cities */}
        <g className="worldmap__conn">
          {MAP_CITIES.map((a, i) =>
          MAP_CITIES.slice(i + 1).map((b, j) => {
            const [ax, ay] = project(a.lng, a.lat);
            const [bx, by] = project(b.lng, b.lat);
            return <line key={`${i}-${j}`} x1={ax} y1={ay} x2={bx} y2={by} />;
          })
          )}
        </g>

        {/* City markers */}
        <g className="worldmap__markers">
          {MAP_CITIES.map((c) => {
            const [x, y] = project(c.lng, c.lat);
            return (
              <g key={c.name} transform={`translate(${x},${y})`}>
                <circle r="9" className="worldmap__halo" />
                <circle r="3" className="worldmap__dot" />
                <text
                  x={c.anchor === 'end' ? -10 : 10}
                  y="4"
                  textAnchor={c.anchor}
                  className="worldmap__label">
                  {c.name}</text>
              </g>);

          })}
        </g>
      </svg>
    </div>);

}

// A very loose dot-grid approximation of major land masses.
// Each row encodes runs of (skip, count) so we don't ship a full bitmap.
// Hand-tuned to read as "continents" without being a precise atlas.
function DotGridLand() {
  // 50×25 grid of dots, each cell 20×20 px in 1000×500
  // Pattern: 1 = land-ish, . = water. Tuned by hand for editorial silhouette.
  const ROWS = [
  /* y=10 */'........................................AAAAAAA..',
  /* y=30 */'....AAAAAAAA..............AAAAAAA....AAAAAAAAAA..',
  /* y=50 */'..AAAAAAAAAAA............AAAAAAAAAAAAAAAAAAAAAAA.',
  /* y=70 */'..AAAAAAAAAAAAAA.......AAAAAAAAAAAAAAAAAAAAAAAA..',
  /* y=90 */'...AAAAAAAAAAAAA......AAAAAAAAAAAAAAAAAAAAAAA....',
  /* y=110*/'....AAAAAAAAAAAA.....AAAAAAAAAAAAAAAAAAAAA.......',
  /* y=130*/'.....AAAAAAAAAA......AAAAAAAAAAAAAAAAAAA.AAA.....',
  /* y=150*/'......AAAAAAAA........AAAAAAAAAAAAAAA....AAAA....',
  /* y=170*/'.......AAAAAA.........AAAAAAAAAAAA......AAAAAAA..',
  /* y=190*/'........AAA............AAAAAAAAAA......AAAAAAA...',
  /* y=210*/'........AA.............AAAAAAAA......AAAAAAAA....',
  /* y=230*/'.........A.............AAAAAAA......AAAAAA.......',
  /* y=250*/'.........AA............AAAAAA......AAAAA.........',
  /* y=270*/'.........AAA...........AAAAA......AAAAA..........',
  /* y=290*/'.........AAA...........AAAA......AAAA............',
  /* y=310*/'.........AAA............AA......AA...............',
  /* y=330*/'.........AAA.....................................',
  /* y=350*/'..........AA.....................AA.AAAA.........',
  /* y=370*/'..........A.....................AAAAAAAAA........',
  /* y=390*/'..........A....................AAAAAAAAA.........',
  /* y=410*/'...........................................AAAAA',
  /* y=430*/'..............................................AA',
  /* y=450*/'..................................................',
  /* y=470*/'..................................................',
  /* y=490*/'..................................................'];

  const dots = [];
  ROWS.forEach((row, r) => {
    for (let c = 0; c < row.length; c++) {
      if (row[c] !== '.') {
        dots.push(<circle key={`${r}-${c}`} cx={c * 20 + 10} cy={r * 20 + 10} r="1.6" />);
      }
    }
  });
  return <g className="worldmap__land">{dots}</g>;
}

// ───── §06 Research teaser ─────────────────────────────────────

function HomeResearch({ onNavigate }) {
  const { t } = useT();
  const items = [
  { year: '2025', tag: 'Clinical', key: 'pub.1' },
  { year: '2024', tag: 'Anatomy', key: 'pub.4' },
  { year: '2024', tag: 'Cadaver', key: 'pub.7' }];

  return (
    <section className="section">
      <SectionHead no="06" eyebrow={t('home.s06.eb')} title={t('home.s06.title')} kicker={t('home.s06.kicker')} />
      <div className="shell" style={{ marginTop: 56 }}>
        {items.map((p, i) =>
        <a key={i} href="#research" onClick={(e) => {e.preventDefault();onNavigate('research');}} className="pub-row" style={{ textDecoration: 'none', color: 'inherit' }}>
            <div className="pub-row__year">{p.year}</div>
            <div className="pub-row__title">{t(`${p.key}.t`)}</div>
            <div className="pub-row__authors">{t(`${p.key}.a`)}</div>
            <div className="pub-row__tag">{t(`tag.${p.tag}`)}</div>
            <div className="pub-row__cta">{t('cta.read')} →</div>
          </a>
        )}
      </div>
      <div className="shell" style={{ marginTop: 32 }}>
        <a href="#research" onClick={(e) => {e.preventDefault();onNavigate('research');}} className="btn btn--ghost">
          {t('cta.allPubs')} <span className="btn__arrow">→</span>
        </a>
      </div>
    </section>);

}

// ════════════════════════════════════════════════════════════════════
// ABOUT
// ════════════════════════════════════════════════════════════════════

function AboutPage() {
  const { t } = useT();
  return (
    <div className="page" data-screen-label="About">
      <section className="section section--first">
        <div className="shell" style={{ textAlign: "center" }}>
          <h1 className="display-l" style={{ margin: 0, width: "100%" }}>ABOUT US</h1>
        </div>
        <div className="shell about-v2__grid" style={{ marginTop: 64 }}>
          <Placeholder
            src="assets/about-amiac-team.jpg"
            label={t('about.hq')}
            alt="Aesthefora team at ARCHE booth — AMIAC speaker session"
            meta="01 · 4:5"
            ratio="4/5"
            objectPosition="center 30%" />

          <div>
            <p className="lede">{t('about.p1')}</p>
            <p className="body" style={{ marginTop: 24, maxWidth: '56ch' }}>{t('about.p2')}</p>
            <p className="body" style={{ marginTop: 16, maxWidth: '56ch' }}>{t('about.p3')}</p>
            <p className="body" style={{ marginTop: 16, maxWidth: '56ch' }}>{t('about.p4')}</p>
            <p className="body" style={{ marginTop: 16, maxWidth: '56ch' }}>{t('about.p5')}</p>
          </div>
        </div>
      </section>

      <section className="section section--wave">
        <div className="shell" style={{ textAlign: "center" }}>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "baseline", gap: 16, marginBottom: 18, flexWrap: "wrap" }}>
            <div className="section__no">§ 02</div>
            <div className="eyebrow eyebrow--blue">{t('about.approach.eb')}</div>
          </div>
          <h2 className="display-m section__title" style={{ margin: "0 auto", maxWidth: "24ch" }}>{t('about.approach.title')}</h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: '72ch', marginLeft: "auto", marginRight: "auto" }}>{t('about.approach.body')}</p>
        </div>
      </section>
    </div>);

}

// ════════════════════════════════════════════════════════════════════
// CLINICAL SOLUTIONS
// ════════════════════════════════════════════════════════════════════

function ClinicalSolutionsPage() {
  const { t } = useT();
  const [openProduct, setOpenProduct] = useStateP(null);

  // Helper: collect numbered i18n keys into an array (e.g. clin.arche.spec.1..N)
  const collect = (prefix, max = 10) => {
    const out = [];
    for (let i = 1; i <= max; i++) {
      const v = t(`${prefix}.${i}`);
      if (v && v !== `${prefix}.${i}`) out.push(v);
    }
    return out;
  };

  const products = [
  {
    key: 'arche',
    pill: 'Regeneration',
    title: 'ARCHE',
    titleFull: 'ARCHE',
    sub: 'Polynucleotide System',
    img: 'assets/arche.jpg',
    imgPos: 'center 35%',
    detailSub: t('clin.arche.sub'),
    specLabel: t('clin.detail.spec'),
    spec: collect('clin.arche.spec'),
    adv: collect('clin.arche.adv'),
    apps: collect('clin.arche.apps')
  },
  {
    key: 'sihler',
    pill: 'Cosmeceutical',
    title: 'SIHLER',
    titleFull: 'SIHLER',
    sub: 'In-Clinic Formulations',
    img: 'assets/sihler.png',
    imgPos: 'center 55%',
    detailSub: t('clin.sihler.sub'),
    specLabel: t('clin.detail.details'),
    spec: collect('clin.sihler.spec'),
    adv: collect('clin.sihler.adv'),
    apps: collect('clin.sihler.apps')
  },
  {
    key: 'ultra',
    pill: 'Energy-Based',
    title: 'ULTRATHERMA',
    titleFull: t('clin.ultra.title'),
    sub: 'BF-66 · RF Body System',
    img: 'assets/ultratherma.jpg',
    imgPos: 'center center',
    detailSub: t('clin.ultra.sub'),
    specLabel: t('clin.detail.details'),
    spec: collect('clin.ultra.spec'),
    adv: collect('clin.ultra.adv'),
    apps: collect('clin.ultra.apps')
  }];

  // ESC key closes modal
  React.useEffect(() => {
    if (!openProduct) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpenProduct(null); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [openProduct]);

  const renderCardDetail = (p) =>
    <div className="clin-card__detail">
      <div className="clin-card__detail-eb mono">— {p.titleFull}</div>
      <p className="clin-card__detail-sub">{p.detailSub}</p>
      <div className="clin-card__detail-section">
        <div className="clin-card__detail-h mono">{p.specLabel}</div>
        <ul className="clin-card__detail-list">
          {p.spec.map((s, i) => <li key={i}>{s}</li>)}
        </ul>
      </div>
      <div className="clin-card__detail-cta mono">{t('clin.detail.cta')} →</div>
    </div>;

  return (
    <div className="page" data-screen-label="Clinical Solutions">
      <section className="section section--first clinical-hero">
        <div className="clinical-hero__top">
          <div className="section__no" style={{ padding: "13px" }}></div>
        </div>

        <h1 className="clinical-hero__title">Clinical<br />Solutions</h1>

        <div className="clinical-hero__stage">
          <div className="clinical-hero__centerpiece" aria-hidden="true">
            <img src="assets/arche.jpg" alt="" />
          </div>
          <div className="clinical-hero__cards">
            {products.map((p, i) =>
            <article
              className="clin-card clin-card--clickable"
              key={p.title}
              onClick={() => setOpenProduct(p)}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpenProduct(p); } }}>
                <div className="clin-card__pill">{p.pill}</div>
                <div className="clin-card__body">
                  {p.img ?
                <img
                  src={p.img}
                  alt={p.title}
                  className="clin-card__visual"
                  style={{ objectPosition: p.imgPos }} /> :


                <div className="clin-card__visual clin-card__visual--mark" aria-hidden="true">
                      <svg viewBox="0 0 48 48" width="44" height="44">
                        <line x1="24" y1="10" x2="24" y2="38" stroke="currentColor" strokeWidth="2" />
                        <line x1="10" y1="24" x2="38" y2="24" stroke="currentColor" strokeWidth="2" />
                      </svg>
                    </div>
                }
                  {renderCardDetail(p)}
                </div>
                <div className="clin-card__foot">
                  <div className="clin-card__title">{p.title}</div>
                  <div className="clin-card__sub mono">{p.sub}</div>
                </div>
                <div className="clin-card__index mono">— 0{i + 1}</div>
              </article>
            )}
          </div>
        </div>

        <div className="shell clinical-hero__micro">
          <div className="mono" style={{ textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--blue)', borderTop: '1px solid var(--line)', paddingTop: 14 }}>
            — {t('clin.micro')}
          </div>
        </div>
      </section>

      {openProduct && <ProductModal product={openProduct} onClose={() => setOpenProduct(null)} />}
    </div>);

}

function ProductModal({ product: p, onClose }) {
  const { t } = useT();
  return (
    <React.Fragment>
      <div className="product-modal__backdrop" onClick={onClose} aria-hidden="true" />
      <div className="product-modal" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
        <button
          type="button"
          className="product-modal__close"
          aria-label={t('clin.detail.close')}
          onClick={onClose}>
          ✕
        </button>
        <div className="product-modal__pill">{p.pill}</div>
        <h2 id="product-modal-title" className="product-modal__title">{p.titleFull}</h2>
        <p className="product-modal__sub">{p.detailSub}</p>

        <div className="product-modal__section">
          <div className="product-modal__h mono">{p.specLabel}</div>
          <ul className="product-modal__list">
            {p.spec.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>

        <div className="product-modal__section">
          <div className="product-modal__h mono">{t('clin.detail.adv')}</div>
          <ul className="product-modal__list">
            {p.adv.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>

        <div className="product-modal__section">
          <div className="product-modal__h mono">{t('clin.detail.apps')}</div>
          <ul className="product-modal__list product-modal__list--apps">
            {p.apps.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>
      </div>
    </React.Fragment>);
}

// ════════════════════════════════════════════════════════════════════
// EDUCATION
// ════════════════════════════════════════════════════════════════════

function EducationPage({ onNavigate }) {
  const { t } = useT();
  const formats = ['01', '02', '03', '04', '05', '06'];
  return (
    <div className="page" data-screen-label="Education">
      <section className="section section--first">
        <div className="hero hero--education hero--education-stacked">
          <div className="hero--education__copy">
            <div className="eyebrow eyebrow--blue">{t('edu.eb')}</div>
            <h1 className="display-xl" style={{ marginTop: 28, width: "100%", maxWidth: "1090px", fontSize: "clamp(2.5rem, 9vw, 99px)" }}>
              {t('edu.title.l1')}<br />{t('edu.title.l2')}
            </h1>
            <p className="lede" style={{ marginTop: 32, maxWidth: '52ch' }}>{t('edu.body')}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
              <a href="#partnership" onClick={(e) => {e.preventDefault();onNavigate('partnership');}} className="btn btn--primary">
                {t('cta.explore')} <span className="btn__arrow">→</span>
              </a>
            </div>
          </div>
          <div className="hero--education__image">
            <Placeholder
              src="assets/cadaver-lab.jpg"
              label="CADAVER LAB"
              alt="Cadaver lab — international hands-on training"
              ratio="3/2"
              meta="01"
              objectPosition="center 40%" />
            
            <div className="mono" style={{ marginTop: 16 }}>{t('edu.note')}</div>
          </div>
        </div>
      </section>

      <section className="section section--wave">
        <SectionHead no="02" eyebrow={t('edu.formats.eb')} title={t('edu.formats.title')} />
        <div className="formats">
          {formats.map((no, i) =>
          <Reveal key={no} delay={i * 50}>
              <div className="format">
                <div className="format__no">{no}</div>
                <div className="format__label">{t(`edu.f.${no}`)}</div>
              </div>
            </Reveal>
          )}
        </div>
      </section>
    </div>);

}

// ════════════════════════════════════════════════════════════════════
// RESEARCH
// ════════════════════════════════════════════════════════════════════

const PUBLICATIONS = [
{
  n: '01',
  title: 'Comparative Efficacy of Topical Chitosan and Minoxidil in Hair Loss: A Controlled Study With Microneedling',
  journal: 'Journal of Craniofacial Surgery',
  year: '2025',
  tag: 'Clinical',
  file: 'assets/papers/01-chitosan-minoxidil-hair-loss.pdf',
  featured: true
},
{
  n: '02',
  title: 'Recent Developments in Antibacterial and Antifungal Chitosan and Its Derivatives',
  journal: 'Carbohydrate Polymers',
  year: '2017',
  tag: 'Review',
  file: 'assets/papers/01b-chitosan-antibacterial-antifungal.pdf'
},
{
  n: '03',
  title: 'ARCHE in Dermatology — Clinical Applications of Polynucleotide Regeneration',
  journal: 'Clinical Dossier',
  year: '2026',
  tag: 'Clinical',
  file: 'assets/papers/02-arche-in-dermatology.pdf'
},
{
  n: '04',
  title: 'Wnt-Dependent De Novo Hair Follicle Regeneration in Adult Mouse Skin After Wounding',
  journal: 'Nature',
  year: '2007',
  tag: 'Scientific',
  file: 'assets/papers/03-wnt-hair-follicle-regeneration.pdf'
},
{
  n: '05',
  title: 'Microneedling Combined with Chitosan for Acne Vulgaris Treatment: A Prospective Case Series',
  journal: 'Dermatologic Therapy',
  year: '2024',
  tag: 'Clinical',
  file: 'assets/papers/04-microneedling-chitosan-acne.pdf'
},
{
  n: '06',
  title: 'Application of Chitosan-Based Hydrogel in Promoting Wound Healing: A Review',
  journal: 'Polymers',
  year: '2023',
  tag: 'Review',
  file: 'assets/papers/05-chitosan-hydrogel-wound-healing.pdf'
},
{
  n: '07',
  title: '2% Chitosan in Facial Atopic Dermatitis: A Case Series',
  journal: 'Manuscript',
  year: '2025',
  tag: 'Clinical',
  file: 'assets/papers/06-chitosan-atopic-dermatitis.docx'
},
{
  n: '08',
  title: 'Exploring the Hair Growth–Wound Healing Connection: Anagen Phase Promotes Wound Re-Epithelialization',
  journal: 'Journal of Investigative Dermatology',
  year: '2024',
  tag: 'Scientific',
  file: 'assets/papers/07-hair-growth-wound-healing.pdf'
},
{
  n: '09',
  title: 'Skin Boosters: Definitions and Varied Classifications',
  journal: 'Journal of Cosmetic Dermatology',
  year: '2024',
  tag: 'Review',
  file: 'assets/papers/08-skin-boosters-classifications.pdf'
},
{
  n: '10',
  title: 'Chitosan Preparations for Wounds and Burns: Antimicrobial and Wound-Healing Effects',
  journal: 'Expert Review of Anti-infective Therapy',
  year: '2011',
  tag: 'Scientific',
  file: 'assets/papers/09-chitosan-wounds-burns.pdf'
},
{
  n: '11',
  title: 'Hair Extensions: Anatomic, Biological, and Clinical Considerations',
  journal: 'Journal of Cosmetic Dermatology',
  year: '2024',
  tag: 'Clinical',
  file: 'assets/papers/10-hair-extensions-anatomy.pdf'
},
{
  n: '12',
  title: 'Chitosan Drives Anti-Inflammatory Macrophage Polarisation and Pro-Inflammatory Dendritic Cell Stimulation',
  journal: 'European Cells and Materials',
  year: '2012',
  tag: 'Scientific',
  file: 'assets/papers/11-chitosan-macrophage-dc.pdf'
},
{
  n: '13',
  title: 'Topical Chitosan Dressing to Reduce Folliculitis After Microcoring Procedures',
  journal: 'Manuscript',
  year: '2025',
  tag: 'Clinical',
  file: 'assets/papers/12-chitosan-folliculitis-microcoring.docx'
},
{
  n: '14',
  title: 'Chitosan Clinical Application: A Literature Review',
  journal: 'Manuscript',
  year: '2025',
  tag: 'Review',
  file: 'assets/papers/13-chitosan-clinical-review.docx'
}];


function ResearchPage({ onNavigate }) {
  const { t } = useT();
  const otherPubs = PUBLICATIONS.filter((p) => !p.featured);
  const [showAll, setShowAll] = useStateP(false);
  const PREVIEW_COUNT = 3;
  const visiblePubs = showAll ? otherPubs : otherPubs.slice(0, PREVIEW_COUNT);

  // Journals we've published in — logo marquee (loops twice for seamless scroll)
  const journals = [
  { name: 'European Journal of Plastic Surgery', src: 'assets/journals/european-journal-plastic-surgery.png' },
  { name: 'Aesthetic Plastic Surgery', src: 'assets/journals/aesthetic-plastic-surgery.png' },
  { name: 'JAMA Network Open', src: 'assets/journals/jama-network-open.png' },
  { name: 'JPRAS', src: 'assets/journals/jpras.png' },
  { name: 'Skin Research & Technology', src: 'assets/journals/skin-research-technology.png' },
  { name: 'Frontiers in Medicine', src: 'assets/journals/frontiers-in-medicine.png' },
  { name: 'PRS Global Open', src: 'assets/journals/prs-global-open.png' },
  { name: 'Anatomy & Cell Biology', src: 'assets/journals/acb-anatomy-cell-biology.png' },
  { name: 'Clinical Anatomy', src: 'assets/journals/clinical-anatomy.png' },
  { name: 'Journal of Maxillofacial and Oral Surgery', src: 'assets/journals/jmaxillofacial-oral-surgery.png' },
  { name: 'Surgical & Radiologic Anatomy', src: 'assets/journals/surgical-radiologic-anatomy.png' },
  { name: 'Plastic and Reconstructive Surgery', src: 'assets/journals/plastic-reconstructive-surgery.png' },
  { name: 'Nature Scientific Reports', src: 'assets/journals/nature-scientific-reports.png' },
  { name: 'Archives of Plastic Surgery (APS)', src: 'assets/journals/aps-archives-plastic-surgery.png' },
  { name: 'Plastic and Aesthetic Research', src: 'assets/journals/plastic-aesthetic-research.png' },
  { name: 'Journal of Cosmetic Dermatology', src: 'assets/journals/jcd-cosmetic-dermatology.png' },
  { name: 'Muscle & Nerve', src: 'assets/journals/muscle-nerve.png' },
  { name: 'Regional Anesthesia & Pain Medicine', src: 'assets/journals/regional-anesthesia-pain-medicine.png' }];


  return (
    <div className="page" data-screen-label="Research">
      <section className="section section--first research-hero-section">
        <div className="research-hero">
          <div className="eyebrow eyebrow--blue">— {t('res.eb2')}</div>
          <h1 className="display-l research-hero__title" style={{ margin: 0, padding: 0, lineHeight: 1.05, letterSpacing: "-0.5px", fontSize: "clamp(2rem, 5vw, 44px)" }}>{t('res.heroTitle')}</h1>
          <p className="lede research-hero__kicker">{t('res.heroBody1')}</p>
          <p className="lede research-hero__kicker" style={{ marginTop: 8 }}>
            {t('res.heroBody2.pre')}<strong>{t('res.heroBody2.bold')}</strong>{t('res.heroBody2.post')}
          </p>
          <a
            href="#partnership"
            onClick={(e) => { e.preventDefault(); if (onNavigate) onNavigate('partnership'); }}
            className="btn btn--primary research-hero__cta"
            style={{ marginTop: 16 }}>
            {t('res.cta.consult')} <span className="btn__arrow">→</span>
          </a>
        </div>
      </section>

      <section className="section section--tight">
        <div className="shell">
          <div className="featured-pub">
            <div className="featured-pub__paper">
              <img
                src="assets/research-paper-craniofacial.png"
                alt="Comparative Efficacy of Topical Chitosan and Minoxidil in Hair Loss — Journal of Craniofacial Surgery, 2025"
                loading="lazy" />
              
              <div className="featured-pub__paper-shadow" aria-hidden="true"></div>
            </div>
            <div className="featured-pub__meta">
              <div className="eyebrow eyebrow--blue">— {t('res.featured.eb')}</div>
              <h3 className="featured-pub__title">
                Comparative Efficacy of Topical Chitosan and Minoxidil in Hair Loss: A Controlled Study With Microneedling
              </h3>
              <div className="featured-pub__journal mono">
                The Journal of Craniofacial Surgery &nbsp;·&nbsp; 2025
              </div>
              <p className="featured-pub__authors">
                Jovian Wan, Olena Sydorchuk, Irwan Junawanto, Wonseok Choi, Nil Namthongton, Putri Hendira, Ardhiah Iswanda Putri, Pattra Chansataporn, Ruri Pamela, Kyu-Ho Yi
              </p>
              <ul className="featured-pub__keys">
                <li><span className="mono">— 01</span> {t('res.featured.k1')}</li>
                <li><span className="mono">— 02</span> {t('res.featured.k2')}</li>
                <li><span className="mono">— 03</span> {t('res.featured.k3')}</li>
              </ul>
              <div className="featured-pub__cta-row">
                <a className="btn btn--primary" href="assets/papers/01-chitosan-minoxidil-hair-loss.pdf" rel="noopener noreferrer">
                  {t('res.featured.cta')} <span className="btn__arrow">→</span>
                </a>
                <span className="mono featured-pub__doi">DOI · 10.1097/SCS.0000000000012051</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Our Services — 2-column grid */}
      <section className="section section--tight">
        <div className="shell">
          <div className="eyebrow eyebrow--blue" style={{ marginBottom: 20 }}>— {t('res.svc.title')}</div>
          <div className="svc-grid">
            <div className="svc-col">
              <h3 className="svc-col__h">{t('res.svc.phys.title')}</h3>
              <ul className="svc-col__list">
                {[1,2,3,4,5,6,7].map((n) => <li key={n}>{t(`res.svc.phys.${n}`)}</li>)}
              </ul>
            </div>
            <div className="svc-col">
              <h3 className="svc-col__h">{t('res.svc.brand.title')}</h3>
              <ul className="svc-col__list">
                {[1,2,3,4,5,6,7,8].map((n) => <li key={n}>{t(`res.svc.brand.${n}`)}</li>)}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Publications list — clickable titles open the PDF in a new tab */}
      <section className="section section--tight">
        <div className="shell">
          <div className="pubs-head">
            <div className="eyebrow eyebrow--blue">— {t('res.more.eb')}</div>
            <span className="mono pubs-head__count">{t('res.more.count', { n: otherPubs.length })}</span>
          </div>
          <ol className="pubs-list">
            {visiblePubs.map((p) =>
            <li key={p.n} className="pubs-row">
                <a href={p.file} rel="noopener noreferrer" className="pubs-row__link">
                  <span className="pubs-row__n mono">— {p.n}</span>
                  <span className="pubs-row__title">{p.title}</span>
                  <span className="pubs-row__journal mono">{p.journal}</span>
                  <span className="pubs-row__year mono">{p.year}</span>
                  <span className="pubs-row__tag mono">{p.tag}</span>
                  <span className="pubs-row__arrow" aria-hidden="true">↗</span>
                </a>
              </li>
            )}
          </ol>
          {otherPubs.length > PREVIEW_COUNT &&
          <button
            type="button"
            className="pubs-toggle"
            onClick={() => setShowAll((v) => !v)}
            aria-expanded={showAll}>

              <span className="pubs-toggle__label mono">
                {showAll ? t('res.more.showFewer') : t('res.more.readMore', { n: otherPubs.length - PREVIEW_COUNT })}
              </span>
              <span className={`pubs-toggle__chev ${showAll ? 'is-up' : ''}`} aria-hidden="true">↓</span>
            </button>
          }
        </div>
      </section>

      {/* Why Work With Aesthefora — 4-column boxes */}
      <section className="section section--tight">
        <div className="shell">
          <div className="eyebrow eyebrow--blue" style={{ marginBottom: 20 }}>— {t('res.why.title')}</div>
          <div className="why-grid">
            {[1,2,3,4].map((n) =>
              <div className="why-box" key={n}>
                <h3 className="why-box__h">{t(`res.why.${n}.t`)}</h3>
                <p className="why-box__b">{t(`res.why.${n}.b`)}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Published-in marquee */}
      <section className="section section--tight journal-marquee-section">
        <div className="shell">
          <div className="eyebrow eyebrow--blue" style={{ marginBottom: 18 }}>— {t('res.pubIn')}</div>
        </div>
        <div className="journal-marquee" aria-label="Peer-reviewed journals where Aesthefora faculty have published">
          <div className="journal-marquee__track">
            {[...journals, ...journals].map((j, i) =>
            <span className="journal-marquee__item" key={i}>
                <img src={j.src} alt={j.name} className="journal-marquee__logo" loading="lazy" />
              </span>
            )}
          </div>
        </div>
      </section>
    </div>);

}

function FilterChips({ label, options, value, onChange, labelForOption }) {
  return null;
}

// ════════════════════════════════════════════════════════════════════
// FACULTY
// ════════════════════════════════════════════════════════════════════

function FacultyPage() {
  const { t } = useT();
  return (
    <div className="page" data-screen-label="Faculty">
      <section className="section section--first faculty-hero">
        <div className="section__head">
          <div className="section__meta">
            <div className="section__no"></div>
          </div>
          <div>
            <h1 className="faculty-hero__title">{t('fac.title.l1')} {t('fac.title.l2')}<br />{t('fac.title.l3')}</h1>
            <p className="lede faculty-hero__kicker">{t('fac.kicker')}</p>
          </div>
        </div>
      </section>

      <section className="section section--tight">
        <div className="onboard-list">
          {FACULTY_MEMBERS.map((m, i) => (
            <Reveal key={m.name} delay={i * 60}>
              <article className="onboard-row">
                <div className="onboard-row__media">
                  <img src={m.src} alt={m.name}
                    style={{ objectPosition: m.objectPosition || 'center top' }}
                    loading="lazy" />
                </div>
                <div className="onboard-row__body">
                  <h3 className="onboard-row__name">{m.name}</h3>
                  <div className="onboard-row__role mono">{m.role}</div>
                  <div className="onboard-row__bio">
                    <p>{m.bio}</p>
                  </div>
                  <a href={`mailto:info@aesthefora.com?subject=Inquiry — ${m.name}`} className="onboard-row__cta">
                    {t('fac.learnMore')}
                  </a>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </section>
    </div>);

}

// ════════════════════════════════════════════════════════════════════
// CONTACT
// ════════════════════════════════════════════════════════════════════

const CONTACT_INFO = {
  email: 'info@aesthefora.com',
  tel: '+82 10 2785 1996',
  addressLines: [
  'Aesthefora Co., Ltd.',
  '14F, 318 Gangnam-daero, Gangnam-gu',
  'Seoul · 06252 · Republic of Korea'],

  mapEmbed: 'https://www.google.com/maps?q=14F%20318%20Gangnam-daero%20Gangnam-gu%20Seoul&output=embed',
  instagram: 'https://instagram.com/aesthefora',
  facebook: 'https://facebook.com/aesthefora'
};

function ContactPage() {
  const { t } = useT();
  const [form, setForm] = useStateP({ name: '', country: '', number: '', email: '', subject: '', message: '', file: null, agree: false });
  const [sent, setSent] = useStateP(false);
  const [submitting, setSubmitting] = useStateP(false);
  const [submitError, setSubmitError] = useStateP('');
  const update = (k) => (e) => setForm((d) => ({ ...d, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));
  const onFile = (e) => setForm((d) => ({ ...d, file: e.target.files?.[0] || null }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.country || !form.email || !form.subject || !form.agree) return;
    if (submitting) return;
    setSubmitting(true);
    setSubmitError('');
    try {
      const fd = new FormData();
      fd.append('access_key', '48b5c712-600c-450c-8a73-f3c3abbb78a5');
      fd.append('subject', '[Aesthefora] New Contact Inquiry');
      fd.append('from_name', 'Aesthefora Contact Form');
      fd.append('name', form.name);
      fd.append('country', form.country);
      fd.append('number', form.number || '');
      fd.append('email', form.email);
      fd.append('inquiry_subject', form.subject);
      fd.append('message', form.message || '');
      if (form.file) fd.append('attachment', form.file);
      fd.append('botcheck', e.target.botcheck && e.target.botcheck.checked ? 'true' : '');
      const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: fd });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.message || t('cv.f.error'));
      }
      setSent(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (err) {
      setSubmitError(err.message || t('cv.f.error'));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="page" data-screen-label="Contact">
      <section className="section section--first">
        <h1 className="contact-v2__title">{t('cv.title')}</h1>
      </section>

      <section className="section section--tight contact-v2">
        <div className="shell">
          <div className="contact-v2__head">
            <h2 className="contact-v2__h2">{t('cv.office')}</h2>
          </div>

          <div className="contact-v2__map">
            <iframe
              title="Aesthefora HQ map"
              src={CONTACT_INFO.mapEmbed}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen></iframe>
          </div>

          <dl className="contact-v2__details">
            <div className="contact-v2__row">
              <dt>{t('cv.addr')}</dt>
              <dd>
                {CONTACT_INFO.addressLines.map((l, i) =>
                <React.Fragment key={i}>{l}{i < CONTACT_INFO.addressLines.length - 1 && <br />}</React.Fragment>
                )}
              </dd>
            </div>
            <div className="contact-v2__row">
              <dt>{t('cv.tel')}</dt>
              <dd><a href={`tel:${CONTACT_INFO.tel.replace(/\s/g, '')}`}>{CONTACT_INFO.tel}</a></dd>
            </div>
            <div className="contact-v2__row">
              <dt>{t('cv.email')}</dt>
              <dd><a href={`mailto:${CONTACT_INFO.email}`}>{CONTACT_INFO.email}</a></dd>
            </div>
          </dl>

          <div className="contact-v2__social">
            <div className="contact-v2__social-label">{t('cv.follow')}</div>
            <div className="contact-v2__social-icons">
              <a href={CONTACT_INFO.instagram} aria-label="Instagram" target="_blank" rel="noopener noreferrer">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                  <rect x="3" y="3" width="18" height="18" rx="5" />
                  <circle cx="12" cy="12" r="4" />
                  <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
                </svg>
              </a>
              <a href={CONTACT_INFO.facebook} aria-label="Facebook" target="_blank" rel="noopener noreferrer">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M13.5 21v-7.5h2.5l.5-3.5h-3V8c0-1 .3-1.7 1.7-1.7H17V3.2C16.6 3.1 15.7 3 14.7 3c-2.2 0-3.7 1.4-3.7 3.8V10H8.5v3.5H11V21h2.5z" />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--tight contact-v2">
        <div className="shell">
          <div className="contact-v2__head">
            <h2 className="contact-v2__h2">{t('cv.leave')}</h2>
          </div>

          {sent ?
          <div className="contact-v2__success">
              <div style={{ width: 44, height: 44, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'var(--blue)', color: '#fff', marginBottom: 18 }}>
                <svg width="20" height="14" viewBox="0 0 22 16" fill="none"><path d="M1 8.5l6 6L21 1" stroke="currentColor" strokeWidth="1.6" /></svg>
              </div>
              <h3 className="display-s" style={{ marginBottom: 12 }}>{t('cv.success.title')}</h3>
              <p className="lede">{t('cv.success.pre')}<strong>{form.email}</strong>{t('cv.success.post')}</p>
            </div> :

          <form className="contact-form" onSubmit={submit} noValidate>
              <div className="contact-form__field">
                <label htmlFor="cf-name">{t('cv.f.name')} <span className="contact-form__req" aria-hidden="true">●</span></label>
                <input id="cf-name" type="text" required value={form.name} onChange={update('name')} />
              </div>
              <div className="contact-form__field">
                <label htmlFor="cf-country">{t('cv.f.country')} <span className="contact-form__req" aria-hidden="true">●</span></label>
                <input id="cf-country" type="text" required value={form.country} onChange={update('country')} />
              </div>
              <div className="contact-form__field">
                <label htmlFor="cf-number">{t('cv.f.number')}</label>
                <input id="cf-number" type="tel" value={form.number} onChange={update('number')} />
              </div>
              <div className="contact-form__field">
                <label htmlFor="cf-email">{t('cv.f.email')} <span className="contact-form__req" aria-hidden="true">●</span></label>
                <input id="cf-email" type="email" required value={form.email} onChange={update('email')} />
              </div>
              <div className="contact-form__field contact-form__field--full">
                <label htmlFor="cf-subject">{t('cv.f.subject')} <span className="contact-form__req" aria-hidden="true">●</span></label>
                <input id="cf-subject" type="text" required value={form.subject} onChange={update('subject')} />
              </div>
              <div className="contact-form__field contact-form__field--full">
                <label htmlFor="cf-message">{t('cv.f.message')}</label>
                <textarea id="cf-message" rows="5" value={form.message} onChange={update('message')}></textarea>
              </div>
              <div className="contact-form__field contact-form__field--full">
                <label>{t('cv.f.attach')}</label>
                <label className="contact-form__file" htmlFor="cf-file">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M12 3v14M5 10l7-7 7 7M3 21h18" />
                  </svg>
                  <span>{form.file ? form.file.name : t('cv.f.upload')}</span>
                  <input id="cf-file" type="file" onChange={onFile} hidden />
                </label>
              </div>
              <div className="contact-form__field contact-form__field--full">
                <label className="contact-form__check">
                  <input type="checkbox" checked={form.agree} onChange={update('agree')} required />
                  <span>{t('cv.f.agree')} <span className="contact-form__req" aria-hidden="true">●</span></span>
                </label>
                <p className="contact-form__policy">
                  {t('cv.f.policy')}
                </p>
              </div>
              <input type="checkbox" name="botcheck" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
              <div className="contact-form__field contact-form__field--full" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12 }}>
                {submitError && <div style={{ color: '#b00020', fontSize: 13 }}>{submitError}</div>}
                <button type="submit" className="btn btn--primary" disabled={submitting}>
                  {submitting ? t('cv.f.sending') : t('cv.f.send')}
                  {!submitting && <span className="btn__arrow">→</span>}
                </button>
              </div>
            </form>
          }
        </div>
      </section>
    </div>);

}

// ════════════════════════════════════════════════════════════════════
// PARTNERSHIP
// ════════════════════════════════════════════════════════════════════

const INTEREST_KEYS = ['int.education', 'int.cadaver', 'int.research', 'int.distribution', 'int.faculty', 'int.other'];

function PartnershipPage() {
  const { t } = useT();
  const [data, setData] = useStateP({ name: '', company: '', country: '', email: '', interest: '', message: '' });
  const [errors, setErrors] = useStateP({});
  const [submitted, setSubmitted] = useStateP(false);
  const [submitting, setSubmitting] = useStateP(false);
  const [submitError, setSubmitError] = useStateP('');

  const update = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.name.trim()) errs.name = t('form.err.required');
    if (!data.company.trim()) errs.company = t('form.err.required');
    if (!data.country) errs.country = t('form.err.required');
    if (!data.interest) errs.interest = t('form.err.required');
    if (!data.email.trim()) errs.email = t('form.err.required');
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errs.email = t('form.err.email');
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    if (submitting) return;
    setSubmitting(true);
    setSubmitError('');
    try {
      const fd = new FormData();
      fd.append('access_key', '48b5c712-600c-450c-8a73-f3c3abbb78a5');
      fd.append('subject', '[Aesthefora] New Partnership Inquiry');
      fd.append('from_name', 'Aesthefora Partnership Form');
      fd.append('name', data.name);
      fd.append('company', data.company);
      fd.append('country', data.country);
      fd.append('email', data.email);
      fd.append('interest', data.interest);
      fd.append('message', data.message || '');
      fd.append('botcheck', e.target.botcheck && e.target.botcheck.checked ? 'true' : '');
      const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: fd });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.message || t('cv.f.error'));
      }
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (err) {
      setSubmitError(err.message || t('cv.f.error'));
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div className="page" data-screen-label="Partnership · Success">
        <section className="section section--first">
          <div className="success">
            <div className="success__check">
              <svg width="22" height="16" viewBox="0 0 22 16" fill="none"><path d="M1 8.5l6 6L21 1" stroke="currentColor" strokeWidth="1.5" /></svg>
            </div>
            <div className="eyebrow eyebrow--blue">{t('succ.eb')}</div>
            <h1 className="display-l" style={{ marginTop: 20 }}>{t('succ.title', { name: firstName(data.name) })}</h1>
            <p className="lede" style={{ marginTop: 24 }}>
              {t('succ.lede.pre')}<strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{data.email}</strong>{t('succ.lede.post')}
            </p>
            <div style={{
              marginTop: 48,
              padding: 24,
              border: '1px solid var(--line)',
              background: 'var(--soft)',
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 24,
              fontFamily: 'var(--font-mono)',
              fontSize: 11,
              letterSpacing: '0.08em',
              textTransform: 'uppercase',
              color: 'var(--ink-mute)'
            }}>
              <div><span style={{ color: 'var(--ink-soft)' }}>{t('succ.ref')}</span><br /><span style={{ color: 'var(--ink)' }}>AES-{generateRef()}</span></div>
              <div><span style={{ color: 'var(--ink-soft)' }}>{t('succ.channel')}</span><br /><span style={{ color: 'var(--ink)' }}>{t('succ.channel.v')}</span></div>
              <div><span style={{ color: 'var(--ink-soft)' }}>{t('succ.market')}</span><br /><span style={{ color: 'var(--ink)' }}>{data.country}</span></div>
              <div><span style={{ color: 'var(--ink-soft)' }}>{t('succ.sla')}</span><br /><span style={{ color: 'var(--ink)' }}>{t('succ.sla.v')}</span></div>
            </div>
            <button onClick={() => {setSubmitted(false);setData({ name: '', company: '', country: '', email: '', interest: '', message: '' });}} className="btn btn--ghost" style={{ marginTop: 48 }}>
              {t('cta.submitAnother')}
            </button>
          </div>
        </section>
      </div>);

  }

  return (
    <div className="page" data-screen-label="Partnership">
      <section className="section section--first">
        <div className="section__head">
          <div className="section__meta">
            <div className="section__no">§ 01</div>
            <div className="eyebrow eyebrow--blue">{t('part.eb')}</div>
          </div>
          <div>
            <h1 className="display-l">{t('part.title.l1')}<br />{t('part.title.l2')}</h1>
          </div>
        </div>
        <div className="shell" style={{ marginTop: 72, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }}>
          <div>
            <p className="lede">{t('part.lede')}</p>
            <div className="eyebrow eyebrow--blue" style={{ marginTop: 48, marginBottom: 20 }}>{t('part.look.eb')}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {['part.look.1', 'part.look.2', 'part.look.3', 'part.look.4'].map((k, i) =>
              <li key={k} style={{ display: 'flex', gap: 16, padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.08em', minWidth: 24 }}>0{i + 1}</span>
                  <span style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)' }}>{t(k)}</span>
                </li>
              )}
            </ul>
          </div>

          <form onSubmit={submit} noValidate>
            <div className="form">
              <Field label={t('form.name')} required error={errors.name}>
                <input className="field__input" type="text" value={data.name} onChange={update('name')} placeholder={t('form.name.ph')} />
              </Field>
              <Field label={t('form.company')} required error={errors.company}>
                <input className="field__input" type="text" value={data.company} onChange={update('company')} placeholder={t('form.company.ph')} />
              </Field>
              <Field label={t('form.country')} required error={errors.country}>
                <select className="field__select" value={data.country} onChange={update('country')}>
                  <option value="">{t('form.country.ph')}</option>
                  {COUNTRY_LIST.map(([iso, key]) => <option key={iso} value={t(key)}>{t(key)}</option>)}
                </select>
              </Field>
              <Field label={t('form.email')} required error={errors.email}>
                <input className="field__input" type="email" value={data.email} onChange={update('email')} placeholder={t('form.email.ph')} />
              </Field>
              <Field label={t('form.interest')} required error={errors.interest} full>
                <select className="field__select" value={data.interest} onChange={update('interest')}>
                  <option value="">{t('form.interest.ph')}</option>
                  {INTEREST_KEYS.map((k) => <option key={k} value={t(k)}>{t(k)}</option>)}
                </select>
              </Field>
              <Field label={t('form.message')} optional={t('form.optional')} full>
                <textarea className="field__textarea" value={data.message} onChange={update('message')} placeholder={t('form.message.ph')} />
              </Field>
              <input type="checkbox" name="botcheck" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
              <div className="field--full" style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
                <div className="mono" style={{ maxWidth: '52ch', textTransform: 'none', letterSpacing: '0.02em' }}>
                  {t('form.disclaimer')}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
                  {submitError && <div style={{ color: '#b00020', fontSize: 13 }}>{submitError}</div>}
                  <button type="submit" className="btn btn--primary" disabled={submitting}>
                    {submitting ? 'Sending…' : t('cta.submit')}
                    {!submitting && <span className="btn__arrow">→</span>}
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </section>
    </div>);

}

function Field({ label, required, optional, full, error, children }) {
  return (
    <div className={`field ${full ? 'field--full' : ''} ${error ? 'field--error' : ''}`}>
      <label className="field__label">
        <span>{label}{required && <span style={{ marginLeft: 6, color: 'var(--ink-soft)' }}>*</span>}</span>
        <span className="field__req">{optional || ''}</span>
      </label>
      {children}
      {error && <span className="field__error">— {error}</span>}
    </div>);

}

function firstName(s) {
  if (!s) return '';
  if (/[\uAC00-\uD7AF]/.test(s)) return s.replace(/\s+/g, '');
  return s.split(' ')[0];
}

function generateRef() {
  const yy = String(new Date().getFullYear()).slice(-2);
  const n = Math.floor(Math.random() * 9000 + 1000);
  return `${yy}-${n}`;
}

// ════════════════════════════════════════════════════════════════════
// Export
// ════════════════════════════════════════════════════════════════════

Object.assign(window, {
  HomePage, AboutPage, ClinicalSolutionsPage, EducationPage, ResearchPage, FacultyPage, ContactPage, PartnershipPage
});