// site.jsx — Quatuor Digital site
const { useState, useEffect, useRef } = React;

// ───────── Headline ─────────
const HEADLINE = {
  eyebrow: "GOOGLE ADS · META ADS · PAID TRAFFIC",
  h1: <>More than campaigns, we build <span className="accent">growth engines.</span></>,
  sub: ["Performance marketing agency based in Brazil, serving clients abroad, leveraging Google Ads and Meta Ads to deliver repeatable, scalable results."]
};

// ───────── Services ─────────
const SERVICES = [
{
  mark: "M",
  name: "Meta Ads",
  tagline: "Facebook & Instagram, end to end.",
  bullets: [
  "Full campaign setup & ongoing optimization",
  "GTM + Meta Pixel tracking & attribution",
  "Ad copywriting · 8 static + 4 video creatives / mo",
  "Live dashboard, monthly check-in, video rundown",
  "Dedicated account manager"]

},
{
  mark: "G",
  name: "Google Ads",
  tagline: "Search, Performance Max, the lot.",
  bullets: [
  "Full campaign setup across the Google stack",
  "GTM tracking & attribution",
  "Ad copywriting · 12 static + 6 video creatives / mo",
  "Live dashboard, monthly check-in, video rundown",
  "Dedicated account manager"]

},
{
  mark: "F",
  name: "Full Stack",
  tagline: "Both channels, one strategy.",
  featured: true,
  bullets: [
  "Google Ads + Meta Ads, cross-channel alignment",
  "Unified GTM + Pixel attribution",
  "20 static + 6 video creatives / month",
  "Single dashboard for both channels",
  "Dedicated account manager"]

}];


// ───────── B.E.A.T. ─────────
const BEAT = [
{ letter: "B", title: "Brief", body: "Before we touch a single campaign, we learn your business. Your market, your goals, your definition of results." },
{ letter: "E", title: "Engineer", body: "Strategy, account structure, tracking setup, reporting. The foundation that makes everything else work." },
{ letter: "A", title: "Activate", body: "Copy, creative, campaign setup, audience segmentation. Every piece built with intention." },
{ letter: "T", title: "Track", body: "We measure what matters, report transparently, and optimize continuously. If your goals change, we adapt." }];


// ───────── Team ─────────
const TEAM = [
{ name: "Lucas Miranda", role: "Marketing strategy", initials: "LM", photo: "assets/lucas.jpg",
  bio: "Marketing and sales strategist with 16+ years of experience across agencies, in-house roles and co-founded startups. Served 130+ client accounts across industries. Most recently Marketing Lead for a US-based food delivery platform, overseeing an accumulated $170K+ in paid media.",
  creds: ["16+ YEARS", "130+ ACCOUNTS", "$170K+ IN PAID MEDIA"] },
{ name: "Jorge Ávila", role: "Google Ads", initials: "JA", photo: "assets/jorge.jpg",
  bio: "Google Premier Partner in 2026, certified since 2014, with 17+ years in marketing. Manages and strategizes Google Ads campaigns at every scale, from local businesses to high-volume accounts. Has managed over $6.5M in advertising budget and taught 30K+ students online, while also offering training, consulting, and strategic guidance to companies.",
  creds: ["GOOGLE PREMIER PARTNER '26", "$6.5M+ MANAGED", "30K+ STUDENTS"] },
{ name: "Ismael Nunes", role: "Meta Ads", initials: "IN", photo: "assets/ismael.jpg",
  bio: "Serial entrepreneur and business strategy consultant, Ismael founded Top Ads in 2019, a bold, results-driven Meta Ads agency that quickly grew its portfolio helping scale 130+ companies and managing $1M+ in total ad spend. Ismael is also a consultant who has advised and mentored 500+ entrepreneurs and business leaders.",
  creds: ["$1M+ MANAGED ON META", "130+ COMPANIES", "500+ MENTEES"] },
{ name: "Rafael Ruzza", role: "Brand & Creative", initials: "RR", photo: "assets/ruzza.jpg",
  bio: "Senior designer with 18+ years of experience and 300+ clients. Has served as in-house designer for major brands across retail and education. Today serves a client portfolio spanning sectors from large-scale retail to professional services and hospitality. Specialist in brand identity, with an MBA in Marketing and Branding.",
  creds: ["18+ YEARS", "300+ CLIENTS", "MBA, BRANDING"] }];


// ───────── Reveal-on-scroll hook ─────────
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach((e) => e.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px', threshold: 0 });
    els.forEach((e) => {
      const r = e.getBoundingClientRect();
      if (r.top < window.innerHeight && r.bottom > 0) e.classList.add('in');else
      io.observe(e);
    });
    return () => io.disconnect();
  }, []);
}

