/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useState, useEffect, useCallback } = React;

/* ============================================================
   Vedic Pathway — one-page site
   Copy & structure are fixed by the client spec.
   The bound design system supplies STYLE ONLY, via:
   window.VedicPathwayDesignSystem_772213
   ============================================================ */
const DS = window.VedicPathwayDesignSystem_772213 || {};
const { Button, Card, Badge, Divider } = DS;

/* CTA destinations (live pages outside this site). */
const LINKS = {
  voiceReading: "https://ca8.link/iv2",                                                              // Free 25-min AI voice reading booking
  fortnightly: "https://ca8.link/JXT",                                                                // Fortnightly report signup
  subscription: "https://thesoullighthouse.isonline.shop/home?c=Vedic%2BPathway&t=TheSoulLighthouse", // Deep Immersion subscription
};
const go = (url) => () => { if (url && url !== "#") window.location.href = url; };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTexture": "on",
  "featuredCard": "middle",
  "accent": "generous"
}/*EDITMODE-END*/;

/* =================================================================== */
/*  Header (sticky nav — chrome, per earlier request)                  */
/* =================================================================== */
function Header({ active, onNav }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "philosophy", label: "Philosophy" },
    { id: "pathways", label: "Pathways" },
    { id: "immersion", label: "Immersion" },
  ];
  return (
    <header className={"vp-header" + (scrolled ? " scrolled" : "")}>
      <a href="#top" className="vp-logotype" style={{ fontSize: 28, lineHeight: 1 }}
         onClick={(e) => { e.preventDefault(); onNav("top"); }}>
        <span className="vedic">Vedic</span> <span className="pathway">Pathway</span>
      </a>
      <nav className="vp-nav">
        {links.map((l) => (
          <a key={l.id} href={"#" + l.id} className={"nav-anchor" + (active === l.id ? " active" : "")}
             onClick={(e) => { e.preventDefault(); onNav(l.id); }}>{l.label}</a>
        ))}
        <Button variant="primary" size="md" onClick={() => onNav("pathways")}>Begin</Button>
      </nav>
    </header>
  );
}

/* =================================================================== */
/*  1. The Threshold (Hero)                                            */
/* =================================================================== */
function MandalaTexture() {
  // Faint Antique-Gold geometric mandala behind the hero.
  return (
    <svg className="hero-mandala" viewBox="0 0 400 400" fill="none" stroke="currentColor" strokeWidth="0.8" aria-hidden="true">
      <circle cx="200" cy="200" r="60" />
      <circle cx="200" cy="200" r="98" />
      <circle cx="200" cy="200" r="140" />
      <circle cx="200" cy="200" r="184" />
      {Array.from({ length: 24 }).map((_, i) => {
        const a = (i * 15 * Math.PI) / 180;
        return <line key={"l" + i} x1={200 + 60 * Math.cos(a)} y1={200 + 60 * Math.sin(a)} x2={200 + 184 * Math.cos(a)} y2={200 + 184 * Math.sin(a)} />;
      })}
      {Array.from({ length: 12 }).map((_, i) => {
        const a = (i * 30 * Math.PI) / 180;
        const cx = 200 + 140 * Math.cos(a), cy = 200 + 140 * Math.sin(a);
        return <circle key={"p" + i} cx={cx} cy={cy} r="22" />;
      })}
      <path d="M200 16 L246 200 L200 384 L154 200 Z" />
      <path d="M16 200 L200 246 L384 200 L200 154 Z" />
    </svg>
  );
}

/* Full-bleed banner masthead from the design system. */
function Banner() {
  return (
    <div className="masthead">
      <img src="assets/VedicPathwayBanner.jpg" alt="Vedic Pathway — Vedic Wisdom, AI Decoded" />
    </div>
  );
}

