// Landing page — brand-led one-pager for Lux Colchões

function Crown() {
  // small ornamental crown above the LUX logo
  return (
    <svg width="80" height="42" viewBox="0 0 80 42" fill="none" aria-hidden>
      <path d="M2 38 L8 12 L20 28 L30 8 L40 24 L50 8 L60 28 L72 12 L78 38" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round" style={{color:"var(--gold-300)"}}/>
      <circle cx="8" cy="11" r="2" fill="currentColor" style={{color:"var(--gold-300)"}}/>
      <circle cx="30" cy="7" r="2" fill="currentColor" style={{color:"var(--gold-300)"}}/>
      <circle cx="50" cy="7" r="2" fill="currentColor" style={{color:"var(--gold-300)"}}/>
      <circle cx="72" cy="11" r="2" fill="currentColor" style={{color:"var(--gold-300)"}}/>
      <path d="M2 38 L78 38" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" style={{color:"var(--gold-300)",opacity:.55}}/>
    </svg>
  );
}

function Lux3D() {
  // Parallax tilt on mouse move
  const ref = React.useRef(null);
  React.useEffect(() => {
    const wrap = ref.current;
    if (!wrap) return;
    const el = wrap.querySelector(".lux3d");
    let raf = 0;
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width - .5);
      const y = ((e.clientY - r.top) / r.height - .5);
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.animation = "none";
        el.style.transform = `rotateX(${8 - y * 18}deg) rotateY(${-18 + x * 28}deg)`;
      });
    };
    const onLeave = () => {
      el.style.transform = "";
      el.style.animation = "";
    };
    wrap.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    return () => {
      wrap.removeEventListener("mousemove", onMove);
      wrap.removeEventListener("mouseleave", onLeave);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div className="lux3d-wrap" ref={ref}>
      <div className="lux3d">
        <div className="crown"><Crown /></div>
        <div className="frame">
          <div className="word" data-word="LUX">LUX</div>
        </div>
        <div className="sub">Colchões</div>
      </div>
    </div>
  );
}

function Stars() {
  // sprinkle a handful of twinkling dots
  const dots = React.useMemo(() => Array.from({length:28},(_,i)=>({
    id:i,
    x:Math.random()*100, y:Math.random()*100,
    d:Math.random()*4, s:0.6+Math.random()*1.4,
  })),[]);
  return (
    <div className="stars" aria-hidden>
      {dots.map(d => <i key={d.id} style={{left:`${d.x}%`,top:`${d.y}%`,animationDelay:`${d.d}s`,transform:`scale(${d.s})`}} />)}
    </div>
  );
}