// ───────── VHS bars ornament ─────────
function VHSBars() {
  const stripes = [
  { c: 'var(--y)', t: 0, h: 16 },
  { c: 'var(--o)', t: 18, h: 18 },
  { c: 'var(--p)', t: 38, h: 20 },
  { c: 'var(--pu)', t: 60, h: 22 },
  { c: 'var(--dpu)', t: 82, h: 18 }];

  return (
    <div className="vhs-bars" aria-hidden="true">
      {stripes.map((s, i) =>
      <div key={i} style={{
        top: `${s.t}%`, height: `${s.h}%`,
        background: s.c, opacity: 0.92, borderRadius: '2px'
      }} />
      )}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 4px)',
        pointerEvents: 'none', mixBlendMode: 'multiply', transform: 'skewX(-14deg)'
      }} />
    </div>);

}

// ───────── Nav ─────────
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a className="nav-logo" href="#top" aria-label="Quatuor Digital">
          <img src="assets/quatuor-logo.png" alt="Quatuor Digital" />
        </a>
        <div className="nav-links">
          <a href="#beat">Method</a>
          <a href="#team">Team</a>
        </div>
        <a className="nav-cta" href="mailto:hello@quatuordigital.com">
          Get in touch <span aria-hidden="true">→</span>
        </a>
      </div>
    </nav>);

}

