/* global React, Reveal, Check */

// ====================== FEATURE HIGHLIGHTS INTRO ======================
function HighlightsIntro() {
  return (
    <section className="section section-sm" id="highlights" style={{ paddingBottom: 0 }}>
      <div className="container">
        <Reveal>
          <div className="section-head" style={{ marginBottom: 0 }}>
            <h2 className="section-title">tomarin ならではの、<br/>3つの強み。</h2>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ====================== HIGHLIGHT 01 · PAYMENT ======================
function HighlightPayment() {
  return (
    <section className="highlight bg-yellow">
      <div className="highlight-grid reverse">
        <Reveal className="highlight-copy">
          <div className="highlight-label">
            <div className="dot green" />
            <div className="text green">HIGHLIGHT 02 · 決済 & 宿泊税</div>
          </div>
          <h2>キャンセル料の悩みも、<br/>宿泊税の集計も。</h2>
          <p className="highlight-body">
            予約時のクレジットカード登録が標準。キャンセルはポリシーに沿って自動請求。さらに、複雑な宿泊税（定額・定率・階層）も自治体ごとに設定すれば、徴収・月次集計・申告書出力まで <strong>tomarin</strong> が引き受けます。
          </p>
          <div className="checklist">
            <div className="check-item"><Check /><span>キャンセルポリシーに応じた自動請求</span></div>
            <div className="check-item"><Check /><span>宿泊税は自治体方式で自動計算・同時徴収</span></div>
            <div className="check-item"><Check /><span>月次レポート・申告書（eLTAX 含む）を自動出力</span></div>
          </div>
        </Reveal>
        <Reveal className="highlight-visual" delay={150}>
          <PaymentVisual />
        </Reveal>
      </div>
    </section>
  );
}

function PaymentVisual() {
  const [state, setState] = React.useState('active');
  React.useEffect(() => {
    const seq = ['active', 'cancelling', 'charged'];
    let i = 0;
    const t = setInterval(() => {
      i = (i + 1) % seq.length;
      setState(seq[i]);
    }, 2800);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="vis-card" style={{ background: 'var(--green-bg)', border: '0.5px solid rgba(111,175,42,0.2)' }}>
      <div style={{ background: 'white', borderRadius: 10, padding: 20, border: '0.5px solid rgba(0,0,0,0.06)' }}>
        <div style={{ fontFamily: 'var(--font-en)', fontSize: 10, color: 'var(--text-quiet)', marginBottom: 14, letterSpacing: '0.06em' }}>RESERVATION · 予約内容</div>
        <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>田中 さくら 様 · 2泊</div>
        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 18 }}>4/25 → 4/27 · デラックス和室</div>
        <div style={{ borderTop: '0.5px solid var(--border-subtle)', paddingTop: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: 'var(--text-dim)' }}>宿泊料金</span>
            <span style={{ fontFamily: 'var(--font-en)', fontVariantNumeric: 'tabular-nums' }}>¥48,000</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: 'var(--text-dim)' }}>宿泊税（東川町）</span>
            <span style={{ fontFamily: 'var(--font-en)', fontVariantNumeric: 'tabular-nums' }}>¥400</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 14 }}>
            <span style={{ color: 'var(--text-dim)' }}>カード登録</span>
            <span style={{ color: 'var(--green-text)', fontWeight: 500 }}>✓ 登録済</span>
          </div>
          <div style={{
            background: state === 'charged' ? 'var(--green-bg)' : 'var(--bg-off-white)',
            borderRadius: 8, padding: 12,
            border: `0.5px solid ${state === 'charged' ? 'rgba(111,175,42,0.3)' : 'var(--border-subtle)'}`,
            display: 'flex', gap: 10, alignItems: 'flex-start',
            transition: 'all 350ms ease'
          }}>
            <div style={{
              width: 20, height: 20, borderRadius: '50%',
              background: state === 'active' ? 'white' : state === 'cancelling' ? 'var(--yellow-bg)' : 'var(--brand-green)',
              border: state === 'active' ? '1px dashed var(--text-quiet)' : 'none',
              flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontSize: 12, fontWeight: 600,
              transition: 'all 350ms ease'
            }}>
              {state === 'charged' && '✓'}
              {state === 'cancelling' && <span style={{ color: 'var(--yellow-stroke)', fontSize: 11 }}>•••</span>}
            </div>
            <div style={{ fontSize: 11, lineHeight: 1.6, color: state === 'charged' ? 'var(--green-text)' : 'var(--text-dim)', transition: 'color 350ms ease' }}>
              <strong style={{ display: 'block', marginBottom: 3, color: state === 'charged' ? 'var(--green-text)' : 'var(--black)' }}>
                {state === 'active' && 'キャンセルポリシー適用 · 宿泊税 自動算定'}
                {state === 'cancelling' && 'キャンセル発生'}
                {state === 'charged' && '自動徴収完了'}
              </strong>
              {state === 'active' && '当日キャンセル時は自動徴収。宿泊税は月次レポートで自動集計。'}
              {state === 'cancelling' && 'ポリシーに沿って自動請求を処理中…'}
              {state === 'charged' && '¥48,400 を登録カードへ徴収しました'}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ====================== HIGHLIGHT 02 · ECOSYSTEM ======================
