/* within — components */

/* ============ LANG CONTEXT ============ */
const LangContext = React.createContext();

const LangProvider = ({ children }) => {
  const [lang, setLang] = React.useState(
    localStorage.getItem('within_lang') || 'en'
  );
  const t = (key) =>
    window.translations[lang]?.[key] ?? window.translations.en[key] ?? key;
  const toggle = () => {
    const next = lang === 'en' ? 'es' : 'en';
    setLang(next);
    localStorage.setItem('within_lang', next);
  };
  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);
  return (
    <LangContext.Provider value={{ lang, t, toggle }}>
      {children}
    </LangContext.Provider>
  );
};

window.LangContext = LangContext;
window.LangProvider = LangProvider;

/* ============ ICON ============ */
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    arrow: <><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></>,
    play: <path d="M8 5v14l11-7L8 5Z" fill="currentColor"/>,
    spark: <><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="m5.6 5.6 2.8 2.8"/><path d="m15.6 15.6 2.8 2.8"/><path d="m18.4 5.6-2.8 2.8"/><path d="m8.4 15.6-2.8 2.8"/></>,
    heart: <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78Z"/>,
    moon: <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/>,
    activity: <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>,
    users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    map: <><path d="M3 6v15l6-3 6 3 6-3V3l-6 3-6-3-6 3Z"/><path d="M9 3v15"/><path d="M15 6v15"/></>,
    leaf: <><path d="M11 20A7 7 0 0 1 4 13C4 7 8 4 14 3a16 16 0 0 1 6 0c0 6-2 10-9 17Z"/><path d="M2 22c4-7 8-11 12-15"/></>,
    send: <><path d="m22 2-7 20-4-9-9-4 20-7Z"/><path d="m22 2-11 11"/></>,
    mic: <><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 17v5"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m4.93 19.07 1.41-1.41"/><path d="m17.66 6.34 1.41-1.41"/></>,
    wave: <path d="M2 12s2-4 5-4 5 8 8 8 5-4 7-4"/>,
    bowl: <><path d="M4 13c0 4.5 3.5 8 8 8s8-3.5 8-8H4Z"/><path d="M12 2v3"/><path d="M9 5h6"/></>,
    flame: <><path d="M8.5 14.5A2.5 2.5 0 0 0 11 17a2.5 2.5 0 0 0 2.5-2.5c0-1.5-.5-2-1.25-2.75L11 10.5l-1.25 1.25C9 12.5 8.5 13 8.5 14.5Z"/><path d="M12 22a8 8 0 0 0 8-8c0-3.5-3-6-5-9-1 2-1.5 3-3 5-2-1-3-3-3-3s-5 5-5 7a8 8 0 0 0 8 8Z"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
  };
  return <svg {...props}>{paths[name]}</svg>;
};

/* ============ NAV ============ */
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const { t, lang, toggle } = React.useContext(LangContext);
  const isLegal = /\/(privacy|terms|data-ethics)\.html/.test(window.location.pathname);
  const p = isLegal ? 'index.html' : '';
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-row">
        <a href={p || '/'} className="nav-brand" aria-label="within">
          <img src="assets/within_logo_transparent_original_colors_400x110.png" alt="within"/>
        </a>
        <div className="nav-links">
          <a href={`${p}#manifesto`}>{t('nav_manifesto')}</a>
          <a href={`${p}#how`}>{t('nav_how')}</a>
          <a href={`${p}#experience`}>{t('nav_product')}</a>
          <a href={`${p}#community`}>{t('nav_community')}</a>
          <a href={`${p}#science`}>{t('nav_passport')}</a>
        </div>
        <div className="nav-actions">
          <button className="lang-toggle" onClick={toggle} aria-label="Switch language">
            <span className={lang === 'en' ? 'active' : ''}>EN</span>
            <span className="sep">|</span>
            <span className={lang === 'es' ? 'active' : ''}>ES</span>
          </button>
          <a href={`${p}#cta`} className="btn btn-mint">{t('nav_begin')}<Icon name="arrow" size={16}/></a>
        </div>
      </div>
    </nav>
  );
};

