// ---- 味わい・糖度・栄養 / 食べ方 ----
function Taste() {
  return (
    <section className="pad band" id="taste">
      <div className="wrap">
        <div className="taste-head">
          <Reveal><Eyebrow>Taste</Eyebrow></Reveal>
          <Reveal delay={100}>
            <h2 className="section-title">とろける甘さと、<br />なめらかな口どけ。</h2>
          </Reveal>
          <Reveal delay={180}>
            <p className="lead">
              アテモヤは「森のアイスクリーム」と呼ばれるほど、クリーム状のやわらかな果肉が魅力。洋なしやバナナ、パイナップルを思わせる南国の風味に、芳醇な香りと上品な甘さが重なります。
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div className="taste-notes">
              {TASTE_NOTES.map((t) => <span className="note" key={t}>{t}</span>)}
            </div>
          </Reveal>
        </div>

        <div className="taste-grid">
          {/* 糖度 */}
          <Reveal className="tcard">
            <div className="tcard-head">
              <span className="tlabel">糖度くらべ</span>
              <h3>驚きの糖度、<span className="hl">20〜25</span></h3>
              <p>一般的な果物と比べても、際立つ甘さ。果実そのものがデザートのようです。</p>
            </div>
            <div className="bars">
              {SWEETNESS.map((s) => (
                <div className={`bar-row ${s.hero ? "star" : ""}`} key={s.name}>
                  <span className="bn">{s.name}</span>
                  <span className="track">
                    <span className="fill" style={{ width: `${(s.max / SWEET_MAX) * 100}%` }}></span>
                  </span>
                  <span className="bv">{s.min}〜{s.max}</span>
                </div>
              ))}
            </div>
            <p className="src">※ 果物の糖度（Brix）の一般的な目安</p>
          </Reveal>

          {/* 栄養 */}
          <Reveal delay={120} className="tcard nutri">
            <div className="tcard-head">
              <span className="tlabel">栄養の宝庫</span>
              <h3>りんごと、<span className="hl">くらべてみると</span></h3>
              <p>ビタミン・ミネラルが豊富。とくにカリウムやビタミンC、葉酸をたっぷり含みます。</p>
            </div>
            <table className="ntable">
              <thead>
                <tr><th>成分<small>100gあたり</small></th><th>アテモヤ</th><th>りんご</th></tr>
              </thead>
              <tbody>
                {NUTRITION.map((n) => (
                  <tr key={n.label}>
                    <td>{n.label}</td>
                    <td className="na">{n.a}</td>
                    <td className="nb">{n.b}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="src">※ 日本食品標準成分表2020年版 ほかを参考にした目安値</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HowToEat() {
  return (
    <section className="pad" id="eat">
      <div className="wrap">
        <div style={{ textAlign: "center" }}>
          <Reveal><Eyebrow center>How to Eat</Eyebrow></Reveal>
          <Reveal delay={100}><h2 className="section-title">いちばん美味しい、食べ方。</h2></Reveal>
          <Reveal delay={160}>
            <p className="lead" style={{ margin: "0 auto" }}>
              アテモヤは追熟が決め手。やわらかくなるまで待つのが、美味しさへの近道です。
            </p>
          </Reveal>
        </div>
        <div className="eat-steps">
          {EAT_STEPS.map((s, i) => (
            <Reveal key={s.n} delay={i * 110} className="estep">
              <span className="enum">{s.n}</span>
              <div className="eline"></div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Taste, HowToEat });