/* @jsxRuntime classic */
/* global React, Eyebrow, Ornament, Amp, Button, Logotype, Reveal, useLang, T, PARTNERS, ValGal */
const { useState: useStateP, useEffect: useEffectP } = React;

const ROMAN = ['I','II','III','IV','V','VI','VII','VIII','IX','X'];

/* ─────────── Page header (shared) ─────────── */
const PageHeader = ({ section, title, children, dark }) => (
  <section style={{
    background: dark ? 'var(--vg-midnight)' : 'var(--vg-paper)',
    color: dark ? 'var(--vg-paper)' : 'var(--vg-ink)',
    padding:'96px 32px 56px',
    position:'relative', overflow:'hidden',
    borderBottom: dark ? '1px solid rgba(244,239,230,0.08)' : '1px solid var(--vg-rule)',
  }}>
    {dark && <div style={{position:'absolute', inset:0, backgroundImage:"url('assets/texture-guilloche.svg')", backgroundSize:'1000px', opacity:0.35}}/>}
    <div style={{position:'relative', maxWidth:'var(--vg-container)', margin:'0 auto', textAlign:'center'}}>
      <Reveal><Eyebrow color={dark ? 'var(--vg-brass-bright)' : 'var(--vg-brass)'}>{section}</Eyebrow></Reveal>
      <Reveal delay={100}>
        <h1 style={{
          fontFamily:"'Cormorant Garamond', serif", fontWeight:500,
          fontSize:'clamp(40px,5vw,64px)', lineHeight:1.08, letterSpacing:'-0.01em',
          marginTop:14, color: dark ? 'var(--vg-paper)' : 'var(--vg-ink)',
        }}>{title}</h1>
      </Reveal>
      {children && <Reveal delay={200}><div style={{marginTop:20}}>{children}</div></Reveal>}
      <Reveal delay={320}><div style={{margin:'40px auto 0', maxWidth:280}}><Ornament/></div></Reveal>
    </div>
  </section>
);

/* ═══════════════════════════════════════════ ABOUT ═══════════════════════════════════════════ */
const PartnerPlate = ({ p, onOpen, readMore }) => (
  <div style={{textAlign:'center'}}>
    <button onClick={() => onOpen(p)} style={{all:'unset', cursor:'pointer', display:'inline-block', position:'relative'}}>
      <div style={{
        width:172, height:212, margin:'0 auto',
        background:'var(--vg-midnight)', color:'var(--vg-brass)',
        display:'flex', alignItems:'center', justifyContent:'center',
        border:'1px solid var(--vg-rule-brass)',
        fontFamily:"'Cormorant Garamond', serif", fontStyle:'italic', fontSize:110,
        position:'relative',
        transition:'box-shadow 260ms cubic-bezier(.25,.1,.25,1), border-color 260ms cubic-bezier(.25,.1,.25,1)',
      }}
      onMouseEnter={e => { e.currentTarget.style.boxShadow='var(--vg-shadow-md)'; e.currentTarget.style.borderColor='var(--vg-brass-bright)'; }}
      onMouseLeave={e => { e.currentTarget.style.boxShadow='none';                 e.currentTarget.style.borderColor='var(--vg-rule-brass)'; }}
      >
        <span translate="no" className="notranslate">{p.initial}</span>
        <span style={{position:'absolute', top:10, left:10, right:10, bottom:10, border:'1px solid rgba(176,138,62,0.35)', pointerEvents:'none'}}/>
      </div>
    </button>
    <h3 translate="no" className="notranslate" style={{fontFamily:"'Cormorant Garamond', serif", fontWeight:500, fontSize:26, marginTop:22}}>{p.name}</h3>
    <div style={{fontFamily:"'Libre Caslon Text', serif", fontStyle:'italic', fontSize:15, color:'var(--vg-fg-muted)', marginTop:6}}>{p.role}</div>
    <div style={{fontFamily:"'Inter Tight', sans-serif", fontSize:10, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.22em', color:'var(--vg-brass)', marginTop:10}}>{p.city}</div>
    <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:14, lineHeight:1.6, color:'var(--vg-fg-muted)', marginTop:14, maxWidth:300, marginLeft:'auto', marginRight:'auto'}}>{p.short}</p>
    <button onClick={() => onOpen(p)} style={{
      all:'unset', cursor:'pointer', marginTop:18,
      fontFamily:"'Inter Tight', sans-serif", fontSize:10.5, fontWeight:600,
      textTransform:'uppercase', letterSpacing:'0.22em', color:'var(--vg-brass)',
    }}>{readMore}</button>
  </div>
);