/* ============ HERO ============ */
const Hero = () => {
  const { t } = React.useContext(LangContext);
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div className="hero-copy">
          <h1 className="h-display h1">
            <span className="word">{t('hero_word1')}</span> <span className="italic">{t('hero_word2')}</span><br/>
            <span className="underlight">with<span className="accent-i">i</span>n</span> {t('hero_suffix')}<span style={{color:'var(--w-mint)'}}>.</span>
          </h1>
          <p className="hero-lede">{t('hero_lede')}</p>
          <div className="hero-cta">
            <a href="#cta" className="btn btn-primary">{t('hero_join')}<Icon name="arrow" size={16}/></a>
            <a href="#how" className="btn btn-ghost"><Icon name="arrow" size={12}/>{t('hero_see_how')}</a>
          </div>
          <div className="hero-meta">
            <div className="m"><div className="num">360°</div><div className="lbl">{t('hero_meta_profile')}</div></div>
            <div className="m"><div className="num">24/7</div><div className="lbl">{t('hero_meta_companion')}</div></div>
            <div className="m"><div className="num">1,200+</div><div className="lbl">{t('hero_meta_communities')}</div></div>
          </div>
        </div>

        <div className="hero-art">
          <div className="rings">
            <div className="ring"></div>
            <div className="ring"></div>
            <div className="ring"></div>
            <div className="ring"></div>
          </div>

          <div className="phone-frame">
            <div className="phone-notch"></div>
            <div className="phone-screen">
              <PhoneHome/>
            </div>
          </div>

          <div className="float-card fc-1">
            <div className="ic"><Icon name="heart" size={18} stroke={1.8}/></div>
            <div>
              <div className="lbl">{t('fc1_lbl')}</div>
              <div className="val">62<em> bpm</em></div>
            </div>
          </div>
          <div className="float-card fc-2">
            <div className="ic ink"><Icon name="users" size={18} stroke={1.8}/></div>
            <div>
              <div className="lbl">{t('fc2_lbl')}</div>
              <div className="val">{t('fc2_val')} <em>· 6</em></div>
            </div>
          </div>
          <div className="float-card fc-3">
            <div className="ic bone"><Icon name="moon" size={18} stroke={1.8}/></div>
            <div>
              <div className="lbl">{t('fc3_lbl')}</div>
              <div className="val">7h 42m<em> +9%</em></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ PHONE HOME (mini app preview) ============ */
const PhoneHome = () => {
  const { t } = React.useContext(LangContext);
  return (
    <div style={{padding:'48px 18px 18px', height:'100%', display:'flex', flexDirection:'column', gap:14}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div style={{fontSize:11, color:'var(--w-ink-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight:700}}>{t('phone_day_time')}</div>
          <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:600, color:'var(--w-ink)', letterSpacing:'-0.015em', marginTop:2, lineHeight:1.1}}>{t('phone_greeting')}<br/>Aitana<span style={{color:'var(--w-mint)'}}>.</span></div>
        </div>
        <div style={{width:38, height:38, borderRadius:'50%', background:'linear-gradient(135deg, #a8e6cf, #06c6a8)'}}></div>
      </div>

      <div style={{background:'var(--w-ink)', borderRadius:18, padding:14, color:'white'}}>
        <div style={{fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--w-mint)', fontWeight:700}}>{t('phone_rhythm_label')}</div>
        <div style={{fontFamily:'var(--font-display)', fontSize:15, fontWeight:500, marginTop:6, lineHeight:1.3}}>{t('phone_rhythm_msg')}</div>
        <div style={{display:'flex', gap:6, marginTop:10}}>
          <div style={{height:4, flex:'2 1 0', background:'var(--w-mint)', borderRadius:99}}></div>
          <div style={{height:4, flex:'1 1 0', background:'var(--w-mint)', opacity:0.4, borderRadius:99}}></div>
          <div style={{height:4, flex:'1 1 0', background:'rgba(255,255,255,0.15)', borderRadius:99}}></div>
          <div style={{height:4, flex:'1 1 0', background:'rgba(255,255,255,0.15)', borderRadius:99}}></div>
        </div>
      </div>

      {[
        {time:'08:00', title:t('phone_s1_title'), sub:t('phone_s1_sub'), done:true},
        {time:'13:30', title:t('phone_s2_title'), sub:t('phone_s2_sub'), done:false},
        {time:'19:00', title:t('phone_s3_title'), sub:t('phone_s3_sub'), done:false, mint:true},
      ].map((r,i) => (
        <div key={i} style={{background:'white', borderRadius:14, padding:'12px 14px', display:'flex', alignItems:'center', gap:12, border:'1px solid var(--w-line)'}}>
          <div style={{width:22, height:22, borderRadius:'50%', border:`2px solid ${r.done?'var(--w-mint)':'var(--w-line-2)'}`, background:r.done?'var(--w-mint)':'transparent', display:'grid', placeItems:'center'}}>
            {r.done && <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><path d="m5 12 5 5L20 7" strokeLinecap="round" strokeLinejoin="round"/></svg>}
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:12, color:'var(--w-ink-3)', fontWeight:600, letterSpacing:'0.04em'}}>{r.time}</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:13, fontWeight:600, color:'var(--w-ink)', letterSpacing:'-0.005em', lineHeight:1.2, marginTop:1}}>{r.title}</div>
            <div style={{fontSize:11, color:'var(--w-ink-2)', marginTop:2}}>{r.sub}</div>
          </div>
          {r.mint && <div style={{width:8, height:8, borderRadius:'50%', background:'var(--w-mint)', boxShadow:'0 0 0 4px rgba(6,198,168,0.2)'}}></div>}
        </div>
      ))}
    </div>
  );
};

window.Icon = Icon;
window.Nav = Nav;
window.Hero = Hero;
window.PhoneHome = PhoneHome;