// Hero section
function Hero({ tweaks }) {
  const headlines = {
    default: { jp: ['音楽を', 'DIGれ。'], en: 'Dig the music.' },
    discover: { jp: ['知らない音楽が、', '聴きたくなる。'], en: 'Dig deeper, listen wider.' },
    bridge: { jp: ['Spotifyも、', 'Apple Musicも。'], en: 'Both worlds. One feed.' },
    mood: { jp: ['今日のあなたの、', '一曲を投げろ。'], en: 'Drop your track of the day.' },
  };
  const h = headlines[tweaks.headline] || headlines.default;
  const accent = tweaks.accentColor;
  const layout = tweaks.heroLayout;

  const isCenter = layout === 'center';
  const isTilt = layout === 'tilted';

  return (
    <section className="hero-section" style={{
      position: 'relative', overflow: 'hidden',
      paddingTop: 120, paddingBottom: 140,
      minHeight: '100vh',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}>
      <HeroBackdrop accent={accent} accent2="#E5223A" />

      {/* Top nav */}
      <nav className="digme-nav" style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5,
        padding: '20px 0',
      }}>
        <div className="container" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'inherit', textDecoration: 'none' }}>
            <DigmeMark size={36} />
            <span className="digme-nav-name" style={{
              fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 22,
              letterSpacing: '-0.03em',
            }}>DIGME</span>
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <a href="#features" className="nav-link">機能</a>
            <a href="#howto" className="nav-link">使い方</a>
            <a href="#voices" className="nav-link">ユーザーの声</a>
            <a href="#faq" className="nav-link">FAQ</a>
            <a href="https://www.karnelsclub.com/" target="_blank" rel="noopener" className="nav-link">会社概要</a>
            <a href={APP_STORE_URL} target="_blank" rel="noopener" className="nav-cta">
              ダウンロード
            </a>
          </div>
        </div>
        <style>{`
          .nav-link {
            font-size: 14px; color: rgba(245,243,238,0.7);
            padding: 8px 14px; border-radius: 999px;
            transition: color 0.2s, background 0.2s;
            text-decoration: none;
          }
          .nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
          .nav-cta {
            margin-left: 12px; padding: 10px 18px; font-size: 14px;
            font-weight: 600; color: #000; background: #fff;
            border-radius: 999px; text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s;
          }
          .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,255,255,0.2); }
          @media (max-width: 760px) {
            .nav-link { display: none; }
            .nav-cta { margin-left: 0; padding: 8px 16px; font-size: 13px; }
          }
        `}</style>
      </nav>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: isCenter ? '1fr' : '1.15fr 0.85fr',
          gap: 60,
          alignItems: 'center',
          textAlign: isCenter ? 'center' : 'left',
          justifyItems: isCenter ? 'center' : 'stretch',
        }}>

          <div className="hero-text" style={{ maxWidth: isCenter ? 900 : 'none' }}>
            {/* SP-only DIGME logo above headline */}
            <div className="hero-logo-sp">
              <img src="uploads/DIGME_ロゴ.png" alt="DIGME" />
            </div>

            <Reveal delay={80}>
              <h1 className="display hero-h1" style={{
                fontSize: 'clamp(56px, 8.6vw, 132px)',
                fontWeight: 800,
                lineHeight: 0.92,
                letterSpacing: '-0.04em',
                marginBottom: 28,
                textWrap: 'balance',
              }}>
                <span style={{ display: 'block' }}>{h.jp[0]}</span>
                <span style={{ display: 'block', color: accent }}>{h.jp[1]}</span>
                <span className="serif-it hero-en" style={{
                  display: 'block', fontSize: '0.32em', color: 'rgba(245,243,238,0.5)',
                  marginTop: 16, fontWeight: 400, letterSpacing: '-0.02em',
                  fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
                }}>— {h.en}</span>
              </h1>
            </Reveal>

            <Reveal delay={160}>
              <p className="hero-sub" style={{
                fontSize: 'clamp(15px, 1.3vw, 19px)', lineHeight: 1.75,
                color: 'rgba(245,243,238,0.72)',
                maxWidth: 520, marginBottom: 36,
                margin: isCenter ? '0 auto 36px' : '0 0 36px',
              }}>
                趣味の合う人のプレイリストを、AIが連れてくる。<br />
                タグで気分の一枚を掘り当てる。<br />
                聴くのは、いつもの Spotify / Apple Music。
              </p>
            </Reveal>

            <Reveal delay={240}>
              <div className="hero-cta-row" style={{
                display: 'flex', gap: 14, alignItems: 'center',
                flexWrap: 'wrap',
                justifyContent: isCenter ? 'center' : 'flex-start',
              }}>
                <a href={APP_STORE_URL} target="_blank" rel="noopener" className="hero-cta-btn"
                   style={{
                     display: 'inline-flex', alignItems: 'center', gap: 14,
                     padding: '18px 32px', borderRadius: 999,
                     background: '#fff', color: '#000',
                     transition: 'transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s',
                     boxShadow: `0 18px 50px ${accent}55, 0 6px 20px rgba(0,0,0,0.4)`,
                     position: 'relative', overflow: 'hidden',
                     textDecoration: 'none',
                   }}
                   onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px) scale(1.02)'; e.currentTarget.style.boxShadow = `0 26px 70px ${accent}88, 0 8px 24px rgba(0,0,0,0.5)`; }}
                   onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0) scale(1)'; e.currentTarget.style.boxShadow = `0 18px 50px ${accent}55, 0 6px 20px rgba(0,0,0,0.4)`; }}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="#000" style={{ flexShrink: 0 }}>
                    <path d="M17.05 12.04c-.03-2.34 1.91-3.46 2-3.52-1.09-1.59-2.78-1.81-3.39-1.83-1.43-.15-2.81.85-3.54.85-.74 0-1.86-.83-3.07-.81-1.57.02-3.04.92-3.85 2.34-1.66 2.87-.42 7.11 1.18 9.44.78 1.14 1.71 2.42 2.92 2.37 1.18-.05 1.62-.76 3.05-.76 1.42 0 1.83.76 3.07.74 1.27-.02 2.07-1.16 2.85-2.31.91-1.32 1.27-2.6 1.29-2.67-.03-.01-2.46-.94-2.49-3.74zM14.74 4.59c.65-.79 1.09-1.89.97-2.99-.94.04-2.07.63-2.74 1.41-.6.69-1.13 1.81-.99 2.88 1.05.08 2.12-.53 2.76-1.3z"/>
                  </svg>
                  <span className="cta-name" style={{ fontSize: 18, fontWeight: 700, fontFamily: 'Bricolage Grotesque, "Noto Sans JP", sans-serif', letterSpacing: '-0.01em' }}>App Storeで無料ダウンロード</span>
                </a>
                <a href="#features" className="hero-secondary" style={{ fontSize: 14, color: 'rgba(245,243,238,0.6)', textDecoration: 'underline', textUnderlineOffset: 4 }}>
                  詳しく見る
                </a>
              </div>
              <div className="hero-meta" style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18, fontSize: 12, color: 'rgba(245,243,238,0.5)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.04em', justifyContent: isCenter ? 'center' : 'flex-start', flexWrap: 'wrap' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1ED760', boxShadow: '0 0 8px #1ED760' }}></span>
                  CONFIGURED IN 30s
                </span>
                <span className="meta-dot">·</span>
                <span>NO CREDIT CARD</span>
                <span className="meta-dot">·</span>
                <span>iOS 16.0+</span>
              </div>

            </Reveal>

            <Reveal delay={320}>
              <div className="hero-stats" style={{
                display: 'flex', gap: 32, marginTop: 56,
                alignItems: 'center', flexWrap: 'wrap',
                justifyContent: isCenter ? 'center' : 'flex-start',
              }}>
                <Stat n="AI" label="レコメンド" sub="趣味の合うプレイリストを発見" mono />
                <div className="stat-divider" style={{ width: 1, height: 32, background: 'rgba(245,243,238,0.12)' }}></div>
                <Stat n="∞" label="タグ検索" sub="#80年代 #R&B #ドライブ" />
                <div className="stat-divider" style={{ width: 1, height: 32, background: 'rgba(245,243,238,0.12)' }}></div>
                <Stat n="0¥" label="無料で利用" sub="再生は普段の Spotify / Apple Music" />
              </div>
            </Reveal>
          </div>

          {!isCenter && (
            <Reveal delay={300} className="hero-phone">
              <div style={{
                position: 'relative',
                display: 'flex', justifyContent: 'center',
                perspective: 1400,
              }}>
                <PhoneFrame
                  src="assets/screen-home.jpg"
                  width={340}
                  tilt={isTilt ? -8 : 0}
                  glow={`${accent}55`}
                />
                {/* floating chip */}
                <div className="hero-chip-top" style={{
                  position: 'absolute', top: 50, right: -20,
                  background: 'rgba(15,15,17,0.8)',
                  border: '1px solid rgba(245,243,238,0.14)',
                  backdropFilter: 'blur(16px)',
                  borderRadius: 14, padding: '12px 16px',
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontSize: 13, fontWeight: 500,
                  boxShadow: '0 18px 40px rgba(0,0,0,0.4)',
                  transform: isTilt ? 'rotate(4deg)' : 'rotate(0deg)',
                  animation: 'floaty 6s ease-in-out infinite',
                }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: '50%', background: '#E5223A',
                    boxShadow: '0 0 12px #E5223A',
                  }}></span>
                  <span>Apple Music で同期中</span>
                </div>
                <div className="hero-chip-bottom" style={{
                  position: 'absolute', bottom: 80, left: -30,
                  background: 'rgba(15,15,17,0.8)',
                  border: '1px solid rgba(245,243,238,0.14)',
                  backdropFilter: 'blur(16px)',
                  borderRadius: 14, padding: '14px 16px',
                  display: 'flex', alignItems: 'center', gap: 12,
                  fontSize: 13, fontWeight: 500,
                  boxShadow: '0 18px 40px rgba(0,0,0,0.4)',
                  transform: isTilt ? 'rotate(-5deg)' : 'rotate(0deg)',
                  animation: 'floaty 7s ease-in-out -2s infinite',
                }}>
                  <span style={{ fontSize: 18 }}>♥</span>
                  <div>
                    <div style={{ fontSize: 11, color: 'rgba(245,243,238,0.6)' }}>@haruka</div>
                    <div>このプレイリスト最高</div>
                  </div>
                </div>
                <style>{`
                  @keyframes floaty {
                    0%,100% { transform: translateY(0px) ${isTilt ? 'rotate(4deg)' : ''}; }
                    50% { transform: translateY(-10px) ${isTilt ? 'rotate(4deg)' : ''}; }
                  }
                `}</style>
              </div>
            </Reveal>
          )}
        </div>

        {/* SP-only CTA between description and phones */}
        <div className="hero-cta-sp-wrap">
          <a href={APP_STORE_URL} target="_blank" rel="noopener" className="hero-cta-sp-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="#000" style={{ flexShrink: 0 }}>
              <path d="M17.05 12.04c-.03-2.34 1.91-3.46 2-3.52-1.09-1.59-2.78-1.81-3.39-1.83-1.43-.15-2.81.85-3.54.85-.74 0-1.86-.83-3.07-.81-1.57.02-3.04.92-3.85 2.34-1.66 2.87-.42 7.11 1.18 9.44.78 1.14 1.71 2.42 2.92 2.37 1.18-.05 1.62-.76 3.05-.76 1.42 0 1.83.76 3.07.74 1.27-.02 2.07-1.16 2.85-2.31.91-1.32 1.27-2.6 1.29-2.67-.03-.01-2.46-.94-2.49-3.74zM14.74 4.59c.65-.79 1.09-1.89.97-2.99-.94.04-2.07.63-2.74 1.41-.6.69-1.13 1.81-.99 2.88 1.05.08 2.12-.53 2.76-1.3z"/>
            </svg>
            <span>App Store</span>
          </a>
          <p className="hero-cta-sp-sub">無料 · iOS 16.0+</p>
        </div>

        {/* Mobile-only: 3 staggered phones */}
        <div className="hero-phones-mobile" aria-hidden="true">
          <div className="phone-mob phone-mob-l">
            <PhoneFrame src="assets/screen-profile.jpg" width={120} tilt={-6} glow={`${accent}40`} />
          </div>
          <div className="phone-mob phone-mob-c">
            <PhoneFrame src="assets/screen-home.jpg" width={150} glow={`${accent}66`} />
          </div>
          <div className="phone-mob phone-mob-r">
            <PhoneFrame src="assets/screen-post.jpg" width={120} tilt={6} glow={`${accent}40`} />
          </div>
        </div>

        <style>{`
          .hero-phones-mobile { display: none; }
          .hero-cta-sp-wrap { display: none; }
          .hero-logo-sp { display: none; }
          .hero-cta-btn { flex-shrink: 0; }
          @media (max-width: 1100px) {
            .hero-chip-top, .hero-chip-bottom { display: none !important; }
          }
          @media (max-width: 960px) {
            .hero-grid { grid-template-columns: 1fr !important; gap: 60px; }
            .hero-phone { display: flex; justify-content: center; }
          }
          @media (max-width: 640px) {
            /* ── SP レイアウト基本 ── */
            .hero-section {
              padding-top: 64px !important;
              padding-bottom: 0 !important;
              min-height: 100svh !important;
              display: flex !important;
              flex-direction: column !important;
              justify-content: center !important;
            }
            .hero-grid {
              gap: 16px !important;
              text-align: center !important;
              justify-items: center !important;
            }
            .hero-text { max-width: 100% !important; }
            .hero-phone { display: none !important; }
            .hero-stats { display: none !important; }
            .scroll-indicator { display: none !important; }
            .hero-secondary { display: none !important; }
            .hero-en { display: none !important; }

            /* SP専用DIGMEロゴ */
            .hero-logo-sp {
              display: flex !important;
              justify-content: center;
              margin-bottom: 20px;
            }
            .hero-logo-sp img {
              width: 40px;
              height: auto;
              border-radius: 12px;
            }

            /* ヘッドライン */
            .hero-h1 {
              font-size: clamp(48px, 14vw, 72px) !important;
              line-height: 0.97 !important;
              margin-bottom: 20px !important;
              letter-spacing: -0.04em !important;
              text-align: center !important;
            }

            /* 説明文 */
            .hero-sub {
              display: block !important;
              font-size: 13px !important;
              line-height: 1.7 !important;
              margin: 0 auto 8px !important;
              color: rgba(245,243,238,0.65) !important;
              max-width: 100% !important;
              text-align: center !important;
            }

            /* 元のCTA・メタ・ソーシャルプルーフ → SP版はphones下に移動するので非表示 */
            .hero-cta-row { display: none !important; }
            .hero-meta { display: none !important; }

            /* 3枚のスクリーンショット */
            .hero-phones-mobile {
              display: flex !important;
              align-items: flex-end;
              justify-content: center;
              gap: 0;
              margin: 32px -16px 0;
              position: relative;
              z-index: 1;
              overflow: visible;
              flex-shrink: 0;
            }
            .phone-mob-l { transform: translate(26px, 12px) rotate(-6deg); z-index: 1; opacity: 0.55; filter: blur(0.5px); }
            .phone-mob-c { z-index: 2; }
            .phone-mob-r { transform: translate(-26px, 12px) rotate(6deg); z-index: 1; opacity: 0.55; filter: blur(0.5px); }

            /* SP専用CTAエリア（phones下） */
            .hero-cta-sp-wrap {
              display: flex !important;
              flex-direction: column;
              align-items: center;
              gap: 10px;
              position: relative;
              z-index: 3;
              padding: 24px 0 8px;
            }
            .hero-cta-sp-btn {
              display: inline-flex !important;
              align-items: center;
              gap: 9px;
              padding: 13px 28px;
              border-radius: 999px;
              background: #fff;
              color: #000;
              font-size: 15px;
              font-weight: 700;
              font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif;
              text-decoration: none;
              box-shadow: 0 10px 36px rgba(0,0,0,0.45);
              letter-spacing: -0.01em;
              transition: transform 0.2s;
            }
            .hero-cta-sp-sub {
              font-size: 10px;
              color: rgba(245,243,238,0.4);
              font-family: "JetBrains Mono", monospace;
              letter-spacing: 0.08em;
              text-transform: uppercase;
              margin: 0;
            }
          }
        `}</style>
      </div>

      {/* scroll indicator */}
      <div className="scroll-indicator" style={{
        position: 'absolute', bottom: 32, left: '50%',
        transform: 'translateX(-50%)',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'rgba(245,243,238,0.4)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      }}>
        <span>scroll</span>
        <span style={{ width: 1, height: 28, background: 'linear-gradient(to bottom, rgba(245,243,238,0.4), transparent)' }}></span>
      </div>
    </section>
  );
}

function Stat({ n, label, sub, mono }) {
  return (
    <div className="hero-stat" style={{ display: 'flex', flexDirection: 'column' }}>
      <div style={{
        fontFamily: mono ? 'JetBrains Mono, monospace' : 'Bricolage Grotesque, sans-serif',
        fontSize: mono ? 22 : 32, fontWeight: 700, letterSpacing: '-0.02em',
        lineHeight: 1,
      }}>{n}</div>
      <div style={{ fontSize: 12, fontWeight: 600, marginTop: 6, color: 'rgba(245,243,238,0.85)' }}>{label}</div>
      <div style={{ fontSize: 11, color: 'rgba(245,243,238,0.45)', marginTop: 2 }}>{sub}</div>
    </div>
  );
}

window.Hero = Hero;