/* ============================================================
   Cosmic Nisi — Page section components
   ============================================================ */

const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

/* ---------- Nav ---------- */
function Nav({ onBookClick }) {
  const [scrolled, setScrolled] = useStateP(false);
  const [open, setOpen] = useStateP(false);
  useEffectP(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`cn-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="cn-nav__inner">
        <a className="cn-nav__brand" href="#top">
          <span className="cn-nav__brand-name">Cosmic Nisi</span>
          <span className="cn-nav__brand-rule"></span>
          <span className="cn-nav__brand-sub">Astrologie · Tarot · Intuition</span>
        </a>
        <div className="cn-nav__links">
          <a href="#about">Über mich</a>
          <a href="#themes">Themen</a>
          <a href="#tools">Werkzeuge</a>
          <a href="#sessions">Sessions</a>
          <a href="#nisiversum">NISIVERSUM</a>
          <a href="#contact">Kontakt</a>
          <button className="btn btn-primary cn-nav__cta" onClick={onBookClick}>Termin anfragen</button>
        </div>
        <button className="cn-nav__menu" onClick={() => setOpen(!open)} aria-label="menu">
          <span></span><span></span>
        </button>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero({ onBookClick }) {
  return (
    <section className="cn-hero" id="top">
      <ConstellationHero/>
      <div className="cn-hero__inner">
        <div className="cn-hero__mark">
          <svg viewBox="0 0 48 48" width="48" height="48">
            <path d="M 32 8 A 18 18 0 1 0 32 40 A 14 14 0 1 1 32 8 Z" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="eyebrow cn-hero__eyebrow">Cosmic Nisi · NISIVERSUM</div>
        <h1 className="cn-hero__head">
          Für hochsensible Seelen,<br/>
          die mehr <em>Tiefe</em> suchen.
        </h1>
        <p className="cn-hero__sub">
          Denise Valica &nbsp;·&nbsp; Astrologie &nbsp;·&nbsp; Tarot &nbsp;·&nbsp; Intuitive Beratung
        </p>
        <div className="cn-hero__actions">
          <button className="btn btn-candle" onClick={onBookClick}>Termin anfragen</button>
          <a className="cn-hero__link" href="#about">Mehr über mich →</a>
        </div>
      </div>
      <div className="cn-hero__hint">
        <span>Beweg den Cursor — der Himmel hört zu</span>
      </div>
    </section>
  );
}

/* ---------- About ---------- */
function About() {
  return (
    <section className="cn-section cn-about" id="about">
      <Reveal className="cn-about__grid">
        <div className="cn-about__image">
          <img src="assets/imagery/denise-portrait.png" alt="Denise Valica"/>
          <div className="cn-about__caption">Denise Valica · Wien</div>
        </div>
        <div className="cn-about__copy">
          <div className="eyebrow">Über mich</div>
          <h2 className="h1">Ich höre zu. Ich fühle mit. Ich übersetze.</h2>
          <p>
            Seit über zehn Jahren begleite ich Menschen, die mehr spüren als sie erklären können.
            Hochsensibel zu sein ist kein Defekt — es ist eine andere Sprache, in der die Welt zu dir spricht.
          </p>
          <p>
            Ich arbeite mit Astrologie, Tarot und meiner Intuition als Werkzeuge.
            Aber das Eigentliche passiert dazwischen: in dem Moment, in dem du nicht mehr funktionieren musst.
          </p>
          <blockquote className="cn-about__quote">
            Manchmal sagt deine Seele schon lange,<br/>
            was du noch nicht hören willst.
          </blockquote>
        </div>
      </Reveal>
    </section>
  );
}

/* ---------- Themes ---------- */
const THEMES = [
  { eyebrow: '01', title: 'Partnerschaft & Liebe', body: 'Beziehung, Bindung, Trennung — was wirklich getragen werden will.' },
  { eyebrow: '02', title: 'Beruf & Berufung', body: 'Wenn der Job nicht mehr passt und du noch nicht weißt, was passt.' },
  { eyebrow: '03', title: 'Familiäre Verstrickungen', body: 'Inneres Kind, Generationenmuster, sanfte Lösung.' },
  { eyebrow: '04', title: 'Selbstwert & Hochsensibilität', body: 'Grenzen halten, ohne hart zu werden. Weich bleiben, ohne zu verschwinden.' },
  { eyebrow: '05', title: 'Spirituelle Krisen', body: 'Wenn alles wankt und du nicht weißt, ob du wächst oder zerbrichst.' },
  { eyebrow: '06', title: 'Ängste & Blockaden', body: 'Was sich dir in den Weg stellt — und was darunter wartet.' },
];
const GLYPH_PATHS = [
  'M2 9 h14 M9 2 v14',                            // cross
  'M2 14 q4 -12 14 0',                            // arc
  'M9 2 q5 4 0 14 q-5 -4 0 -14',                  // leaf
  'M2 9 a7 7 0 1 0 14 0 a7 7 0 1 0 -14 0 M9 2 v14', // crossed circle
  'M2 14 l7 -12 l7 12 z',                         // triangle
  'M3 9 q3 -6 6 0 q3 6 6 0',                      // wave
];

function Themes() {
  return (
    <section className="cn-section cn-themes" id="themes">
      <Reveal className="cn-section__head">
        <div className="eyebrow">Was dich bei mir erwartet</div>
        <h2 className="h1 cn-themes__title">Sechs Räume, in denen wir gemeinsam schauen.</h2>
      </Reveal>
      <div className="cn-themes__grid">
        {THEMES.map((t, i) => (
          <Reveal as="div" className="cn-theme-card" key={t.eyebrow} style={{transitionDelay: `${i * 60}ms`}}>
            <svg className="cn-theme-card__glyph" viewBox="0 0 18 18">
              <path d={GLYPH_PATHS[i]} fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <div className="cn-theme-card__num">{t.eyebrow}</div>
            <div className="cn-theme-card__title">{t.title}</div>
            <p className="cn-theme-card__body">{t.body}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ---------- Tools ---------- */
function Tools() {
  const tools = [
    { glyph: 'compass', title: 'Geburtshoroskop', sub: 'Landkarte', body: 'Wer du wirklich bist — als Karte. Lesbar, einordnend, nie eng. Wir schauen, wo deine Sensibilität, deine Begabungen und deine alten Themen wohnen.' },
    { glyph: 'moon',    title: 'Tarot',           sub: 'Spiegel der Energie', body: 'Was gerade in dir und um dich wirkt. Keine Vorhersage — ein klarer Spiegel für das, was sich gerade bewegen will.' },
    { glyph: 'star',    title: 'Intuition',       sub: 'Kompass', body: 'Was deine Seele sagen will, wenn du leiser wirst. Ich übersetze in Sätze, die du behalten kannst.' },
  ];
  const renderGlyph = (k) => {
    if (k === 'moon') return <path d="M 32 8 A 18 18 0 1 0 32 40 A 14 14 0 1 1 32 8 Z" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>;
    if (k === 'star') return <path d="M 24 6 L 26 22 L 42 24 L 26 26 L 24 42 L 22 26 L 6 24 L 22 22 Z" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>;
    // compass
    return (
      <g fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round">
        <circle cx="24" cy="24" r="16"/>
        <path d="M 24 10 L 27 24 L 24 38 L 21 24 Z" fill="currentColor" opacity="0.3"/>
        <path d="M 10 24 L 24 22 L 38 24 L 24 26 Z"/>
      </g>
    );
  };
  return (
    <section className="cn-section cn-tools cn-tools--dark cn-section--full" id="tools">
      <div style={{maxWidth:'var(--content-max)', margin:'0 auto'}}>
        <Reveal className="cn-section__head cn-section__head--center">
          <div className="eyebrow" style={{color:'var(--bronze-soft)'}}>Meine Werkzeuge</div>
          <h2 className="h1" style={{color:'var(--parchment)'}}>Drei Sprachen,<br/>eine Übersetzung.</h2>
        </Reveal>
        <div className="cn-tools__grid">
          {tools.map((t, i) => (
            <Reveal as="div" className="cn-tool-card" key={i} style={{transitionDelay: `${i * 100}ms`}}>
              <svg className="cn-tool-card__mark" viewBox="0 0 48 48">{renderGlyph(t.glyph)}</svg>
              <div className="cn-tool-card__title">{t.title}</div>
              <div className="cn-tool-card__sub">{t.sub}</div>
              <p className="cn-tool-card__body">{t.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Manifest (staggered reveal) ---------- */
function Manifest() {
  const ref = useRefP(null);
  useEffectP(() => {
    const root = ref.current; if (!root) return;
    const lines = root.querySelectorAll('.cn-manifest__line');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {
          lines.forEach((l, i) => setTimeout(() => l.classList.add('is-in'), i * 180));
          io.disconnect();
        }
      });
    }, { threshold: 0.2 });
    io.observe(root);
    return () => io.disconnect();
  }, []);
  const lines = [
    'müde sein.',
    'nicht wissen, wohin.',
    'zweifeln, weinen, hoffen.',
    'kommen, wie du gerade bist.',
    'gehalten werden, ohne dich zu erklären.',
  ];
  return (
    <section className="cn-section cn-manifest" ref={ref}>
      <div className="cn-manifest__inner">
        <div className="eyebrow">Mein Versprechen</div>
        <div className="cn-manifest__list">
          <h2 className="cn-manifest__line cn-manifest__line--head">Du darfst</h2>
          {lines.map((l, i) => (
            <div className="cn-manifest__line" key={i}>{l}</div>
          ))}
        </div>
        <div className="cn-manifest__sign">— Denise</div>
      </div>
    </section>
  );
}

/* ---------- Sessions ---------- */
function Sessions({ onBookClick }) {
  const sessions = [
    { eyebrow: 'Klarheit',   title: '60-Min Session',         meta: ['60 Minuten', 'per Zoom oder Telefon'], price: '€ 120', body: 'Eine Frage, ein Thema, ein klarer Blick. Ideal für akute Wendepunkte.' },
    { eyebrow: 'Tiefe',      title: '90-Min Tiefen-Reading',  meta: ['90 Minuten', 'mit Geburtshoroskop'], price: '€ 180', body: 'Geburtshoroskop + Tarot + Intuition. Wir gehen tiefer und schauen das ganze Bild.', featured: true },
    { eyebrow: 'Begleitung', title: '3er-Begleitung',         meta: ['3 × 60 Minuten', 'über mehrere Wochen'], price: '€ 320', body: 'Für längere Übergänge. Zwischen den Sessions trägst du es weiter — ich halte den Raum.' },
  ];
  return (
    <section className="cn-section cn-sessions" id="sessions">
      <Reveal className="cn-section__head">
        <div className="eyebrow">Angebote</div>
        <h2 className="h1">Wähle, was sich gerade richtig anfühlt.</h2>
      </Reveal>
      <div className="cn-sessions__grid">
        {sessions.map((s, i) => (
          <Reveal as="div" className={`cn-session-card ${s.featured ? 'is-featured' : ''}`} key={i} style={{transitionDelay: `${i * 80}ms`}}>
            <div className="cn-session-card__eyebrow">{s.eyebrow}</div>
            <div className="cn-session-card__title">{s.title}</div>
            <div className="cn-session-card__meta">{s.meta.map((m, j) => <span key={j}>{m}</span>)}</div>
            <p className="cn-session-card__body">{s.body}</p>
            <div className="cn-session-card__foot">
              <div className="cn-session-card__price">{s.price}</div>
              <button className="cn-session-card__cta" onClick={onBookClick}>Buchen →</button>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ---------- Nisiversum teaser ---------- */
function Nisiversum() {
  return (
    <section className="cn-section cn-niverse cn-section--full" id="nisiversum">
      <Reveal className="cn-niverse__inner">
        <img className="cn-niverse__mark" src="assets/logo/nisiversum-wordmark.svg" alt="NISIVERSUM"/>
        <p className="cn-niverse__copy">
          Eine kleine Welt für hochsensible Menschen, die spirituell tiefer gehen wollen,
          ohne kitschig zu werden. Monatliche Live-Calls, Reflexionsbriefe und ein ehrlicher Raum.
        </p>
        <a className="cn-niverse__cta" href="#">Mehr erfahren →</a>
      </Reveal>
    </section>
  );
}

/* ---------- Insta ---------- */
function Insta() {
  const tones = [
    { bg:'#210A1A', g:'moon'  },
    { bg:'#160611', g:'star'  },
    { bg:'#3A1426', g:'sun'   },
    { bg:'#D6447E', g:'leaf'  },
    { bg:'#2B0F23', g:'star'  },
    { bg:'#7E5C58', g:'moon'  },
    { bg:'#F26E9A', g:'cross' },
    { bg:'#20091A', g:'sun'   },
    { bg:'#210A1A', g:'leaf'  },
  ];
  const glyph = (k) => {
    if (k==='moon') return <path d="M 32 8 A 18 18 0 1 0 32 40 A 14 14 0 1 1 32 8 Z" fill="none" stroke="currentColor" strokeWidth="1.2"/>;
    if (k==='star') return <path d="M 24 6 L 26 22 L 42 24 L 26 26 L 24 42 L 22 26 L 6 24 L 22 22 Z" fill="none" stroke="currentColor" strokeWidth="1.2"/>;
    if (k==='sun')  return <g fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="24" cy="24" r="9"/>{Array.from({length:8}).map((_,i)=>{const a=i*Math.PI/4;return <line key={i} x1={24+Math.cos(a)*13} y1={24+Math.sin(a)*13} x2={24+Math.cos(a)*18} y2={24+Math.sin(a)*18}/>;})}</g>;
    if (k==='leaf') return <path d="M24 6 q12 12 0 36 q-12 -24 0 -36 z" fill="none" stroke="currentColor" strokeWidth="1.2"/>;
    return <g stroke="currentColor" strokeWidth="1.2" fill="none"><line x1="24" y1="8" x2="24" y2="40"/><line x1="8" y1="24" x2="40" y2="24"/></g>;
  };
  return (
    <section className="cn-section cn-insta">
      <Reveal className="cn-section__head cn-section__head--small">
        <div className="eyebrow">Instagram</div>
        <h2 className="h2"><a className="cn-insta__handle" href="https://www.instagram.com/nisiversum/" target="_blank" rel="noopener noreferrer">@nisiversum</a></h2>
      </Reveal>
      <div className="cn-insta__grid">
        {tones.map((t, i) => (
          <a className="cn-insta__tile" key={i} style={{background: t.bg}} href="https://www.instagram.com/nisiversum/" target="_blank" rel="noopener noreferrer">
            <div className="cn-insta__tile-glyph">
              <svg viewBox="0 0 48 48" width="56" height="56">{glyph(t.g)}</svg>
            </div>
            <span className="cn-insta__tile-num">{String(i + 1).padStart(2, '0')}</span>
          </a>
        ))}
      </div>
      <Reveal className="cn-insta__cta">
        <a className="btn btn-ghost" href="https://www.instagram.com/nisiversum/" target="_blank" rel="noopener noreferrer">
          Auf Instagram folgen
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" style={{marginInlineStart:10}}>
            <rect x="3" y="3" width="18" height="18" rx="5"/>
            <circle cx="12" cy="12" r="4"/>
            <circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/>
          </svg>
        </a>
      </Reveal>
    </section>
  );
}

/* ---------- Contact ---------- */
function Contact({ onSubmit }) {
  const [form, setForm] = useStateP({ name: '', email: '', msg: '' });
  const [sent, setSent] = useStateP(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    onSubmit && onSubmit(form);
  };
  return (
    <section className="cn-section cn-contact" id="contact">
      <Reveal className="cn-contact__grid">
        <div>
          <div className="eyebrow">Kontakt</div>
          <h2 className="h1">Schreib mir,<br/>wenn es sich richtig anfühlt.</h2>
          <div className="cn-contact__meta">
            <div><span className="cn-contact__label">E-Mail</span><a href="mailto:hallo@cosmicnisi.com">hallo@cosmicnisi.com</a></div>
            <div><span className="cn-contact__label">Instagram</span><a href="https://www.instagram.com/nisiversum/" target="_blank" rel="noopener noreferrer">@nisiversum</a></div>
            <div><span className="cn-contact__label">Termine</span><a href="#">Calendly →</a></div>
          </div>
        </div>
        <form className="cn-contact__form" onSubmit={submit}>
          {sent ? (
            <div className="cn-contact__sent">
              <div className="eyebrow">Angekommen.</div>
              <p>Danke, {form.name || 'du'}. Ich melde mich innerhalb von zwei Tagen.</p>
            </div>
          ) : (
            <>
              <div className="cn-field">
                <label className="cn-field__lbl">Name</label>
                <input className="cn-field__inp" value={form.name} onChange={e => set('name', e.target.value)} required/>
              </div>
              <div className="cn-field">
                <label className="cn-field__lbl">E-Mail</label>
                <input className="cn-field__inp" type="email" value={form.email} onChange={e => set('email', e.target.value)} required/>
              </div>
              <div className="cn-field">
                <label className="cn-field__lbl">Anliegen</label>
                <textarea className="cn-field__inp cn-field__inp--ta" value={form.msg} onChange={e => set('msg', e.target.value)} rows="4" placeholder="Erzähl mir, was dich bewegt …"/>
              </div>
              <button type="submit" className="btn btn-primary">Senden</button>
            </>
          )}
        </form>
      </Reveal>
    </section>
  );
}

/* ---------- Booking modal ---------- */
function BookingModal({ open, onClose }) {
  if (!open) return null;
  return (
    <div className="cn-modal" onClick={onClose}>
      <div className="cn-modal__panel" onClick={e => e.stopPropagation()}>
        <button className="cn-modal__close" onClick={onClose} aria-label="close">×</button>
        <div className="eyebrow">Termin anfragen</div>
        <h3 className="h2 cn-modal__title">Wähle einen Raum.</h3>
        <p className="cn-modal__copy">
          Schreib mir kurz, was dich bewegt, und welcher Sessiontyp dich anspricht.
          Ich antworte persönlich, meist innerhalb von zwei Tagen.
        </p>
        <div className="cn-modal__actions">
          <a href="#contact" className="btn btn-primary" onClick={onClose}>Zum Formular</a>
          <a href="#" className="btn btn-ghost">Calendly öffnen</a>
        </div>
      </div>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="cn-footer">
      <div className="cn-footer__inner">
        <div className="cn-footer__brand">
          <img src="assets/logo/cosmic-nisi-monogram.svg" alt="Cosmic Nisi" style={{width: 56, filter: 'invert(1)'}}/>
          <div className="cn-footer__name">Cosmic Nisi</div>
          <div className="cn-footer__sub">NISIVERSUM</div>
        </div>
        <div className="cn-footer__col">
          <div className="cn-footer__head">Praxis</div>
          <a href="#about">Über mich</a>
          <a href="#tools">Werkzeuge</a>
          <a href="#sessions">Sessions</a>
        </div>
        <div className="cn-footer__col">
          <div className="cn-footer__head">Welt</div>
          <a href="#nisiversum">NISIVERSUM</a>
          <a href="https://www.instagram.com/nisiversum/" target="_blank" rel="noopener noreferrer">Instagram</a>
          <a href="#">Newsletter</a>
        </div>
        <div className="cn-footer__col">
          <div className="cn-footer__head">Rechtliches</div>
          <a href="#">Impressum</a>
          <a href="#">Datenschutz</a>
          <a href="#">AGB</a>
        </div>
      </div>
      <div className="cn-footer__base">
        <div>© 2026 Denise Valica · Cosmic Nisi</div>
        <div className="cn-footer__quote">Von Herz zu Herz.</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, About, Themes, Tools, Manifest, Sessions, Nisiversum, Insta, Contact, BookingModal, Footer });