function NavBar() {
  return (
    <header className="nav">
      <div className="nav-mark">LUX<sup>colchões</sup></div>
      <nav className="nav-meta">
        <a href="#brasao">O brasão</a>
        <a href="#manifesto">A loja</a>
        <a href="#instagram">Instagram</a>
        <a href="#visite">Visite</a>
        <span className="pill"><span className="dot"></span> Aberto agora</span>
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero hero-editorial">
      {/* Soft ambient stars over the dark teal */}
      <Stars />

      <div className="container hero-edit-grid">
        {/* Left: typography */}
        <div className="hero-edit-type">
          <div className="eyebrow-line">@luxcolchoes · Goiânia · desde 2020</div>

          <h1 className="hero-edit-title">
            <span className="line line-1">Boa noite</span>
            <span className="line line-2">começa <em>aqui</em>.</span>
          </h1>

          <p className="hero-edit-lede">
            A Lux Colchões reúne <b>as melhores marcas do Brasil</b> em um só lugar — selecionadas, testadas e oferecidas com o mesmo cuidado: o seu conforto, do começo ao fim da noite.
          </p>

          <div className="hero-edit-cta">
            <a className="btn btn-wa" href={`https://wa.me/${LUX.whatsappRaw}`} target="_blank" rel="noopener">
              <Ic.wa /> Manda um “oi”
            </a>
            <a className="btn btn-ghost" href="#visite">
              Visitar a loja <Ic.arrowUR />
            </a>
          </div>

          <div className="hero-edit-meta">
            <span><span className="dot"></span> Aberta agora</span>
            <span>62 · 3573 · 7878</span>
            <span>{LUX.followers} no Instagram</span>
          </div>
        </div>

        {/* Right: hero image — luxe bedroom, candlelit */}
        <div className="hero-edit-image">
          <div className="hero-img-frame">
            <div className="ph-bg dark">
              <div className="ph-label">quarto · luz dourada · cabeceira ornamentada</div>
            </div>
            <div className="hero-img-overlay">
              <div className="hero-img-seal">
                <Crown />
                <div className="seal-word">LUX</div>
                <div className="seal-sub">est. 2020</div>
              </div>
            </div>
          </div>
          <div className="hero-img-caption">
            <span className="dash">—</span> Goiânia, GO
          </div>
        </div>
      </div>

      {/* bottom: scroll cue */}
      <div className="hero-scroll-cue">
        <span>role para conhecer</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

function BrandStory() {
  return (
    <section id="brasao" className="brasao-section">
      <div className="container brasao-grid">
        <div className="brasao-copy">
          <div className="section-num">01 — O brasão</div>
          <h2 className="h-display">
            Um símbolo, <em>uma promessa</em>.
          </h2>

          <div className="brasao-copy-block">
            <p className="lead">
              No nosso brasão, uma cama se torna coroa. Não por acaso.
            </p>
            <p>
              Dormir bem é a primeira nobreza. Antes de qualquer marca, qualquer modelo, qualquer parcela — vem o cuidado com como você acorda amanhã.
            </p>
            <p>
              A Lux nasceu pra entregar esse cuidado em forma de colchão. Atendimento que escuta antes de vender. Marcas que a gente conhece dormindo. Entrega rápida pra Goiânia inteira.
            </p>
            <p className="signature">
              Bem-vindo. <em>Bem dormido.</em>
            </p>
          </div>
        </div>

        <div className="brasao-display">
          <div className="brasao-frame">
            <iframe
              src="lux-reveal.html?embed=1"
              title="Lux Colchões · brasão"
              loading="eager"
            />
          </div>
          <div className="brasao-caption">
            <span className="brasao-dot"></span>
            <span>cama → brasão</span>
            <span className="brasao-dot"></span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section id="manifesto">
      <div className="container">
        <div className="section-num">02 — A loja</div>
        <h2 className="h-display">Não é uma loja qualquer.<br/><em>É a Lux.</em></h2>

        <div className="manifesto-grid" style={{marginTop:72}}>
          <p className="lead">
            A gente abriu as portas em 2020 com uma ideia simples: vender colchão como quem indica um bom restaurante — sem pressa, sem empurrar, sem complicar.
          </p>

          <div className="copy">
            <p>
              Na Lux, você é recebido por gente que dorme nos mesmos colchões que vende. Que conhece a diferença entre uma mola pocket e uma mola ensacada na ponta da língua, e que vai te perguntar como você dorme antes de mostrar qualquer modelo.
            </p>
            <p>
              Trabalhamos com <b>as melhores marcas do Brasil</b>, sem casar com nenhuma. Cada modelo passa pelo mesmo critério antes de entrar na loja: tem que ser bom o suficiente pra gente indicar pra quem a gente ama. O resto é detalhe.
            </p>
            <p>
              Estamos na <b>Avenida Gabriel Henrique de Araújo</b>, em Goiânia. Tem estacionamento na porta, café passado na hora, e mais de oitenta modelos esperando você deitar e sentir.
            </p>
          </div>
        </div>

        <div className="facts">
          <div className="fact"><div className="n">6+</div><div className="l">Anos<br/>em Goiânia</div></div>
          <div className="fact"><div className="n">80+</div><div className="l">Modelos<br/>em exposição</div></div>
          <div className="fact"><div className="n" style={{fontStyle:"italic"}}>Top</div><div className="l">As melhores<br/>marcas do Brasil</div></div>
          <div className="fact"><div className="n">16,3k</div><div className="l">Seguidores<br/>no Instagram</div></div>
        </div>
      </div>
    </section>
  );
}

function InstagramShowcase() {
  return (
    <section id="instagram" className="ig-section">
      <div className="container">
        <div className="section-num">03 — @{LUX.handle}</div>
        <h2 className="h-display">A gente <em>vive</em> ali.</h2>
        <p style={{color:"var(--ink-fade)",fontSize:17,maxWidth:560,marginTop:18}}>
          Bastidores da loja, dicas, lançamentos das marcas e a vida real de quem dorme melhor depois da Lux. Vem ver.
        </p>

        <div className="ig-head" style={{marginTop:64}}>
          <div className="ig-avatar">
            <div>L</div>
          </div>
          <div className="ig-info">
            <div className="handle">@{LUX.handle} <Ic.verified /></div>
            <div className="bio">Lux Colchões · Sua cama nova com entrega rápida · Goiânia, GO</div>
            <div className="stats">
              <span><b>{LUX.posts}</b> posts</span>
              <span><b>{LUX.followers}</b> seguidores</span>
              <span><b>96</b> seguindo</span>
            </div>
          </div>
          <a className="ig-cta" href={`https://instagram.com/${LUX.handle}`} target="_blank" rel="noopener">
            <Ic.ig /> Seguir
          </a>
        </div>

        <div className="ig-grid">
          {INSTA_POSTS.map((p, i) => (
            <a key={i}
               className={`ig-cell ${p.featured ? "tall" : ""}`}
               href={`https://instagram.com/${LUX.handle}`} target="_blank" rel="noopener"
               style={{background:p.hue}}>
              <div className="ph-bg"><div className="ph-label">post {String(i+1).padStart(2,"0")}</div></div>
              <div className="badge">
                {p.type === "reels" ? <Ic.reels /> : p.type === "carousel" ? <Ic.carousel /> : <Ic.ig />}
              </div>
              <div className="meta">
                <span className="type">{p.type === "reels" ? "Reels" : p.type === "carousel" ? "Carrossel" : "Post"}</span>
                {p.caption}
              </div>
            </a>
          ))}
        </div>

        <div className="ig-foot">
          <span>Atualizado quase todo dia</span>
          <a href={`https://instagram.com/${LUX.handle}`} target="_blank" rel="noopener">
            Ver todos os {LUX.posts} posts <Ic.arrowUR />
          </a>
        </div>
      </div>
    </section>
  );
}

function Visit() {
  return (
    <section id="visite" className="visit-section">
      <div className="container visit-grid">
        <div className="visit-info">
          <div className="section-num">04 — Onde estamos</div>
          <h2 className="h-display" style={{margin:"18px 0 0"}}>Vem <em>conhecer</em>.</h2>
          <p className="lede">
            A loja física é onde a Lux acontece de verdade. Reserve trinta minutos do seu dia, deite nos modelos, tome um café com a gente.
          </p>

          <div className="visit-card">
            <div className="ic"><Ic.pin /></div>
            <div>
              <div className="k">Endereço</div>
              <div className="v">
                {LUX.address}
                <small>{LUX.district} · {LUX.city} · {LUX.zip}</small>
              </div>
            </div>
          </div>

          <div className="visit-card">
            <div className="ic"><Ic.clock /></div>
            <div>
              <div className="k">Horário</div>
              <div className="v" style={{whiteSpace:"pre-line"}}>{LUX.hours}</div>
            </div>
          </div>

          <div className="visit-card">
            <div className="ic"><Ic.phone /></div>
            <div>
              <div className="k">Fale com a loja</div>
              <div className="v">
                {LUX.phone}
                <small>WhatsApp · {LUX.whatsappDisplay}</small>
              </div>
            </div>
          </div>

          <div className="visit-foot">
            <a className="btn btn-wa" href={`https://wa.me/${LUX.whatsappRaw}?text=Oi%2C%20Lux%21%20Quero%20saber%20mais%20sobre%20a%20loja.`} target="_blank" rel="noopener">
              <Ic.wa /> Mandar “oi” no ZAP
            </a>
            <a className="btn btn-ghost" href={`https://maps.google.com/?q=${encodeURIComponent(LUX.address + ", " + LUX.city)}`} target="_blank" rel="noopener">
              Como chegar <Ic.arrowUR />
            </a>
          </div>
        </div>

        <div className="visit-media">
          <div className="ph-bg"><div className="ph-label">fachada · av. gabriel henrique 1322</div></div>
          <svg className="map" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden>
            <defs>
              <pattern id="g" width="6" height="6" patternUnits="userSpaceOnUse">
                <path d="M6 0H0V6" fill="none" stroke="var(--cream)" strokeWidth=".15"/>
              </pattern>
            </defs>
            <rect width="100" height="100" fill="url(#g)"/>
            <path d="M0 58 L38 56 L42 32 L84 30 L100 36" stroke="var(--gold-300)" strokeWidth=".6" fill="none"/>
            <path d="M50 0 L48 100" stroke="var(--cream)" strokeWidth=".4" fill="none" opacity=".5"/>
            <path d="M0 78 L100 74" stroke="var(--cream)" strokeWidth=".4" fill="none" opacity=".4"/>
          </svg>
          <div className="place-label">Lat -16.6869 · Lng -49.2648</div>
          <div className="pin">
            <div className="dot"></div>
            <div className="lab">Lux Colchões</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="foot-mark">LUX<sub>Colchões · Goiânia</sub></div>
            <p className="foot-tag">
              Sua cama nova com entrega rápida. Loja física na Av. Gabriel Henrique de Araújo, em Goiânia. Reúne as melhores marcas do Brasil, desde 2020.
            </p>
          </div>

          <div className="foot-col">
            <h5>Visite</h5>
            <ul>
              <li>{LUX.address}</li>
              <li>{LUX.district}</li>
              <li>{LUX.city}</li>
              <li>{LUX.zip}</li>
            </ul>
          </div>

          <div className="foot-col">
            <h5>Contato</h5>
            <ul>
              <li><a href={`tel:+55${LUX.whatsappRaw.slice(2)}`}>{LUX.phone}</a></li>
              <li><a href={`https://wa.me/${LUX.whatsappRaw}`} target="_blank" rel="noopener">WhatsApp · {LUX.whatsappDisplay}</a></li>
              <li><a href={`https://instagram.com/${LUX.handle}`} target="_blank" rel="noopener">@{LUX.handle}</a></li>
              <li>{LUX.url}</li>
            </ul>
          </div>
        </div>

        <div className="foot-legal">
          <div>© 2026 Lux Colchões</div>
          <div>Goiânia · GO · Brasil</div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <NavBar />
      <Hero />
      <BrandStory />
      <Manifesto />
      <InstagramShowcase />
      <Visit />
      <Foot />
    </>
  );
}

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