// ABOUT page
window.AboutPage = function AboutPage({ navigate, lang }) {
  const t = STRINGS[lang];
  const clients = [
    'Mielle Brinquedos', 'Tutty Toys', 'Blow Brinquedos', 'Pine Boards',
    'Água na Caixa', 'Amvox', 'Brooksfield', 'Disco',
    'Johnson & Johnson', 'Chevrolet', 'UNICEF', 'Disney (parceria via Mielle)',
    'Turma da Mônica (parceria via Mielle)'
  ];

  return (
    <section className="about fade-in" data-screen-label="04 About">
      <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 32 }}>{t.aboutTitle} · 2026</div>
      <p className="lede">
        {lang === 'pt'
          ? <>Sou Vinicius — Brand Strategist & Creative Director com mais de 15 anos de experiência. Não faço logos: crio <em>universos de marca</em> — estratégia, identidade, personagens, embalagem e experiência digital, costurados para funcionar juntos.</>
          : <>I'm Vinicius — Brand Strategist & Creative Director with 15+ years of experience. I don't make logos: I build <em>brand universes</em> — strategy, identity, characters, packaging and digital experience, stitched to work together.</>
        }
      </p>

      <div className="about-grid">
        <div className="col-l">
          <h3>{t.bio}</h3>
        </div>
        <div className="col-r">
          <p>{lang === 'pt'
            ? 'Trabalho em quatro frentes: estratégia & posicionamento de marca, identidade visual completa, ilustração e character design, e UX/UI para e-commerce e apps. Meu método é entregar universos que vivem do papel à gôndola, do PDV ao checkout — não peças soltas.'
            : 'I work on four fronts: brand strategy & positioning, complete visual identity, illustration and character design, and UX/UI for e-commerce and apps. My method is to deliver universes that live from paper to shelf, from POS to checkout — not scattered pieces.'}</p>
          <p>{lang === 'pt'
            ? 'Tenho experiência comprovada construindo universos completos para kids & toy brands, incluindo Mielle Brinquedos — parceira oficial da Disney e da Turma da Mônica, com distribuição nacional e produtos posicionados lado a lado com grandes IPs no varejo.'
            : 'I have proven experience building complete universes for kids & toy brands, including Mielle Brinquedos — official Disney and Turma da Mônica partner, with national distribution and products positioned next to major IPs at retail.'}</p>
          <p>{lang === 'pt'
            ? 'Atualmente sou Design Lead na Disco, agência Shopify Premier Partner, onde conduzo projetos de e-commerce para marcas como Água na Caixa, Amvox e Brooksfield. Em paralelo, atendo clientes de branding via consultoria independente.'
            : 'I\'m currently Design Lead at Disco, a Shopify Premier Partner agency, where I lead e-commerce projects for brands like Água na Caixa, Amvox, and Brooksfield. In parallel, I serve branding clients through independent consultancy.'}</p>
          <p style={{ fontStyle: 'italic', color: 'var(--accent)', fontSize: 22, marginTop: 24 }}>
            "I create worlds, not logos."
          </p>
        </div>
      </div>

      <div className="about-grid" style={{ marginTop: 24 }}>
        <div className="col-l">
          <h3>{t.selectedClients}</h3>
        </div>
        <div className="col-r">
          <ul className="clients-list">
            {clients.map(c => <li key={c}>{c}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
};

// CONTACT page
window.ContactPage = function ContactPage({ lang }) {
  const t = STRINGS[lang];
  const [interest, setInterest] = React.useState(['Branding']);
  const interests = ['Branding', 'UX/UI', 'Ilustração', 'Direção de arte', 'Editorial', 'Outro'];

  const toggle = (i) => setInterest(prev => prev.includes(i) ? prev.filter(x => x !== i) : [...prev, i]);

  return (
    <section className="contact fade-in" data-screen-label="05 Contact">
      <div className="pretitle">{t.contactTitle} · 2026</div>
      <h1>
        {lang === 'pt'
          ? <>Vamos conversar sobre o seu projeto. <em>Respondo em até 48h.</em></>
          : <>Let's talk about your project. <em>I reply within 48h.</em></>
        }
      </h1>

      <div className="contact-grid">
        <form onSubmit={(e) => { e.preventDefault(); alert(lang === 'pt' ? 'Mensagem enviada (mock)' : 'Message sent (mock)'); }}>
          <div className="form-row">
            <label>{t.name}</label>
            <input type="text" placeholder={t.placeholderName} required />
          </div>
          <div className="form-row">
            <label>{t.email}</label>
            <input type="email" placeholder={t.placeholderEmail} required />
          </div>
          <div className="form-row with-chips">
            <label>{t.interest}</label>
            <div className="chips">
              {interests.map(i => (
                <span key={i} className={`chip ${interest.includes(i) ? 'active' : ''}`} onClick={() => toggle(i)}>{i}</span>
              ))}
            </div>
          </div>
          <div className="form-row">
            <label>{t.message}</label>
            <textarea rows={4} placeholder={t.placeholderMsg} required />
          </div>
          <div className="submit-row">
            <span className="mono" style={{ color: 'var(--ink-mute)' }}>↳ {lang === 'pt' ? 'Apertar enter para enviar' : 'Press enter to send'}</span>
            <button type="submit" className="submit-btn">{t.send} →</button>
          </div>
        </form>

        <div className="contact-info">
          <div className="info-block">
            <div className="k">E-mail</div>
            <div className="v"><a href="mailto:vini@vsiqueira.com.br">vini@vsiqueira.com.br</a></div>
          </div>
          <div className="info-block">
            <div className="k">{lang === 'pt' ? 'Telefone' : 'Phone'}</div>
            <div className="v"><a href="tel:+5511986366052">+55 11 98636-6052</a></div>
          </div>
          <div className="info-block">
            <div className="k">Behance</div>
            <div className="v"><a href="https://behance.net/vini_siqueira" target="_blank">behance.net/vini_siqueira</a></div>
          </div>
          <div className="info-block">
            <div className="k">LinkedIn</div>
            <div className="v"><a href="https://linkedin.com/in/vini-siqueira" target="_blank">in/vini-siqueira</a></div>
          </div>
          <div className="info-block">
            <div className="k">{lang === 'pt' ? 'Localização' : 'Location'}</div>
            <div className="v">Atibaia, SP · BR · GMT−3</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// CV page
window.CvPage = function CvPage({ lang }) {
  const t = STRINGS[lang];
  const exp = [
    { y: lang === 'pt' ? 'Fev 2024 — agora' : 'Feb 2024 — now', r: 'Design Lead', p: 'Agência Disco · Shopify Premier Partner' },
    { y: '2018 — ' + (lang === 'pt' ? 'agora' : 'now'), r: lang === 'pt' ? 'Brand Strategist & UX/UI Designer (Freelance)' : 'Branding Consultant & UX/UI Designer (Freelance)', p: lang === 'pt' ? 'Consultoria independente · 50+ produtos digitais' : 'Independent consultancy · 50+ digital products' },
    { y: lang === 'pt' ? 'Ago 2021 — Nov 2023' : 'Aug 2021 — Nov 2023', r: 'Designer', p: 'Agência Trama / Reputale · J&J, Chevrolet, UNICEF' },
    { y: lang === 'pt' ? 'Jul 2020 — Dez 2023' : 'Jul 2020 — Dec 2023', r: lang === 'pt' ? 'Diretor de Arte' : 'Art Director', p: 'Mielle Brinquedos · ' + (lang === 'pt' ? 'Fábrica de brinquedos' : 'Toy manufacturer') },
    { y: '2014 — 2016', r: lang === 'pt' ? 'Diretor de Arte' : 'Art Director', p: 'Sato 7 · ' + (lang === 'pt' ? 'Comunicação Estratégica' : 'Strategic Communication') },
  ];
  const edu = [
    { y: '2009 — ' + (lang === 'pt' ? 'agora' : 'now'),
      r: lang === 'pt' ? 'Formação autodidata em Design UX/UI e Design Digital' : 'Self-taught in UX/UI Design and Digital Design',
      p: lang === 'pt' ? '15+ anos de experiência prática · projetos reais e atualização contínua' : '15+ years of hands-on experience · real projects and continuous learning' },
  ];
  const recog = [
    { y: '2024', r: lang === 'pt' ? 'Parceria oficial Disney & Turma da Mônica' : 'Official Disney & Turma da Mônica partnership', p: 'Mielle Brinquedos' },
    { y: '2024', r: lang === 'pt' ? '+35% engajamento, +28% conversão' : '+35% engagement, +28% conversion', p: lang === 'pt' ? 'Projetos Shopify Premier na Disco' : 'Shopify Premier projects at Disco' },
    { y: '2015 — ' + (lang === 'pt' ? 'atual' : 'current'), r: lang === 'pt' ? 'Catálogo referência nacional no setor' : 'Nationally recognized catalog in the sector', p: 'Mielle Brinquedos' },
    { y: '2024', r: lang === 'pt' ? 'Redução de 40% no tempo design→dev' : '40% reduction in design→dev time', p: lang === 'pt' ? 'Design system Shopify · Disco' : 'Shopify design system · Disco' },
  ];
  const skills = [
    'Brand Strategy', 'Visual Identity', 'Character Design', 'Packaging',
    'E-commerce / Shopify', 'Figma', 'UX Research', 'Design Systems',
    'Wireframing & Prototyping', 'Mobile-First', 'WCAG 2.1', 'A/B Testing',
    'Adobe Illustrator', 'Adobe Photoshop', 'Direção de arte', 'Design Thinking'
  ];
  const langs = lang === 'pt'
    ? ['Português (Nativo)', 'Inglês (Avançado)', 'Espanhol (Intermediário)']
    : ['Portuguese (Native)', 'English (Advanced)', 'Spanish (Intermediate)'];

  return (
    <section className="cv fade-in" data-screen-label="06 CV">
      <div className="cv-head">
        <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          <div className="cv-square-photo" />
          <div>
            <div className="mono" style={{ color: 'var(--ink-mute)', marginBottom: 18 }}>{t.cvTitle} · 2026</div>
            <h1>Vinicius<br/>Siqueira</h1>
          </div>
        </div>
        <a className="download" href="https://wa.me/5511986366052" target="_blank" rel="noopener noreferrer">
          {lang === 'pt' ? '↗ Falar no WhatsApp' : '↗ WhatsApp me'}
        </a>
      </div>

      <div className="cv-section">
        <h2>{t.experience}</h2>
        {exp.map((e, i) => (
          <div key={i} className="row">
            <div className="year">{e.y}</div>
            <div className="role">{e.r}</div>
            <div className="place">{e.p}</div>
          </div>
        ))}
      </div>

      <div className="cv-section">
        <h2>{t.education}</h2>
        {edu.map((e, i) => (
          <div key={i} className="row">
            <div className="year">{e.y}</div>
            <div className="role">{e.r}</div>
            <div className="place">{e.p}</div>
          </div>
        ))}
      </div>

      <div className="cv-section">
        <h2>{t.recognition}</h2>
        {recog.map((e, i) => (
          <div key={i} className="row">
            <div className="year">{e.y}</div>
            <div className="role">{e.r}</div>
            <div className="place">{e.p}</div>
          </div>
        ))}
      </div>

      <div className="cv-section">
        <h2>{t.skills}</h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 8 }}>
          {skills.map(s => (
            <span key={s} style={{
              fontFamily: 'var(--display)', fontSize: 16,
              padding: '10px 16px', border: '1px solid var(--line-soft)', borderRadius: 999
            }}>{s}</span>
          ))}
        </div>
      </div>

      <div className="cv-section" style={{ borderBottom: 0 }}>
        <h2>{lang === 'pt' ? 'Idiomas' : 'Languages'}</h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, fontFamily: 'var(--display)', fontSize: 17 }}>
          {langs.map(l => <span key={l}>{l}</span>)}
        </div>
      </div>
    </section>
  );
};