/* Archangel Podiatry — case study screen (calm clinical, editorial serif) */
const ARV = window.XH_ARCH;
const ART = window.tr;
const ARIMG = (f) => window.R('archangel/' + f);
function ARParas({ text }) { return (text || '').split('\n\n').map((p, i) => <p className="arcase__p" key={i}>{p}</p>); }

function ArchangelCaseScreen({ go, lang }) {
  const ref = useReveal();
  return (
    <div ref={ref} className="arch">
      {/* Hero */}
      <header className="arhero">
        <div className="wrap wrap--wide">
          <button className="arback" onClick={() => go('work')}><Icon name="arrow-left" /> {ART(ARV.back, lang)}</button>
          <img className="arhero__logo" src={ARIMG('logo.png')} alt="Archangel Podiatry" />
          <div className="arhero__inner">
            <div className="arhero__meta">
              <span className="archip">{ART(ARV.industry, lang)}</span>
              <span className="arhero__year">{ARV.year} · {ARV.url}</span>
            </div>
            <h1 className="arhero__title">{ART(ARV.hero.title, lang)}</h1>
            <p className="arhero__sub">{ART(ARV.hero.sub, lang)}</p>
            <p className="arhero__svc">{ART(ARV.services, lang)}</p>
            <div className="arhero__stats">
              {ARV.heroStats.map((s, i) => (
                <div className="arhero__stat" key={i}><b>{s.value}</b><span>{ART(s.label, lang)}</span></div>
              ))}
            </div>
          </div>
          <div className="arhero__media reveal"><img src={ARIMG('web-hero.png')} alt="Archangel Podiatry website" /></div>
        </div>
      </header>
      <div className="section-gap"></div>

      {/* Background */}
      <section className="arsec">
        <div className="wrap wrap--narrow reveal" style={{ paddingBottom: 'clamp(1rem,0.5rem + 1.5vw,2.5rem)' }}>
          <p className="areyebrow mt-gap">{ART(ARV.background.label, lang)}</p>
          <h2 className="arh2">{ART(ARV.background.title, lang)}</h2>
          <ARParas text={ART(ARV.background.body, lang)} />
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Challenge — light blue */}
      <section className="arsec arsec--lightblue pb-gap">
        <div className="wrap wrap--narrow reveal">
          <div className="section-gap"></div>
          <p className="areyebrow mt-gap" style={{ color: 'var(--ar-navy)' }}>{ART(ARV.challenge.label, lang)}</p>
          <h2 className="arh2">{ART(ARV.challenge.title, lang)}</h2>
          <ARParas text={ART(ARV.challenge.body, lang)} />
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Brand identity + marks + logo panel */}
      <section className="arsec">
        <div className="wrap wrap--wide">
          <div className="arblock mt-gap reveal" style={{ marginBottom: 'clamp(1rem,1vw,2rem)' }}>
            <p className="areyebrow">{ART(ARV.identity.label, lang)}</p>
            <h2 className="arh2">{ART(ARV.identity.title, lang)}</h2>
            <ARParas text={ART(ARV.identity.body, lang)} />
          </div>
          <div className="arlogo-panel reveal"><img src={ARIMG('logo.png')} alt="Archangel Podiatry logo" /></div>
          <div className="armarks">
            {ARV.identity.marks.map((m, i) => (
              <div className="armark reveal" key={i}>
                <div className="armark__ic"><Icon name={m.icon} /></div>
                <b>{ART(m.t, lang)}</b><p>{ART(m.d, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Colour system — paper */}
      <section className="arsec arsec--paper pb-gap">
        <div className="wrap wrap--wide">
          <div className="section-gap"></div>
          <div className="arblock mt-gap reveal" style={{ marginTop: 'clamp(2.5rem,2rem + 3vw,4.5rem)', marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)', paddingBottom: 'clamp(1rem,0.5rem + 1.5vw,2rem)' }}>
            <p className="areyebrow">{ART(ARV.colors.label, lang)}</p>
            <h2 className="arh2">{ART(ARV.colors.title, lang)}</h2>
            <ARParas text={ART(ARV.colors.body, lang)} />
          </div>
          <div className="arcolors reveal">
            <div className="arcolorrow arcolorrow--main">
              {ARV.colors.main.map((c, i) => (
                <div className="arcolor" key={i}>
                  <div className="arcolor__chip" style={{ background: c.hex, color: c.on }}></div>
                  <div className="arcolor__meta"><b>{ART(c.name, lang)}</b></div>
                </div>
              ))}
            </div>
            <div className="arcolorrow arcolorrow--sub">
              {ARV.colors.sub.map((c, i) => (
                <div className="arcolor" key={i}>
                  <div className="arcolor__chip arcolor__chip--sub" style={{ background: c.hex }}></div>
                  <div className="arcolor__meta"><b>{ART(c.name, lang)}</b></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Space design — split + floorplan + zones */}
      <section className="arsec">
        <div className="wrap wrap--wide">
          <div className="arsplit mt-gap">
            <div className="arblock reveal" style={{ paddingBottom: 'clamp(1.5rem,1rem + 2vw,3rem)' }}>
              <p className="areyebrow">{ART(ARV.space.label, lang)}</p>
              <h2 className="arh2">{ART(ARV.space.title, lang)}</h2>
              <ARParas text={ART(ARV.space.body, lang)} />
            </div>
            <div className="arfig reveal"><img src={ARIMG('floorplan.jpg')} alt="Clinic floor plan & elevation" /></div>
          </div>
          <div className="arzones">
            {ARV.space.zones.map((z, i) => (
              <div className="arzone reveal" key={i}>
                <span className="arzone__n">{String(i + 1).padStart(2, '0')}</span>
                <b>{ART(z.t, lang)}</b><span>{z.m}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Website / SEO — split */}
      <section className="arsec arsec--paper pb-gap">
        <div className="wrap wrap--wide">
          <div className="section-gap"></div>
          <div className="arsplit mt-gap">
            <div className="arfig mt-gap reveal"><img src={ARIMG('web-1.png')} alt="Archangel Podiatry — services" /></div>
            <div className="arblock mt-gap reveal" style={{ paddingBottom: 'clamp(1rem,0.5rem + 1.5vw,2rem)' }}>
              <p className="areyebrow">{ART(ARV.digital.label, lang)}</p>
              <h2 className="arh2">{ART(ARV.digital.title, lang)}</h2>
              <ARParas text={ART(ARV.digital.body, lang)} />
            </div>
          </div>
          <div className="arshot reveal"><img src={ARIMG('web-2.png')} alt="Archangel Podiatry — brand story" /></div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Social — split */}
      <section className="arsec">
        <div className="wrap wrap--wide">
          <div className="arsplit">
            <div className="arblock reveal">
              <p className="areyebrow">{ART(ARV.social.label, lang)}</p>
              <h2 className="arh2">{ART(ARV.social.title, lang)}</h2>
              <ARParas text={ART(ARV.social.body, lang)} />
            </div>
            <div className="arfig reveal"><img src={ARIMG('social.png')} alt="Archangel Podiatry — social content" /></div>
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* SEM — navy, stat band + dashboards */}
      <section className="arsec arsec--navy pb-gap">
        <div className="wrap wrap--wide">
          <div className="section-gap"></div>
          <div className="arblock mt-gap reveal" style={{ marginTop: 'clamp(2.5rem,2rem + 3vw,4.5rem)', paddingBottom: 'clamp(1rem,0.5rem + 1.5vw,2rem)' }}>
            <p className="areyebrow areyebrow--on">{ART(ARV.sem.label, lang)} · {ART(ARV.sem.period, lang)}</p>
            <h2 className="arh2 arh2--on">{ART(ARV.sem.title, lang)}</h2>
            <ARParas text={ART(ARV.sem.body, lang)} />
          </div>
          <div className="arsem">
            {ARV.sem.stats.map((s, i) => (
              <div className="arsemstat reveal" key={i}><b>{s.value}</b><span>{ART(s.label, lang)}</span></div>
            ))}
          </div>
          <div className="arshot reveal" style={{ marginTop: 'clamp(2rem,1.5rem + 2vw,3rem)', border: '1px solid rgba(255,255,255,.12)' }}>
            <img src={ARIMG('sem-3.png')} alt="Google Ads performance" />
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Findings */}
      <section className="arsec arsec--paper pb-gap">
        <div className="wrap wrap--wide">
          <div className="section-gap"></div>
          <div className="arcenter mt-gap reveal">
            <p className="areyebrow" style={{ justifyContent: 'center' }}>{ART(ARV.findings.label, lang)}</p>
            <h2 className="arh2">{ART(ARV.findings.title, lang)}</h2>
          </div>
          <div className="arfindings">
            {ARV.findings.items.map((f, i) => (
              <div className="arfind reveal" key={i}>
                <div className="arfind__stat">{ART(f.stat, lang)}</div>
                <div><h3 className="arfind__t">{ART(f.t, lang)}</h3><p className="arfind__d">{ART(f.d, lang)}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Results */}
      <section className="arsec">
        <div className="wrap wrap--wide">
          <div className="arresults">
            <div className="reveal">
              <p className="areyebrow">{ART(ARV.results.label, lang)}</p>
              <h2 className="arh2">{ART(ARV.results.title, lang)}</h2>
              <ARParas text={ART(ARV.results.body, lang)} />
            </div>
            <div className="artable reveal">
              <div className="artable__head">
                <span>{lang === 'zh' ? '月份' : 'Month'}</span>
                <span>{lang === 'zh' ? '新病人' : 'Patients'}</span>
                <span>{lang === 'zh' ? '月營收' : 'Revenue'}</span>
                <span>{lang === 'zh' ? '轉化率' : 'Conv.'}</span>
              </div>
              {ARV.results.rows.map((r, i) => (
                <div className={'artable__row' + (r.hl ? ' artable__row--hl' : '')} key={i}>
                  <b>{ART(r.month, lang)}{r.hl && <span className="artag">{lang === 'zh' ? '高峰' : 'Peak'}</span>}</b>
                  <span>{r.patients}</span><span>{r.revenue}</span><span>{r.rate}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Closing — navy */}
      <section className="arsec arsec--navy pb-gap">
        <div className="wrap wrap--wide reveal">
          <div className="section-gap"></div>
          <div className="arquote mt-gap">
            <p className="areyebrow areyebrow--on" style={{ justifyContent: 'center' }}>{ART(ARV.closing.label, lang)}</p>
            <h2 className="arquote__text">{ART(ARV.closing.quote, lang)}</h2>
            <p className="arquote__body">{ART(ARV.closing.body, lang).split('\n\n')[0]}</p>
          </div>
        </div>
      </section>
      <div className="section-gap"></div>

      {/* Deliverables */}
      <section className="arsec">
        <div className="wrap wrap--wide">
          <div className="arcenter reveal">
            <p className="areyebrow" style={{ justifyContent: 'center' }}>{ART(ARV.deliverables.label, lang)}</p>
          </div>
          <div className="ardeliver">
            {ARV.deliverables.groups.map((grp, i) => (
              <div className="ardelcol reveal" key={i}>
                <h3 className="ardelcol__head">{ART(grp.g, lang)}</h3>
                <ul className="arlist">
                  {ART(grp.items, lang).map((it, j) => <li key={j}><Icon name="check" />{it}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <window.CaseServices slug="archangel-podiatry" go={go} lang={lang} />

      {/* CTA */}
      <section className="arcta">
        <div className="wrap wrap--narrow arcta__inner reveal">
          <h2 className="arcta__title">{ART(ARV.ctaTitle, lang)}</h2>
          <button className="arbtn" onClick={() => go('contact')}>{ART(ARV.ctaBtn, lang)} <Icon name="arrow-right" /></button>
        </div>
      </section>

      <Footer go={go} lang={lang} />
    </div>
  );
}

Object.assign(window, { ArchangelCaseScreen });