function Hero() {
  return (
    <section id="top" className="vp-section hero" style={{ background: "var(--vp-cream)", paddingTop: "clamp(64px, 9vw, 128px)" }}>
      <MandalaTexture />
      <div className="hero-inner" data-reveal>
        <span className="vp-eyebrow is-themed">A Conversational Jyotish Experience</span>
        <h1 style={{
          font: "var(--weight-regular) clamp(44px, 6.6vw, 78px)/1.18 var(--font-display)",
          letterSpacing: "var(--tracking-tight)", color: "var(--text-heading)",
          margin: "var(--space-4) 0 var(--space-6)",
        }}>
          Ancient Wisdom. AI Decoded.
        </h1>
        <p style={{
          font: "var(--weight-light) var(--text-lg)/var(--leading-body) var(--font-body)",
          color: "var(--text-muted)", maxWidth: 660, margin: "0 0 var(--space-7)",
        }}>
          Discover the hidden themes of your birth chart. A uniquely personalized reflection
          blending thousands of years of Vedic astrology with advanced AI, designed to help
          you pause, reflect, and find clarity.
        </p>
        <Button variant="primary" size="lg" onClick={go(LINKS.voiceReading)}>
          Book Your Free 25-Minute AI Voice Reading
        </Button>
        <p style={{ font: "var(--weight-regular) var(--text-base) var(--font-body)", color: "var(--text-muted)", marginTop: "var(--space-5)", marginBottom: 0 }}>
          Prefer to just read?{" "}
          <button type="button" className="text-link" onClick={go(LINKS.fortnightly)}>Join our free fortnightly insight report</button>
        </p>
      </div>
    </section>
  );
}

/* =================================================================== */
/*  2. The Philosophy (centered)                                       */
/* =================================================================== */
function Philosophy() {
  return (
    <section id="philosophy" className="vp-section" style={{ background: "var(--surface-canvas)" }}>
      <div className="vp-wrap" style={{ maxWidth: 820, textAlign: "center" }}>
        <div data-reveal>
          <h2 style={{ font: "var(--weight-regular) clamp(30px, 4.2vw, 48px)/1.18 var(--font-display)", margin: "0 0 var(--space-5)", color: "var(--text-heading)" }}>
            When the Past Makes Sense, the Future Feels Clearer.
          </h2>
          <p style={{ font: "var(--weight-light) var(--text-md)/var(--leading-body) var(--font-body)", color: "var(--text-body)", margin: "0 auto var(--space-6)", maxWidth: 680 }}>
            Life can be intense. Looking back with the right perspective can be surprisingly
            helpful—offering clarity, reassurance, and a sense of coherence around how events,
            decisions, and experiences have shaped where you are now.
          </p>
          <h3 style={{ font: "var(--weight-medium) clamp(20px, 2.4vw, 26px)/1.4 var(--font-display)", color: "var(--vp-gold-deep, var(--vp-gold))", margin: "0 auto var(--space-6)", maxWidth: 640 }}>
            The more clarity you have on where you’ve been, the more insight you gain into where you are going.
          </h3>
          <p style={{ font: "var(--weight-light) var(--text-md)/var(--leading-body) var(--font-body)", color: "var(--text-body)", margin: "0 auto", maxWidth: 680 }}>
            Vedic Pathway is not about fortune-telling. It is an architectural blueprint of your
            life’s themes. By translating the ancient science of Jyotish (the Science of Light)
            through an advanced, compassionate AI, we provide a space for you to understand your
            personal timing, your inherent strengths, and the cycles you are currently moving through.
          </p>
        </div>
      </div>
    </section>
  );
}