const PartnerModal = ({ p, onClose }) => {
  const lang = useLang();
  const t = T[lang].aboutPage;
  useEffectP(() => {
    if (!p) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [p]);
  if (!p) return null;
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(6,12,21,0.82)',
      display:'flex', alignItems:'center', justifyContent:'center',
      zIndex:100, padding:32,
      animation:'vg-fade-in 240ms cubic-bezier(.25,.1,.25,1)',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background:'var(--vg-paper)', width:'100%', maxWidth:720,
        maxHeight:'88vh', overflowY:'auto',
        boxShadow:'var(--vg-shadow-lg)', border:'1px solid var(--vg-rule)',
        animation:'vg-lift-in 360ms cubic-bezier(.25,.1,.25,1)',
      }}>
        <div style={{
          background:'var(--vg-midnight)', color:'var(--vg-paper)',
          padding:'44px 48px', display:'flex', alignItems:'center', gap:28,
          borderBottom:'1px solid var(--vg-rule-brass)',
        }}>
          <div style={{
            width:108, height:132, flexShrink:0,
            background:'var(--vg-ink)', color:'var(--vg-brass)',
            display:'flex', alignItems:'center', justifyContent:'center',
            border:'1px solid var(--vg-rule-brass)',
            fontFamily:"'Cormorant Garamond', serif", fontStyle:'italic', fontSize:72,
            position:'relative',
          }}>
            <span translate="no" className="notranslate">{p.initial}</span>
            <span style={{position:'absolute', top:6, left:6, right:6, bottom:6, border:'1px solid rgba(176,138,62,0.35)'}}/>
          </div>
          <div>
            <Eyebrow color="var(--vg-brass-bright)">{p.city} · {t.partner}</Eyebrow>
            <h2 translate="no" className="notranslate" style={{fontFamily:"'Cormorant Garamond', serif", fontWeight:500, fontSize:36, lineHeight:1.1, color:'var(--vg-paper)', marginTop:10}}>{p.name}</h2>
            <div style={{fontFamily:"'Libre Caslon Text', serif", fontStyle:'italic', fontSize:15, color:'rgba(244,239,230,0.72)', marginTop:6}}>{p.role}</div>
          </div>
        </div>
        <div style={{padding:'40px 48px'}}>
          <div style={{fontFamily:"'Inter Tight', sans-serif", fontSize:10.5, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.22em', color:'var(--vg-brass)'}}>{t.correspondence} · {p.langs}</div>
          <div style={{margin:'24px 0 28px'}}><Ornament/></div>
          {p.bio.map((para, i) => (
            <p key={i} style={{fontFamily:"'Libre Caslon Text', serif", fontSize:16, lineHeight:1.68, color:'var(--vg-ink)', marginTop: i ? 14 : 0}}>{para}</p>
          ))}
          <div style={{textAlign:'center', marginTop:36}}>
            <Button variant="ghost" onClick={onClose}>{t.close}</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

const AboutPage = () => {
  const lang = useLang();
  const t = T[lang].aboutPage;
  const [selected, setSelected] = useStateP(null);
  const partners = PARTNERS[lang];
  return (
    <>
      <PageHeader section={t.eyebrow} title={t.title}>
        <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:19, lineHeight:1.55, maxWidth:780, margin:'0 auto', color:'var(--vg-fg-muted)'}}>
          <ValGal>{t.sub}</ValGal>
        </p>
      </PageHeader>

      <section style={{background:'var(--vg-paper-2)', padding:'104px 32px'}}>
        <div style={{maxWidth:'var(--vg-container)', margin:'0 auto'}}>
          <div className="vg-partners-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:48}}>
            {partners.map((p, i) => (
              <Reveal key={p.initial} delay={i*120}>
                <PartnerPlate p={p} onOpen={setSelected} readMore={t.readMore}/>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <PartnerModal p={selected} onClose={() => setSelected(null)}/>
    </>
  );
};

/* ═══════════════════════════════════════════ FAQ ═══════════════════════════════════════════ */
const FaqPage = () => {
  const lang = useLang();
  const t = T[lang].faqPage;
  const [open, setOpen] = useStateP(0);
  return (
    <>
      <PageHeader section={t.eyebrow} title={t.title}>
        <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:18, lineHeight:1.55, maxWidth:680, margin:'0 auto', color:'var(--vg-fg-muted)'}}>
          {t.sub}
        </p>
      </PageHeader>

      <section style={{background:'var(--vg-paper)', padding:'72px 32px 120px'}}>
        <div style={{maxWidth:820, margin:'0 auto'}}>
          {t.items.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{borderBottom:'1px solid var(--vg-rule)'}}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  all:'unset', cursor:'pointer', display:'flex', width:'100%',
                  alignItems:'flex-start', justifyContent:'space-between', gap:24,
                  padding:'26px 4px', boxSizing:'border-box',
                }}>
                  <div style={{display:'flex', alignItems:'baseline', gap:18, flex:1}}>
                    <span translate="no" className="notranslate" style={{fontFamily:"'Cormorant Garamond', serif", fontStyle:'italic', fontSize:22, color:'var(--vg-brass)', minWidth:42}}>
                      {ROMAN[i]}.
                    </span>
                    <h3 style={{fontFamily:"'Cormorant Garamond', serif", fontWeight:500, fontSize:23, lineHeight:1.3, color:'var(--vg-ink)', margin:0}}>
                      <ValGal>{f.q}</ValGal>
                    </h3>
                  </div>
                  <span style={{
                    fontFamily:"'Cormorant Garamond', serif", fontSize:24, color:'var(--vg-brass)',
                    transform: `rotate(${isOpen ? 45 : 0}deg)`,
                    transition:'transform 300ms cubic-bezier(.25,.1,.25,1)', lineHeight:1,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0, overflow:'hidden',
                  transition:'max-height 420ms cubic-bezier(.25,.1,.25,1), opacity 240ms cubic-bezier(.25,.1,.25,1)',
                  opacity: isOpen ? 1 : 0,
                }}>
                  <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:16, lineHeight:1.65, color:'var(--vg-fg-muted)', padding:'0 4px 26px 60px', margin:0}}>
                    {f.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </>
  );
};

