/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio */

const { useState, useEffect } = React;

// ---------- DATA ----------
const COPY = {
  pt: {
    nav: { work: "Trabalhos", numbers: "Números", collabs: "Colabs", services: "Serviços", contact: "Contato" },
    hero: {
      kicker: "DEJAY PRODUÇÕES LTDA",
      title1: "DEJAY PRODUÇÕES",
      title2: "A empresa que quebrou a bolha IA",
      title3: "PUBLIS 100% realistas e virais",
      sub: "Pioneiro mundial em realismo com inteligência artificial no esporte. +200 milhões de views em 10 dias.",
      cta1: "Falar comigo",
      cta2: "Ver trabalhos"
    },
    badges: ["World Top 1 — AI Realism", "Pioneiro IA no futebol BR", "Bilhões em views"],
    bio: {
      label: "Sobre",
      heading: "Obadias Guimarães da Motta Junior",
      role: "CEO — Dejay Produções Ltda.",
      body: "Criador de imagens e vídeos de ultra realismo com IA em toda a área do esporte. Pioneiro no realismo com inteligência artificial e criação de conteúdo para futebol, atraindo as principais emissoras, ligas e marcas globais que produzem com IA."
    },
    pillarsLabel: "Por que Dejay",
    pillarsKicker: "Quatro motivos pra colocar a marca ao lado de um perfil que está reescrevendo a comunicação esportiva.",
    pillars: [
    { t: "Realismo de outro nível", d: "Padrão mundial em fotorrealismo com IA — qualidade que faz a marca virar pauta orgânica nos grupos e timelines." },
    { t: "Reach 100% orgânico", d: "Bilhões de impressões sem mídia paga. Conteúdo nativo do feed, não publi disfarçada — engaja sem fricção." },
    { t: "Velocidade matchday", d: "Conceito → entrega em horas. Aproveitamos o momento do jogo, não o dia seguinte. Marca presente no calor da partida." },
    { t: "Distribuição multi-canal", d: "Nasce no @ohdejay, é amplificado pelo @cortedejay e replicado por Cazé TV, TNT, Romário TV, Ronaldo TV e Flow Podcast." }],

    statsLabel: "Números — Métricas",
    statsKicker: "Auditoria orgânica — sem mídia paga.",
    audienceLabel: "Audiência",
    audienceKicker: "Painel profissional Instagram · últimos 90 dias.",
    audienceCards: {
      geo: "Localização",
      age: "Faixa etária",
      gender: "Gênero",
      engage: "Engajamento"
    },
    videosLabel: "Trabalhos",
    videosKicker: "Toque pra abrir o reel. Quatro virais selecionados.",
    casesLabel: "Cases em destaque",
    casesKicker: "Três entregas que viraram pauta.",
    cases: [
    {
      t: "Richarlison na rocinha",
      d: "Romário, Adriano e Ronaldinho na quebrada — primeiro viral a misturar três ídolos em cena hiper-realista. Resposta de Romário, Richarlison, Jon Vlogs e Italo Ferreira no DM.",
      m: ["53,8M views", "496K curtidas", "8,1K compartilhamentos"]
    },
    {
      t: "Multiverso IA",
      d: "Série de vídeos que reimagina momentos icônicos do esporte. Estreia que destravou 300M de views em 10 dias e levou o perfil pra Top 1 mundial em realismo.",
      m: ["300M views / 10 dias", "World Top 1 AI Realism", "Repercussão global"]
    },
    {
      t: "Coberturas como influenciador",
      d: "Cobertura matchday gerando narrativas visuais ao vivo dos confrontos decisivos — conteúdo replicado por torcida e por veículos oficiais.",
      m: ["Conteúdo matchday", "Torcida + clubes", "Pauta orgânica"]
    }],

    collabsLabel: "Quem confia",
    collabsKicker: "Atletas, emissoras, ligas e marcas que já fizeram conteúdo com a Dejay.",
    collabGroups: {
      athletes: "Atletas & Influência",
      media: "Mídia & Broadcast",
      leagues: "Ligas & Federações",
      brands: "Marcas"
    },
    servicesLabel: "O que entregamos",
    services: [
    { t: "Reels virais com IA", d: "Conceito, geração e edição. Distribuição orgânica nativa do @ohdejay.", price: "a partir de" },
    { t: "Posts de campanha + Publis envolvendo IA e tecnologia de forma realista", d: "Imagens e vídeos hiper-realistas para ativações de marca, lançamentos e datas comemorativas.", price: "por imagem / vídeo" },
    { t: "Stories", d: "Sequência editorial pro feed efêmero — formato vertical, alta retenção.", price: "pacote de 3-5" },
    { t: "Matchday", d: "Conteúdo de jogo em tempo real: pré, durante e pós, com narrativa visual de IA.", price: "por jogo" }],

    processLabel: "Como trabalhamos",
    processKicker: "Do brief à viralização, em um fluxo enxuto e replicável.",
    process: [
    { t: "Brief", d: "Recebemos objetivo, KPI e tom. Resposta em 24h." },
    { t: "Conceito", d: "Direção criativa, moodboard, referências e roteiro." },
    { t: "Produção", d: "Geração IA + edição cinematográfica. Iteração rápida." },
    { t: "Aprovação", d: "Revisão final e ajuste de copy/legenda." },
    { t: "Publicação", d: "Distribuição orgânica nativa + amplificação cross-canal." }],

    contactLabel: "Vamos criar",
    contactKicker: "Para campanhas, licenciamento e parcerias.",
    rights: "Todos os direitos reservados.",
    closeBtn: "Fechar",
    openInsta: "Abrir no Instagram",
    playReel: "Tocar reel",
    showreelLabel: "SHOWREEL @OHDEJAY",
    coverPlaceholder: "Arraste a capa",
    clientLooviTag: "Cliente · seguros",
    clientTrapperTag: "Cliente · trapper",
    clientBarberTag: "Cliente · barbearia",
    clientLoovi: "LOOVI SEGUROS",
    clientTrapper: "TRAPPER",
    clientBarber: "BARBEARIA",
    clientSlotPh: "Drop 9:16",
    clientSlotHelp: "Cliente — arraste seu reel 9:16",
    viralLabel: "Galeria viral",
    viralKicker: "Selecionados das últimas semanas. Arraste suas imagens.",
    viralPh: "Arraste a viral",
    copyLink: "Copiar link",
    linkCopied: "Link copiado",
    linkCopyFail: "Não consegui copiar. URL: "
  },
  en: {
    nav: { work: "Work", numbers: "Numbers", collabs: "Collabs", services: "Services", contact: "Contact" },
    hero: {
      kicker: "DEJAY PRODUÇÕES LTDA",
      title1: "DEJAY PRODUÇÕES",
      title2: "The company that broke the AI bubble",
      title3: "100% realistic & viral brand content",
      sub: "World pioneer in AI realism for sports. 200M+ views in 10 days.",
      cta1: "Get in touch",
      cta2: "See the work"
    },
    badges: ["World Top 1 — AI Realism", "AI Football Pioneer", "Billions in views"],
    bio: {
      label: "About",
      heading: "Obadias Guimarães da Motta Junior",
      role: "CEO — Dejay Produções Ltda.",
      body: "Creator of ultra-realistic AI images and videos across all areas of sport. A pioneer of AI realism and content creation in football, drawing in the world's biggest broadcasters, leagues and brands that work with AI."
    },
    pillarsLabel: "Why Dejay",
    pillarsKicker: "Four reasons to put your brand next to the profile rewriting sports communication.",
    pillars: [
    { t: "Next-level realism", d: "World-class photorealism with AI — quality that turns your brand into organic conversation across feeds and group chats." },
    { t: "100% organic reach", d: "Billions of impressions with no paid media. Native content, not disguised ads — engages with zero friction." },
    { t: "Matchday speed", d: "Concept → delivery in hours. We ride the moment of the game, not the day after. Your brand present in the heat of the match." },
    { t: "Multi-channel distribution", d: "Born on @ohdejay, amplified by @cortedejay and replayed by Cazé TV, TNT, Romário TV, Ronaldo TV and Flow Podcast." }],

    statsLabel: "Numbers — Metrics",
    statsKicker: "Audited organic reach — no paid media.",
    audienceLabel: "Audience",
    audienceKicker: "Instagram Professional Dashboard · last 90 days.",
    audienceCards: {
      geo: "Geography",
      age: "Age range",
      gender: "Gender",
      engage: "Engagement"
    },
    videosLabel: "Work",
    videosKicker: "Tap to open the reel. Four selected virals.",
    casesLabel: "Featured cases",
    casesKicker: "Three deliveries that became the story.",
    cases: [
    {
      t: "Richarlison in the favela",
      d: "Romário, Adriano and Ronaldinho in the favela — first viral to put three legends in a hyper-real scene. Romário, Richarlison, Jon Vlogs and Italo Ferreira replied in the DMs.",
      m: ["53.8M views", "496K likes", "8.1K shares"]
    },
    {
      t: "AI Multiverse",
      d: "A series reimagining iconic sports moments. Launch that unlocked 300M views in 10 days and pushed the profile to World Top 1 in AI realism.",
      m: ["300M views / 10 days", "World Top 1 AI Realism", "Global pickup"]
    },
    {
      t: "Coverage as influencer",
      d: "Matchday coverage generating live visual narratives of the decisive clashes — replayed by fans and official outlets.",
      m: ["Matchday content", "Fans + clubs", "Organic story"]
    }],

    collabsLabel: "Trusted by",
    collabsKicker: "Athletes, broadcasters, leagues and brands that have produced with Dejay.",
    collabGroups: {
      athletes: "Athletes & Influence",
      media: "Media & Broadcast",
      leagues: "Leagues & Federations",
      brands: "Brands"
    },
    servicesLabel: "What we deliver",
    services: [
    { t: "Viral AI Reels", d: "Concept, generation and edit. Native organic distribution from @ohdejay.", price: "starts at" },
    { t: "Campaign posts + AI/tech publis with realism", d: "Hyper-realistic images and videos for brand activations, launches and key dates.", price: "per image / video" },
    { t: "Stories", d: "Editorial sequences for the ephemeral feed — vertical, high retention.", price: "3-5 pack" },
    { t: "Matchday", d: "Real-time match content: pre, live and post, with AI visual storytelling.", price: "per match" }],

    processLabel: "How we work",
    processKicker: "From brief to viral, a lean and repeatable flow.",
    process: [
    { t: "Brief", d: "We receive the goal, KPI and tone. Reply within 24h." },
    { t: "Concept", d: "Creative direction, moodboard, references and script." },
    { t: "Production", d: "AI generation + cinematic edit. Fast iterations." },
    { t: "Approval", d: "Final review and copy/caption tweaks." },
    { t: "Publish", d: "Native organic distribution + cross-channel amplification." }],

    contactLabel: "Let's create",
    contactKicker: "For campaigns, licensing and partnerships.",
    rights: "All rights reserved.",
    closeBtn: "Close",
    openInsta: "Open on Instagram",
    playReel: "Play reel",
    showreelLabel: "SHOWREEL @OHDEJAY",
    coverPlaceholder: "Drop cover",
    clientLooviTag: "Client · insurance",
    clientTrapperTag: "Client · trapper",
    clientBarberTag: "Client · barbershop",
    clientLoovi: "LOOVI SEGUROS",
    clientTrapper: "TRAPPER",
    clientBarber: "BARBERSHOP",
    clientSlotPh: "Drop 9:16",
    clientSlotHelp: "Client — drop your 9:16 reel",
    viralLabel: "Viral gallery",
    viralKicker: "Recent picks. Drop your own images.",
    viralPh: "Drop viral",
    copyLink: "Copy link",
    linkCopied: "Link copied",
    linkCopyFail: "Couldn't copy. URL: "
  }
};

