/* ============================================================
   ASTREALOGANDO — section components
   Exposed on window for app.jsx to consume
   ============================================================ */

// ---------- GLYPHS (line-art SVG icons, gold stroke) ----------
const Glyph = ({ kind }) => {
  const map = {
    tarot: (
      <svg viewBox="0 0 56 56" className="glyph">
        <rect
          x="14"
          y="8"
          width="20"
          height="36"
          rx="2"
          transform="rotate(-8 24 26)"
        />
        <rect
          x="22"
          y="8"
          width="20"
          height="36"
          rx="2"
          transform="rotate(8 32 26)"
        />
        <path
          d="M28 22 L29.5 26 L33.5 26 L30.2 28.8 L31.5 33 L28 30.5 L24.5 33 L25.8 28.8 L22.5 26 L26.5 26 Z"
          className="fill"
        />
      </svg>
    ),

    lenormand: (
      <svg viewBox="0 0 56 56" className="glyph">
        <rect x="10" y="14" width="14" height="22" rx="1.5" />
        <rect x="22" y="11" width="14" height="22" rx="1.5" />
        <rect x="34" y="8" width="14" height="22" rx="1.5" />
        <path d="M40 33 L40 44 M35 39 L45 39" />
      </svg>
    ),

    astrology: (
      <svg viewBox="0 0 56 56" className="glyph">
        <circle cx="28" cy="28" r="18" />
        <circle cx="28" cy="28" r="12" />
        <path d="M28 10 L28 16 M28 40 L28 46 M10 28 L16 28 M40 28 L46 28" />
        <path d="M15.5 15.5 L19.5 19.5 M36.5 36.5 L40.5 40.5 M15.5 40.5 L19.5 36.5 M36.5 19.5 L40.5 15.5" />
        <circle cx="28" cy="28" r="2.5" className="fill" />
      </svg>
    ),

    moon: (
      <svg viewBox="0 0 28 28" className="glyph">
        <path d="M20 14 a8 8 0 1 1 -8 -8 a6 6 0 0 0 8 8 z" />
      </svg>
    ),

    book: (
      <svg viewBox="0 0 28 28" className="glyph">
        <path d="M4 6 H14 a4 4 0 0 1 4 4 v14 H8 a4 4 0 0 1 -4 -4 z" />
        <path d="M24 6 H14 a4 4 0 0 0 -4 4 v14 h10 a4 4 0 0 0 4 -4 z" />
      </svg>
    ),

    practice: (
      <svg viewBox="0 0 28 28" className="glyph">
        <path d="M6 14 L12 20 L22 8" />
        <circle cx="14" cy="14" r="11" />
      </svg>
    ),

    cert: (
      <svg viewBox="0 0 28 28" className="glyph">
        <circle cx="14" cy="12" r="6" />
        <path d="M10 17 L8 25 L14 22 L20 25 L18 17" />
        <path d="M11 12 L13 14 L17 10" />
      </svg>
    ),

    key: (
      <svg viewBox="0 0 28 28" className="glyph">
        <circle cx="9" cy="14" r="5" />
        <path d="M14 14 L25 14 M22 14 L22 18 M25 14 L25 17" />
      </svg>
    ),

    sun: (
      <svg viewBox="0 0 28 28" className="glyph">
        <circle cx="14" cy="14" r="5" />
        <path d="M14 3 L14 6 M14 22 L14 25 M3 14 L6 14 M22 14 L25 14 M6.5 6.5 L8.5 8.5 M19.5 19.5 L21.5 21.5 M6.5 21.5 L8.5 19.5 M19.5 8.5 L21.5 6.5" />
      </svg>
    ),
  };
  return map[kind] || null;
};