/* ═══════════════════════════════════════════ CONTACT ═══════════════════════════════════════════ */
const Field = ({ label, value, onChange, type='text', textarea, required }) => {
  const [focus, setFocus] = useStateP(false);
  const common = {
    fontFamily:"'Libre Caslon Text', serif", fontSize:16,
    width:'100%', padding:'13px 14px',
    background:'transparent',
    border:`1px solid ${focus ? 'var(--vg-brass)' : 'rgba(244,239,230,0.28)'}`,
    borderRadius:2, color:'var(--vg-paper)',
    boxSizing:'border-box', outline:'none',
    transition:'border-color 240ms cubic-bezier(.25,.1,.25,1)',
  };
  return (
    <label style={{display:'block'}}>
      <span style={{
        fontFamily:"'Inter Tight', sans-serif", fontSize:10.5, fontWeight:600,
        textTransform:'uppercase', letterSpacing:'0.22em',
        color:'var(--vg-brass)', display:'block', marginBottom:8,
      }}>{label}</span>
      {textarea
        ? <textarea rows={5} required={required} value={value} onChange={e=>onChange(e.target.value)} onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)} style={common}/>
        : <input type={type} required={required} value={value} onChange={e=>onChange(e.target.value)} onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)} style={common}/>}
    </label>
  );
};

