/* DIAMOND Consultoria — Linktree
   Brand-aligned: Navy + Cream + Gold • Cinzel + Cormorant Garamond
*/

const LINKS = {
  whatsapp: "https://wa.me/5549998162281",
  instagram: "https://instagram.com/diamondconsultoria.cc",
  linkedin: "https://www.linkedin.com/in/lygiamodesti",
  youtube: "https://youtube.com/@lygiamodesti",
  email: "mailto:contato@diamondconsultoria.cc",
  site: "https://diamondconsultoria.cc",
  resgate: "https://diamondconsultoria.cc/mentoria-resgate-v4",
  ebookEmocoes: "https://go.hotmart.com/D105673542K",
  ebookCorpo: "https://diamondconsultoria.cc/ebooks/o-corpo-nao-mente",
  diagnostico: "https://diamondconsultoria.cc/consultoria-ia/"
};

/* ─── Diamond mark (matches diamond-symbol.svg from brand) ─── */
const DiamondMark = ({ size = 24, gold = true }) =>
<svg viewBox="0 0 200 320" width={size} height={size * 1.6} aria-hidden="true">
    <line x1="100" y1="20" x2="100" y2="300" stroke="var(--gold)" strokeWidth="1.6" />
    <g fill="none" stroke={gold ? "var(--gold)" : "var(--cream)"} strokeWidth="3" strokeLinejoin="miter">
      <polygon points="80,60 120,60 150,90 150,230 120,260 80,260 50,230 50,90" />
      <polyline points="80,60 95,95 50,160 95,225 80,260" />
      <polyline points="120,60 105,95 150,160 105,225 120,260" />
    </g>
  </svg>;


/* ─── Tiny diamond bullet (8x8) ─── */
const D = ({ className = "" }) => <span className={`d-bullet ${className}`} aria-hidden="true"></span>;

/* ─── Hairline rule (gold, short) ─── */
const Hairline = ({ width = 56 }) =>
<span className="hl" style={{ width }} aria-hidden="true"></span>;


/* ─── LINK CARD ─── */
function LinkCard({ href, eyebrow, title, sub, featured, comingSoon, delay = 0 }) {
  const Tag = comingSoon ? "div" : "a";
  const props = comingSoon ? {} : { href, target: "_blank", rel: "noopener" };
  return (
    <Tag
      className={`card ${featured ? "card--feat" : ""} ${comingSoon ? "is-disabled" : ""}`}
      style={{ "--d": `${delay}ms` }}
      {...props}>
      
      <div className="card__body">
        {eyebrow && <span className="card__eyebrow">{eyebrow}</span>}
        <h3 className="card__title">{title}</h3>
        {sub && <p className="card__sub" style={{ fontFamily: "Times" }}>{sub}</p>}
      </div>
      <span className="card__cta" aria-hidden="true">
        {comingSoon ? "EM BREVE" : "ACESSAR"}
        {!comingSoon && <span className="card__arrow">→</span>}
      </span>
      <span className="card__rule" aria-hidden="true"></span>
    </Tag>);

}

/* ─── EBOOK CARD ─── */
function EbookCard({ href, title, subtitle, delay = 0 }) {
  return (
    <a className="ebook" href={href} target="_blank" rel="noopener" style={{ "--d": `${delay}ms` }}>
      <div className="ebook__cover" aria-hidden="true">
        <span className="ebook__cv-eyebrow">DIAMOND ◆ E-BOOK</span>
        <span className="ebook__cv-title">{title}</span>
        <span className="ebook__cv-rule"></span>
        <span className="ebook__cv-author">LYGIA MODESTI</span>
      </div>
      <div className="ebook__body">
        <span className="ebook__eyebrow">E-book gratuito</span>
        <h3 className="ebook__title">{title}</h3>
        <p className="ebook__sub" style={{ fontFamily: "Times" }}>{subtitle}</p>
        <span className="ebook__cta">BAIXAR <span className="ebook__arrow">→</span></span>
      </div>
      <span className="card__rule" aria-hidden="true"></span>
    </a>);

}

/* ─── SECTION HEADER ─── */
function SectionHead({ eyebrow, title, delay = 0 }) {
  return (
    <header className="sect-head" style={{ "--d": `${delay}ms` }}>
      <span className="sect-eyebrow"><Hairline width={28} />{eyebrow}<Hairline width={28} /></span>
      <h2 className="sect-title">{title}</h2>
    </header>);

}

