// Rhyme Compass LP — sections

const DS = window.YNACKSDesignSystem_6e57a3 || {};
const { Button, Card } = DS;

// CTA that composes the DS Button when available, else the faithful .btn markup
function Btn({ variant = "primary", size, href = "#start", children, iconRight }) {
  if (Button) {
    return (
      <Button variant={variant} size={size === "lg" ? "lg" : "md"} href={href}
        iconRight={iconRight ? <i className="ph ph-arrow-right" /> : null}>
        {children}
      </Button>
    );
  }
  return (
    <a href={href} className={`btn btn--${variant}${size === "lg" ? " btn--lg" : ""}`}>
      {children}{iconRight && <i className="ph ph-arrow-right" />}
    </a>
  );
}

function SecHead({ eyebrow, dot, title, highlight, tail, desc, align = "left" }) {
  return (
    <div className={`sh sh--${align} reveal`}>
      <span className="eb">{dot && <span className="eb__dot" />}{eyebrow}</span>
      <h2 className="sh__title">
        {title} <span className="grad">{highlight}</span>{tail ? ` ${tail}` : ""}
      </h2>
      {desc && <p className="sh__desc">{desc}</p>}
    </div>
  );
}

// ---------------- HERO ----------------
function Hero({ phrases, pitch }) {
  return (
    <section id="top" className="section bg-section hero">
      <div className="bg" style={{ backgroundImage: `url(${BG.compass})` }} />
      <div className="scrim" />
      <div className="section__inner">
        <div className="hero__grid">
          <div>
            <span className="pill reveal"><i className="ph ph-compass" />登録不要・3秒でスタート</span>
            <h1 className="reveal" data-d="1">
              メロ先作詞の<br /><span className="grad">「文字数パズル」</span>を、<br />一瞬で解決する。
            </h1>
            <p className="hero__lead reveal" data-d="2">
              <b style={{ color: "var(--zinc-100)", fontWeight: 500 }}>Rhyme&nbsp;Compass</b>は、MIDIを読み込むだけでフレーズを自動分割し、
              音数の過不足をリアルタイムに可視化する、作曲家・作詞家のためのスマート歌詞エディタ。
            </p>
            <div className="hero__cta reveal" data-d="3">
              <Btn variant="primary" size="lg" href="app.rhymecompass.com">無料で今すぐ使う</Btn>
              <Btn variant="secondary" href="#features" iconRight>機能を見る</Btn>
            </div>
            <div className="hero__sub reveal" data-d="3">
              <i className="ph-fill ph-check-circle" />アカウント登録なし。ブラウザを開けば、すぐ書き始められます。
            </div>
            <div className="hero__chips reveal" data-d="4">
              <span className="hero__chip">MIDI インポート</span>
              <span className="hero__chip">音数バリデーション</span>
              <span className="hero__chip">.svp 書き出し</span>
              <span className="hero__chip">テイク管理</span>
            </div>
          </div>
          <div className="reveal" data-d="2">
            <RcEditor phrases={phrases} pitch={pitch} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- PROBLEMS ----------------
function Problems() {
  return (
    <section id="problems" className="section">
      <div className="section__inner">
        <SecHead align="left" eyebrow="The Pain" title="メロ先作詞で、こんな" highlight="効率の悪さ" tail="を感じていませんか？"
          desc="コンペに参加する作曲家やボカロPが、日々の制作で繰り返し感じているストレス。" />
        <div className="prob-grid">
          {PROBLEMS.map((p, i) => (
            <Card key={p.n} variant="surface" interactive className="reveal" data-d={i + 1}>
              <div className="prob__n">{p.n}</div>
              <div className="prob__ic"><i className={`ph ${p.ic}`} /></div>
              <div className="prob__t">{p.t}</div>
              <p className="prob__d">{p.d}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- FEATURES ----------------
function Features() {
  return (
    <section id="features" className="section bg-section">
      <div className="bg" style={{ backgroundImage: `url(${BG.tech})` }} />
      <div className="scrim" />
      <div className="section__inner">
        <SecHead align="left" eyebrow="Core Features" dot
          title="作詞のワークフローを" highlight="スマートに" tail="変える。"
          desc="MVPで実装済みの3つの柱。読み込む・確かめる・書き出す——その全部を、ブラウザひとつで。" />
        <div className="feat-grid">
          {FEATURES.map((f, i) => (
            <div key={f.num} className="glass feat reveal" data-d={i + 1}>
              <span className="feat__num">{f.num}</span>
              <div className="feat__ic"><i className={`ph ${f.ic}`} /></div>
              <div className="feat__t">{f.t}</div>
              <p className="feat__d">{f.d}</p>
              {f.demo && <VDemo />}
              <div className="feat__tags">
                {f.tags.map((t) => <span key={t} className="feat__tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- PROJECT / TAKES ----------------
function Takes() {
  return (
    <section id="takes" className="section">
      <div className="section__inner">
        <div className="takes">
          <div className="reveal">
            <SecHead align="left" eyebrow="Projects & Takes"
              title="迷ったら、いつでも" highlight="巻き戻せる。" tail=""
              desc="「このブロックだけ別の歌詞で試したい」を、ノーリスクで。スナップショットとしてテイクを保存し、過去のバージョンに即座に復元できます。" />
            <div className="save-strip" style={{ marginTop: "2rem" }}>
              <div className="save-item">
                <div className="save-item__ic"><i className="ph ph-stack" /></div>
                <div>
                  <div className="save-item__t">最大 <b>20 件</b> のテイク保存</div>
                  <div className="save-item__d">サビの別案も、Aメロの言い換えも。テイクを切り替えて聴き比べ、ベストを選ぶだけ。</div>
                </div>
              </div>
              <div className="save-item">
                <div className="save-item__ic"><i className="ph ph-cloud-slash" /></div>
                <div>
                  <div className="save-item__t">未ログインでも <b>3 件</b> まで保存</div>
                  <div className="save-item__d">ブラウザのローカルストレージを利用。面倒なアカウント登録なしで、今すぐ作業を保存（ログインで最大10件に拡張）。</div>
                </div>
              </div>
            </div>
          </div>
          <div className="take-stack reveal" data-d="1">
            {TAKES.map((t) => (
              <div key={t.badge} className={`glass take ${t.active ? "take--active" : ""}`}>
                <span className={`take__badge ${t.active ? "" : "take__badge--ghost"}`}>{t.badge}</span>
                <div className="take__body">
                  <div className="take__name">{t.name}</div>
                  <div className="take__meta">{t.meta}</div>
                </div>
                <span className="take__act">{t.act}</span>
              </div>
            ))}
            <div style={{ textAlign: "center", marginTop: "1rem", fontSize: "10.5px",
                         fontFamily: "var(--font-mono)", color: "var(--zinc-600)", letterSpacing: ".06em" }}>
              3 / 20 takes saved · ローカル保存中
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- TARGET ----------------
function Target() {
  return (
    <section id="target" className="section bg-section">
      <div className="bg" style={{ backgroundImage: `url(${BG.nebula})` }} />
      <div className="scrim" />
      <div className="section__inner">
        <SecHead align="center" eyebrow="Who It's For"
          title="こんなクリエイターの" highlight="ための道具" tail="です。" />
        <div className="target-grid">
          {TARGETS.map((t, i) => (
            <div key={t.t} className="glass target reveal" data-d={i + 1}>
              <div className="target__ic"><i className={`ph ${t.ic}`} /></div>
              <div className="target__t">{t.t}</div>
              <p className="target__d">{t.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- ROADMAP ----------------
function Roadmap() {
  return (
    <section id="roadmap" className="section">
      <div className="section__inner">
        <SecHead align="right" eyebrow="Future Roadmap"
          title="さらに進化する" highlight="作詞体験。" tail=""
          desc="今はまだできないことも、これから。アップデートを見逃さないよう、ブックマークを。" />
        <div className="road">
          {ROADMAP.map((r, i) => (
            <div key={r.t} className="card road-item reveal" data-d={i + 1}>
              <span className="road-item__tag">{r.tag}</span>
              <div>
                <div className="road-item__t">{r.t}</div>
                <p className="road-item__d">{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- PRICING ----------------
function cell(v) {
  if (v === "yes") return <span className="yes">○</span>;
  if (v === "no") return <span className="no">×</span>;
  if (v === "full") return <span className="val">フルアクセス</span>;
  return <span className="val">{v}</span>;
}
function Pricing() {
  return (
    <section id="pricing" className="section">
      <div className="section__inner">
        <SecHead align="center" eyebrow="Pricing"
          title="今なら、すべての機能が" highlight="完全無料。" tail=""
          desc="MVP公開を記念して、ゲストもフリー会員も全機能フルアクセス。試すハードルは、ゼロです。" />
        <div className="price-wrap reveal">
          <table className="price-table">
            <thead>
              <tr>
                <th>機能</th>
                {PLANS.map((p) => (
                  <th key={p.name} className={p.feat ? "pcol--feat" : ""}>
                    <div className="pcol">
                      {p.feat && <span className="pcol__flag">おすすめ</span>}
                      <span className="pcol__name">{p.name}</span>
                      <span className="pcol__sub">{p.sub}</span>
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {PRICE_ROWS.map((row) => (
                <tr key={row.label}>
                  <td>{row.label}</td>
                  {row.cells.map((c, i) => (
                    <td key={i} className={PLANS[i].feat ? "pcol--feat" : ""}>{cell(c)}</td>
                  ))}
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr className="price-foot">
                <td>価格</td>
                <td><span className="price-price">¥0<small>永久無料</small></span></td>
                <td className="pcol--feat"><span className="price-price">¥0<small>永久無料</small></span></td>
                <td><span className="price-soon">近日公開</span></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </section>
  );
}

// ---------------- FINALE + FOOTER ----------------
function Finale() {
  return (
    <section id="start" className="finale">
      <div className="finale__glow" />
      <div className="finale__inner">
        <span className="pill reveal"><i className="ph ph-compass" />Rhyme Compass</span>
        <h2 className="reveal" data-d="1">
          もう、指折り数えて作詞する<br />時間は<span className="grad">終わりにしましょう。</span>
        </h2>
        <p className="finale__sub reveal" data-d="2">MIDIを読み込む。言葉を当てる。書き出す。それだけ。</p>
        <div className="finale__cta reveal" data-d="2">
          <Btn variant="primary" size="lg" href="https://app.rhymecompass.com">Rhyme Compass を無料で始める</Btn>
        </div>
        <div className="finale__note reveal" data-d="3">登録不要・3秒でスタート ／ ブラウザだけで完結します</div>
      </div>
      <footer className="footer">
        <div className="footer__inner">
          <div>
            <div className="footer__logo"><i className="ph ph-compass" />Rhyme Compass</div>
            <div className="footer__tag">YNACKS Application · Smart Lyric Editor for melody-first writing</div>
          </div>
          <div className="footer__links">
            <a className="footer__link" href="#features">機能</a>
            <a className="footer__link" href="#takes">テイク管理</a>
            <a className="footer__link" href="#roadmap">ロードマップ</a>
            <a className="footer__link" href="#pricing">料金</a>
            <a className="footer__link" href="#start">使ってみる</a>
          </div>
          <div className="footer__copy">© 2026 ynacks-works.com</div>
        </div>
      </footer>
    </section>
  );
}

Object.assign(window, { Hero, Problems, Features, Takes, Target, Roadmap, Pricing, Finale });