const ContactPage = () => {
  const lang = useLang();
  const t = T[lang].contactPage;
  const [form, setForm] = useStateP({ name:'', firm:'', subject:'', message:'' });
  const [sent, setSent] = useStateP(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  const set = (k) => (v) => setForm(f => ({ ...f, [k]: v }));
  return (
    <>
      <PageHeader section={t.eyebrow} title={t.title} dark>
        <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:18, lineHeight:1.55, maxWidth:680, margin:'0 auto', color:'rgba(244,239,230,0.78)'}}>
          {t.sub}
        </p>
      </PageHeader>

      <section style={{background:'var(--vg-midnight)', color:'var(--vg-paper)', padding:'48px 32px 104px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, backgroundImage:"url('assets/texture-guilloche.svg')", backgroundSize:'900px', opacity:0.25}}/>
        <div style={{position:'relative', maxWidth:'var(--vg-container)', margin:'0 auto', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:64}} className="vg-contact-grid">
          <div>
            {sent ? (
              <Reveal>
                <div style={{padding:'56px 40px', border:'3px double var(--vg-rule-brass)', textAlign:'center', background:'rgba(176,138,62,0.04)'}}>
                  <div style={{display:'flex', justifyContent:'center'}}>
                    <Logotype variant="dark" height={40}/>
                  </div>
                  <h3 style={{fontFamily:"'Cormorant Garamond', serif", fontWeight:500, fontSize:32, color:'var(--vg-paper)', marginTop:24}}>
                    {t.sentTitle}
                  </h3>
                  <div style={{margin:'20px auto', maxWidth:220}}><Ornament/></div>
                  <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:16, lineHeight:1.6, color:'rgba(244,239,230,0.78)', maxWidth:440, margin:'0 auto'}}>
                    {t.sentBody(form.name)}
                  </p>
                  <div style={{marginTop:28}}>
                    <Button variant="ghostDark" onClick={() => { setSent(false); setForm({ name:'', firm:'', subject:'', message:'' }); }}>{t.writeAnother}</Button>
                  </div>
                </div>
              </Reveal>
            ) : (
              <form onSubmit={submit}>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
                  <Field label={t.labels.name}    value={form.name}  onChange={set('name')}  required/>
                  <Field label={t.labels.firm} value={form.firm} onChange={set('firm')}/>
                </div>
                <div style={{marginTop:18}}>
                  <Field label={t.labels.subject} value={form.subject} onChange={set('subject')} required/>
                </div>
                <div style={{marginTop:18}}>
                  <Field label={t.labels.message} textarea value={form.message} onChange={set('message')} required/>
                </div>
                <div style={{marginTop:32}}>
                  <Button variant="brass" style={{padding:'16px 28px'}}>{t.submit}</Button>
                </div>
              </form>
            )}
          </div>
          <aside style={{borderLeft:'1px solid rgba(244,239,230,0.14)', paddingLeft:48}} className="vg-contact-aside">
            <Eyebrow color="var(--vg-brass-bright)">{t.desks}</Eyebrow>
            <div style={{marginTop:20}}>
              {t.desksList.map((d) => (
                <div key={d.city} style={{padding:'20px 0', borderBottom:'1px solid rgba(244,239,230,0.14)'}}>
                  <div style={{fontFamily:"'Cormorant Garamond', serif", fontStyle:'italic', fontSize:22, color:'var(--vg-brass-bright)'}}>{d.city}</div>
                  <div translate="no" className="notranslate" style={{fontFamily:"'Libre Caslon Text', serif", fontSize:15, color:'var(--vg-paper)', marginTop:6}}>{d.name}</div>
                  <div style={{fontFamily:"'Libre Caslon Text', serif", fontStyle:'italic', fontSize:13, color:'rgba(244,239,230,0.6)', marginTop:4}}>{d.line}</div>
                </div>
              ))}
            </div>

            <div style={{margin:'40px 0 0', height:1, background:'rgba(244,239,230,0.14)'}}/>

            <div style={{marginTop:32}}>
              <Eyebrow color="var(--vg-brass-bright)">{t.network}</Eyebrow>
              <div style={{marginTop:20}}>
                <div style={{padding:'4px 0 20px'}}>
                  <div style={{fontFamily:"'Cormorant Garamond', serif", fontStyle:'italic', fontSize:22, color:'var(--vg-brass-bright)'}}>{t.networkCity}</div>
                  <div style={{fontFamily:"'Libre Caslon Text', serif", fontSize:14, color:'rgba(244,239,230,0.78)', marginTop:8, lineHeight:1.6}}>
                    {t.networkBody}
                  </div>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { AboutPage, FaqPage, ContactPage });