/* =================================================================== */
/*  3. Choose Your Pathway                                             */
/* =================================================================== */
function Pathways({ featuredCard }) {
  const featured = featuredCard === "middle";
  return (
    <section id="pathways" className="vp-section" style={{ background: "var(--vp-cream-2)" }}>
      <div className="vp-wrap">
        <div data-reveal style={{ textAlign: "center", maxWidth: 720, margin: "0 auto var(--space-10)" }}>
          <h2 style={{ font: "var(--weight-regular) clamp(30px, 4.2vw, 48px)/1.18 var(--font-display)", margin: 0, color: "var(--text-heading)" }}>
            How Would You Like to Explore Your Chart?
          </h2>
        </div>

        <div className="pathways-grid">
          {/* Card 1 — The Gentle Guide (Free) */}
          <div data-reveal>
            <Card hoverable style={{ height: "100%" }}>
              <div className="pathway-card">
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-3)" }}>
                  <h3 style={{ font: "var(--weight-medium) var(--text-xl)/1.2 var(--font-display)", margin: 0, color: "var(--text-heading)" }}>The Gentle Guide</h3>
                  <Badge tone="sage">Free</Badge>
                </div>
                <p style={{ font: "var(--weight-light) var(--text-base)/var(--leading-body) var(--font-body)", color: "var(--text-muted)", margin: 0, flex: 1 }}>
                  Stay aligned with the cosmic weather. Receive a beautifully curated email every
                  14 days highlighting the astrological shifts of the upcoming weeks and how to
                  navigate them.
                </p>
                <div><Button variant="secondary" onClick={go(LINKS.fortnightly)}>Join the Fortnightly Report</Button></div>
              </div>
            </Card>
          </div>

          {/* Card 2 — The Conversational Explorer (Free) — FEATURED, gold border */}
          <div data-reveal style={{ transitionDelay: "90ms" }}>
            <Card hoverable style={{ height: "100%", border: featured ? "1.5px solid var(--vp-gold)" : undefined, boxShadow: featured ? "var(--shadow-card-hover)" : undefined }}>
              <div className={"pathway-card" + (featured ? " featured" : "")}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-3)" }}>
                  <h3 style={{ font: "var(--weight-medium) var(--text-xl)/1.2 var(--font-display)", margin: 0, color: "var(--text-heading)" }}>The Conversational Explorer</h3>
                  <Badge tone="saffron">Free</Badge>
                </div>
                <p style={{ font: "var(--weight-light) var(--text-base)/var(--leading-body) var(--font-body)", color: "var(--text-muted)", margin: 0, flex: 1 }}>
                  Speak directly with our AI Jyotish guide. A completely personalized, 25-minute
                  voice consultation based on your exact birth details. Ask questions, explore your
                  current Dasha (planetary period), and find perspective.
                </p>
                <div><Button variant="primary" onClick={go(LINKS.voiceReading)}>Book Your Free 25-Min Voice Call</Button></div>
              </div>
            </Card>
          </div>

          {/* Card 3 — The Deep Immersion (Premium) */}
          <div data-reveal style={{ transitionDelay: "180ms" }}>
            <Card tone="premium" hoverable style={{ height: "100%" }}>
              <div className="pathway-card">
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-3)" }}>
                  <h3 style={{ font: "var(--weight-medium) var(--text-xl)/1.2 var(--font-display)", margin: 0, color: "var(--text-premium)" }}>The Deep Immersion</h3>
                  <Badge tone="gold">Premium</Badge>
                </div>
                <p style={{ font: "var(--weight-light) var(--text-base)/var(--leading-body) var(--font-body)", color: "var(--vp-cream)", opacity: 0.82, margin: 0, flex: 1 }}>
                  For those ready to integrate these insights into daily life. Get detailed monthly
                  and annual reports, plus a curated monthly delivery of healing mantras, printable
                  journals, vision boards, and therapeutic mandalas.
                </p>
                <div><Button variant="premium" onClick={go(LINKS.subscription)}>Explore Subscription Plans</Button></div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =================================================================== */
/*  4. The Immersion Breakdown                                         */
/* =================================================================== */
function Check() {
  return (
    <span className="check" aria-hidden="true">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7" /></svg>
    </span>
  );
}