function App() {
  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add("is-in");io.unobserve(e.target);}});
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div className="page">
      <div className="bg-grain" aria-hidden="true"></div>
      <div className="bg-halo" aria-hidden="true"></div>

      <main className="container">
        {/* ───────── HERO / IDENTITY ───────── */}
        <header className="hero">
          {/* Wordmark — replicates diamond-logo-final.svg */}
          <div className="brandmark reveal" style={{ "--d": "60ms" }}>
            <img className="brandmark__logo" src="assets/diamond-logo-cream.png" alt="Diamond Consultoria" />
          </div>

          {/* Portrait */}
          <figure className="portrait reveal" style={{ "--d": "200ms" }}>
            <span className="portrait__corner tl"></span>
            <span className="portrait__corner tr"></span>
            <span className="portrait__corner bl"></span>
            <span className="portrait__corner br"></span>
            <div className="portrait__frame">
              <img src="assets/lygia-blazer.jpg" alt="Lygia Modesti" />
            </div>
            <figcaption className="portrait__cap">LYGIA · MODESTI · 2026</figcaption>
          </figure>

          <p className="hero__eyebrow reveal" style={{ "--d": "320ms" }}>
            <Hairline width={28} /> Diretora · Diamond Consultoria <Hairline width={28} />
          </p>

          <h1 className="hero__lede reveal" style={{ "--d": "400ms" }}>
            Conectamos <em>relacionamentos</em>,<br />planejamento e <em>resultados</em>.
          </h1>

          <p className="hero__sub reveal" style={{ "--d": "480ms" }}>
            <em>CPFs saudáveis</em> constroem <em>CNPJs de sucesso</em>.
          </p>

          <span className="hero__pillars reveal" style={{ "--d": "560ms" }}>
            CAPACIDADE <D /> DISPOSIÇÃO <D /> PERMISSÃO
          </span>
        </header>

        {/* ───────── PRINCIPAL ───────── */}
        <section className="sect">
          <SectionHead eyebrow="PRINCIPAL" title="Mentoria do Resgate · V4" delay={0} />
          <div className="cards reveal" style={{ "--d": "120ms" }}>
            <LinkCard
              href={LINKS.resgate}
              eyebrow="EDIÇÃO 2026"
              title="Mentoria do Resgate"
              sub="Para quem está repetindo o mesmo padrão. Formação sob pressão — em grupo, com Lygia."
              featured
              delay={0} />
            
          </div>
        </section>

        {/* ───────── SERVIÇOS ───────── */}
        <section className="sect">
          <SectionHead eyebrow="SERVIÇOS" title="Comece por aqui" delay={0} />
          <div className="cards stack">
            <LinkCard
              href={LINKS.diagnostico}
              eyebrow="DIAGNÓSTICO"
              title="Sessão estratégica · 1:1"
              sub="Mapeamento de padrão, capacidade e próximos passos."
              delay={80} />
            
            <LinkCard
              href={LINKS.site}
              eyebrow="CONSULTORIA"
              title="Diamond — site oficial"
              sub="Saúde relacional, liderança estratégica, resultados sustentáveis."
              delay={160} />
            
            <LinkCard
              href={LINKS.whatsapp}
              eyebrow="ATENDIMENTO"
              title="Falar com a equipe"
              sub="WhatsApp direto · resposta em até 24h."
              delay={240} />
            
          </div>
        </section>

        {/* ───────── E-BOOKS ───────── */}
        <section className="sect">
          <SectionHead eyebrow="MATERIAIS" title="Aprenda comigo" delay={0} />
          <div className="cards stack">
            <EbookCard
              href={LINKS.ebookEmocoes}
              title="Emoções a seu favor"
              subtitle="Como suas emoções impulsionam — ou travam — sua carreira."
              delay={80} />
            
            <EbookCard
              href={LINKS.ebookCorpo}
              title="O corpo não mente"
              subtitle="A linguagem do inconsciente revelada na presença."
              delay={160} />
            
          </div>
        </section>

        {/* ───────── REDES ───────── */}
        <section className="sect sect--social">
          <SectionHead eyebrow="ONDE ENCONTRAR" title="Conecte-se" delay={0} />
          <div className="social reveal" style={{ "--d": "120ms" }}>
            <a className="soc" href={LINKS.instagram} target="_blank" rel="noopener" aria-label="Instagram">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="3" y="3" width="18" height="18" rx="4" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor" />
              </svg>
              <span>INSTAGRAM</span>
            </a>
            <a className="soc" href={LINKS.linkedin} target="_blank" rel="noopener" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="3" y="3" width="18" height="18" rx="2" />
                <path d="M7 10v7M7 7v.01M11 17v-4a2 2 0 1 1 4 0v4M11 10v7" />
              </svg>
              <span>LINKEDIN</span>
            </a>
            <a className="soc" href={LINKS.youtube} target="_blank" rel="noopener" aria-label="YouTube">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="2.5" y="5.5" width="19" height="13" rx="3" />
                <path d="M10 9.5l5 2.5-5 2.5z" fill="currentColor" stroke="none" />
              </svg>
              <span>YOUTUBE</span>
            </a>
            <a className="soc" href={LINKS.email} aria-label="E-mail">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="3" y="5" width="18" height="14" rx="1" />
                <path d="M3 7l9 7 9-7" />
              </svg>
              <span>E-MAIL</span>
            </a>
            <a className="soc" href={LINKS.whatsapp} target="_blank" rel="noopener" aria-label="WhatsApp">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M5 19l1.4-3.8A8 8 0 1 1 9.5 19H5z" />
                <path d="M9 11.5c.3 1.4 1.6 2.7 3 3l1-1 2 1v1.5a1 1 0 0 1-1 1 6 6 0 0 1-6-6 1 1 0 0 1 1-1H10l1 2-1 .5z" fill="currentColor" stroke="none" />
              </svg>
              <span>WHATSAPP</span>
            </a>
          </div>
        </section>

        {/* ───────── FOOTER ───────── */}
        <footer className="foot reveal" style={{ "--d": "60ms" }}>
          <span className="foot__rule"></span>
          <div className="foot__mark">
            <DiamondMark size={18} />
            <span className="foot__name">DIAMOND <span className="foot__sub">CONSULTORIA</span></span>
          </div>
          <p className="foot__motto">Precisão <D /> Transformação <D /> Confiança</p>
          <p className="foot__copy">© 2026 Diamond Consultoria · Xanxerê, SC · diamondconsultoria.cc</p>
        </footer>
      </main>
    </div>);

}

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