const { useEffect, useRef, useState } = React;

/* ============ Reveal on scroll ============ */
function useReveal() {
  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 -60px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ============ Top nav ============ */
function TopNav() {
  return (
    <header className="topnav">
      <div className="topnav-inner">
        <div className="brand-mark">
          <span className="brand-dot"></span>
          <span>R&nbsp;U&nbsp;R&nbsp;U&nbsp;N&nbsp;A</span>
        </div>
        <nav className="nav-links">
          <a href="#about">About</a>
          <a href="#values">Values</a>
          <a href="#hobbies">Off-time</a>
          <a href="#wuxing">五行</a>
          <a href="#message">Message</a>
        </nav>
      </div>
    </header>
  );
}

/* ============ Hero ============ */
function Hero() {
  return (
    <section className="hero">
      <div className="shell">
        <div className="hero-grid">
          <div className="reveal">
            <div className="hero-eyebrow">Personal Profile &nbsp;·&nbsp; 2026</div>
            <h1 className="hero-name">
              <span className="ru">る</span>るな
            </h1>
            <span className="hero-name-en">— RURUNA · Fortune Reader —</span>
            <p className="hero-tag">
              <span className="crown">✦</span>
              四柱推命で、
              <br />あなたの<span style={{ background: "linear-gradient(transparent 65%, var(--accent-soft) 65%)", padding: "0 4px" }}>魅力を開花</span>させる人。
            </p>
            <p className="hero-sub">
              占いは「当たる」ものではなく、自分を知るためのツール。<br/>
              宿命を受け入れ、自分らしく前向きに進むためのお手伝いをしています。
            </p>

            <div className="hero-meta">
              <div className="meta-item">
                <span className="meta-label">PROFESSION</span>
                <span className="meta-value">四柱推命鑑定士</span>
              </div>
              <div className="meta-item">
                <span className="meta-label">MISSION</span>
                <span className="meta-value">魅力の開花</span>
              </div>
              <div className="meta-item">
                <span className="meta-label">MOOD</span>
                <span className="meta-value">のびやかに、軽やかに</span>
              </div>
            </div>
          </div>

          <div className="reveal delay-2">
            <div className="portrait-wrap">
              <div className="orbit"></div>
              <div className="portrait-tape"></div>
              <div className="portrait-frame">
                <img src="assets/runa-portrait.jpg" alt="るるな" />
              </div>
              <FloatingDeco />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FloatingDeco() {
  return (
    <>
      <div className="deco float" style={{ top: "-10%", right: "-8%", color: "var(--accent-deep)", opacity: 0.55 }}>
        <Illo.Sparkle size={56} />
      </div>
      <div className="deco float delay" style={{ bottom: "-8%", left: "-12%", color: "var(--accent-deep)", opacity: 0.5 }}>
        <Illo.Moon size={70} />
      </div>
      <div className="deco float" style={{ top: "40%", right: "-14%", color: "var(--gold)", opacity: 0.55 }}>
        <Illo.Sparkle size={36} />
      </div>
    </>
  );
}

/* ============ Marquee ============ */
function Marquee() {
  const items = ["四柱推命", "✦", "Self-Discovery", "✧", "魅力の開花", "✦", "Fortune Reading", "✧", "自分らしく", "✦", "Bloom Yourself"];
  const row = (
    <span>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          {t.length === 1 ? <i>{t}</i> : <span style={{ display: "inline-block" }}>{t}</span>}
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}{row}{row}
      </div>
    </div>
  );
}

/* ============ About ============ */
function About() {
  return (
    <section className="section" id="about">
      <div className="shell">
        <div className="illo-corner illo-tr reveal">
          <Illo.Crystal size={130} />
        </div>
        <div className="reveal">
          <div className="section-eyebrow">About me</div>
          <h2 className="section-title">
            自分を知ることで、<br/>
            <span className="accent">人生はもっと自由になる</span>。
          </h2>
        </div>

        <div className="about-grid">
          <aside className="about-quote reveal">
            <span className="big">“</span>
            占いは<em>当たる</em>ではなく、<br/>
            ツールの一つとして<br/>
            <em>活用するもの</em>。
          </aside>

          <div className="about-body">
            <p className="lead reveal">
              『占いの帝王 🔮』と呼ばれる四柱推命を使って、
              あなたの魅力を開花するサポートをしています。
            </p>
            <p className="reveal delay-1">
              自分を知ることで、強みや可能性、持っている魅力を理解し、
              人生をより良い方向に進めて欲しいと思っています。
            </p>

            <blockquote className="pull reveal delay-2">
              私自身も自己肯定感が低く、<br/>
              やりたいことや得意なことが分からなかった。
            </blockquote>

            <p className="reveal delay-2">
              そんな時、四柱推命鑑定を受けて改めて自分の宿命や持っているモノを理解し、
              受け入れることで、進みたい方向が明確になりました。
            </p>
            <p className="reveal delay-3">
              自分のことって、分かっているようで分かってないものですよね。
              思い込みって、ちょっと怖い。
            </p>
            <p className="reveal delay-3">
              私と同じように迷っていたり自信をなくしている人に、
              魅力や強みをお伝えすることで、
              一人でも多くの人が自分らしく前向きに進めるようサポートしたい
              <span className="heart">♡</span>
            </p>
            <p className="reveal delay-4">
              私自身も、皆さんのお役に立ちながら、
              リベ友をたくさん作って、ワイワイ楽しい人生を送りたいな。
            </p>
            <div className="illo-inline reveal delay-4">
              <Illo.Bloom size={90} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ Values / Pillars ============ */
function Values() {
  const items = [
    {
      n: "Pillar 01",
      title: "知ること、から始める",
      text: "四柱推命は、あなたが生まれ持った宿命を読み解くツール。まずは「自分」をフラットに見つめ直すところから。",
      icon: "知",
    },
    {
      n: "Pillar 02",
      title: "受け入れる、ということ",
      text: "強みも、揺らぎも、ぜんぶ含めてあなた。受け入れた瞬間、進みたい方向はちゃんと見えてきます。",
      icon: "和",
    },
    {
      n: "Pillar 03",
      title: "魅力を、開花させる",
      text: "持っている魅力に気づき、活かしていく。占いは未来を縛るものではなく、未来を選ぶための地図です。",
      icon: "咲",
    },
  ];
  return (
    <section className="section" id="values" style={{ paddingTop: 40 }}>
      <div className="shell">
        <div className="reveal">
          <div className="section-eyebrow">My Values</div>
          <h2 className="section-title">
            大切にしている、<span className="accent">3つのこと</span>。
          </h2>
        </div>
        <div className="pillars">
          {items.map((it, i) => (
            <div className={`pillar reveal delay-${i + 1}`} key={i}>
              <div className="pillar-icon">{it.icon}</div>
              <div className="pillar-num">{it.n}</div>
              <h3 className="pillar-title">{it.title}</h3>
              <p className="pillar-text">{it.text}</p>
              <div className="pillar-illo" aria-hidden="true">
                {i === 0 && <Illo.Compass size={70} />}
                {i === 1 && <Illo.Ribbon size={70} />}
                {i === 2 && <Illo.Bloom size={68} />}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ Hobbies ============ */
function Hobbies() {
  const list = [
    { jp: "カフェ巡り", en: "Cafe Hopping" },
    { jp: "美味しいものを食べる", en: "Foodie Life" },
    { jp: "旅行", en: "Travel" },
    { jp: "ドラマ鑑賞", en: "Drama Nights" },
  ];
  return (
    <section className="section" id="hobbies">
      <div className="shell">
        <div className="reveal">
          <div className="section-eyebrow">Off-time</div>
          <h2 className="section-title">
            鑑定の合間に、<br/>
            <span className="accent">ゆるっと、好きなこと</span>。
          </h2>
        </div>

        <div className="hobbies-wrap">
          <div className="hobby-list reveal">
            {list.map((h, i) => (
              <div className="hobby-item" key={i}>
                <span className="hobby-num">0{i + 1}</span>
                <span className="hobby-jp">{h.jp}</span>
                <span className="hobby-en">— {h.en}</span>
              </div>
            ))}
          </div>

          <div className="hobby-card reveal delay-2">
            <div className="stamp">FAVORITE<br/>★ ★ ★</div>
            <div className="hobby-card-title">TODAY'S MOOD</div>
            <p className="hobby-card-quote">
              ふらっと入ったカフェで、<br/>
              気になる人の四柱推命を読み解く時間が、<br/>
              いちばん好き。
            </p>
            <div className="hobby-card-illo" aria-hidden="true">
              <Illo.Coffee size={86} />
            </div>
            <div className="hobby-card-foot">
              <span>cafe / window seat</span>
              <span>— るるな</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ Wuxing (Five Elements) ============ */
function Wuxing() {
  const els = [
    { c: "木", en: "Wood", jp: "のびやかさ" },
    { c: "火", en: "Fire", jp: "情熱" },
    { c: "土", en: "Earth", jp: "安定" },
    { c: "金", en: "Metal", jp: "実り" },
    { c: "水", en: "Water", jp: "知性" },
  ];
  return (
    <section className="section wuxing" id="wuxing">
      <div className="shell">
        <div className="reveal">
          <div className="section-eyebrow">五行 · Five Elements</div>
          <h2 className="section-title">
            あなたの中にも、<br/>
            <span className="accent">五つの色</span>が流れている。
          </h2>
          <p style={{ maxWidth: 560, color: "var(--ink-soft)", marginBottom: 0 }}>
            四柱推命のベースにある「五行」は、自然界のエネルギーを五つに分けた考え方。
            どの要素が強いか、どこが補われるかで、その人らしさが立ちのぼってきます。
          </p>
        </div>
        <div className="wuxing-grid">
          {els.map((e, i) => (
            <div className={`element reveal delay-${(i % 4) + 1}`} data-el={e.c} key={i}>
              <div className="element-glyph">{e.c}</div>
              <div className="element-name">{e.en.toUpperCase()}</div>
              <div className="element-jp">{e.jp}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ Message ============ */
function Message() {
  return (
    <section className="section message" id="message">
      <div className="shell">
        <div className="message-illo reveal" aria-hidden="true">
          <Illo.Moon size={84} />
        </div>
        <div className="message-card reveal">
          <div className="section-eyebrow">A Message For You</div>
          <p className="message-line">
            自分を知ることは、<br/>
            <span className="u">いちばんやさしい、自分への贈りもの</span>。<br/>
            迷っているあなたに、<br/>
            そっと寄り添えますように。
          </p>
          <div className="message-sign">
            <span>with love,</span>
            <span className="signature">Ruruna</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ Connect / SNS ============ */
function Connect() {
  return (
    <section className="section connect" id="connect">
      <div className="shell">
        <div className="connect-card reveal">
          <div className="connect-illo" aria-hidden="true">
            <Illo.Envelope size={72} />
          </div>
          <div className="section-eyebrow" style={{ justifyContent: "center" }}>Let's Connect</div>
          <h2 className="connect-title">
            日々の鑑定や思いを、<br/>
            <span className="accent">Instagram</span> で発信中。
          </h2>

          <a className="sns-link" href="https://www.instagram.com/ruruna_fortune_?igsh=azF3bXd3ZTQybmNq&utm_source=qr" target="_blank" rel="noopener noreferrer">
            <span className="sns-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="3" y="3" width="18" height="18" rx="5"/>
                <circle cx="12" cy="12" r="4"/>
                <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor" stroke="none"/>
              </svg>
            </span>
            <span className="sns-platform">Instagram</span>
            <span className="sns-arrow" aria-hidden="true">→</span>
          </a>

          <p className="connect-foot">気軽にフォロー＆メッセージください ♡</p>
        </div>
      </div>
    </section>
  );
}

/* ============ Footer ============ */
function Foot() {
  return (
    <footer className="shell">
      <div className="foot">
        <div className="foot-mark">RURUNA · 四柱推命</div>
        <div>© 2026 RURUNA — Fortune Reader</div>
        <div>♡ Made with care</div>
      </div>
    </footer>
  );
}

/* ============ Tweaks ============ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "lavender",
  "fontset": "editorial",
  "showOrbit": true,
  "showGrain": true
}/*EDITMODE-END*/;

function App() {
  useReveal();
  const [tw, setTw] = useTweaks(TWEAK_DEFAULTS);

  const themeClass =
    tw.theme === "rose" ? "theme-rose" :
    tw.theme === "sage" ? "theme-sage" :
    tw.theme === "mocha" ? "theme-mocha" : "";
  const fontClass =
    tw.fontset === "classic" ? "font-classic" :
    tw.fontset === "airy" ? "font-airy" : "font-editorial";

  useEffect(() => {
    document.documentElement.className = `${themeClass} ${fontClass}`.trim();
    document.documentElement.style.setProperty("--orbit-display", tw.showOrbit ? "block" : "none");
  }, [themeClass, fontClass, tw.showOrbit]);

  return (
    <>
      {tw.showGrain && <div className="page-grain"></div>}
      <div className="page-bg"></div>
      <style>{`.orbit{display:${tw.showOrbit ? "block" : "none"} !important}`}</style>

      <TopNav />
      <Hero />
      <Marquee />
      <About />
      <Values />
      <Hobbies />
      <Wuxing />
      <Message />
      <Connect />
      <Foot />

      <TweaksPanel title="Tweaks">
        <TweakSection title="カラーテーマ">
          <TweakRadio
            label="アクセント"
            value={tw.theme}
            onChange={(v) => setTw("theme", v)}
            options={[
              { value: "lavender", label: "ラベンダー" },
              { value: "rose", label: "ローズ" },
              { value: "sage", label: "セージ" },
              { value: "mocha", label: "モカ" },
            ]}
          />
        </TweakSection>
        <TweakSection title="フォント">
          <TweakRadio
            label="セット"
            value={tw.fontset}
            onChange={(v) => setTw("fontset", v)}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "classic", label: "Classic" },
              { value: "airy", label: "Airy" },
            ]}
          />
        </TweakSection>
        <TweakSection title="装飾">
          <TweakToggle
            label="ポートレート周りの軌道"
            value={tw.showOrbit}
            onChange={(v) => setTw("showOrbit", v)}
          />
          <TweakToggle
            label="紙のテクスチャ"
            value={tw.showGrain}
            onChange={(v) => setTw("showGrain", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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