// Rallimo Landing Page — same content as the flyer, restructured for web.
// Reuses the brand palette and CO-01 wordmark from the flyer/logo files.

const P = {
  ink: '#3D2E22',
  coral: '#F08A5D',
  terracotta: '#C95E3F',
  sunny: '#F5C26B',
  cream: '#FBF6EE',
  paper: '#FFFFFF',
  soft: '#F5E9D8',
};

// CO-01 wordmark
function RallimoMark({ size = 32, color, accent }) {
  return (
    <span style={{
      fontFamily: '"Zen Maru Gothic", sans-serif',
      fontWeight: 900,
      fontSize: size,
      letterSpacing: '-0.025em',
      color: color || P.ink,
      lineHeight: 1,
      display: 'inline-flex',
      alignItems: 'baseline',
    }}>
      <span>Rallim</span>
      <span style={{ color: accent || P.coral }}>o</span>
    </span>
  );
}

// ---- Layout primitives ---------------------------------------------------

function Container({ children, narrow, style }) {
  return (
    <div style={{
      maxWidth: narrow ? 920 : 1120,
      margin: '0 auto',
      padding: '0 24px',
      ...style,
    }}>{children}</div>
  );
}

function SectionEyebrow({ children, color = P.coral }) {
  return (
    <div style={{
      fontFamily: '"Quicksand", sans-serif',
      fontWeight: 700,
      fontSize: 13,
      letterSpacing: '0.18em',
      color,
    }}>{children}</div>
  );
}

function SectionTitle({ children, align = 'left' }) {
  return (
    <h2 style={{
      fontFamily: '"Zen Maru Gothic", sans-serif',
      fontWeight: 900,
      fontSize: 'clamp(28px, 3.4vw, 40px)',
      lineHeight: 1.3,
      letterSpacing: '-0.01em',
      color: P.ink,
      margin: '10px 0 0',
      textAlign: align,
    }}>{children}</h2>
  );
}

// ---- Nav -----------------------------------------------------------------

function Nav() {
  const linkStyle = {
    color: P.ink,
    textDecoration: 'none',
    fontSize: 14,
    fontWeight: 600,
    opacity: 0.8,
  };
  return (
    <div style={{
      position: 'sticky',
      top: 0,
      zIndex: 50,
      background: 'rgba(251, 246, 238, 0.92)',
      backdropFilter: 'saturate(140%) blur(8px)',
      borderBottom: `1px solid ${P.soft}`,
    }}>
      <Container style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 64,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <RallimoMark size={26} />
          <div style={{ fontSize: 11, color: P.ink, opacity: 0.55, letterSpacing: '0.05em' }}>
            LINEでも動く、デジタルスタンプラリー
          </div>
        </div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <a href="#features" style={linkStyle}>特長</a>
          <a href="#cases" style={linkStyle}>活用シーン</a>
          <a href="#pricing" style={linkStyle}>料金</a>
          <a href="#flow" style={linkStyle}>導入の流れ</a>
          <a href="https://rallimo.hondenext.com/register"
             style={{
               background: P.terracotta,
               color: '#fff',
               textDecoration: 'none',
               padding: '10px 18px',
               borderRadius: 999,
               fontFamily: '"Zen Maru Gothic", sans-serif',
               fontWeight: 800,
               fontSize: 14,
             }}>無料ではじめる</a>
        </nav>
      </Container>
    </div>
  );
}

// ---- Hero ----------------------------------------------------------------

