/* Steps + Quote — how-to (three steps) and a gentle testimonial. */
function Steps() {
  const steps = [
    ["01", "輕輕噴抹", "取適量於毛巾或直接抹上毛髮，避開眼睛與口鼻。"],
    ["02", "順毛按摩", "順著毛流輕輕揉開，讓植萃均勻分布、帶走髒污。"],
    ["03", "擦乾梳理", "用乾毛巾擦拭，再梳順毛髮，清爽蓬鬆即完成。"],
  ];
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">How To Use · 使用方式</span>
          <h2>三步驟，<br />日常就能輕鬆完成。</h2>
        </div>
        <div className="steps">
          {steps.map(([num, title, body]) => (
            <div className="step reveal" key={num}>
              <div className="num">{num}</div>
              <h4>{title}</h4>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="section section--sand">
      <div className="container">
        <div className="quote reveal">
          <div className="mark">&ldquo;</div>
          <blockquote>洗完之後，牠靠過來的時候，那股淡淡的純天然香氣，是我最安心的時刻。</blockquote>
          <cite>— DODO 的家人 · 紅貴賓</cite>
        </div>
      </div>
    </section>
  );
}

window.Steps = Steps;
window.Quote = Quote;