const STATS = [
{ value: "200M+", labelPt: "views em 10 dias", labelEn: "views in 10 days", note: "Multiverso IA" },
{ value: "160.8M", labelPt: "views / últimos 30 dias", labelEn: "views / last 30 days", note: "@ohdejay" },
{ value: "100K", labelPt: "seguidores @ohdejay", labelEn: "@ohdejay followers", note: "+ 30,9K @cortedejay" },
{ value: "#1", labelPt: "mundial em realismo IA", labelEn: "world AI realism", note: "Esporte" }];


const AUDIENCE = {
  geo: [
  { k: "Brasil", v: 78 },
  { k: "EUA", v: 6 },
  { k: "Portugal", v: 4 },
  { k: "Outros", v: 12 }],

  age: [
  { k: "18–24", v: 32 },
  { k: "25–34", v: 41 },
  { k: "35–44", v: 18 },
  { k: "45+", v: 9 }],

  gender: [
  { k: "Masculino / Male", v: 76 },
  { k: "Feminino / Female", v: 24 }],

  engagePt: [
  { k: "Engajamento médio", v: "8,4%" },
  { k: "Reels avg views", v: "2,4M" },
  { k: "Compartilhamentos / post", v: "12K+" },
  { k: "Salvamentos / post", v: "9,2K+" }],

  engageEn: [
  { k: "Avg engagement", v: "8.4%" },
  { k: "Reels avg views", v: "2.4M" },
  { k: "Shares / post", v: "12K+" },
  { k: "Saves / post", v: "9.2K+" }]

};