// ───────── Hero ─────────
function Hero() {
  const h = HEADLINE;
  return (
    <section className="hero" id="top">
      <VHSBars />
      <div className="container hero-grid">
        <div>
          <div className="h-eyebrow reveal">{h.eyebrow}</div>
          <h1 className="display reveal" style={{ width: "960px" }}>{h.h1}</h1>
          <div className="hero-sub reveal">
            {h.sub.map((p, i) => <p key={i} style={{ width: "600px", color: "rgb(239, 237, 220)" }}>{p}</p>)}
          </div>
          <div className="hero-ctas reveal">
            <a className="btn btn-primary" href="mailto:hello@quatuordigital.com?subject=Hello">
              Contact us <span className="arrow">→</span>
            </a>
            <a className="btn btn-ghost" href="#beat">See how we work</a>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Marquee ─────────
function Marquee() {
  const items = [
  "Google Ads",
  "Meta Ads",
  "Paid traffic",
  "Performance marketing",
  "Senior team, no junior handoffs"];

  const all = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {all.map((t, i) =>
        <span key={i} className="marquee-item">
            <span className="dot" /> {t}
          </span>
        )}
      </div>
    </div>);

}

// ───────── Services ─────────
function Services() {
  return (
    <section className="cream" id="services">
      <div className="container">
        <div className="services-head reveal">
          <div>
            <div className="h-eyebrow">WHAT WE RUN</div>
            <h2 className="display">Two channels.<br />One ledger.</h2>
          </div>
          <p>Google Ads, Meta Ads, or both — under a single account team, with one source of truth for performance.</p>
        </div>

        <div className="services-grid">
          {SERVICES.map((s, i) =>
          <div key={i} className={`svc-card reveal ${s.featured ? 'featured' : ''}`}>
              {s.featured && <div className="ribbon">Most picked</div>}
              <div className="svc-mark">{s.mark}</div>
              <h3>{s.name}</h3>
              <div className="svc-tagline">{s.tagline}</div>
              <ul>{s.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
              <div className="svc-foot">
                <span className="price-cta">PRICING ON REQUEST</span>
                <a className="svc-go" href={`mailto:hello@quatuordigital.com?subject=Pricing%20%E2%80%94%20${encodeURIComponent(s.name)}`}>
                  Get a quote <span aria-hidden>→</span>
                </a>
              </div>
            </div>
          )}
        </div>

        <div className="pricing-note reveal">
          <div><strong>Want pricing?</strong> One email, one reply, packages and rates included. No discovery-call gauntlet.</div>
          <a className="btn btn-cream" href="mailto:hello@quatuordigital.com?subject=Pricing%20request">
            Ask for pricing <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>);

}

// ───────── What we do ─────────
function WhatWeDo() {
  return (
    <section className="cream" id="what">
      <div className="container what-wrap">
        <div className="reveal">
          <div className="h-eyebrow">WHAT WE DO</div>
          <h2 className="display what-h">
            We build <em className="italic">scalable growth engines</em> through full-managed paid media on <span className="accent-g">Google&nbsp;Ads</span> and <span className="accent-p">Meta&nbsp;Ads</span>.
          </h2>
        </div>
        <ul className="what-chips reveal" aria-label="Capabilities">
          <li>Google Search</li>
          <li>Performance Max</li>
          <li>YouTube Ads</li>
          <li>Paid media</li>
          <li>Instagram Ads</li>
          <li>Facebook Ads</li>
          <li>Conversion tracking</li>
          <li>Creative briefing</li>
          <li>Video Ads</li>
          <li>Weekly reporting</li>
          <li>Paid traffic</li>
        </ul>
      </div>
    </section>);

}

// ───────── B.E.A.T. ─────────
function Beat() {
  return (
    <section id="beat">
      <div className="container">
        <div className="beat-head reveal">
          <div>
            <div className="h-eyebrow">METHOD</div>
            <h2 className="display">
              <span className="l" data-letter="B">B</span>.
              <span className="l" data-letter="E">E</span>.
              <span className="l" data-letter="A">A</span>.
              <span className="l" data-letter="T">T</span>.
            </h2>
          </div>
        </div>
        <div className="beat-grid">
          {BEAT.map((b, i) =>
          <div key={i} className="beat-cell reveal">
              <div className="step">0{i + 1} / 04</div>
              <div className="beat-letter">{b.letter}</div>
              <h3>{b.title}</h3>
              <p>{b.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───────── Team ─────────
function Team({ treatment }) {
  return (
    <section className="cream" id="team">
      <div className="container">
        <div className="team-head reveal">
          <div className="h-eyebrow">MEET THE TEAM</div>
        </div>
        <div className="team-grid">
          {TEAM.map((p, i) => {
            const showPhoto = treatment !== 'monogram-only' && p.photo;
            return (
              <div key={i} className={`person ${showPhoto ? 'has-photo' : ''} reveal`}>
                {showPhoto ?
                <div className="portrait">
                    <img src={p.photo} alt={p.name} />
                    <span className="stamp">{p.role}</span>
                  </div> :

                <div className={`monogram monogram-${i + 1}`}>
                    <span style={{ position: 'relative', zIndex: 1 }}>{p.initials}</span>
                    <div className="scan" />
                  </div>
                }
                <div className="person-body">
                  <div className="name-row">
                    <h3>{p.name}</h3>
                    <span className="role">{p.role}</span>
                  </div>
                  <p className="bio">{p.bio}</p>
                  {p.creds &&
                  <div className="creds">
                      {p.creds.map((c, j) => <span key={j}>{c}</span>)}
                    </div>
                  }
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// ───────── Closer ─────────
function Closer() {
  return (
    <section className="closer" id="contact">
      <div className="container">
        <h2 className="display reveal">Let's <em>chat.</em></h2>
        <div className="contacts">
          <a className="contact-card reveal" href="mailto:hello@quatuordigital.com">
            <div className="lbl">EMAIL</div>
            <div className="val">hello@quatuordigital.com</div>
          </a>
          <a className="contact-card reveal" href="https://wa.me/5548999668222" target="_blank" rel="noopener">
            <div className="lbl">WHATSAPP</div>
            <div className="val">+55 48 999 668 222</div>
          </a>
        </div>
      </div>
    </section>);

}

// ───────── Footer ─────────
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="foot-mark">
              <img src="assets/quatuor-logo.png" alt="Quatuor Digital" />
            </div>
            <p className="foot-blurb">Performance marketing agency based in Brazil, building growth engines and managing Google Ads and Meta Ads campaigns for clients anywhere.</p>
          </div>
          <div>
            <h4>Site</h4>
            <a href="#beat">Method</a>
            <a href="#team">Team</a>
          </div>
          <div>
            <h4>Reach us</h4>
            <a href="mailto:hello@quatuordigital.com">hello@quatuordigital.com</a>
            <a href="https://wa.me/5548999668222" target="_blank" rel="noopener">WhatsApp · +55 48 999 668 222</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Quatuor Digital</span>
          <span>Florianópolis, BR ⟶ everywhere</span>
        </div>
      </div>
    </footer>);

}

// ───────── Tweaks ─────────
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Visual direction" />
      <TweakRadio
        label="Mode"
        value={t.visualDirection}
        options={['dark', 'vibrant', 'sober']}
        onChange={(v) => setTweak('visualDirection', v)} />
      <TweakSlider
        label="Grain"
        value={t.grain}
        min={0} max={0.18} step={0.01}
        onChange={(v) => setTweak('grain', v)} />

      <TweakSection label="Team treatment" />
      <TweakRadio
        label="Show as"
        value={t.teamTreatment}
        options={['monogram', 'monogram-only']}
        onChange={(v) => setTweak('teamTreatment', v)} />

      <TweakSection label="Motion" />
      <TweakToggle
        label="Animations & marquee"
        value={t.motion}
        onChange={(v) => setTweak('motion', v)} />
    </TweaksPanel>);

}

// ───────── App ─────────
function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  useReveal();

  useEffect(() => {
    const body = document.body;
    body.classList.remove('variant-dark', 'variant-vibrant', 'variant-sober', 'variant-bright');
    body.classList.add(`variant-${t.visualDirection}`);
  }, [t.visualDirection]);

  useEffect(() => {
    document.body.classList.toggle('motion-off', !t.motion);
  }, [t.motion]);

  useEffect(() => {
    document.documentElement.style.setProperty('--grain-opacity', t.grain);
  }, [t.grain]);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <WhatWeDo />
      <Beat />
      <Team treatment={t.teamTreatment} />
      <Closer />
      <Footer />
      <Tweaks t={t} setTweak={setTweak} />
    </>);

}

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