const NH_BOOK = 'mailto:hello@nothuman.digital?subject=Book%20a%20meeting';
const NH_LINKS = [{ id: 'work', label: 'Work', href: '#/work' }, { id: 'what-we-do', label: 'What We Do', href: '#/what-we-do' }, { id: 'about', label: 'About', href: '#/about' }];
const NH_SOCIAL = [{ label: 'Instagram', href: 'https://instagram.com/', icon: 'instagram' }, { label: 'LinkedIn', href: 'https://linkedin.com/', icon: 'linkedin' }, { label: 'Email', href: 'mailto:hello@nothuman.digital', icon: 'mail' }];

const NH_PROJECTS = [
  { id: 'ava', index: '01', category: 'Apparel', name: 'Ava', description: 'Digital character campaign.', year: 2026, tone: 'warm', plateLabel: 'AVA / 01', ratio: '4 / 5',
    summary: 'A digital face for an apparel label, carried across studio, street and social.', services: 'Character design, Content production',
    character: 'Ava was designed as a single, fixed identity before any content was made. Her face, build, wardrobe language and voice are locked, so every campaign frame reads as the same person.',
    result: 'One character delivered the campaign imagery, product shots and social cut-downs for the season from a single identity.' },
  { id: 'kiro', index: '02', category: 'Food', name: 'Kiro', description: 'Product content system.', year: 2026, tone: 'stone', plateLabel: 'KIRO / 02', ratio: '1 / 1',
    summary: 'One presenter for every product: packshots, recipes and short-form video on a steady cadence.', services: 'Character design, Content production',
    character: 'Kiro is a warm, practical presenter built to sit next to food. Hands, posture and lighting setups were defined so product always stays the subject.',
    result: 'A repeatable product content system: new items slot into existing scenes with the same presenter and lighting.' },
  { id: 'mira', index: '03', category: 'Education', name: 'Mira', description: 'Always-on creator.', year: 2025, tone: 'dusk', plateLabel: 'MIRA / 03', ratio: '1 / 1',
    summary: 'A tutor-creator who posts regularly and explains things the same way every time.', services: 'Character design, Channel operations',
    character: 'Mira is a calm, clear explainer. Her personality, vocabulary and on-camera habits are documented so every post sounds like her.',
    result: 'An always-on channel run around one creator, with posting, captions and community handled as one system.' },
  { id: 'noor', index: '04', category: 'Beauty / Health', name: 'Noor', description: 'Consistent digital presenter.', year: 2025, tone: 'clay', plateLabel: 'NOOR / 04', ratio: '4 / 5',
    summary: 'A presenter who stays identical across routines, retailers and regional campaigns.', services: 'Character design, Performance creative',
    character: 'Noor was built for close-up work. Skin, lighting and expression ranges were defined so she holds up in macro product shots and full campaigns alike.',
    result: 'A consistent presenter across retail, social and paid formats, with creative variations built for testing.' },
  { id: 'ira', index: '05', category: 'Travel', name: 'Ira', description: 'Regional campaign series.', year: 2025, tone: 'studio', plateLabel: 'IRA / 05', ratio: '4 / 5',
    summary: 'One character across several cities, localized in voice and wardrobe for each market.', services: 'Character design, Content production',
    character: 'Ira keeps one face and personality while wardrobe, language and locations shift per city.',
    result: 'A regional series where each market gets its own content while the character stays recognizable.' },
  { id: 'sol', index: '06', category: 'Retail', name: 'Sol', description: 'Performance creative set.', year: 2025, tone: 'warm', plateLabel: 'SOL / 06', ratio: '4 / 5',
    summary: 'Hooks, formats and offers varied around one familiar face for paid social testing.', services: 'Performance creative',
    character: 'Sol is a direct, friendly presenter designed to deliver short hooks clearly in the first seconds.',
    result: 'A library of variations across hooks, angles and formats, all built around the same face.' },
];

const NH_SERVICES = [
  { index: '01 / Character design', title: 'Character Design', description: 'Build the face, personality and visual identity.', tags: ['Face', 'Body', 'Voice', 'Wardrobe', 'Personality'], tone: 'studio' },
  { index: '02 / Content', title: 'Content Production', description: 'Create product, campaign and social content without traditional production constraints.', tags: ['Video', 'Reels', 'Campaigns', 'Product', 'Locations'], tone: 'stone' },
  { index: '03 / Channel', title: 'Channel Operations', description: 'Turn a digital character into an always-on creator.', tags: ['Posting', 'Captions', 'Community', 'Collaborations'], tone: 'dusk' },
  { index: '04 / Performance', title: 'Performance Creative', description: 'Create multiple creative variations built for testing.', tags: ['Multiple hooks', 'Multiple angles', 'Multiple variations', 'Testing'], tone: 'warm' },
];

function useIsMobile() {
  const q = '(max-width: 639px)';
  const [m, setM] = React.useState(() => window.matchMedia(q).matches);
  React.useEffect(() => { const mq = window.matchMedia(q); const on = () => setM(mq.matches); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []);
  return m;
}

function Reveal({ children, className = '', as: Tag = 'div', ...rest }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: 0.12 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <Tag ref={ref} className={('site-reveal ' + (on ? 'is-in ' : '') + className).trim()} {...rest}>{children}</Tag>;
}

Object.assign(window, { NH_BOOK, NH_LINKS, NH_SOCIAL, NH_PROJECTS, NH_SERVICES, useIsMobile, Reveal });