const REELS = [
{ code: "DVT3BSFkQqj", titlePt: "romario buscando neymar na escola", titleEn: "Romário picks Neymar up at school", tag: "53.8M views" },
{ code: "DYIYW-WMM2p", titlePt: "Neymar camepão", titleEn: "Neymar champion", tag: "Top 1 World" },
{ code: "DXezNJrDkRY", titlePt: "Serie do neymar até a copa", titleEn: "Neymar series — to the World Cup", tag: "Viral 2025" },
{ code: "DS0lv-ogdLY", titlePt: "Na barbearia Cr7 na favela", titleEn: "Cr7 at the favela barbershop", tag: "Favela series" }];


const VIRAL_CARDS = [
{ id: "viral-1", color: "#c5fb45", titlePt: "brasil Campeão", titleEn: "Brazil champion", views: "53.8M", aspect: "4 / 5", badge: "VIRAL MUNDIAL" },
{ id: "viral-2", color: "#3afff0", titlePt: "NEYMAR ARTE", titleEn: "Neymar art", views: "42M", aspect: "1 / 1", badge: "TOP 1 WORLD" },
{ id: "viral-3", color: "#ff3ea5", titlePt: "PELÉ + NETO", titleEn: "Pelé + Neto", views: "28M", aspect: "9 / 16", badge: "MATCHDAY" },
{ id: "viral-4", color: "#f4f3ee", titlePt: "PODPAH PODCAST", titleEn: "Podpah Podcast", views: "19M", aspect: "5 / 6", badge: "SÉRIE BR" }];