function Immersion() {
  const items = [
    ["Annual & Monthly Forecasts", "A reflective overview of the themes shaping your year and the specific energies of the month ahead."],
    ["Personalized Journal Prompts", "Guided questions based on your active planetary periods to help you process and reflect."],
    ["Vedic Mantras & Soundscapes", "Curated audio and music designed to balance the specific astrological energies you are currently facing."],
    ["Vision Boards & Mandalas", "Beautiful, printable visual assets to ground your focus and calm your nervous system."],
  ];
  const products = ["Mandala", "Journal", "Meditation", "Affirmation", "Song", "Ebook"];
  return (
    <section id="immersion" className="vp-section immersion">
      <div className="vp-wrap">
        <div data-reveal style={{ maxWidth: 720, marginBottom: "var(--space-8)" }}>
          <h2 style={{ font: "var(--weight-regular) clamp(30px, 4.2vw, 48px)/1.18 var(--font-display)", margin: "0 0 var(--space-5)", color: "var(--text-heading)" }}>
            What’s Included in the Deep Immersion?
          </h2>
          <p style={{ font: "var(--weight-light) var(--text-md)/var(--leading-body) var(--font-body)", color: "var(--text-body)", margin: 0 }}>
            Using your date, time, and exact place of birth, the Vedic Pathway subscription
            delivers a powerful, comprehensive toolkit to your inbox every month.
          </p>
        </div>

        <ul className="feature-list" data-reveal>
          {items.map(([lead, body]) => (
            <li key={lead}>
              <Check />
              <div>
                <div style={{ font: "var(--weight-semibold) var(--text-lg) var(--font-display)", color: "var(--text-heading)", marginBottom: "var(--space-1)" }}>{lead}</div>
                <div style={{ font: "var(--weight-light) var(--text-base)/var(--leading-body) var(--font-body)", color: "var(--text-muted)" }}>{body}</div>
              </div>
            </li>
          ))}
        </ul>

        {/* Supporting glimpse of the monthly deliverables (real brand assets) */}
        <div data-reveal style={{ marginTop: "var(--space-10)" }}>
          <div style={{ font: "var(--weight-bold) var(--text-xs) var(--font-body)", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--vp-sage-dark)", marginBottom: "var(--space-4)" }}>
            A glimpse of what lands in your inbox
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "var(--space-4)" }} className="immersion-products">
            {products.map((p) => (
              <img key={p} src={"assets/Monthly-" + p + ".png"} alt={"Monthly " + p + " deliverable"} loading="lazy"
                   style={{ width: "100%", aspectRatio: "1", objectFit: "cover", borderRadius: "var(--radius-card)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-card)" }} />
            ))}
          </div>
        </div>

        <div data-reveal style={{ marginTop: "var(--space-10)" }}>
          <Button variant="primary" size="lg" onClick={go(LINKS.subscription)}>Start Your Monthly Immersion</Button>
        </div>
      </div>
    </section>
  );
}

