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

const ROUTE_IDS = ['home','about','faq','contact'];

const LangToggle = ({ lang, setLang, dark }) => {
  const fg = dark ? 'var(--vg-paper)' : 'var(--vg-ink)';
  const dim = dark ? 'rgba(244,239,230,0.45)' : 'rgba(10,15,25,0.45)';
  const Btn = ({ id, children }) => {
    const active = lang === id;
    return (
      <button onClick={() => setLang(id)} style={{
        all:'unset', cursor:'pointer',
        fontFamily:"'Inter Tight', sans-serif", fontSize:10.5, fontWeight:600,
        textTransform:'uppercase', letterSpacing:'0.22em',
        color: active ? 'var(--vg-brass-bright)' : dim,
        transition:'color 200ms cubic-bezier(.25,.1,.25,1)',
      }}
      onMouseEnter={e => { if (!active) e.currentTarget.style.color = fg; }}
      onMouseLeave={e => { if (!active) e.currentTarget.style.color = dim; }}
      >{children}</button>
    );
  };
  return (
    <div style={{display:'inline-flex', alignItems:'center', gap:10}}>
      <Btn id="en">EN</Btn>
      <span style={{width:1, height:11, background:dim}}/>
      <Btn id="es">ES</Btn>
    </div>
  );
};