const COLLABS = {
  athletes: [
  { name: "Romário", handle: "@romariofaria" },
  { name: "Richarlison", handle: "@richarlison" },
  { name: "Zé Roberto", handle: "@zeroberto" },
  { name: "Adriano Imperador", handle: "Imperador" },
  { name: "Italo Ferreira", handle: "@italoferreira" },
  { name: "Negrete", handle: "Influenciador" }],

  media: [
  { name: "Cazé TV", handle: "@cazetv" },
  { name: "TNT Sports", handle: "Broadcast" },
  { name: "Romário TV", handle: "@romariotv_oficial" },
  { name: "Ronaldo TV", handle: "Rede Ronaldo" },
  { name: "Flow Podcast", handle: "@flowpodcast" },
  { name: "Capim FC", handle: "@capimfc" }],

  leagues: [
  { name: "Campeonato Carioca", handle: "FERJ" },
  { name: "Paulistão", handle: "FPF" },
  { name: "King League Brazil", handle: "KLB" },
  { name: "NBB", handle: "Basquete BR" }],

  brands: [
  { name: "LOOVI", handle: "Seguros" },
  { name: "META", handle: "AI partner" }]

};

// ---------- DEFAULT TWEAKS ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c5fb45",
  "fontPreset": "bricolage",
  "lang": "pt",
  "noise": true
} /*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#c5fb45", "#3afff0", "#ff5a1f", "#ff3ea5", "#f4f3ee"];

const FONT_PRESETS = {
  bricolage: { display: "'Bricolage Grotesque', sans-serif", body: "'Geist', sans-serif", mono: "'JetBrains Mono', monospace" },
  serif: { display: "'Instrument Serif', serif", body: "'Geist', sans-serif", mono: "'JetBrains Mono', monospace" },
  mono: { display: "'Space Grotesk', sans-serif", body: "'Space Grotesk', sans-serif", mono: "'JetBrains Mono', monospace" }
};

// ---------- COMPONENTS ----------

function TopBar({ lang, setLang, accent, t }) {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a href="#top" className="brand">
          <span className="brand-mark" style={{ background: accent }} />
          <span className="brand-name">OHDEJAY</span>
          <span className="brand-tag">/ MEDIA KIT </span>
        </a>
        <nav className="topnav">
          <a href="#work" style={{ color: "rgb(255, 255, 255)" }}>{t.nav.work}</a>
          <a href="#numbers" style={{ color: "rgb(255, 255, 255)" }}>{t.nav.numbers}</a>
          <a href="#collabs" style={{ color: "rgb(255, 255, 255)" }}>{t.nav.collabs}</a>
          <a href="#services" style={{ color: "rgb(255, 255, 255)" }}>{t.nav.services}</a>
          <a href="#contact" style={{ color: "rgb(255, 255, 255)" }}>{t.nav.contact}</a>
        </nav>
        <div className="topbar-right">
          <div className="lang-toggle">
            <button className={lang === "pt" ? "on" : ""} onClick={() => setLang("pt")}>PT</button>
            <span>/</span>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="mailto:dj@dejay.world" className="cta-pill" style={{ borderColor: accent, color: accent }}>
            dj@dejay.world
          </a>
        </div>
      </div>
    </header>);

}

function MarqueeStrip({ accent }) {
  const items = [
  "WORLD TOP 1 — AI REALISM", "PIONEIRO IA NO FUTEBOL", "+200M VIEWS / 10 DIAS",
  "DEJAY PRODUÇÕES LTDA", "ESTÚDIO DE ULTRA-REALISMO", "100K @OHDEJAY"];

  const loop = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {loop.map((s, i) =>
        <span key={i} className="marquee-item">
            <span className="marquee-dot" style={{ background: accent }} />
            {s}
          </span>
        )}
      </div>
    </div>);

}

function ClientSlot({ id, name, tag, accent, t }) {
  return (
    <div className="client-slot">
      <div className="client-frame">
        <video-slot
          id={id}
          aspect="9/16"
          placeholder={t.clientSlotPh} style={{ width: "160px" }}>
        </video-slot>
        <div className="client-tag" style={{ borderColor: accent }}>
          <span className="mono" style={{ color: accent }}>{name}</span>
        </div>
      </div>
      <div className="client-foot">
        <span className="mono dim">{tag}</span>
      </div>
    </div>);

}

function Hero({ t, accent, lang }) {
  return (
    <section className="hero" id="top">
      <div className="hero-meta">
        <span className="meta-dot" style={{ background: accent }} />
        <span className="mono">{t.hero.kicker}</span>
        <span className="mono dim">— EST. RIO DE JANEIRO / BR</span>
      </div>

      <div className="hero-top-grid">
        <div className="hero-title-col">
          <h1 className="hero-title">
            <span className="line">{t.hero.title1}</span>
            <span className="line"><em className="hl" style={{ background: accent }}>{t.hero.title2}</em></span>
            <span className="line">{t.hero.title3}</span>
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-ctas">
            <a href="#contact" className="btn-primary" style={{ background: accent }}>
              {t.hero.cta1} <span aria-hidden>→</span>
            </a>
            <a href="#work" className="btn-ghost">{t.hero.cta2}</a>
          </div>
        </div>

        {/* CLIENT 9:16 SLOTS — 3 columns */}
        <div className="hero-clients">
          <ClientSlot
            id="client-loovi"
            name={t.clientLoovi}
            tag={t.clientLooviTag}
            accent={accent}
            t={t} />
          
          <ClientSlot
            id="client-trapper"
            name={t.clientTrapper}
            tag={t.clientTrapperTag}
            accent={accent}
            t={t} />
          
          <ClientSlot
            id="client-barber"
            name={t.clientBarber}
            tag={t.clientBarberTag}
            accent={accent}
            t={t} />
          
        </div>
      </div>

      {/* 16:9 SHOWREEL */}
      <div className="reel-hero">
        <div className="reel-hero-frame">
          <video-slot
            id="hero-video"
            aspect="16/9"
            placeholder={lang === "pt" ? "Arraste seu showreel 16:9 aqui" : "Drop your 16:9 showreel here"}>
          </video-slot>
          <div className="reel-hero-tag" style={{ background: accent }}>
            <span className="mono">REC ●</span>
            <span className="mono">SHOWREEL 16:9</span>
          </div>
          <div className="reel-hero-corners">
            <span /><span /><span /><span />
          </div>
        </div>
        <div className="reel-hero-meta">
          <div><span className="mono dim">REEL / 00</span> <span className="mono">{t.showreelLabel}</span></div>
          <div className="mono dim">{lang === "pt" ? "MP4 / WEBM / MOV até 200MB" : "MP4 / WEBM / MOV up to 200MB"}</div>
        </div>
      </div>

      <div className="hero-badges">
        {t.badges.map((b, i) =>
        <span key={i} className="badge">
            <span className="badge-dot" style={{ background: accent }} />
            <span className="mono">{b}</span>
          </span>
        )}
      </div>

      <MarqueeStrip accent={accent} />
    </section>);

}