/* =================================================================== */
/*  5. The Boundary                                                    */
/* =================================================================== */
function Boundary() {
  return (
    <section className="vp-section" style={{ background: "var(--surface-canvas)" }}>
      <div className="vp-wrap" style={{ maxWidth: 980 }}>
        <div data-reveal><Divider glyph="lotus" /></div>
        <div data-reveal style={{ textAlign: "center", margin: "var(--space-6) auto var(--space-10)", maxWidth: 720 }}>
          <h2 style={{ font: "var(--weight-regular) clamp(30px, 4.2vw, 48px)/1.18 var(--font-display)", margin: 0, color: "var(--text-heading)" }}>
            What This Is. And What This Isn’t.
          </h2>
        </div>

        <div className="boundary-cols">
          <div data-reveal>
            <div style={{ font: "var(--weight-bold) var(--text-sm) var(--font-body)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vp-sage-dark)", marginBottom: "var(--space-4)" }}>What This Is</div>
            <p style={{ font: "var(--weight-light) var(--text-md)/var(--leading-body) var(--font-body)", color: "var(--text-body)", margin: 0 }}>
              A reflective, personalized exploratory experience designed to support self-awareness
              and clarity. By looking at your recent experiences through the broader framework of
              Vedic astrology, it helps bring context, understanding, and a steadier sense of where
              you are now. It is the perfect preparation tool before seeking a human astrologer.
            </p>
          </div>
          <div data-reveal style={{ transitionDelay: "90ms" }}>
            <div style={{ font: "var(--weight-bold) var(--text-sm) var(--font-body)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-heading)", marginBottom: "var(--space-4)" }}>What This Isn’t</div>
            <p style={{ font: "var(--weight-light) var(--text-md)/var(--leading-body) var(--font-body)", color: "var(--text-body)", margin: 0 }}>
              This is an AI-generated experience, not a human astrologer. It is not a predictive
              tool, and it does not offer absolute certainty. It should never be used as a substitute
              for professional medical, psychological, legal, or financial advice. It is designed to
              offer perspective, entertainment, and insight—not guarantees.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =================================================================== */
/*  6. Footer                                                          */
/* =================================================================== */
function Footer({ onNav }) {
  const links = [
    { label: "Privacy Policy", href: "https://vedicpathway.isonline.shop/privacypolicy", ext: true },
    { label: "Terms of Service", href: "https://vedicpathway.isonline.shop/termsandconditions", ext: true },
    { label: "Contact Support", href: "mailto:info@vedicpathway.com" },
  ];
  return (
    <footer style={{ background: "var(--surface-premium)", color: "var(--vp-cream)", padding: "clamp(48px,7vw,72px) clamp(20px,4vw,40px) 40px" }}>
      <div className="vp-wrap" style={{ display: "flex", flexDirection: "column", gap: "var(--space-7)" }}>
        <a href="#top" className="vp-logotype vp-link-reset" style={{ fontSize: 26 }} onClick={(e) => { e.preventDefault(); onNav("top"); }}>
          <span style={{ color: "var(--vp-cream)" }}>Vedic</span> <span className="pathway" style={{ color: "var(--vp-gold)" }}>Pathway</span>
        </a>
        <div className="footer-links">
          {links.map((l) => (
            <a key={l.label} href={l.href}
               target={l.ext ? "_blank" : undefined} rel={l.ext ? "noopener noreferrer" : undefined}
               className="vp-link-reset footer-link" style={{ font: "var(--weight-regular) var(--text-sm) var(--font-body)", color: "var(--vp-cream)", letterSpacing: "0.02em" }}>{l.label}</a>
          ))}
        </div>
        <div style={{ paddingTop: "var(--space-5)", borderTop: "1px solid rgba(194,168,120,0.25)", font: "var(--weight-regular) var(--text-xs)/1.6 var(--font-body)", color: "var(--vp-cream)", opacity: 0.62 }}>
          © {new Date().getFullYear()} Vedic Pathway. Ancient Wisdom. AI Decoded.
        </div>
      </div>
    </footer>
  );
}

/* =================================================================== */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState("top");

  useEffect(() => { document.body.dataset.accent = t.accent; }, [t.accent]);
  useEffect(() => { document.body.dataset.texture = t.heroTexture; }, [t.heroTexture]);

  // reveal-on-scroll
  useEffect(() => {
    const els = Array.from(document.querySelectorAll("[data-reveal]"));
    if (!("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [t.featuredCard]);

  const navTo = useCallback((id) => {
    const el = id === "top" ? document.body : document.getElementById(id);
    if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const top = id === "top" ? 0 : el.getBoundingClientRect().top + window.scrollY - 72;
    window.scrollTo({ top, behavior: reduce ? "auto" : "smooth" });
  }, []);

  useEffect(() => {
    const ids = ["philosophy", "pathways", "immersion"];
    const onScroll = () => {
      const y = window.scrollY + 140;
      let cur = "top";
      ids.forEach((id) => { const el = document.getElementById(id); if (el && el.offsetTop <= y) cur = id; });
      if (window.scrollY < 80) cur = "top";
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <React.Fragment>
      <Header active={active} onNav={navTo} />
      <main>
        <Banner />
        <Hero />
        <Philosophy />
        <Pathways featuredCard={t.featuredCard} />
        <Immersion />
        <Boundary />
      </main>
      <Footer onNav={navTo} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Mandala texture" value={t.heroTexture} options={["on", "off"]} onChange={(v) => setTweak("heroTexture", v)} />
        <TweakSection label="Pathway cards" />
        <TweakRadio label="Highlight" value={t.featuredCard} options={["middle", "none"]} onChange={(v) => setTweak("featuredCard", v)} />
        <TweakSection label="Accent rationing" />
        <TweakRadio label="Saffron" value={t.accent} options={["restrained", "balanced", "generous"]} onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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