function HighlightEcosystem() {
  return (
    <section className="highlight">
      <div className="highlight-grid">
        <Reveal className="highlight-copy">
          <div className="highlight-label">
            <div className="dot yellow" />
            <div className="text yellow">HIGHLIGHT 03 · 地域との循環</div>
          </div>
          <h2>宿を、<br/>地域ぐるみで支える。</h2>
          <p className="highlight-body">
            同じ Ramps が運営する ensembles は、地域のイベントや体験を通じてファンを育てるコミュニティ。そこで地域に出会った人が、tomarin を通じて宿に滞在する。出会う → 泊まる → また訪れる。地域の中で価値が循環する仕組みです。
          </p>
          <div className="checklist">
            <div className="check-item"><Check color="#C99C0B" /><span>ensembles の参加者を、宿のゲストへ自然に</span></div>
            <div className="check-item"><Check color="#C99C0B" /><span>町内の宿に一括導入。観光DMPへデータ連携</span></div>
            <div className="check-item"><Check color="#C99C0B" /><span>地域施策の根拠となる宿泊データを蓄積</span></div>
          </div>
        </Reveal>
        <Reveal className="highlight-visual" delay={150}>
          <EcosystemDiagram />
        </Reveal>
      </div>
    </section>
  );
}

function EcosystemDiagram() {
  const cards = [
    {
      eyebrow: 'STEP 01 · 出会う',
      title: '地域で、旅人と出会う。',
      body: 'ensembles が、地域のイベントや体験を通じて旅人とのご縁をつくります。',
      tag: 'ensembles',
      color: '#F5D938',
      textColor: '#8A6900',
      bg: '#FDFAEA',
      icon: (
        <svg viewBox="0 0 40 40" width="28" height="28" fill="none" stroke="#C99C0B" strokeWidth="1.5">
          <circle cx="12" cy="14" r="5"/><circle cx="28" cy="14" r="5"/>
          <path d="M4 32c0-4.4 3.6-8 8-8s8 3.6 8 8"/>
          <path d="M20 32c0-4.4 3.6-8 8-8s8 3.6 8 8"/>
        </svg>
      ),
    },
    {
      eyebrow: 'STEP 02 · 泊まる',
      title: '宿で、もてなしに出会う。',
      body: 'tomarin が、予約から決済、顧客管理まで。お客様のご滞在を、静かに支えます。',
      tag: 'tomarin',
      color: '#6FAF2A',
      textColor: '#3E6E12',
      bg: '#F5FBEE',
      icon: (
        <svg viewBox="0 0 40 40" width="28" height="28" fill="none" stroke="#6FAF2A" strokeWidth="1.5">
          <path d="M6 32V16l14-10 14 10v16"/>
          <path d="M14 32V22h12v10"/>
        </svg>
      ),
    },
    {
      eyebrow: 'STEP 03 · 再訪',
      title: 'ファンになって、また訪れる。',
      body: '一度の出会いを、何度もの再訪へ。tomarin の顧客台帳が、関係を続けます。',
      tag: 'リピーター',
      color: '#9ED4E2',
      textColor: '#1a5a6b',
      bg: '#F0F8FB',
      icon: (
        <svg viewBox="0 0 40 40" width="28" height="28" fill="none" stroke="#1a5a6b" strokeWidth="1.5">
          <path d="M6 20a14 14 0 0 1 24-10M34 20A14 14 0 0 1 10 30"/>
          <path d="M28 8v8h-8M12 32v-8h8"/>
        </svg>
      ),
    },
  ];

  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const ecoArrowStyle = {
    width: 22, height: 22, borderRadius: 999, padding: 0,
    border: '0.5px solid var(--border-subtle)', background: 'white',
    color: 'var(--text-dim)', cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    margin: '0 5px',
  };

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % cards.length), 3200);
    return () => clearInterval(t);
  }, [paused, cards.length]);

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        background: 'white',
        borderRadius: 14,
        padding: 28,
        border: '0.5px solid var(--border-subtle)',
        position: 'relative',
        minHeight: 340,
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <div style={{ position: 'relative', flex: 1, perspective: 1400, minHeight: 250 }}>
        {cards.map((c, i) => {
          const offset = (i - idx + cards.length) % cards.length;
          const isActive = offset === 0;
          const isPrev = offset === cards.length - 1;
          let transform, opacity, z;
          if (isActive) {
            transform = 'translateY(0) scale(1) rotateX(0deg)';
            opacity = 1; z = 3;
          } else if (offset === 1) {
            transform = 'translateY(14px) scale(0.94) rotateX(2deg)';
            opacity = 0.55; z = 2;
          } else if (offset === 2) {
            transform = 'translateY(28px) scale(0.88) rotateX(4deg)';
            opacity = 0.25; z = 1;
          } else if (isPrev) {
            transform = 'translateY(-40px) scale(0.96) rotateX(-8deg)';
            opacity = 0; z = 0;
          }
          return (
            <div
              key={i}
              style={{
                position: 'absolute',
                inset: 0,
                background: c.bg,
                border: `0.5px solid ${c.color}55`,
                borderRadius: 12,
                padding: 28,
                transform,
                opacity,
                zIndex: z,
                transition: 'transform 700ms cubic-bezier(.16,1,.3,1), opacity 500ms ease',
                transformStyle: 'preserve-3d',
                willChange: 'transform, opacity',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
              }}
            >
              <div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
                  <span style={{
                    fontFamily: 'var(--font-en)',
                    fontSize: 10,
                    fontWeight: 500,
                    letterSpacing: '0.14em',
                    color: c.textColor,
                    opacity: 0.85,
                  }}>{c.eyebrow}</span>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: 'white',
                    border: `0.5px solid ${c.color}66`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{c.icon}</div>
                </div>
                <div style={{
                  fontSize: 20,
                  fontWeight: 500,
                  lineHeight: 1.4,
                  letterSpacing: '-0.01em',
                  color: 'var(--black)',
                  marginBottom: 14,
                  textWrap: 'balance',
                }}>{c.title}</div>
                <div style={{ fontSize: 13, lineHeight: 1.9, color: 'var(--text-dim)' }}>{c.body}</div>
              </div>
              <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: c.color }} />
                <span style={{
                  fontSize: 11, fontWeight: 500,
                  color: c.textColor,
                  letterSpacing: '0.06em',
                }}>{c.tag}</span>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginTop: 22, alignItems: 'center' }}>
        <button onClick={() => setIdx(i => (i + cards.length - 1) % cards.length)} aria-label="前へ" style={ecoArrowStyle}>
          <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7.5 2 3.5 6l4 4" /></svg>
        </button>
        {cards.map((c, i) => (
          <button
            key={i}
            onClick={() => setIdx(i)}
            aria-label={`step ${i + 1}`}
            style={{
              padding: 0,
              width: i === idx ? 28 : 8,
              height: 4,
              border: 'none',
              borderRadius: 999,
              background: i === idx ? c.color : 'var(--border-card)',
              cursor: 'pointer',
              transition: 'all 350ms cubic-bezier(.16,1,.3,1)',
            }}
          />
        ))}
        <button onClick={() => setIdx(i => (i + 1) % cards.length)} aria-label="次へ" style={ecoArrowStyle}>
          <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4.5 2l4 4-4 4" /></svg>
        </button>
      </div>
    </div>
  );
}