function ViralCard({ data, lang, t, accent, index }) {
  const title = lang === "pt" ? data.titlePt : data.titleEn;
  return (
    <div className={`viral-card vc-${index + 1}`} style={{ "--vc": data.color }}>
      <div className="viral-back" aria-hidden="true" style={{ width: "350px", backgroundColor: "rgb(233, 255, 169)" }} />
      <div className="viral-frame" style={{ aspectRatio: data.aspect }}>
        <image-slot
          id={data.id}
          shape="rect"
          radius="0"
          fit="cover"
          placeholder={t.viralPh}>
        </image-slot>
        <div className="viral-badge mono" style={{ background: data.color, color: "#08080a" }}>
          {data.badge}
        </div>
      </div>
      <div className="viral-meta">
        <div className="viral-title" style={{ color: "rgb(253, 253, 253)" }}>{title}</div>
        <div className="viral-views mono" style={{ ...{ color: data.color }, color: "rgb(0, 0, 0)" }}>{data.views} views</div>
      </div>
    </div>);

}

function ViralGallery({ t, lang, accent }) {
  return (
    <section className="viral" id="viral">
      <div className="section-head">
        <span className="mono dim" style={{ color: "rgb(255, 255, 255)", fontSize: "21px" }}>[★] — {t.viralLabel}</span>
        <span className="mono dim">{t.viralKicker}</span>
      </div>
      <div className="viral-grid">
        {VIRAL_CARDS.map((v, i) =>
        <ViralCard key={v.id} data={v} lang={lang} t={t} accent={accent} index={i} />
        )}
      </div>
    </section>);

}

function Bio({ t, accent }) {
  return (
    <section className="bio" id="bio">
      <div className="section-head">
        <span className="mono dim">[01] — {t.bio.label}</span>
      </div>
      <div className="bio-grid">
        <div className="bio-left">
          <h2 className="bio-name">{t.bio.heading}</h2>
          <div className="bio-role mono">
            <span className="dot" style={{ background: accent }} />
            {t.bio.role}
          </div>
        </div>
        <div className="bio-right">
          <p className="bio-body">{t.bio.body}</p>
        </div>
      </div>
    </section>);

}

function Pillars({ t, accent }) {
  return (
    <section className="pillars" id="why">
      <div className="section-head">
        <span className="mono dim">[02] — {t.pillarsLabel}</span>
        <span className="mono dim">{t.pillarsKicker}</span>
      </div>
      <div className="pillars-grid">
        {t.pillars.map((p, i) =>
        <div key={i} className="pillar-card">
            <div className="pillar-index mono" style={{ color: accent }}>P/0{i + 1}</div>
            <div className="pillar-title">{p.t}</div>
            <p className="pillar-desc">{p.d}</p>
          </div>
        )}
      </div>
    </section>);

}