// ---------- STARS background (only visible in mistico mode) ----------
// Four-pointed sparkle glyphs, positioned absolutely so they keep their
// aspect ratio across any container size (no preserveAspectRatio stretching).
const StarGlyph = ({ size, type }) => {
  // Three star types for variety:
  //  - "sparkle":   classic 4-point star (✦)
  //  - "fine":      thin 4-point star with longer rays
  //  - "dot":       tiny round dot for filler
  if (type === "dot") {
    return (
      <svg
        width={size}
        height={size}
        viewBox="-1 -1 2 2"
        style={{ display: "block" }}
      >
        <circle cx="0" cy="0" r="0.5" fill="#DAA76C" />
      </svg>
    );
  }
  if (type === "fine") {
    return (
      <svg
        width={size}
        height={size}
        viewBox="-10 -10 20 20"
        style={{ display: "block" }}
      >
        <path
          d="M 0 -9 C 0.6 -2 0.6 -2 9 0 C 0.6 2 0.6 2 0 9 C -0.6 2 -0.6 2 -9 0 C -0.6 -2 -0.6 -2 0 -9 Z"
          fill="#DAA76C"
        />
      </svg>
    );
  }
  // sparkle (default): 4-point star with broader points
  return (
    <svg
      width={size}
      height={size}
      viewBox="-10 -10 20 20"
      style={{ display: "block" }}
    >
      <path
        d="M 0 -9 C 1.6 -3 3 -1.6 9 0 C 3 1.6 1.6 3 0 9 C -1.6 3 -3 1.6 -9 0 C -3 -1.6 -1.6 -3 0 -9 Z"
        fill="#DAA76C"
      />
    </svg>
  );
};

const Stars = () => {
  // Deterministic positions (stable across renders) — distribute across the
  // section bg. Mix of three star types and varied sizes/opacity for depth.
  const stars = React.useMemo(() => {
    const arr = [];
    let s = 7;
    const rand = () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    const types = [
      "sparkle",
      "fine",
      "sparkle",
      "dot",
      "fine",
      "dot",
      "sparkle",
    ];
    for (let i = 0; i < 36; i++) {
      const r = rand();
      arr.push({
        x: rand() * 100,
        y: rand() * 100,
        size:
          r < 0.55
            ? 6 + rand() * 4
            : r < 0.85
              ? 10 + rand() * 6
              : 14 + rand() * 8,
        opacity: 0.25 + rand() * 0.55,
        type: types[i % types.length],
        twinkle: rand() * 4,
      });
    }
    return arr;
  }, []);
  return (
    <div className="stars" aria-hidden="true">
      {stars.map((st, i) => (
        <span
          key={i}
          className="star"
          style={{
            left: `${st.x}%`,
            top: `${st.y}%`,
            opacity: st.opacity,
            animationDelay: `${st.twinkle}s`,
          }}
        >
          <StarGlyph size={st.size} type={st.type} />
        </span>
      ))}
    </div>
  );
};

const DividerSigil = () => (
  <div className="divider-sigil">
    <span>✦ ⋆ ✦</span>
  </div>
);

// ---------- NAV ----------
const Nav = () => (
  <nav className="nav" data-screen-label="Nav">
    <div className="nav-inner">
      <a href="#top" className="nav-brand">
        <span className="mark">
          <img src="assets/logo-gold.png" alt="" />
        </span>
        <span>Astrealogando</span>
      </a>
      <div className="nav-links">
        <a href="#servicos">Serviços</a>
        <a href="#valores">Valores</a>
        <a href="#curso">Curso</a>
        <a href="#sobre">Sobre</a>
        <a href="#contato">Agendar</a>
      </div>
    </div>
  </nav>
);

// ---------- HERO ----------
const Hero = () => (
  <section className="hero" id="top" data-screen-label="01 Hero">
    <Stars />
    <div className="wrap hero-stage">
      <div>
        <div className="eyebrow left" style={{ marginBottom: 28 }}>
          Escola de Estudos Oraculares
        </div>
        <h1>
          Sabedoria que <em>te escuta</em>,<br />
          orientação que <em>te revela</em>.
        </h1>
        <p className="lede">
          Consultas terapêuticas de Tarot, Baralho Cigano e Astrologia — e o
          curso completo de Petit Lenormand, conduzidos por Lílian Vedolin.
        </p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href="#curso">
            Conheça o Curso
            <span style={{ fontSize: 14 }}>→</span>
          </a>
          <a className="btn btn-ghost" href="#contato">
            Agendar consulta
          </a>
        </div>
      </div>
      <div className="hero-mark">
        <div className="ring"></div>
        <div className="logo-disc">
          <img src="assets/logo-gold.png" alt="Astrealogando" />
        </div>
      </div>
    </div>
  </section>
);

// ---------- MANIFESTO ----------
const Manifesto = () => (
  <section data-screen-label="02 Manifesto">
    <div className="wrap-narrow" style={{ textAlign: "center" }}>
      <div
        className="eyebrow"
        style={{ marginBottom: 28, justifyContent: "center" }}
      >
        Um chamado
      </div>
      <h2 style={{ marginBottom: 32 }}>
        Existe um momento em que a gente sente <em>um chamado</em> para olhar
        mais fundo.
      </h2>
      <p className="lede">
        Para compreender os sinais, desenvolver a intuição e transformar
        sensibilidade em sabedoria. Aqui você encontra um caminho com técnica,
        ética e profundidade — para ler para si e para o mundo.
      </p>
      <DividerSigil />
    </div>
  </section>
);