function Hero() {
  return (
    <section style={{
      background: `linear-gradient(180deg, ${P.cream} 0%, ${P.cream} 60%, ${P.paper} 100%)`,
      position: 'relative',
      overflow: 'hidden',
      paddingBottom: 80,
    }}>
      {/* decorative stamps */}
      <div aria-hidden style={{
        position: 'absolute', right: -120, top: -80,
        width: 320, height: 320, borderRadius: '50%',
        background: P.sunny, opacity: 0.35,
      }} />
      <div aria-hidden style={{
        position: 'absolute', right: 180, top: 200,
        width: 90, height: 90, borderRadius: '50%',
        background: P.coral, opacity: 0.25,
      }} />

      <Container style={{
        paddingTop: 80,
        position: 'relative',
        zIndex: 1,
        display: 'grid',
        gridTemplateColumns: '1.15fr 1fr',
        gap: 56,
        alignItems: 'center',
      }}>
        <div>
          <SectionEyebrow color={P.terracotta}>DIGITAL STAMP RALLY</SectionEyebrow>
          <h1 style={{
            fontFamily: '"Zen Maru Gothic", sans-serif',
            fontWeight: 900,
            fontSize: 'clamp(48px, 6vw, 88px)',
            lineHeight: 1.1,
            letterSpacing: '-0.02em',
            color: P.ink,
            margin: '14px 0 0',
          }}>
            <span style={{ color: P.terracotta }}>めぐる</span>たのしさを。
          </h1>
          <p style={{
            marginTop: 28,
            fontSize: 17,
            lineHeight: 1.95,
            color: P.ink,
            opacity: 0.85,
            maxWidth: 540,
          }}>
            アプリのダウンロードは不要。LINE上でも動くから、参加ハードルがぐっと低い。<br />
            管理画面でイベントを作るだけ。商店街・飲食店・お店・展示会・観光地、<br />
            その日からスタンプラリーがはじめられます。
          </p>

          <div style={{ display: 'flex', gap: 14, marginTop: 36, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="https://rallimo.hondenext.com/register" style={{
              background: P.terracotta,
              color: '#fff',
              textDecoration: 'none',
              padding: '16px 28px',
              borderRadius: 999,
              fontFamily: '"Zen Maru Gothic", sans-serif',
              fontWeight: 800,
              fontSize: 16,
              boxShadow: `0 8px 0 ${P.ink}1a`,
            }}>無料ではじめる →</a>
            <a href="#pricing" style={{
              color: P.ink,
              textDecoration: 'none',
              padding: '16px 22px',
              fontSize: 15,
              fontWeight: 700,
              borderRadius: 999,
              border: `2px solid ${P.ink}`,
              background: 'transparent',
            }}>料金プランを見る</a>
          </div>

        </div>

        {/* phones */}
        <div style={{
          display: 'flex',
          gap: 14,
          justifyContent: 'center',
          alignItems: 'flex-end',
        }}>
          <div style={{
            transform: 'rotate(-3deg) translateY(8px)',
            filter: `drop-shadow(0 30px 40px ${P.ink}33)`,
          }}>
            <img src="assets/screen-card.jpg?v=3" alt="スタンプカード画面"
                 style={{
                   width: 240,
                   borderRadius: 26,
                   border: `4px solid ${P.ink}`,
                   display: 'block',
                 }} />
          </div>
          <div style={{
            transform: 'rotate(2deg)',
            filter: `drop-shadow(0 30px 40px ${P.ink}33)`,
          }}>
            <img src="assets/screen-get.jpg" alt="スタンプ獲得画面"
                 style={{
                   width: 240,
                   borderRadius: 26,
                   border: `4px solid ${P.ink}`,
                   display: 'block',
                 }} />
          </div>
        </div>
      </Container>
    </section>
  );
}

// ---- Highlights (3) ------------------------------------------------------

function Highlights() {
  const items = [
    { n: '01', t: '利用者はスマホで参加', d: 'アプリのダウンロードは不要。\nQRを読み取るだけでスタンプゲット！' },
    { n: '02', t: '誰でもかんたん設定', d: 'イベント情報やスタンプカードは、\n管理画面からいつでも自由に設定。' },
    { n: '03', t: '参加状況や属性を可視化', d: '参加者の参加状況をリアルタイム集計\nアンケートも実施可能。' },
  ];
  return (
    <section id="features" style={{ padding: '90px 0', background: P.paper }}>
      <Container>
        <SectionEyebrow>3 KEY FEATURES</SectionEyebrow>
        <SectionTitle>はじめやすく、つづけやすく、可視化される。</SectionTitle>
        <div style={{
          marginTop: 48,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
        }}>
          {items.map((x, i) => (
            <div key={i} style={{
              background: P.cream,
              borderRadius: 18,
              padding: '32px 28px 30px',
              border: `1px solid ${P.soft}`,
              position: 'relative',
              overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -10, right: -10,
                width: 80, height: 80, borderRadius: '50%',
                background: P.sunny, opacity: 0.4,
              }} />
              <div style={{
                fontFamily: '"Quicksand", sans-serif',
                fontWeight: 700,
                fontSize: 13,
                letterSpacing: '0.15em',
                color: P.coral,
                position: 'relative',
              }}>{x.n}</div>
              <h3 style={{
                fontFamily: '"Zen Maru Gothic", sans-serif',
                fontWeight: 800,
                fontSize: 22,
                color: P.ink,
                margin: '8px 0 14px',
                letterSpacing: '-0.01em',
                position: 'relative',
              }}>{x.t}</h3>
              <p style={{
                fontSize: 14,
                lineHeight: 1.85,
                color: P.ink,
                opacity: 0.75,
                margin: 0,
                position: 'relative',
                whiteSpace: 'pre-line',
              }}>{x.d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ---- How it feels --------------------------------------------------------

function HowItFeels() {
  return (
    <section style={{ padding: '90px 0', background: P.cream }}>
      <Container>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.1fr',
          gap: 64,
          alignItems: 'center',
        }}>
          <div style={{ display: 'flex', gap: 18, justifyContent: 'center' }}>
            <img src="assets/screen-card.jpg?v=3" alt=""
                 style={{
                   width: 240,
                   borderRadius: 26,
                   border: `4px solid ${P.ink}`,
                   transform: 'rotate(-3deg)',
                   filter: `drop-shadow(0 25px 30px ${P.ink}33)`,
                 }} />
            <img src="assets/screen-get.jpg" alt=""
                 style={{
                   width: 240,
                   borderRadius: 26,
                   border: `4px solid ${P.ink}`,
                   transform: 'rotate(3deg) translateY(20px)',
                   filter: `drop-shadow(0 25px 30px ${P.ink}33)`,
                 }} />
          </div>
          <div>
            <SectionEyebrow color={P.terracotta}>HOW IT FEELS</SectionEyebrow>
            <h2 style={{
              fontFamily: '"Zen Maru Gothic", sans-serif',
              fontWeight: 900,
              fontSize: 'clamp(32px, 4vw, 48px)',
              lineHeight: 1.3,
              letterSpacing: '-0.01em',
              color: P.ink,
              margin: '12px 0 0',
            }}>
              QRをかざすだけで、<br />
              ぽん、と<span style={{ color: P.coral }}>スタンプ</span>。
            </h2>
            <p style={{
              marginTop: 24,
              fontSize: 16,
              lineHeight: 1.95,
              color: P.ink,
              opacity: 0.85,
            }}>
              参加者は、お店や観光スポット・ブースを巡りながらスタンプを集めるだけ。
              運営側は、訪問データ・コンプリート率・景品交換状況を、ダッシュボードで一目で。
            </p>

            {/* Case study card */}
            <div style={{
              marginTop: 32,
              background: P.paper,
              borderLeft: `4px solid ${P.terracotta}`,
              borderRadius: '0 14px 14px 0',
              padding: '22px 26px',
              boxShadow: `0 8px 24px ${P.ink}10`,
            }}>
              <div style={{
                fontSize: 12,
                fontWeight: 800,
                letterSpacing: '0.12em',
                color: P.terracotta,
              }}>導入実績</div>
              <div style={{
                marginTop: 8,
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                flexWrap: 'wrap',
              }}>
                <div style={{
                  background: P.ink,
                  padding: '6px 12px',
                  borderRadius: 6,
                  display: 'inline-flex',
                  alignItems: 'center',
                }}>
                  <img src="assets/mitsuibau-logo.svg" alt="株式会社ミツイバウ・マテリアル"
                       style={{ height: 22, width: 'auto', display: 'block' }} />
                </div>
                <span style={{ fontSize: 12, fontWeight: 500, color: P.ink, opacity: 0.6 }}>
                  三重県松阪市
                </span>
              </div>
              <p style={{
                margin: '8px 0 0',
                fontSize: 13,
                color: P.ink,
                opacity: 0.75,
                lineHeight: 1.7,
              }}>
                創業75周年を記念した展示会にて、来場者の各ブース回遊を促進するためデジタルスタンプラリーを導入。
              </p>
              <div style={{
                marginTop: 14,
                display: 'flex',
                gap: 28,
                paddingTop: 14,
                borderTop: `1px solid ${P.soft}`,
              }}>
                <div>
                  <div style={{ fontSize: 11, color: P.ink, opacity: 0.6 }}>総参加者数</div>
                  <div style={{
                    fontFamily: '"Quicksand", sans-serif',
                    fontWeight: 700,
                    fontSize: 28,
                    color: P.terracotta,
                    letterSpacing: '-0.02em',
                  }}>246<span style={{ fontSize: 14, marginLeft: 4 }}>人</span></div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: P.ink, opacity: 0.6 }}>平均スタンプ数</div>
                  <div style={{
                    fontFamily: '"Quicksand", sans-serif',
                    fontWeight: 700,
                    fontSize: 28,
                    color: P.terracotta,
                    letterSpacing: '-0.02em',
                  }}>4.1<span style={{ fontSize: 14, marginLeft: 4 }}>個</span><span style={{ fontSize: 12, marginLeft: 6, opacity: 0.6, fontWeight: 400, color: P.ink }}>/ 全5箇所中</span></div>
                </div>
              </div>
              <div style={{
                marginTop: 14,
                padding: '12px 14px',
                background: P.cream,
                borderRadius: 8,
                borderLeft: `3px solid ${P.coral}`,
                fontSize: 13,
                lineHeight: 1.75,
                color: P.ink,
              }}>
                <span style={{ opacity: 0.85 }}>「LINEで完結するのでお客様への説明が不要で、年配の来場者も迷わずスキャンしていたのが印象的でした。」</span><br />
                <span style={{ fontSize: 12, opacity: 0.6, marginTop: 4, display: 'inline-block' }}>― 総務経理課 森田様</span>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

window.LP_RallimoMark = RallimoMark;
window.LP_PALETTE = P;
window.LP_Container = Container;
window.LP_SectionEyebrow = SectionEyebrow;
window.LP_SectionTitle = SectionTitle;
window.LP_Nav = Nav;
window.LP_Hero = Hero;
window.LP_Highlights = Highlights;
window.LP_HowItFeels = HowItFeels;