function Stats({ t, lang, accent }) {
  return (
    <section className="stats" id="numbers">
      <div className="section-head">
        <span className="mono dim" style={{ fontSize: "21px", color: "rgb(255, 255, 255)" }}>[03] — {t.statsLabel}</span>
        <span className="mono dim" style={{ color: "rgb(255, 255, 255)" }}>{t.statsKicker}</span>
      </div>
      <div className="stats-grid">
        {STATS.map((s, i) =>
        <div key={i} className="stat-card">
            <div className="stat-index mono">0{i + 1}</div>
            <div className="stat-value" style={{ color: i === 0 ? accent : undefined }}>{s.value}</div>
            <div className="stat-label">{lang === "pt" ? s.labelPt : s.labelEn}</div>
            <div className="stat-note mono dim">— {s.note}</div>
          </div>
        )}
      </div>
    </section>);

}

function Bar({ value, accent }) {
  return (
    <div className="bar">
      <div className="bar-fill" style={{ width: value + "%", background: accent }} />
    </div>);

}

function Audience({ t, lang, accent }) {
  const engage = lang === "pt" ? AUDIENCE.engagePt : AUDIENCE.engageEn;
  return (
    <section className="audience" id="audience">
      <div className="section-head">
        <span className="mono dim">[04] — {t.audienceLabel}</span>
        <span className="mono dim">{t.audienceKicker}</span>
      </div>
      <div className="audience-grid">
        <div className="aud-card">
          <div className="aud-head mono"><span className="dot" style={{ background: accent }} />{t.audienceCards.geo}</div>
          <ul>
            {AUDIENCE.geo.map((row, i) =>
            <li key={i}>
                <div className="aud-row">
                  <span className="aud-k">{row.k}</span>
                  <span className="aud-v mono">{row.v}%</span>
                </div>
                <Bar value={row.v} accent={accent} />
              </li>
            )}
          </ul>
        </div>
        <div className="aud-card">
          <div className="aud-head mono"><span className="dot" style={{ background: accent }} />{t.audienceCards.age}</div>
          <ul>
            {AUDIENCE.age.map((row, i) =>
            <li key={i}>
                <div className="aud-row">
                  <span className="aud-k">{row.k}</span>
                  <span className="aud-v mono">{row.v}%</span>
                </div>
                <Bar value={row.v} accent={accent} />
              </li>
            )}
          </ul>
        </div>
        <div className="aud-card">
          <div className="aud-head mono"><span className="dot" style={{ background: accent }} />{t.audienceCards.gender}</div>
          <ul>
            {AUDIENCE.gender.map((row, i) =>
            <li key={i}>
                <div className="aud-row">
                  <span className="aud-k">{row.k}</span>
                  <span className="aud-v mono">{row.v}%</span>
                </div>
                <Bar value={row.v} accent={accent} />
              </li>
            )}
          </ul>
        </div>
        <div className="aud-card">
          <div className="aud-head mono"><span className="dot" style={{ background: accent }} />{t.audienceCards.engage}</div>
          <ul className="aud-flat">
            {engage.map((row, i) =>
            <li key={i} className="aud-flat-row">
                <span className="aud-k">{row.k}</span>
                <span className="aud-v-big" style={{ color: accent }}>{row.v}</span>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

function ReelCard({ reel, lang, accent, index, t }) {
  const title = lang === "pt" ? reel.titlePt : reel.titleEn;
  const url = `https://www.instagram.com/reel/${reel.code}/`;
  const [copied, setCopied] = useState(false);
  const copy = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const fallback = () => {
      try {
        const ta = document.createElement("textarea");
        ta.value = url;
        ta.style.position = "fixed";
        ta.style.opacity = "0";
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
        return true;
      } catch {return false;}
    };
    const finish = (ok) => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
      if (!ok) window.prompt(t.linkCopyFail, url);
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(url).then(() => finish(true), () => finish(fallback()));
    } else {
      finish(fallback());
    }
  };
  const open = (e) => {
    // Try to escape iframe sandboxes by forcing a top-level new tab.
    try {window.open(url, "_blank", "noopener,noreferrer");}
    catch {/* fall through to default <a> behaviour */}
  };
  return (
    <div className="reel-card">
      <div className="reel-frame">
        <image-slot
          id={`reel-cover-${reel.code}`}
          shape="rect"
          radius="0"
          fit="cover"
          placeholder={t.coverPlaceholder}>
        </image-slot>
        <div className="reel-overlay">
          <a
            className="reel-play-btn"
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            onClick={open}
            aria-label={t.playReel + " — " + title}
            style={{ background: accent }}>
            
            <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden>
              <path d="M7 5v14l12-7L7 5z" fill="#08080a" />
            </svg>
          </a>
          <div className="reel-cover-meta">
            <span className="mono">REEL · 0{index + 1}</span>
            <span className="mono">{reel.tag}</span>
          </div>
        </div>
        {copied &&
        <div className="reel-toast mono" style={{ background: accent, color: "#08080a" }}>
            {t.linkCopied} ✓
          </div>
        }
      </div>
      <div className="reel-foot">
        <div className="reel-title">{title}</div>
        <div className="reel-actions">
          <a
            className="reel-link mono"
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            onClick={open}>
            @ohdejay / {reel.code} ↗</a>
          <button className="reel-copy mono" onClick={copy} title={t.copyLink}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
              <rect x="9" y="9" width="13" height="13" rx="2" />
              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
            </svg>
            <span>{t.copyLink}</span>
          </button>
        </div>
      </div>
    </div>);

}

function Videos({ t, lang, accent }) {
  return (
    <section className="videos" id="work">
      <div className="section-head">
        <span className="mono dim" style={{ color: "rgb(255, 255, 255)", fontSize: "50px" }}>[05] — {t.videosLabel}</span>
        <span className="mono dim">{t.videosKicker}</span>
      </div>
      <div className="reels-grid">
        {REELS.map((r, i) =>
        <ReelCard key={r.code} reel={r} lang={lang} accent={accent} index={i} t={t} />
        )}
      </div>
    </section>);

}

function Cases({ t, accent }) {
  return (
    <section className="cases" id="cases">
      <div className="section-head">
        <span className="mono dim">[06] — {t.casesLabel}</span>
        <span className="mono dim">{t.casesKicker}</span>
      </div>
      <div className="cases-grid">
        {t.cases.map((c, i) =>
        <article key={i} className="case-card">
            <div className="case-num mono" style={{ color: accent }}>CASE / 0{i + 1}</div>
            <h3 className="case-title">{c.t}</h3>
            <p className="case-desc">{c.d}</p>
            <div className="case-metrics">
              {c.m.map((m, j) =>
            <div key={j} className="case-metric">
                  <span className="metric-dot" style={{ background: accent }} />
                  <span className="mono">{m}</span>
                </div>
            )}
            </div>
          </article>
        )}
      </div>
    </section>);

}

function CollabBlock({ title, items, accent }) {
  return (
    <div className="collab-block">
      <div className="collab-head" style={{ fontSize: "21px" }}>
        <span className="collab-dot" style={{ background: accent }} />
        <span className="mono" style={{ fontSize: "21px" }}>{title}</span>
      </div>
      <ul className="collab-list">
        {items.map((c, i) =>
        <li key={i} className="collab-row">
            <span className="collab-num mono">{String(i + 1).padStart(2, "0")}</span>
            <span className="collab-name">{c.name}</span>
            <span className="collab-handle mono dim">{c.handle}</span>
          </li>
        )}
      </ul>
    </div>);

}

function Collabs({ t, accent }) {
  return (
    <section className="collabs" id="collabs">
      <div className="section-head">
        <span className="mono dim">[07] — {t.collabsLabel}</span>
        <span className="mono dim">{t.collabsKicker}</span>
      </div>
      <div className="collabs-grid">
        <CollabBlock title={t.collabGroups.athletes} items={COLLABS.athletes} accent={accent} />
        <CollabBlock title={t.collabGroups.media} items={COLLABS.media} accent={accent} />
        <CollabBlock title={t.collabGroups.leagues} items={COLLABS.leagues} accent={accent} />
        <CollabBlock title={t.collabGroups.brands} items={COLLABS.brands} accent={accent} />
      </div>
    </section>);

}

function Services({ t, accent }) {
  return (
    <section className="services" id="services">
      <div className="section-head">
        <span className="mono dim" style={{ color: "rgb(255, 255, 255)", fontSize: "21px" }}>[08] — {t.servicesLabel}</span>
      </div>
      <div className="services-grid">
        {t.services.map((s, i) =>
        <div key={i} className="service-card">
            <div className="service-num mono" style={{ color: accent }}>S/0{i + 1}</div>
            <div className="service-title">{s.t}</div>
            <p className="service-desc">{s.d}</p>
            <div className="service-foot mono dim">— {s.price}</div>
          </div>
        )}
      </div>
    </section>);

}

function Process({ t, accent }) {
  return (
    <section className="process" id="process">
      <div className="section-head">
        <span className="mono dim">[09] — {t.processLabel}</span>
        <span className="mono dim">{t.processKicker}</span>
      </div>
      <ol className="process-list">
        {t.process.map((p, i) =>
        <li key={i} className="process-step">
            <span className="step-num mono" style={{ color: accent }}>{String(i + 1).padStart(2, "0")}</span>
            <div className="step-body">
              <div className="step-title">{p.t}</div>
              <p className="step-desc">{p.d}</p>
            </div>
            {i < t.process.length - 1 && <span className="step-divider" />}
          </li>
        )}
      </ol>
    </section>);

}

function Contact({ t, lang, accent }) {
  const wa = "5522996195763";
  const waMsg = encodeURIComponent(
    lang === "pt" ?
    "Olá Dejay! Vi seu media kit e quero falar sobre uma parceria." :
    "Hi Dejay! I saw your media kit and I'd like to discuss a partnership."
  );
  return (
    <section className="contact" id="contact">
      <div className="section-head">
        <span className="mono dim">[10] — {t.contactLabel}</span>
        <span className="mono dim">{t.contactKicker}</span>
      </div>
      <div className="contact-grid">
        <div className="contact-left">
          <div className="contact-line">
            <span className="mono dim">e-mail</span>
            <a href="mailto:dj@dejay.world" className="contact-big" style={{ borderColor: accent }}>dj@dejay.world</a>
          </div>
          <div className="contact-line">
            <span className="mono dim">whatsapp</span>
            <a href={`https://wa.me/${wa}?text=${waMsg}`} target="_blank" rel="noopener" className="contact-big" style={{ borderColor: accent }}>+55 22 99619-5763</a>
          </div>
          <div className="contact-line">
            <span className="mono dim">INSTAGRAM/TIKTOK</span>
            <a href="https://instagram.com/ohdejay" target="_blank" rel="noopener" className="contact-big" style={{ borderColor: accent }}>@ohdejay</a>
          </div>
          <div className="contact-line">
            <span className="mono dim">cortes</span>
            <a href="https://instagram.com/cortedejay" target="_blank" rel="noopener" className="contact-big" style={{ borderColor: accent }}>@cortedejay</a>
          </div>
        </div>
        <div className="contact-right">
          <div className="contact-card">
            <div className="contact-card-head mono">
              <span className="dot" style={{ background: accent }} />
              {lang === "pt" ? "Pronto pra acionar" : "Ready to brief"}
            </div>
            <div className="contact-card-body">
              {lang === "pt" ?
              "Briefings respondidos em 24h. Produção ágil. Distribuição orgânica nativa com auditoria de métricas." :
              "Briefs answered within 24h. Fast production. Native organic distribution with metrics audit."}
            </div>
            <a href={`https://wa.me/${wa}?text=${waMsg}`} target="_blank" rel="noopener" className="btn-primary contact-btn" style={{ background: accent }}>
              {lang === "pt" ? "Chamar no WhatsApp" : "Message on WhatsApp"} →
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function Footer({ accent, t }) {
  return (
    <footer className="foot">
      <div className="foot-grid">
        <div>
          <div className="foot-brand">
            <span className="brand-mark" style={{ background: accent }} />
            <span>OHDEJAY · </span>
          </div>
          <div className="mono dim foot-rights">
            <span>© 2026 — {t.rights}</span>
            <span className="foot-cnpj">DEJAY PRODUÇÕES LTDA — CNPJ 55.275.954/0001-07</span>
          </div>
        </div>
        <div className="mono dim foot-meta">
          <div>dj@dejay.world</div>
          <div>+55 22 99619-5763</div>
          <div>Rio de Janeiro / BR</div>
        </div>
      </div>
    </footer>);

}

// ---------- APP ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(t.lang || "pt");

  useEffect(() => {setLang(t.lang);}, [t.lang]);

  const copy = COPY[lang];
  const accent = t.accent;
  const fonts = FONT_PRESETS[t.fontPreset] || FONT_PRESETS.bricolage;

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent);
    document.documentElement.style.setProperty("--display", fonts.display);
    document.documentElement.style.setProperty("--body", fonts.body);
    document.documentElement.style.setProperty("--mono", fonts.mono);
    document.documentElement.style.setProperty("--noise", t.noise ? "0.04" : "0");
  }, [accent, fonts, t.noise]);

  return (
    <>
      <TopBar lang={lang} setLang={(l) => {setLang(l);setTweak("lang", l);}} accent={accent} t={copy} />

      <main className="shell">
        <Hero t={copy} accent={accent} lang={lang} />
        <ViralGallery t={copy} lang={lang} accent={accent} />
        <Bio t={copy} accent={accent} />
        <Pillars t={copy} accent={accent} />
        <Stats t={copy} lang={lang} accent={accent} />
        <Audience t={copy} lang={lang} accent={accent} />
        <Videos t={copy} lang={lang} accent={accent} />
        <Cases t={copy} accent={accent} />
        <Collabs t={copy} accent={accent} />
        <Services t={copy} accent={accent} />
        <Process t={copy} accent={accent} />
        <Contact t={copy} lang={lang} accent={accent} />
      </main>

      <Footer accent={accent} t={copy} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Cor de acento">
          <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS} onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection title="Tipografia">
          <TweakRadio label="Fonte" value={t.fontPreset}
          options={[
          { value: "bricolage", label: "Bricolage" },
          { value: "serif", label: "Serif" },
          { value: "mono", label: "Mono" }]
          }
          onChange={(v) => setTweak("fontPreset", v)} />
        </TweakSection>
        <TweakSection title="Idioma padrão">
          <TweakRadio label="Lang" value={t.lang}
          options={[{ value: "pt", label: "PT-BR" }, { value: "en", label: "EN" }]}
          onChange={(v) => {setTweak("lang", v);setLang(v);}} />
        </TweakSection>
        <TweakSection title="Textura">
          <TweakRadio label="Grão" value={t.noise ? "on" : "off"}
          options={[{ value: "on", label: "On" }, { value: "off", label: "Off" }]}
          onChange={(v) => setTweak("noise", v === "on")} />
        </TweakSection>
      </TweaksPanel>
    </>);

}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);