// SECTION 09 Standard / SECTION 10 Story / SECTION 11 Diagnosis

function Standard(){
  const pillars = [
    { no:'01', en:'OBSERVE', ja:'見極める', body:'髪質だけでなく、過去のカラーや縮毛矯正の履歴まで確認します。' },
    { no:'02', en:'CUSTOMIZE', ja:'使い分ける', body:'髪全体に同じ薬剤を使用するのではなく、状態に合わせて塗り分けます。' },
    { no:'03', en:'PROTECT', ja:'傷ませない', body:'綺麗に見せるだけではなく、施術による負担をできる限り増やさないことを大切にします。' },
  ];
  return (
    <section className="section bg-ivory">
      <div className="container wide">
        <Reveal><div className="kicker">OUR STANDARD</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">その日だけではなく、<br/>これからの髪まで考える。</h2>
        </Reveal>
        <div className="pillars">
          {pillars.map((p,i) => (
            <Reveal key={p.no} className="pillar" delay={i+1}>
              <div className="no">{p.no} <span style={{opacity:.5,margin:'0 8px'}}>—</span> {p.en}</div>
              <h3>{p.ja}</h3>
              <p>{p.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Story(){
  const chapters = [
    { en:'CHAPTER 01', body:[
      '美容室を出た直後は、確かに綺麗だった。',
      'けれど、時間が経つと、また広がる。うねりやパサつきが戻り、毛先は以前より扱いにくくなっている。',
      'トリートメントを変えても、髪質改善を繰り返しても、施術を重ねるほど髪が少しずつ弱くなっていく。'
    ]},
    { en:'CHAPTER 02', body:[
      '「髪を綺麗にするために美容室へ来ていただいているのに、なぜ施術を重ねるほど髪が傷んでいくのだろう」',
      '美容師になった頃から、ずっと心の中にあった問いでした。',
      'お客様を綺麗にするための仕事をしているはずなのに、髪が傷んでいくことが当たり前のように扱われている。そのことに、どうしても納得できませんでした。'
    ]},
    { en:'CHAPTER 03', body:[
      'もっと髪を守りながら施術する方法はないのか。その日だけではなく、これから先も綺麗でいられる方法はないのか。',
      'その答えを探すために、全国の技術を学び、毛髪科学を学び、さまざまな美容理論と向き合い続けました。'
    ]},
    { en:'CHAPTER 04', body:[
      'そして辿り着いたのが、全国でも限られたサロンだけが認定される、ノンダメージサロン®の考え方でした。',
      '大切にしているのは、髪を綺麗に見せる前に、まず、できる限り髪を傷ませないこと。',
      '薬剤の選定、施術工程、温度、時間、髪の状態の見極めまで、一つひとつ丁寧に考えます。'
    ]},
    { en:'CHAPTER 05', body:[
      '私たちが目指しているのは、美容室を出た直後だけ綺麗な髪ではありません。',
      '翌朝、鏡を見たとき。自分で乾かしたとき。湿気の多い日や、忙しくて時間をかけられない日。そして半年後、1年後も、以前より自分の髪を好きになっていただけること。',
      '髪を通して、そんな毎日をお届けしたいと考えています。'
    ]},
  ];
  return (
    <section className="section story" id="story">
      <div className="story__container">
        <Reveal><div className="kicker">LUMIERE STORY</div></Reveal>
        <Reveal delay={1}>
          <p className="story__quote">髪を傷ませる美容を、<br/><span className="em">終わらせたかった。</span></p>
        </Reveal>
        {chapters.map((c, i) => (
          <Reveal key={i} as="div" className="story__chapter">
            <h3>{c.en}</h3>
            {c.body.map((p, j) => <p key={j}>{p}</p>)}
          </Reveal>
        ))}
        <Reveal className="story__close">
          <p className="pull">
            「ルミエールに出会えてよかった」<br/>
            数年後、そう思っていただける仕事を、<br/>
            スタッフ全員で積み重ねていきます。
          </p>
          <div className="story__signature">
            <div className="role">LUMIERE — REPRESENTATIVE</div>
            <div className="name">大槻 恭嗣</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// === Diagnosis ===
const DX_QUESTIONS = [
  {
    id: 'concern',
    label: 'STEP 1 / お悩み',
    question: '今、いちばん気になっているのは何ですか？',
    options: [
      { value:'wave',    label:'うねり・広がりをどうにかしたい' },
      { value:'dry',     label:'パサつき・ダメージを整えたい' },
      { value:'color',   label:'カラーをしながら艶も欲しい' },
      { value:'unsure',  label:'自分では何が必要か分からない' },
    ]
  },
  {
    id: 'history',
    label: 'STEP 2 / これまでの履歴',
    question: 'これまで、どのような施術を続けてきましたか？',
    options: [
      { value:'straight', label:'縮毛矯正を繰り返してきた' },
      { value:'colored',  label:'カラー（白髪染め含む）を続けている' },
      { value:'treat',    label:'髪質改善・トリートメントを続けている' },
      { value:'mix',      label:'複数の施術を併用している／分からない' },
    ]
  },
  {
    id: 'goal',
    label: 'STEP 3 / 理想の仕上がり',
    question: '半年後、どんな髪でいたいですか？',
    options: [
      { value:'natural', label:'乾かすだけで自然にまとまる髪' },
      { value:'shine',   label:'艶と柔らかさのある、上質な質感' },
      { value:'easy',    label:'湿気でも崩れない、扱いやすい髪' },
      { value:'consult', label:'プロに見極めてもらいたい' },
    ]
  }
];

function decide(answers){
  const { concern, history, goal } = answers;
  if (concern === 'unsure' || goal === 'consult'){
    return {
      name: 'カウンセリングでの見極めを推奨',
      eyebrow: 'OUR RECOMMENDATION',
      desc: '現在の髪の状態と、これまでの施術履歴を直接拝見したうえで、本当に必要な施術をご提案いたします。'
    };
  }
  if (concern === 'wave' || history === 'straight'){
    return {
      name: '髪質改善ストレート',
      eyebrow: 'OUR RECOMMENDATION',
      desc: 'うねり・ねじれ・広がりを根本から整え、自然で柔らかな質感のストレートに仕上げます。'
    };
  }
  if (concern === 'color' || (history === 'colored' && goal !== 'easy')){
    return {
      name: '超高濃度水素カラー',
      eyebrow: 'OUR RECOMMENDATION',
      desc: 'カラーの負担を抑えながら、艶と柔らかさのある仕上がりを目指す、ルミエール独自のカラーメニューです。'
    };
  }
  return {
    name: '毛髪復元トリートメント',
    eyebrow: 'OUR RECOMMENDATION',
    desc: 'ダメージの種類を見極め、髪本来の質感を取り戻すための復元ケアをご提案します。'
  };
}

function Diagnosis(){
  const [step, setStep] = useState(0);   // 0,1,2 questions; 3 result+stores
  const [answers, setAnswers] = useState({});
  const [started, setStarted] = useState(false);

  useEffect(() => {
    if (step === 0 && !started){
      // first paint, no track yet
    }
  }, [step, started]);

  const onAnswer = (qid, value) => {
    if (!started){
      setStarted(true);
      track('diagnosis_start', { location: 'diagnosis_section' });
    }
    const next = { ...answers, [qid]: value };
    setAnswers(next);
    if (step < DX_QUESTIONS.length - 1){
      setStep(step + 1);
    } else {
      const result = decide(next);
      track('diagnosis_complete', { result: result.name });
      setStep(DX_QUESTIONS.length);
    }
  };

  const reset = () => { setAnswers({}); setStep(0); setStarted(false); };

  const result = useMemo(() => step >= DX_QUESTIONS.length ? decide(answers) : null, [step, answers]);

  return (
    <section className="section dx" id="diagnosis">
      <div className="container">
        <Reveal><div className="kicker">30 SECONDS DIAGNOSIS</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">あなたの髪に必要な施術を、<br/>30秒でご提案します。</h2>
        </Reveal>
        <div className="dx__wrap">
          <div className="dx__progress" aria-hidden="true">
            {[0,1,2].map(i => <span key={i} className={i <= Math.min(step, 2) ? 'active' : ''}/>)}
          </div>
          {step < DX_QUESTIONS.length ? (
            <div key={step}>
              <div className="dx__step-label">{DX_QUESTIONS[step].label}</div>
              <p className="dx__q">{DX_QUESTIONS[step].question}</p>
              <div className="dx__options">
                {DX_QUESTIONS[step].options.map(opt => (
                  <button key={opt.value} className="dx__opt" onClick={() => onAnswer(DX_QUESTIONS[step].id, opt.value)}>
                    {opt.label}
                  </button>
                ))}
              </div>
              {step > 0 && (
                <button className="dx__back" onClick={() => setStep(step - 1)}>← BACK</button>
              )}
            </div>
          ) : (
            <div className="dx__result">
              <div className="dx__result-eyebrow">{result.eyebrow}</div>
              <h3 className="dx__result-name">{result.name}</h3>
              <p className="dx__result-desc">{result.desc}</p>
              <div className="ornament"/>
              <p style={{fontSize:13,letterSpacing:'.08em',color:'var(--muted)',margin:'12px 0 4px'}}>お近くの店舗を選んで、ご予約へ</p>
              <div className="dx__store-list">
                {SALONS.map(s => (
                  <a key={s.id} href={s.bookingUrl} target="_blank" rel="noopener noreferrer"
                     onClick={() => { track('store_select', { store: s.id }); track('hotpepper_click', { store: s.id, source: 'diagnosis' }); }}>
                    {s.name.replace('Lumiere ', '')}
                    <span className="small">{s.area}</span>
                  </a>
                ))}
              </div>
              <button className="dx__retry" onClick={reset}>もう一度診断する</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.Standard = Standard;
window.Story = Story;
window.Diagnosis = Diagnosis;