// ====================== HIGHLIGHT 03 · CUSTOMER LEDGER ======================
function HighlightCustomer() {
  return (
    <section className="highlight">
      <div className="highlight-grid">
        <Reveal className="highlight-copy">
          <div className="highlight-label">
            <div className="dot blue" />
            <div className="text blue">HIGHLIGHT 01 · 顧客台帳</div>
          </div>
          <h2>顧客を、<br/>宿の一番の資産に。</h2>
          <p className="highlight-body">
            誰が泊まり、何を喜んだか。一人ひとりの記録が積み上がり、再訪へつながります。OTA では決して届かない情報が、宿の中に蓄積されていく。<strong>tomarin</strong> の顧客台帳が、関係を続ける土台になります。
          </p>
          <div className="checklist">
            <div className="check-item"><Check color="#1a5a6b" /><span>宿泊履歴・好み・要望を、ひとつの顧客台帳に一元化</span></div>
            <div className="check-item"><Check color="#1a5a6b" /><span>再訪時は「おかえりなさい」の接客を、スタッフ全員で</span></div>
            <div className="check-item"><Check color="#1a5a6b" /><span>タグと会員制度で、常連を見える化する</span></div>
          </div>
        </Reveal>
        <Reveal className="highlight-visual" delay={150}>
          <CustomerCard />
        </Reveal>
      </div>
    </section>
  );
}

