import React, { StrictMode, useEffect, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import brandLogo from '../img/logos-03.svg';
import heroDesignImage from '../img/hero-design-studio.png';
import './styles.css';

const WHATSAPP_NUMBER = '5511993955093';
const SECTION_IDS = ['inicio', 'sobre', 'servicos', 'contato'];
const BRAND_PURPLE = '#CEA9FF';
const NEUTRAL_DARK = '#252525';

/* Project data removed from the public presentation.
  {
    id: 'ardox-web',
    index: '01',
    title: 'Ardo-X',
    category: 'digital',
    image: ardoImage,
    accent: BRAND_PURPLE,
    tone: NEUTRAL_DARK,
    type: { pt: 'Experiência digital', en: 'Digital experience', es: 'Experiencia digital' },
    description: {
      pt: 'Uma presença digital que transforma tecnologia térmica em uma jornada clara e contemporânea.',
      en: 'A digital presence that turns thermal technology into a clear, contemporary journey.',
      es: 'Una presencia digital que transforma la tecnología térmica en una experiencia clara y contemporánea.'
    },
    summary: {
      pt: 'Estratégia, interface e direção de arte para aproximar uma marca técnica das pessoas.',
      en: 'Strategy, interface and art direction bringing a technical brand closer to people.',
      es: 'Estrategia, interfaz y dirección de arte para acercar una marca técnica a las personas.'
    },
    tags: ['UX/UI', 'Web design', 'Direção de arte']
  },
  {
    id: 'golden-beard',
    index: '02',
    title: 'Golden Beard',
    category: 'branding',
    image: goldenImage,
    accent: BRAND_PURPLE,
    tone: NEUTRAL_DARK,
    type: { pt: 'Identidade visual', en: 'Visual identity', es: 'Identidad visual' },
    description: {
      pt: 'Uma marca de presença marcante, com códigos visuais inspirados no cuidado e na tradição.',
      en: 'A bold brand with visual codes inspired by care and tradition.',
      es: 'Una marca con carácter y códigos visuales inspirados en el cuidado y la tradición.'
    },
    summary: {
      pt: 'Uma identidade criada para fazer cada ponto de contato parecer parte do mesmo ritual.',
      en: 'An identity designed to make every touchpoint feel part of the same ritual.',
      es: 'Una identidad concebida para que cada punto de contacto parezca parte del mismo ritual.'
    },
    tags: ['Branding', 'Identidade', 'Aplicações']
  },
  {
    id: 'prof-monique',
    index: '03',
    title: 'Professora Monique',
    category: 'branding',
    image: moniqueImage,
    accent: BRAND_PURPLE,
    tone: NEUTRAL_DARK,
    type: { pt: 'Identidade visual', en: 'Visual identity', es: 'Identidad visual' },
    description: {
      pt: 'Identidade acolhedora para uma educadora que ensina de forma próxima e humana.',
      en: 'A welcoming identity for an educator who teaches with closeness and humanity.',
      es: 'Una identidad acogedora para una educadora que enseña con cercanía y humanidad.'
    },
    summary: {
      pt: 'Um sistema gráfico flexível para comunicar conteúdo, confiança e proximidade.',
      en: 'A flexible graphic system that communicates content, trust and closeness.',
      es: 'Un sistema gráfico flexible para comunicar contenido, confianza y cercanía.'
    },
    tags: ['Branding', 'Estratégia', 'Social']
  },
  {
    id: 'haaram',
    index: '04',
    title: 'Haaram',
    category: 'branding',
    image: haaramImage,
    accent: BRAND_PURPLE,
    tone: NEUTRAL_DARK,
    type: { pt: 'Identidade visual', en: 'Visual identity', es: 'Identidad visual' },
    description: {
      pt: 'Uma linguagem visual contemporânea, criada para uma marca de atitude singular.',
      en: 'A contemporary visual language for a brand with a singular attitude.',
      es: 'Un lenguaje visual contemporáneo para una marca con una actitud singular.'
    },
    summary: {
      pt: 'Tipografia, cor e detalhes gráficos criando reconhecimento sem perder espontaneidade.',
      en: 'Typography, colour and graphic details building recognition without losing spontaneity.',
      es: 'Tipografía, color y detalles gráficos que crean reconocimiento sin perder espontaneidad.'
    },
    tags: ['Naming', 'Identidade', 'Direção de arte']
  },
  {
    id: 'ardox-social',
    index: '05',
    title: 'Ardo-X Social',
    category: 'social',
    image: socialImage,
    accent: BRAND_PURPLE,
    tone: NEUTRAL_DARK,
    type: { pt: 'Conteúdo social', en: 'Social content', es: 'Contenido social' },
    description: {
      pt: 'Peças que aproximam produto, informação e audiência em uma linguagem fácil de reconhecer.',
      en: 'Pieces that connect product, information and audience in a recognisable language.',
      es: 'Piezas que acercan producto, información y audiencia en un lenguaje reconocible.'
    },
    summary: {
      pt: 'Um kit de comunicação contínua pensado para informar, conectar e manter a marca ativa.',
      en: 'An always-on communication kit designed to inform, connect and keep the brand active.',
      es: 'Un kit de comunicación continua pensado para informar, conectar y mantener activa la marca.'
    },
    tags: ['Social media', 'Campanha', 'Conteúdo']
  },
  {
    id: 'decorlyne',
    index: '06',
    title: 'Decorlyne',
    category: 'digital',
    image: decorlyneImage,
    accent: BRAND_PURPLE,
    tone: NEUTRAL_DARK,
    type: { pt: 'Desenvolvimento web', en: 'Web development', es: 'Desarrollo web' },
    description: {
      pt: 'Um site institucional que valoriza projetos sob medida e inspira novos ambientes.',
      en: 'An institutional website that showcases tailor-made projects and inspires new spaces.',
      es: 'Un sitio institucional que valora proyectos a medida e inspira nuevos espacios.'
    },
    summary: {
      pt: 'Arquitetura de informação e estética para fazer o portfólio trabalhar a favor do negócio.',
      en: 'Information architecture and aesthetics that make the portfolio work for the business.',
      es: 'Arquitectura de información y estética para que el portafolio trabaje para el negocio.'
    },
    tags: ['Web design', 'UX/UI', 'Conteúdo']
  }
*/

const copy = {
  pt: {
    navigation: [
      ['inicio', 'Início'],
      ['sobre', 'Estúdio'],
      ['servicos', 'Serviços'],
      ['contato', 'Contato']
    ],
    menu: 'Abrir menu',
    closeMenu: 'Fechar menu',
    themeToLight: 'Usar tema claro',
    themeToDark: 'Usar tema escuro',
    language: 'Idioma',
    hero: {
      overline: 'Gui Ortiz · Designer gráfico',
      titleStart: 'Design que faz',
      titleAccent: 'marcas ganharem',
      titleEnd: 'vida própria.',
      text: 'Identidades, experiências digitais e sistemas visuais para negócios que querem ocupar espaço na memória das pessoas.',
      primary: 'Conhecer serviços',
      secondary: 'Iniciar conversa',
      detail: 'Direção de arte · Branding · Digital',
      scroll: 'Role para explorar'
    },
    metrics: [
      ['10+', 'anos de repertório'],
      ['03', 'frentes de atua\u00e7\u00e3o'],
      ['01', 'parceria de cada vez']
    ],
    about: {
      label: 'O estúdio',
      title: 'Mais clareza para a marca. Mais vontade de escolher você.',
      text: 'Sou Guilherme Ortiz, designer gráfico e professor de Design. Há mais de uma década, transformo contextos complexos em marcas com personalidade, consistência e intenção.',
      textSecond: 'O trabalho nasce da escuta, ganha direção e termina pronto para viver em todos os seus pontos de contato.',
      link: 'Conhecer o processo',
      cardLabel: 'Princípio de trabalho',
      cardTitle: 'Estratégia não precisa parecer séria para ser levada a sério.',
      cardText: 'Toda decisão visual deve ter um porquê — e uma energia impossível de ignorar.'
    },
    /* Portfolio content removed from the public presentation.
    portfolio: {
      label: 'Projetos selecionados',
      title: 'Um portfólio para explorar, não só para olhar.',
      text: 'Escolha uma disciplina, abra um projeto e veja como ideia, estética e propósito se encontram.',
      filters: { all: 'Tudo', branding: 'Identidade', digital: 'Digital', social: 'Social' },
      results: 'projetos',
      open: 'Abrir projeto',
      empty: 'Ainda não há projetos nessa seleção.'
    }, */
    services: {
      label: 'Em que posso somar',
      title: 'Do primeiro rabisco à presença que permanece.',
      text: 'Escolha um território para ver o que ele pode destravar para a sua marca.',
      items: [
        {
          id: 'branding',
          number: '01',
          title: 'Identidade visual',
          short: 'Uma marca reconhecível antes mesmo de ser explicada.',
          detail: 'Posicionamento, identidade, direção de arte e aplicações para fazer a marca nascer com sistema e personalidade.',
          deliverables: ['Diagnóstico', 'Sistema visual', 'Guia de uso']
        },
        {
          id: 'digital',
          number: '02',
          title: 'Experiências digitais',
          short: 'Interfaces que conduzem, informam e convencem.',
          detail: 'Estratégia de conteúdo, UX/UI e design responsivo para transformar uma visita em uma relação com a marca.',
          deliverables: ['Estrutura', 'UX/UI', 'Protótipo']
        },
        {
          id: 'social',
          number: '03',
          title: 'Conteúdo & editorial',
          short: 'Consistência para a marca continuar interessante todos os dias.',
          detail: 'Campanhas, sistemas para social media e materiais editoriais que organizam a mensagem sem tirar sua força.',
          deliverables: ['Campanha', 'Templates', 'Direção criativa']
        }
      ]
    },
    process: {
      label: 'Um processo com ritmo',
      title: 'Criar junto, com espaço para pensar.',
      steps: [
        ['01', 'Escutar', 'Entender onde a marca está, o que ela quer mover e com quem precisa falar.'],
        ['02', 'Dar direção', 'Transformar descobertas em um território visual que faça sentido e dê vontade de seguir.'],
        ['03', 'Construir', 'Refinar cada detalhe até que o sistema funcione com consistência na vida real.'],
        ['04', 'Colocar no mundo', 'Entregar materiais organizados e uma marca pronta para continuar crescendo.']
      ]
    },
    contact: {
      label: 'Vamos criar alguma coisa boa',
      title: 'Seu próximo capítulo de marca pode começar por aqui.',
      text: 'Me conte por onde você quer começar. Eu preparo a conversa; você chega com a ideia.',
      question: 'Qual é o foco do seu projeto?',
      options: [
        ['branding', 'Identidade visual'],
        ['digital', 'Site ou produto digital'],
        ['social', 'Conteúdo e social media'],
        ['other', 'Ainda estou descobrindo']
      ],
      selected: 'Selecionado:',
      cta: 'Levar essa ideia ao WhatsApp',
      hint: 'Sem formulário perdido. A conversa continua direto no WhatsApp.'
    },
    modal: {
      close: 'Fechar detalhes',
      label: 'Projeto selecionado',
      scope: 'Escopo',
      talk: 'Quero algo nessa direção',
      next: 'Próximo projeto'
    },
    footer: 'Direção de arte, identidades visuais e comunicação digital.',
    backToTop: 'Voltar ao topo',
    whatsapp: 'Falar no WhatsApp',
    ariaProjects: 'Lista de projetos',
    message: (focus) => `Olá, Gui! Gostaria de conversar sobre ${focus || 'um novo projeto'}.`
  },
  en: {
    navigation: [
      ['inicio', 'Home'],
      ['sobre', 'Studio'],
      ['servicos', 'Services'],
      ['contato', 'Contact']
    ],
    menu: 'Open menu',
    closeMenu: 'Close menu',
    themeToLight: 'Use light theme',
    themeToDark: 'Use dark theme',
    language: 'Language',
    hero: {
      overline: 'Gui Ortiz · Graphic designer',
      titleStart: 'Design that makes',
      titleAccent: 'brands take on',
      titleEnd: 'a life of their own.',
      text: 'Identities, digital experiences and visual systems for businesses that want to live in people’s minds.',
      primary: 'Explore services',
      secondary: 'Start a conversation',
      detail: 'Art direction · Branding · Digital',
      scroll: 'Scroll to explore'
    },
    metrics: [
      ['10+', 'years of experience'],
      ['03', 'core services'],
      ['01', 'partnership at a time']
    ],
    about: {
      label: 'The studio',
      title: 'More clarity for your brand. More reasons to choose it.',
      text: 'I’m Guilherme Ortiz, a graphic designer and Design teacher. For more than a decade, I’ve turned complex contexts into brands with personality, consistency and intent.',
      textSecond: 'The work starts with listening, gains direction and ends ready to live at every touchpoint.',
      link: 'See the process',
      cardLabel: 'Working principle',
      cardTitle: 'Strategy does not need to look serious to be taken seriously.',
      cardText: 'Every visual decision needs a reason — and an energy that is impossible to ignore.'
    },
    /* Portfolio content removed from the public presentation.
    portfolio: {
      label: 'Selected work',
      title: 'A portfolio to explore, not just look at.',
      text: 'Pick a discipline, open a project and see where idea, aesthetics and purpose meet.',
      filters: { all: 'All work', branding: 'Branding', digital: 'Digital', social: 'Social' },
      results: 'projects',
      open: 'Open project',
      empty: 'There are no projects in this selection yet.'
    }, */
    services: {
      label: 'How I can help',
      title: 'From first sketch to a presence that endures.',
      text: 'Choose a territory to see what it can unlock for your brand.',
      items: [
        { id: 'branding', number: '01', title: 'Visual identity', short: 'A brand recognised before it has to explain itself.', detail: 'Positioning, identity, art direction and applications to make the brand start with a system and personality.', deliverables: ['Discovery', 'Visual system', 'Guidelines'] },
        { id: 'digital', number: '02', title: 'Digital experiences', short: 'Interfaces that guide, inform and persuade.', detail: 'Content strategy, UX/UI and responsive design turning a visit into a relationship with the brand.', deliverables: ['Structure', 'UX/UI', 'Prototype'] },
        { id: 'social', number: '03', title: 'Content & editorial', short: 'Consistency that keeps a brand interesting every day.', detail: 'Campaigns, social systems and editorial pieces that organise the message without losing its strength.', deliverables: ['Campaign', 'Templates', 'Creative direction'] }
      ]
    },
    process: {
      label: 'A process with rhythm',
      title: 'Creating together, with room to think.',
      steps: [
        ['01', 'Listen', 'Understand where the brand is, what it wants to move and who it needs to speak to.'],
        ['02', 'Set direction', 'Turn discoveries into a visual territory that makes sense and invites action.'],
        ['03', 'Build', 'Refine every detail until the system works consistently in real life.'],
        ['04', 'Put it into the world', 'Deliver organised materials and a brand ready to keep growing.']
      ]
    },
    contact: {
      label: 'Let’s make something good',
      title: 'Your brand’s next chapter can start here.',
      text: 'Tell me where you want to start. I’ll prepare the conversation; you bring the idea.',
      question: 'What is the focus of your project?',
      options: [['branding', 'Visual identity'], ['digital', 'Website or digital product'], ['social', 'Content and social media'], ['other', 'I’m still figuring it out']],
      selected: 'Selected:',
      cta: 'Take this idea to WhatsApp',
      hint: 'No lost forms. The conversation continues straight on WhatsApp.'
    },
    modal: { close: 'Close details', label: 'Selected project', scope: 'Scope', talk: 'I want something in this direction', next: 'Next project' },
    footer: 'Art direction, visual identities and digital communication.',
    backToTop: 'Back to top',
    whatsapp: 'Talk on WhatsApp',
    ariaProjects: 'Project list',
    message: (focus) => `Hi, Gui! I’d like to talk about ${focus || 'a new project'}.`
  },
  es: {
    navigation: [
      ['inicio', 'Inicio'],
      ['sobre', 'Estudio'],
      ['servicos', 'Servicios'],
      ['contato', 'Contacto']
    ],
    menu: 'Abrir menú',
    closeMenu: 'Cerrar menú',
    themeToLight: 'Usar tema claro',
    themeToDark: 'Usar tema oscuro',
    language: 'Idioma',
    hero: {
      overline: 'Gui Ortiz · Diseñador gráfico',
      titleStart: 'Diseño que hace que',
      titleAccent: 'las marcas cobren',
      titleEnd: 'vida propia.',
      text: 'Identidades, experiencias digitales y sistemas visuales para negocios que quieren ocupar un lugar en la memoria de las personas.',
      primary: 'Conocer servicios',
      secondary: 'Iniciar conversación',
      detail: 'Dirección de arte · Branding · Digital',
      scroll: 'Desplázate para explorar'
    },
    metrics: [
      ['10+', 'años de experiencia'],
      ['03', 'servicios principales'],
      ['01', 'alianza a la vez']
    ],
    about: {
      label: 'El estudio',
      title: 'Más claridad para la marca. Más ganas de elegirte.',
      text: 'Soy Guilherme Ortiz, diseñador gráfico y profesor de Diseño. Desde hace más de una década, transformo contextos complejos en marcas con personalidad, consistencia e intención.',
      textSecond: 'El trabajo nace de la escucha, gana dirección y termina listo para vivir en cada punto de contacto.',
      link: 'Conocer el proceso',
      cardLabel: 'Principio de trabajo',
      cardTitle: 'La estrategia no necesita parecer seria para ser tomada en serio.',
      cardText: 'Cada decisión visual necesita un porqué y una energía imposible de ignorar.'
    },
    /* Portfolio content removed from the public presentation.
    portfolio: {
      label: 'Proyectos seleccionados',
      title: 'Un portafolio para explorar, no solo para mirar.',
      text: 'Elige una disciplina, abre un proyecto y descubre dónde se encuentran idea, estética y propósito.',
      filters: { all: 'Todo', branding: 'Identidad', digital: 'Digital', social: 'Social' },
      results: 'proyectos',
      open: 'Abrir proyecto',
      empty: 'Aún no hay proyectos en esta selección.'
    }, */
    services: {
      label: 'Cómo puedo ayudar',
      title: 'Del primer boceto a una presencia que perdura.',
      text: 'Elige un territorio para ver lo que puede desbloquear para tu marca.',
      items: [
        { id: 'branding', number: '01', title: 'Identidad visual', short: 'Una marca reconocible antes de tener que explicarse.', detail: 'Posicionamiento, identidad, dirección de arte y aplicaciones para que la marca nazca con sistema y personalidad.', deliverables: ['Diagnóstico', 'Sistema visual', 'Guía de uso'] },
        { id: 'digital', number: '02', title: 'Experiencias digitales', short: 'Interfaces que guían, informan y convencen.', detail: 'Estrategia de contenido, UX/UI y diseño responsivo para convertir una visita en una relación con la marca.', deliverables: ['Estructura', 'UX/UI', 'Prototipo'] },
        { id: 'social', number: '03', title: 'Contenido y editorial', short: 'Consistencia para que la marca siga siendo interesante cada día.', detail: 'Campañas, sistemas de social media y piezas editoriales que organizan el mensaje sin quitarle fuerza.', deliverables: ['Campaña', 'Plantillas', 'Dirección creativa'] }
      ]
    },
    process: {
      label: 'Un proceso con ritmo',
      title: 'Crear juntos, con espacio para pensar.',
      steps: [
        ['01', 'Escuchar', 'Entender dónde está la marca, qué quiere mover y con quién necesita hablar.'],
        ['02', 'Dar dirección', 'Transformar hallazgos en un territorio visual que tenga sentido e invite a avanzar.'],
        ['03', 'Construir', 'Refinar cada detalle hasta que el sistema funcione con consistencia en la vida real.'],
        ['04', 'Llevar al mundo', 'Entregar materiales organizados y una marca lista para seguir creciendo.']
      ]
    },
    contact: {
      label: 'Vamos a crear algo bueno',
      title: 'El próximo capítulo de tu marca puede empezar aquí.',
      text: 'Cuéntame por dónde quieres comenzar. Yo preparo la conversación; tú llegas con la idea.',
      question: '¿Cuál es el foco de tu proyecto?',
      options: [['branding', 'Identidad visual'], ['digital', 'Sitio o producto digital'], ['social', 'Contenido y social media'], ['other', 'Aún lo estoy descubriendo']],
      selected: 'Seleccionado:',
      cta: 'Llevar esta idea a WhatsApp',
      hint: 'Sin formularios perdidos. La conversación sigue directo en WhatsApp.'
    },
    modal: { close: 'Cerrar detalles', label: 'Proyecto seleccionado', scope: 'Alcance', talk: 'Quiero algo en esta dirección', next: 'Siguiente proyecto' },
    footer: 'Dirección de arte, identidades visuales y comunicación digital.',
    backToTop: 'Volver arriba',
    whatsapp: 'Hablar por WhatsApp',
    ariaProjects: 'Lista de proyectos',
    message: (focus) => `Hola, Gui. Me gustaría conversar sobre ${focus || 'un nuevo proyecto'}.`
  }
};

function Arrow({ direction = 'right' }) {
  return <span className={`arrow arrow--${direction}`} aria-hidden="true">→</span>;
}

function useStoredState(key, defaultValue) {
  const [value, setValue] = useState(() => {
    try {
      return window.localStorage.getItem(key) || defaultValue;
    } catch {
      return defaultValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, value);
    } catch {
      // Persisting the preference is optional when storage is unavailable.
    }
  }, [key, value]);

  return [value, setValue];
}