const Nav = ({ route, setRoute, lang, setLang }) => {
  const [scrolled, setScrolled] = useStateShell(false);
  const [mobileOpen, setMobileOpen] = useStateShell(false);
  const t = T[lang].nav;
  const ROUTES = [
    { id:'home',    label:t.home },
    { id:'about',   label:t.about },
    { id:'faq',     label:t.faq },
    { id:'contact', label:t.contact, accent:true },
  ];
  useEffectShell(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on(); window.addEventListener('scroll', on, { passive:true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header style={{
      position:'sticky', top:0, zIndex:30,
      background: scrolled ? 'rgba(14,27,44,0.96)' : 'var(--vg-midnight)',
      color:'var(--vg-paper)',
      borderBottom:'1px solid rgba(244,239,230,0.08)',
      transition:'background 300ms cubic-bezier(.25,.1,.25,1)',
    }}>
      <div style={{
        maxWidth:'var(--vg-container-wide)', margin:'0 auto',
        padding: scrolled ? '14px 32px' : '20px 32px',
        display:'flex', alignItems:'center', justifyContent:'space-between', gap:32,
        transition:'padding 300ms cubic-bezier(.25,.1,.25,1)',
      }}>
        <a href="#home" onClick={e => { e.preventDefault(); setRoute('home'); }}
           style={{display:'flex', alignItems:'center', textDecoration:'none', color:'inherit'}}>
          <Logotype variant="dark" height={scrolled ? 26 : 32}/>
        </a>
        <nav className="vg-desktop-nav" style={{display:'flex', gap:32, alignItems:'center', fontFamily:"'Inter Tight', sans-serif", fontSize:10.5, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.22em'}}>
          {ROUTES.map(r => {
            const active = route === r.id;
            return (
              <a key={r.id} href={'#'+r.id}
                 onClick={e => { e.preventDefault(); setRoute(r.id); }}
                 style={{
                    position:'relative', paddingBottom:6,
                    color: r.accent ? 'var(--vg-brass)' : (active ? 'var(--vg-brass-bright)' : 'var(--vg-paper)'),
                    textDecoration:'none',
                    transition:'color 240ms cubic-bezier(.25,.1,.25,1)',
                 }}
                 onMouseEnter={e => { if (!active && !r.accent) e.currentTarget.style.color = 'var(--vg-brass-bright)'; }}
                 onMouseLeave={e => { if (!active && !r.accent) e.currentTarget.style.color = 'var(--vg-paper)'; }}
              >
                {r.label}{r.accent ? ' →' : ''}
                <span style={{
                  position:'absolute', left:0, right:0, bottom:0, height:1,
                  background:'var(--vg-brass)',
                  transform:`scaleX(${active ? 1 : 0})`,
                  transformOrigin:'left',
                  transition:'transform 300ms cubic-bezier(.25,.1,.25,1)',
                }}/>
              </a>
            );
          })}
          <span style={{display:'inline-block', width:1, height:14, background:'rgba(244,239,230,0.2)'}}/>
          <LangToggle lang={lang} setLang={setLang} dark/>
        </nav>
        <button className="vg-mobile-toggle" onClick={() => setMobileOpen(v => !v)} aria-label="Menu"
          style={{display:'none', background:'transparent', border:'1px solid rgba(244,239,230,0.4)', color:'var(--vg-paper)', width:36, height:36, borderRadius:2, cursor:'pointer'}}>
          <span style={{display:'block', width:14, height:1, background:'currentColor', margin:'4px auto'}}/>
          <span style={{display:'block', width:14, height:1, background:'currentColor', margin:'4px auto'}}/>
          <span style={{display:'block', width:14, height:1, background:'currentColor', margin:'4px auto'}}/>
        </button>
      </div>
      {mobileOpen && (
        <div style={{borderTop:'1px solid rgba(244,239,230,0.08)', padding:'16px 32px 24px'}}>
          {ROUTES.map(r => (
            <a key={r.id} href={'#'+r.id}
              onClick={e => { e.preventDefault(); setRoute(r.id); setMobileOpen(false); }}
              style={{
                display:'block', padding:'12px 0',
                color: r.accent ? 'var(--vg-brass)' : 'var(--vg-paper)',
                fontFamily:"'Inter Tight', sans-serif", fontSize:12, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.22em',
                textDecoration:'none', borderBottom:'1px solid rgba(244,239,230,0.08)',
              }}>{r.label}</a>
          ))}
          <div style={{paddingTop:18}}>
            <LangToggle lang={lang} setLang={setLang} dark/>
          </div>
        </div>
      )}
    </header>
  );
};

/* Renders a string that may contain VAL&GAL with the brass ampersand. */
const ValGal = ({ children }) => {
  const parts = String(children).split('VAL&GAL');
  return parts.map((p, i) => (
    <React.Fragment key={i}>
      {p}
      {i < parts.length - 1 && <>VAL<Amp/>GAL</>}
    </React.Fragment>
  ));
};

/* ─────────── HERO ─────────── */
const Hero = ({ setRoute }) => {
  const lang = useLang();
  const t = T[lang].hero;
  return (
    <section style={{
      position:'relative', overflow:'hidden',
      background:'var(--vg-midnight)', color:'var(--vg-paper)',
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:"url('assets/texture-guilloche.svg')",
        backgroundSize:'1000px', backgroundPosition:'center',
        opacity:0.5,
      }}/>
      <div style={{position:'relative', maxWidth:'var(--vg-container)', margin:'0 auto', padding:'120px 32px 128px', textAlign:'center'}}>
        <Reveal>
          <Eyebrow style={{letterSpacing:'0.3em'}}>{t.eyebrow}</Eyebrow>
        </Reveal>
        <Reveal delay={120}>
          <h1 style={{
            fontFamily:"'Cormorant Garamond', serif", fontWeight:500,
            fontSize:'clamp(44px, 7vw, 96px)', lineHeight:1.04, letterSpacing:'-0.012em',
            margin:'28px auto 0', maxWidth:1080, color:'var(--vg-paper)',
          }}>
            {t.h1a}
            <span style={{display:'block', fontStyle:'italic', color:'var(--vg-brass)', fontWeight:400}}>{t.h1b}</span>
          </h1>
        </Reveal>
        <Reveal delay={240}>
          <p style={{
            fontFamily:"'Libre Caslon Text', serif", fontSize:19, lineHeight:1.55,
            maxWidth:680, margin:'36px auto 0', color:'rgba(244,239,230,0.82)',
          }}>
            {t.sub}
          </p>
        </Reveal>
        <Reveal delay={360}>
          <div style={{display:'flex', gap:14, justifyContent:'center', marginTop:40, flexWrap:'wrap'}}>
            <Button variant="brass" onClick={() => setRoute('contact')}>{t.ctaPrimary}</Button>
            <Button variant="ghostDark" onClick={() => setRoute('about')}>{t.ctaSecondary}</Button>
          </div>
        </Reveal>
        <Reveal delay={520}>
          <div style={{marginTop:88, maxWidth:460, margin:'88px auto 0'}}>
            <Ornament/>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ─────────── FIRM (three principles) ─────────── */
const Firm = () => {
  const lang = useLang();
  const t = T[lang].firm;
  return (
    <section style={{background:'var(--vg-paper)', padding:'120px 32px'}}>
      <div style={{maxWidth:980, margin:'0 auto'}}>
        <Reveal><div style={{textAlign:'center', marginBottom:72}}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily:"'Cormorant Garamond', serif", fontWeight:500,
            fontSize:'clamp(32px, 4vw, 52px)', lineHeight:1.1,
            margin:'14px auto 0', maxWidth:820,
          }}>
            {t.h2a} <Amp/> {t.h2b}
          </h2>
        </div></Reveal>
        <div className="vg-principles" style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:1,
          background:'var(--vg-rule)', border:'1px solid var(--vg-rule)',
        }}>
          {t.pillars.map((p, i) => (
            <Reveal key={i} delay={i*120} style={{background:'var(--vg-paper)'}}>
              <div style={{padding:'36px 28px', height:'100%'}}>
                <div style={{fontFamily:"'Cormorant Garamond', serif", fontStyle:'italic', color:'var(--vg-brass)', fontSize:34, lineHeight:1}}>{p.numeral}.</div>
                <h3 style={{fontFamily:"'Cormorant Garamond', serif", fontWeight:500, fontSize:24, marginTop:18, lineHeight:1.2}}>{p.title}</h3>
                <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:15, lineHeight:1.6, color:'var(--vg-fg-muted)', marginTop:12}}>{p.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─────────── A NOTE ─────────── */
const Note = ({ setRoute }) => {
  const lang = useLang();
  const t = T[lang].note;
  return (
    <section style={{background:'var(--vg-paper-2)', padding:'104px 32px', borderTop:'1px solid var(--vg-rule)'}}>
      <div style={{maxWidth:760, margin:'0 auto', textAlign:'center'}}>
        <Reveal>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h2 style={{fontFamily:"'Cormorant Garamond', serif", fontWeight:500, fontSize:'clamp(28px,3.5vw,40px)', lineHeight:1.15, marginTop:14}}>
            {t.title}
          </h2>
          <div style={{margin:'24px auto 32px', maxWidth:240}}><Ornament/></div>
          <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:17, lineHeight:1.7, color:'var(--vg-ink)', textAlign:'left'}}>
            <ValGal>{t.p1}</ValGal>
          </p>
          <p style={{fontFamily:"'Libre Caslon Text', serif", fontSize:17, lineHeight:1.7, color:'var(--vg-ink)', textAlign:'left', marginTop:14}}>
            {t.p2}
          </p>
          <div style={{marginTop:36}}>
            <Button variant="ghost" onClick={() => setRoute('contact')}>{t.cta}</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ─────────── HOME PAGE ─────────── */
const HomePage = ({ setRoute }) => (
  <>
    <Hero setRoute={setRoute}/>
    <Firm/>
    <Note setRoute={setRoute}/>
  </>
);

Object.assign(window, { Nav, HomePage, ROUTE_IDS, ValGal, LangToggle });