/* global React, ReactDOM, Nav, Footer, WhatsFab, Flourish, useReveal, openWhats, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */
const { useEffect, useState } = React;

// Apply gold tone tweak to CSS vars
function applyTheme(t) {
  const r = document.documentElement;
  const tones = {
    warm:    { g50:'#f5e9c8', g100:'#ead7a2', g200:'#dcc07a', g300:'#c9a961', g400:'#b08a3e', g500:'#8a6a26' },
    classic: { g50:'#fff4d1', g100:'#f5dc8a', g200:'#e8c45c', g300:'#d4a93a', g400:'#a98624', g500:'#7a601a' },
    rose:    { g50:'#f5e3cf', g100:'#ecc9a4', g200:'#dcae7d', g300:'#c08e5c', g400:'#9a6e40', g500:'#6e4d2a' },
    bright:  { g50:'#fff8df', g100:'#f7e9a8', g200:'#ecd56d', g300:'#dabc3d', g400:'#a89020', g500:'#766416' },
  };
  const c = tones[t.goldTone] || tones.warm;
  r.style.setProperty('--gold-50', c.g50);
  r.style.setProperty('--gold-100', c.g100);
  r.style.setProperty('--gold-200', c.g200);
  r.style.setProperty('--gold-300', c.g300);
  r.style.setProperty('--gold-400', c.g400);
  r.style.setProperty('--gold-500', c.g500);
  r.style.setProperty('--gold-grad', `linear-gradient(135deg, ${c.g400} 0%, ${c.g100} 35%, ${c.g50} 50%, ${c.g300} 70%, ${c.g500} 100%)`);
  r.style.setProperty('--gold-grad-soft', `linear-gradient(135deg, ${c.g300} 0%, ${c.g100} 50%, ${c.g400} 100%)`);
  const fonts = {
    cormorant: "'Cormorant Garamond', 'Garamond', serif",
    cinzel: "'Cinzel', 'Cormorant Garamond', serif",
    montserrat: "'Montserrat', sans-serif",
  };
  if (fonts[t.displayFont]) r.style.setProperty('--font-display', fonts[t.displayFont]);
  const orn = document.querySelectorAll('.hero-flourish, .footer-flourish, .quote-strip svg, .about-img-wrap svg');
  orn.forEach(el => {
    el.style.opacity = t.ornamentDensity === 'minimal' ? '0' :
                       t.ornamentDensity === 'subtle'  ? '0.5' :
                       t.ornamentDensity === 'rich'    ? '1'   : '0.85';
  });
}

const Hero = () => (
  <section id="hero" className="hero">
    <div className="hero-bg" />
    <div className="hero-content">
      <div className="hero-mark">M · U</div>
      <Flourish className="hero-flourish" />
      <h1 className="hero-title">
        Sabor que abençoa<br />
        <em className="gold-text">cada celebração</em>
      </h1>
      <p className="hero-sub">
        Buffet a domicílio em São Paulo. Preparo no local, mesa montada para autosserviço e opções de bebidas com e sem álcool.
      </p>
      <div className="hero-ctas">
        <button className="btn" onClick={() => openWhats()}>
          Solicitar Orçamento
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12m-5-5l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <a href="servicos.html" className="btn btn-ghost">Conheça o Buffet</a>
      </div>
      <Flourish className="hero-flourish hero-flourish-bottom" />
      <div className="hero-meta">
        <div className="hero-meta-item"><strong>+15</strong>Cardápios Oficiais</div>
        <div className="hero-meta-item"><strong>Estado de SP</strong>A Domicílio</div>
        <div className="hero-meta-item"><strong>Bar Completo</strong>Com Barman</div>
      </div>
    </div>
    <a href="#sobre" className="scroll-cue">Role para descobrir</a>
  </section>
);

const About = () => (
  <section id="sobre" className="about" style={{ padding: '140px 0' }}>
    <div className="container">
      <div className="about-grid">
        <div className="about-img-wrap reveal" style={{
          backgroundImage: 'url(uploads/home-buffet.png)',
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }} />
        <div className="about-text reveal">
          <span className="eyebrow left">Quem Somos</span>
          <h2 className="h2" style={{ marginTop: 24, marginBottom: 32 }}>
            Cada prato carrega <em>uma intenção</em>, cada evento, uma história.
          </h2>
          <p>O Mãos Ungidas nasceu do desejo de servir — e de servir bem. Somos um buffet a domicílio em São Paulo, que une a sofisticação de uma culinária cuidadosa ao calor humano de quem cozinha com propósito.</p>
          <p>Atendemos casamentos, aniversários, formaturas, eventos corporativos, religiosos, café colonial e confraternizações. Cada cardápio é pensado sob medida, com preparo no local e mesa montada para autosserviço.</p>
          <blockquote className="about-quote">
            "Deixe-nos fazer parte da sua história."
            <span className="attr">— Mãos Ungidas Buffet</span>
          </blockquote>
          <a href="sobre.html" className="btn btn-ghost" style={{ marginTop: 32 }}>Saiba Mais Sobre Nós</a>
        </div>
      </div>
    </div>
  </section>
);