function useScrollSpy(sectionIds) {
  const [active, setActive] = useState(sectionIds[0]);

  useEffect(() => {
    const observed = sectionIds
      .map((id) => document.getElementById(id))
      .filter(Boolean);

    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) setActive(visible[0].target.id);
      },
      { rootMargin: '-28% 0px -58% 0px', threshold: [0.01, 0.25, 0.6] }
    );

    observed.forEach((section) => observer.observe(section));
    return () => observer.disconnect();
  }, [sectionIds]);

  return active;
}

function Reveal({ as: Element = 'section', className = '', children, ...props }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const node = ref.current;
    if (!node) return undefined;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.12 }
    );
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  return <Element ref={ref} className={`reveal ${visible ? 'is-visible' : ''} ${className}`.trim()} {...props}>{children}</Element>;
}

function Header({ t, language, setLanguage, theme, setTheme, activeSection }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const navItems = t.navigation;

  useEffect(() => {
    const closeMenuOnResize = () => {
      if (window.innerWidth > 760) setMenuOpen(false);
    };
    window.addEventListener('resize', closeMenuOnResize);
    return () => window.removeEventListener('resize', closeMenuOnResize);
  }, []);

  return (
    <header className="site-header">
      <div className="header-inner">
        <a className="brand" href="#inicio" aria-label="Gui Ortiz — início" onClick={() => setMenuOpen(false)}>
          <img src={brandLogo} alt="Gui Ortiz Designer Gráfico" />
        </a>

        <button
          className={`menu-toggle ${menuOpen ? 'is-open' : ''}`}
          type="button"
          aria-expanded={menuOpen}
          aria-label={menuOpen ? t.closeMenu : t.menu}
          onClick={() => setMenuOpen((open) => !open)}
        >
          <span />
          <span />
        </button>

        <div className={`header-actions ${menuOpen ? 'is-open' : ''}`}>
          <nav className="main-nav" aria-label="Navegação principal">
            {navItems.map(([id, label]) => (
              <a
                className={activeSection === id ? 'is-active' : ''}
                href={`#${id}`}
                key={id}
                onClick={() => setMenuOpen(false)}
              >
                <span>{label}</span>
              </a>
            ))}
          </nav>

          <div className="header-tools">
            <div className="language-switch" role="group" aria-label={t.language}>
              {['pt', 'en', 'es'].map((locale) => (
                <button
                  key={locale}
                  type="button"
                  className={language === locale ? 'is-active' : ''}
                  aria-pressed={language === locale}
                  onClick={() => setLanguage(locale)}
                >
                  {locale.toUpperCase()}
                </button>
              ))}
            </div>
            <button
              className="theme-toggle"
              type="button"
              onClick={() => setTheme((current) => (current === 'dark' ? 'light' : 'dark'))}
              aria-label={theme === 'dark' ? t.themeToLight : t.themeToDark}
              title={theme === 'dark' ? t.themeToLight : t.themeToDark}
            >
              <span aria-hidden="true">{theme === 'dark' ? '☼' : '◐'}</span>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

function Hero({ t }) {
  return (
    <section id="inicio" className="hero" aria-labelledby="hero-title">
      <div className="shell hero-layout">
        <div className="hero-copy">
          <p className="kicker"><span className="kicker-dot" />{t.hero.overline}</p>
          <h1 id="hero-title">
            <span>{t.hero.titleStart}</span>
            <span className="hero-highlight">{t.hero.titleAccent}</span>
            <span>{t.hero.titleEnd}</span>
          </h1>
          <p className="hero-text">{t.hero.text}</p>
          <div className="hero-cta">
            <a className="button button--primary" href="#servicos">
              {t.hero.primary}<Arrow />
            </a>
            <a className="button button--quiet" href="#contato">
              <span className="button-pulse" />{t.hero.secondary}
            </a>
          </div>
          <div className="hero-footer">
            <span>{t.hero.scroll}</span>
            <i aria-hidden="true" />
            <span>{t.hero.detail}</span>
          </div>
        </div>

        <div className="hero-gallery" aria-label="Graphic design workspace">
          <div className="hero-main-shot">
            <img src={heroDesignImage} alt="Graphic design studio workspace" fetchPriority="high" />
          </div>
          {/*
          <div className="hero-gallery__meta">
            <span>{t.portfolio.label}</span>
            <span>{featuredProject.index} / 06</span>
          </div>
          <button className="hero-main-shot" type="button" onClick={() => onProjectOpen(featuredProject)} aria-label={`Abrir ${featuredProject.title}`}>
            <img src={featuredProject.image} alt={`Projeto ${featuredProject.title}`} fetchPriority="high" />
          </button>
          <div className="hero-shot-caption">
            <span>{featuredProject.type[t.__language]}</span>
            <b>{featuredProject.title}</b>
            <span className="hero-shot-caption__arrow" aria-hidden="true">↗</span>
          </div>
          */}
        </div>
      </div>
    </section>
  );
}

function About({ t }) {
  return (
    <Reveal id="sobre" className="section about-section" aria-labelledby="about-title">
      <div className="shell">
        <div className="section-top section-top--split">
          <div>
            <p className="kicker">{t.about.label}</p>
            <h2 id="about-title">{t.about.title}</h2>
          </div>
          <div className="section-side-note">
            <span>01 / 04</span>
            <p>Gui Ortiz<br />Designer independente</p>
          </div>
        </div>
        <div className="about-grid">
          <div className="about-prose">
            <p>{t.about.text}</p>
            <p>{t.about.textSecond}</p>
            <a className="inline-link" href="#processo">{t.about.link}<Arrow /></a>
          </div>
          <aside className="principle-card">
            <span className="card-index">{t.about.cardLabel}</span>
            <p>{t.about.cardTitle}</p>
            <span className="card-divider" />
            <small>{t.about.cardText}</small>
          </aside>
        </div>
      </div>
    </Reveal>
  );
}

/* Project gallery removed from the public presentation.
function ProjectCard({ project, t, onOpen, featured }) {
  return (
    <article
      className={`project-card ${featured ? 'project-card--featured' : ''}`}
      style={{ '--project-accent': project.accent, '--project-tone': project.tone }}
    >
      <button type="button" className="project-card__click" onClick={() => onOpen(project)} aria-label={`${t.portfolio.open}: ${project.title}`}>
        <span className="project-card__media">
          <img src={project.image} alt={`Projeto ${project.title}`} loading="lazy" />
          <span className="project-card__veil" />
          <span className="project-card__number">{project.index}</span>
          <span className="project-card__open"><span>{t.portfolio.open}</span><Arrow direction="up" /></span>
        </span>
        <span className="project-card__body">
          <span className="project-card__type">{project.type[t.__language]}</span>
          <strong>{project.title}</strong>
          <span className="project-card__description">{project.description[t.__language]}</span>
        </span>
      </button>
    </article>
  );
}

function Portfolio({ t, onProjectOpen }) {
  const [filter, setFilter] = useState('all');
  const shownProjects = useMemo(
    () => (filter === 'all' ? projects : projects.filter((project) => project.category === filter)),
    [filter]
  );
  const filters = ['all', 'branding', 'digital', 'social'];

  return (
    <Reveal id="portfolio" className="section portfolio-section" aria-labelledby="portfolio-title">
      <div className="shell">
        <div className="section-top section-top--portfolio">
          <div>
            <p className="kicker">{t.portfolio.label}</p>
            <h2 id="portfolio-title">{t.portfolio.title}</h2>
          </div>
          <p className="section-intro">{t.portfolio.text}</p>
        </div>
        <div className="portfolio-controls">
          <div className="filter-list" role="tablist" aria-label="Filtrar portfólio">
            {filters.map((item) => (
              <button
                key={item}
                type="button"
                role="tab"
                aria-selected={filter === item}
                className={filter === item ? 'is-active' : ''}
                onClick={() => setFilter(item)}
              >
                <span>{t.portfolio.filters[item]}</span>
                <b>{item === 'all' ? projects.length : projects.filter((project) => project.category === item).length}</b>
              </button>
            ))}
          </div>
          <span className="projects-count">{String(shownProjects.length).padStart(2, '0')} {t.portfolio.results}</span>
        </div>
        <div className="projects-grid" aria-label={t.ariaProjects}>
          {shownProjects.map((project, index) => <ProjectCard key={project.id} project={project} t={t} onOpen={onProjectOpen} featured={filter === 'all' && index === 0} />)}
        </div>
        {!shownProjects.length && <p className="empty-state">{t.portfolio.empty}</p>}
      </div>
    </Reveal>
  );
}

*/

function Services({ t, onStartBrief }) {
  const [activeId, setActiveId] = useState(t.services.items[0].id);
  const activeService = t.services.items.find((service) => service.id === activeId) || t.services.items[0];

  return (
    <Reveal id="servicos" className="section services-section" aria-labelledby="services-title">
      <div className="shell">
        <div className="section-top section-top--portfolio">
          <div>
            <p className="kicker">{t.services.label}</p>
            <h2 id="services-title">{t.services.title}</h2>
          </div>
          <p className="section-intro">{t.services.text}</p>
        </div>
        <div className="services-explorer">
          <div className="service-list" role="tablist" aria-label={t.services.label}>
            {t.services.items.map((service) => (
              <button
                key={service.id}
                role="tab"
                aria-selected={activeId === service.id}
                type="button"
                className={activeId === service.id ? 'is-active' : ''}
                onClick={() => setActiveId(service.id)}
              >
                <span>{service.number}</span>
                <strong>{service.title}</strong>
                <i aria-hidden="true"><Arrow /></i>
              </button>
            ))}
          </div>
          <div className="service-detail" key={activeService.id}>
            <span className="detail-label">{activeService.number} / {activeService.title}</span>
            <h3>{activeService.short}</h3>
            <p>{activeService.detail}</p>
            <ul>
              {activeService.deliverables.map((item) => <li key={item}>{item}</li>)}
            </ul>
            <button className="inline-link inline-link--button" type="button" onClick={() => onStartBrief(activeService.id)}>
              {t.contact.cta}<Arrow />
            </button>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function Process({ t }) {
  return (
    <Reveal id="processo" className="section process-section" aria-labelledby="process-title">
      <div className="shell">
        <div className="process-heading">
          <p className="kicker">{t.process.label}</p>
          <h2 id="process-title">{t.process.title}</h2>
        </div>
        <ol className="process-list">
          {t.process.steps.map(([number, title, text]) => (
            <li key={number}>
              <span>{number}</span>
              <h3>{title}</h3>
              <p>{text}</p>
              <i aria-hidden="true" />
            </li>
          ))}
        </ol>
      </div>
    </Reveal>
  );
}

function Contact({ t, brief, setBrief }) {
  const selected = t.contact.options.find(([id]) => id === brief) || t.contact.options[0];
  const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(t.message(selected[1]))}`;

  return (
    <Reveal id="contato" className="section contact-section" aria-labelledby="contact-title">
      <div className="shell">
        <div className="contact-panel">
          <div className="contact-copy">
            <p className="kicker">{t.contact.label}</p>
            <h2 id="contact-title">{t.contact.title}</h2>
            <p>{t.contact.text}</p>
          </div>
          <div className="brief-card">
            <p className="brief-question">{t.contact.question}</p>
            <div className="brief-options" role="group" aria-label={t.contact.question}>
              {t.contact.options.map(([id, label]) => (
                <button key={id} type="button" className={brief === id ? 'is-active' : ''} aria-pressed={brief === id} onClick={() => setBrief(id)}>
                  <span>{label}</span><i aria-hidden="true">↗</i>
                </button>
              ))}
            </div>
            <div className="brief-footer">
              <p><span>{t.contact.selected}</span> {selected[1]}</p>
              <a className="button button--primary" href={whatsappUrl} target="_blank" rel="noreferrer">
                {t.contact.cta}<Arrow />
              </a>
            </div>
            <small>{t.contact.hint}</small>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function Footer({ t }) {
  return (
    <footer className="site-footer">
      <div className="shell footer-inner">
        <div>
          <a className="footer-logo" href="#inicio">GO<span>®</span></a>
          <p>© {new Date().getFullYear()} Gui Ortiz. {t.footer}</p>
        </div>
        <a className="back-top" href="#inicio">{t.backToTop}<Arrow direction="up" /></a>
      </div>
    </footer>
  );
}

/* Project modal removed from the public presentation.
function ProjectModal({ project, t, onClose, onNext }) {
  const closeRef = useRef(null);

  useEffect(() => {
    if (!project) return undefined;
    const handleKey = (event) => {
      if (event.key === 'Escape') onClose();
    };
    document.body.classList.add('modal-is-open');
    window.addEventListener('keydown', handleKey);
    window.setTimeout(() => closeRef.current?.focus(), 0);
    return () => {
      document.body.classList.remove('modal-is-open');
      window.removeEventListener('keydown', handleKey);
    };
  }, [project, onClose]);

  if (!project) return null;
  const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(t.message(project.title))}`;

  return (
    <div className="modal-backdrop" role="presentation" onMouseDown={(event) => event.target === event.currentTarget && onClose()}>
      <section className="project-modal" style={{ '--project-accent': project.accent }} role="dialog" aria-modal="true" aria-labelledby="project-modal-title">
        <button ref={closeRef} className="modal-close" type="button" onClick={onClose} aria-label={t.modal.close}><span /><span /></button>
        <div className="modal-image" style={{ '--project-accent': project.accent }}>
          <img src={project.image} alt={`Projeto ${project.title}`} />
          <span>{project.index} / 06</span>
        </div>
        <div className="modal-copy">
          <p className="kicker">{t.modal.label}</p>
          <span className="modal-type">{project.type[t.__language]}</span>
          <h2 id="project-modal-title">{project.title}</h2>
          <p>{project.summary[t.__language]}</p>
          <div className="modal-scope">
            <span>{t.modal.scope}</span>
            <ul>{project.tags.map((tag) => <li key={tag}>{tag}</li>)}</ul>
          </div>
          <div className="modal-actions">
            <a className="button button--primary" href={whatsappUrl} target="_blank" rel="noreferrer">{t.modal.talk}<Arrow /></a>
            <button className="button button--quiet" type="button" onClick={onNext}>{t.modal.next}<Arrow /></button>
          </div>
        </div>
      </section>
    </div>
  );
}

*/

function App() {
  const [language, setLanguage] = useStoredState('gui-ortiz-language', 'pt');
  const [theme, setTheme] = useStoredState('gui-ortiz-theme', 'light');
  const [brief, setBrief] = useState('branding');
  const activeSection = useScrollSpy(SECTION_IDS);
  const t = { ...copy[language], __language: language };

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    document.documentElement.lang = language === 'pt' ? 'pt-BR' : language;
    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme === 'dark' ? '#1A1A1A' : '#F2F2F2');
  }, [theme, language]);

  const startBrief = (focus) => {
    setBrief(focus);
    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  return (
    <div className="app-shell">
      <Header t={t} language={language} setLanguage={setLanguage} theme={theme} setTheme={setTheme} activeSection={activeSection} />
      <main>
        <Hero t={t} />
        <div className="metrics-band" aria-label="Números do estúdio">
          <div className="shell metrics-grid">
            {t.metrics.map(([number, label]) => <div key={label}><strong>{number}</strong><span>{label}</span></div>)}
          </div>
        </div>
        <About t={t} />
        <Services t={t} onStartBrief={startBrief} />
        <Process t={t} />
        <Contact t={t} brief={brief} setBrief={setBrief} />
      </main>
      <Footer t={t} />
      <a className="whatsapp-float" href={`https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(t.message())}`} target="_blank" rel="noreferrer" aria-label={t.whatsapp} title={t.whatsapp}>
        <span aria-hidden="true">◔</span><i>WA</i>
      </a>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);