// ---------- SERVICES ----------
const Services = () => (
  <section id="servicos" data-screen-label="03 Serviços">
    <div className="wrap">
      <div className="section-head">
        <div className="eyebrow" style={{ justifyContent: "center" }}>
          Serviços
        </div>
        <h2>
          Três caminhos, <em>uma mesma escuta</em>.
        </h2>
        <p className="lede">
          Cada ferramenta é uma linguagem diferente para a mesma pergunta — quem
          você é hoje, e o que está pronto para acontecer.
        </p>
      </div>
      <div className="services">
        <article className="service">
          <div className="service-glyph">
            <Glyph kind="tarot" />
          </div>
          <h3>Tarot Terapêutico</h3>
          <p className="service-body">
            Uma leitura cuidadosa do tarô como ferramenta de autoconhecimento.
            Olhamos para o momento presente, os ciclos abertos e os caminhos
            possíveis com ética e profundidade.
          </p>
          <div className="service-meta">
            <span>Online · 60 min</span>
            <b>Sob agenda</b>
          </div>
        </article>
        <article className="service">
          <div className="service-glyph">
            <Glyph kind="lenormand" />
          </div>
          <h3>Baralho Cigano</h3>
          <p className="service-body">
            O Petit Lenormand traz mensagens diretas e práticas. Ideal para
            decisões, panorama de curto prazo e clareza sobre situações
            específicas da sua vida.
          </p>
          <div className="service-meta">
            <span>Online · 60 min</span>
            <b>Sob agenda</b>
          </div>
        </article>
        <article className="service">
          <div className="service-glyph">
            <Glyph kind="astrology" />
          </div>
          <h3>Astrologia</h3>
          <p className="service-body">
            O Mapa Astral Terapêutico — Essência Pessoal — é uma leitura mais
            ampla do seu céu de nascimento. O que você veio expressar, seu modo
            de amar, seu propósito.
          </p>
          <div className="service-meta">
            <span>Online · 90 min</span>
            <b>Sob agenda</b>
          </div>
        </article>
      </div>
    </div>
  </section>
);