const homeServices = [
  { num: '01', title: 'Buffet Completo', desc: 'Preparo no local e mesa montada para os convidados se servirem com praticidade.' },
  { num: '02', title: 'Churrasco', desc: 'Cardápios Churrasco 1 e 2 com pratos quentes, frios, bebidas e equipe no evento.' },
  { num: '03', title: 'Boteco', desc: 'Modalidades Boteco 1 e 2 para eventos sociais com perfil descontraído e mesa farta.' },
  { num: '04', title: 'Tradicionais', desc: 'Strogonoff, Parmegiana, Carne ao Molho Madeira, Feijoada e Comida Mineira.' },
  { num: '05', title: 'Massas e Kids', desc: 'Massas 1 e 2, além das opções Kids 1, 2, 3 e 4 para públicos variados.' },
  { num: '06', title: 'Cardápio Junino', desc: 'Também atendemos festas juninas com menu sazonal completo.' },
  { num: '07', title: 'Open Bar', desc: 'Serviço adicional com barman e drinks alcoólicos e não alcoólicos.' },
  { num: '08', title: 'Cascata de Chocolate', desc: 'Serviço adicional para compor o evento, sempre junto da contratação do buffet.' }
];

const ServicesPreview = () => (
  <section id="servicos" className="services">
    <div className="container">
      <div className="section-head reveal">
        <span className="eyebrow">Nossos Serviços</span>
        <h2 className="h2" style={{ marginTop: 28 }}>Para cada ocasião, <em>um cardápio à altura.</em></h2>
        <p className="lede">Atendemos eventos de todos os portes, com preparo no local e mesa de buffet montada para os convidados se servirem.</p>
      </div>
      <div className="services-grid reveal">
        {homeServices.map((s) => (
          <div key={s.num} className="service-card">
            <div className="service-num">— {s.num}</div>
            <h3 className="service-title">{s.title}</h3>
            <p className="service-desc">{s.desc}</p>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 60 }} className="reveal">
        <a href="servicos.html" className="btn">Ver Todos os Serviços
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12m-5-5l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </div>
  </section>
);

const QuoteStrip = () => (
  <section className="quote-strip">
    <div className="container">
      <Flourish style={{ width: 200, margin: '0 auto 36px', display: 'block' }} />
      <blockquote>
        "Buffet a <span className="gold-text">domicílio.</span> Preparo no local e mesa montada para autosserviço com <span className="gold-text">comidas, salgados e bebidas.</span>"
      </blockquote>
      <cite>— Mãos Ungidas · Buffet e Eventos</cite>
    </div>
  </section>
);

const CTAStrip = () => (
  <section className="cta-strip">
    <div className="container reveal">
      <span className="eyebrow">Próximo Passo</span>
      <h2 className="h2" style={{ marginTop: 28 }}>Pronto para começar a planejar <em>o seu evento?</em></h2>
      <p className="lede">Receba um orçamento personalizado em até 24h. Conte sua história — nós cuidamos do restante da operação.</p>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="orcamento.html" className="btn">Solicitar Orçamento</a>
        <button className="btn btn-ghost" onClick={() => openWhats()}>Chamar no WhatsApp</button>
      </div>
    </div>
  </section>
);

function App() {
  const defaults = window.TWEAK_DEFAULTS;
  const [tweaks, setTweak] = useTweaks(defaults);
  useEffect(() => { applyTheme(tweaks); }, [tweaks]);
  useReveal();
  return (
    <>
      <Nav onWhats={() => openWhats()} />
      <Hero />
      <About />
      <ServicesPreview />
      <QuoteStrip />
      <CTAStrip />
      <Footer />
      <WhatsFab onClick={() => openWhats()} />

      <TweaksPanel title="Tweaks · Mãos Ungidas">
        <TweakSection label="Tom de Dourado" />
        <TweakRadio
          label="Dourado" value={tweaks.goldTone}
          onChange={(v) => setTweak('goldTone', v)}
          options={[
            { value: 'warm', label: 'Quente' },
            { value: 'classic', label: 'Clássico' },
            { value: 'rose', label: 'Rosé' },
            { value: 'bright', label: 'Vivo' },
          ]}
        />
        <TweakSection label="Tipografia" />
        <TweakSelect
          label="Display" value={tweaks.displayFont}
          onChange={(v) => setTweak('displayFont', v)}
          options={[
            { value: 'cormorant', label: 'Cormorant (serifa elegante)' },
            { value: 'cinzel', label: 'Cinzel (clássica romana)' },
            { value: 'montserrat', label: 'Montserrat (sans moderno)' },
          ]}
        />
        <TweakSection label="Ornamentos" />
        <TweakRadio
          label="Densidade" value={tweaks.ornamentDensity}
          onChange={(v) => setTweak('ornamentDensity', v)}
          options={[
            { value: 'minimal', label: 'Min.' },
            { value: 'subtle', label: 'Sutil' },
            { value: 'balanced', label: 'Eq.' },
            { value: 'rich', label: 'Rico' },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

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