function CustomerCard() {
  const memos = [
    'コーヒーよりほうじ茶を好まれる',
    '到着は夕方になることが多い',
    'お子さま（8歳）とご一緒。朝食はパン抜きで',
  ];
  const tags = [
    { t: '#和食', c: 'green' },
    { t: '#ファミリー', c: 'yellow' },
    { t: '#家具クラブ', c: 'blue' },
  ];
  return (
    <div style={{ background: 'var(--blue-bg)', borderRadius: 14, padding: 24, border: '0.5px solid rgba(158,212,226,0.4)' }}>
      <div style={{ background: 'white', borderRadius: 12, padding: 22, border: '0.5px solid rgba(0,0,0,0.06)' }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 18 }}>
          <div style={{
            width: 46, height: 46, borderRadius: '50%',
            background: 'var(--brand-green)', color: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, fontWeight: 500, flexShrink: 0,
          }}>田</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: '-0.01em' }}>田中 さくら 様</div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>東京都 世田谷区</div>
          </div>
          <div style={{
            fontSize: 10, fontWeight: 500, padding: '4px 10px',
            background: 'var(--yellow-bg)', color: 'var(--yellow-text)',
            borderRadius: 999, whiteSpace: 'nowrap',
          }}>★ リピーター</div>
        </div>

        {/* Stats row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 18 }}>
          {[
            { k: '滞在履歴', v: '3', u: '回' },
            { k: '累計利用', v: '¥84,000', u: '' },
            { k: '来訪', v: '3', u: '年連続' },
          ].map(s => (
            <div key={s.k} style={{ background: 'var(--bg-off-white)', borderRadius: 8, padding: '12px 10px', textAlign: 'center' }}>
              <div style={{ fontSize: 10, color: 'var(--text-dim)', marginBottom: 5 }}>{s.k}</div>
              <div style={{ fontFamily: 'var(--font-en)', fontSize: 15, fontWeight: 500, color: 'var(--black)', fontVariantNumeric: 'tabular-nums' }}>
                {s.v}<span style={{ fontSize: 10, color: 'var(--text-dim)', marginLeft: 1, fontFamily: 'var(--font-jp)' }}>{s.u}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Hospitality memo */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontFamily: 'var(--font-en)', fontSize: 10, color: 'var(--text-quiet)', letterSpacing: '0.06em', marginBottom: 10 }}>おもてなしメモ</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {memos.map((m, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.5 }}>
                <span style={{ color: 'var(--brand-green)', flexShrink: 0, marginTop: 1 }}>·</span>
                <span>{m}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Tags */}
        <div style={{ borderTop: '0.5px solid var(--border-subtle)', paddingTop: 14, display: 'flex', gap: 7, flexWrap: 'wrap' }}>
          {tags.map(tag => (
            <span key={tag.t} style={{
              fontSize: 11, fontWeight: 500, padding: '4px 11px', borderRadius: 999,
              background: tag.c === 'green' ? 'var(--green-bg)' : tag.c === 'yellow' ? 'var(--yellow-bg)' : 'var(--blue-bg)',
              color: tag.c === 'green' ? 'var(--green-text)' : tag.c === 'yellow' ? 'var(--yellow-text)' : 'var(--blue-text)',
            }}>{tag.t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HighlightsIntro, HighlightPayment, HighlightEcosystem, HighlightCustomer, CustomerCard, PaymentVisual, EcosystemDiagram });