// ---------- PRICING ----------
const Pricing = () => {
  const items = [
    {
      name: "Mandala Anual",
      desc: "Tarot ou Baralho Cigano. Um panorama dos 12 meses pela frente, com energias, oportunidades e atenção em cada ciclo.",
      price: "€40",
    },
    {
      name: "Mandala das Estações",
      desc: "Tarot ou Baralho Cigano. Leitura focada no trimestre — o ritmo da estação que se abre na sua vida.",
      price: "€20",
    },
    {
      name: "Mapa Astral Terapêutico",
      desc: "Essência Pessoal. Uma leitura aprofundada do seu mapa de nascimento — quem você veio ser, como você se expressa, seu propósito.",
      price: "€40",
    },
    {
      name: "Perguntas Avulsas",
      desc: "Tarot ou Baralho Cigano. Para quando você precisa de uma orientação rápida e objetiva sobre algo específico.",
      price: "€5",
      unit: "por pergunta",
    },
  ];

  return (
    <section id="valores" data-screen-label="04 Valores">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            Jornada Terapêutica
          </div>
          <h2>
            Valores das <em>consultas</em>.
          </h2>
          <p className="lede">
            Atendimentos online, conduzidos com cuidado e técnica. O agendamento
            é feito diretamente pelo Instagram.
          </p>
        </div>
        <div className="pricing">
          {items.map((it, i) => (
            <div key={i} className="price-row">
              <div className="price-name">{it.name}</div>
              <div className="price-desc">{it.desc}</div>
              <div className="price-value">
                {it.price}
                {it.unit && <small>{it.unit}</small>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- COURSE ----------
const Course = () => (
  <section className="course" id="curso" data-screen-label="05 Curso">
    <Stars />
    <div className="wrap course-grid">
      <div>
        <div className="eyebrow course-eyebrow">Curso em destaque</div>
        <h2>
          Desvendando o<br />
          <em>Baralho Cigano</em>.
        </h2>
        <p className="course-lede">
          Mais do que aprender cartas — você vai aprender a ler histórias,
          energias e possibilidades, com segurança, ética e profundidade.
        </p>
        <div className="course-pillars">
          <div className="pillar">
            <div className="pillar-glyph">
              <Glyph kind="moon" />
            </div>
            <div className="pillar-text">
              <b>Do básico ao avançado</b>
              Um caminho estruturado, pensado para te acompanhar em cada etapa
              da sua jornada.
            </div>
          </div>
          <div className="pillar">
            <div className="pillar-glyph">
              <Glyph kind="key" />
            </div>
            <div className="pillar-text">
              <b>Leitura com profundidade</b>
              Técnica, ética e conexão real — para ler para si e para outras
              pessoas.
            </div>
          </div>
          <div className="pillar">
            <div className="pillar-glyph">
              <Glyph kind="practice" />
            </div>
            <div className="pillar-text">
              <b>Prática supervisionada</b>
              Exercícios e simulações de leitura ao vivo durante todo o curso.
            </div>
          </div>
          <div className="pillar">
            <div className="pillar-glyph">
              <Glyph kind="sun" />
            </div>
            <div className="pillar-text">
              <b>Caminho profissional</b>
              Direcionamento para quem deseja transformar a prática em ofício.
            </div>
          </div>
        </div>
      </div>
      <aside className="course-includes">
        <h4>O que está incluído</h4>
        <div className="price-tag">
          <span className="label">Inscrições em breve · Vagas limitadas</span>
        </div>
        <ul>
          <li>
            <div>
              <b>10 encontros</b> ao vivo e online, conduzidos por Lílian
              Vedolin.
            </div>
          </li>
          <li>
            <div>
              <b>Apostila completa em PDF</b> para te acompanhar em cada aula.
            </div>
          </li>
          <li>
            <div>
              <b>Exercícios práticos</b> e simulações de leitura
              supervisionadas.
            </div>
          </li>
          <li>
            <div>
              <b>Certificado de conclusão</b> emitido pela Astrealogando.
            </div>
          </li>
          <li>
            <div>
              <b>Direcionamento individual</b> para ler para si e para outras
              pessoas.
            </div>
          </li>
        </ul>
        <a
          className="btn btn-primary"
          href="https://instagram.com/astrealogando"
          target="_blank"
          rel="noopener"
        >
          Reservar minha vaga
          <span style={{ fontSize: 14 }}>→</span>
        </a>
        <div className="vagas">✦ Próxima turma em formação ✦</div>
      </aside>
    </div>
  </section>
);

// ---------- ABOUT ----------
const About = () => (
  <section id="sobre" data-screen-label="06 Sobre">
    <div className="wrap about-grid">
      <div className="about-portrait">
        <img src="assets/lilian.jpg" alt="Lílian Vedolin" />
      </div>
      <div className="about-body">
        <div className="eyebrow left" style={{ marginBottom: 24 }}>
          Sobre a instrutora
        </div>
        <h2 style={{ marginBottom: 32 }}>Lílian Vedolin.</h2>
        <p>
          Cartomante, taróloga e astróloga. Há anos trabalha com oráculos como
          ferramentas terapêuticas — escuta, autoconhecimento e direcionamento.
        </p>
        <p className="muted">
          A Astrealogando nasceu do desejo de unir prática e estudo: um espaço
          onde a sensibilidade se encontra com técnica, e a intuição é tratada
          como uma habilidade que se desenvolve com método. Aqui você encontra
          atendimentos terapêuticos e formação séria em Petit Lenormand.
        </p>
        <div className="about-credentials">
          <span className="cred">Tarot Terapêutico</span>
          <span className="cred">Petit Lenormand</span>
          <span className="cred">Astrologia</span>
          <span className="cred">Mapa Astral</span>
        </div>
      </div>
    </div>
  </section>
);

// ---------- TESTIMONIALS ----------
const Testimonials = () => {
  const items = [
    {
      quote:
        "Você clareou o meu caminho mana, trouxe clareza, acolhimento e me mostrou que devo ter confiança em mim mesma e na minha espiritualidade. Você ascendeu uma trilha de luzinhas me levando pra tranquilidade mental mana. Você fez um trabalho incrível e essencial, eu tava precisando desse direcionamento. Você trouxe luz e calmaria, confia em ti e na dona 7, você tá fazendo um lindo trabalho e que é super importante pra vida das suas consulentes.",
    },
    {
      quote:
        "Muito obrigada Li, eu amei e com certeza já acendeu muitas luzinhas por aqui.",
    },
    {
      quote:
        "Só pra falar que até o momento, as leituras estão fazendo tanto sentido.",
    },
  ];

  return (
    <section data-screen-label="07 Depoimentos">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            Depoimentos
          </div>
          <h2>
            Quem já fez <em>uma leitura</em>.
          </h2>
        </div>
        <div className="testimonials">
          {items.map((t, i) => (
            <div key={i} className="testimonial">
              <div className="quote-mark">“</div>
              <p>{t.quote}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- FAQ ----------
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "Como funciona o agendamento?",
      a: "Todo o agendamento é feito diretamente pelo Instagram @astrealogando. Você envia uma mensagem, conversamos sobre o que faz mais sentido para o seu momento, e combinamos data, horário e a forma de pagamento.",
    },
    {
      q: "As consultas são online ou presenciais?",
      a: "Por enquanto todas as consultas são realizadas online, por chamada de vídeo. Isso permite atender você esteja onde estiver — Brasil, Portugal ou qualquer outro lugar.",
    },
    {
      q: "Qual a diferença entre Tarot e Baralho Cigano?",
      a: "O Tarot trabalha de forma mais simbólica e arquetípica — ótimo para temas internos, autoconhecimento e ciclos longos. O Baralho Cigano (Petit Lenormand) traz respostas mais diretas, práticas e objetivas — ideal para decisões e situações específicas.",
    },
    {
      q: "Preciso ter experiência prévia para fazer o curso?",
      a: "Não. O curso parte do básico e te leva até a leitura avançada, de forma estruturada. É indicado tanto para quem nunca teve contato com o baralho quanto para quem deseja aprofundar e profissionalizar a prática.",
    },
    {
      q: "Como recebo o certificado?",
      a: "O certificado de conclusão da Astrealogando é emitido em PDF ao final do curso, mediante a frequência mínima e a realização dos exercícios práticos propostos.",
    },
  ];

  return (
    <section data-screen-label="08 FAQ">
      <div className="wrap-narrow">
        <div className="section-head">
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            Perguntas frequentes
          </div>
          <h2>
            Talvez você esteja se <em>perguntando</em>…
          </h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div
              key={i}
              className={"faq-item" + (open === i ? " open" : "")}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-toggle" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="14" height="14">
                    <line
                      x1="4"
                      y1="12"
                      x2="20"
                      y2="12"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                    />
                    <line
                      x1="12"
                      y1="4"
                      x2="12"
                      y2="20"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      className="faq-toggle-v"
                    />
                  </svg>
                </span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- FINAL CTA ----------
const FinalCTA = () => (
  <section className="cta-final" id="contato" data-screen-label="09 Contato">
    <Stars />
    <div className="wrap-narrow">
      <div
        className="eyebrow"
        style={{
          justifyContent: "center",
          marginBottom: 24,
          color: "var(--gold)",
        }}
      >
        Seu caminho está esperando
      </div>
      <h2>
        Permita-se dar
        <br />
        <em>esse passo</em>.
      </h2>
      <p className="lede">
        O agendamento das consultas e a inscrição no curso são feitos
        diretamente no Instagram. Envie uma mensagem — vou te responder
        pessoalmente.
      </p>
      <a
        className="btn btn-primary"
        href="https://instagram.com/astrealogando"
        target="_blank"
        rel="noopener"
      >
        @astrealogando no Instagram
        <span style={{ fontSize: 14 }}>→</span>
      </a>
    </div>
  </section>
);

// ---------- FOOTER ----------
const Footer = () => (
  <footer data-screen-label="10 Footer">
    <div className="wrap foot-inner">
      <div className="foot-brand">
        <img src="assets/logo-gold.png" alt="" />
        <span>Astrealogando</span>
      </div>
      <div className="foot-links">
        <a
          href="https://instagram.com/astrealogando"
          target="_blank"
          rel="noopener"
        >
          Instagram
        </a>
        <a href="#top">Voltar ao topo</a>
      </div>
      <div className="dim">
        © {new Date().getFullYear()} · Astrealogando - Escola de Estudos
        Oraculares
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Nav,
  Hero,
  Manifesto,
  Services,
  Pricing,
  Course,
  About,
  Testimonials,
  FAQ,
  FinalCTA,
  Footer,
  Glyph,
  Stars,
  DividerSigil,
});
