const heroStyles = {
  wrap: { padding: '96px 0 72px', position: 'relative' },
  kicker: {
    display:'inline-flex', alignItems:'center', gap: 10,
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: 2, color: '#B49AFF',
    border: '1px solid rgba(139,92,246,0.35)',
    padding: '6px 14px', borderRadius: 999,
    background: 'rgba(139,92,246,0.06)',
    backdropFilter: 'blur(8px)',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1.35fr 1fr',
    gap: 64, alignItems: 'end',
    marginTop: 40,
  },
  titleWrap: {
    position: 'relative',
    paddingLeft: 20,
  },
  titleAccent: {
    position: 'absolute', left: 0, top: 12, bottom: 12, width: 2,
    background: 'linear-gradient(180deg, transparent 0%, #8B5CF6 35%, #C4A7FF 65%, transparent 100%)',
    borderRadius: 2,
  },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 'clamp(56px, 7.5vw, 112px)',
    lineHeight: 0.95,
    letterSpacing: '-0.02em',
    margin: 0,
    fontWeight: 400,
  },
  italic: {
    fontStyle: 'italic', color: '#B49AFF',
    textShadow: '0 0 60px rgba(180,154,255,0.3)',
  },
  underline: {
    background: 'linear-gradient(180deg, transparent 70%, rgba(139,92,246,0.45) 70%, rgba(139,92,246,0.45) 92%, transparent 92%)',
    padding: '0 4px',
  },
  issueTag: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 10, letterSpacing: 2, color: '#4A4460',
    marginTop: 24,
  },

  intro: {
    fontSize: 16, lineHeight: 1.7, color: '#C8C0DC',
    maxWidth: 440, margin: 0,
  },
  meta: {
    marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 8,
  },
  chip: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, color: '#A8A0BC',
    padding: '6px 10px', borderRadius: 6,
    border: '1px solid #2A2238',
    background: 'rgba(29,23,41,0.6)',
    transition: 'border-color 0.2s ease, color 0.2s ease',
  },

  card: {
    position: 'relative',
    border: '1px solid #2A2238',
    borderRadius: 18,
    background: 'linear-gradient(160deg, rgba(35,28,52,0.8), rgba(18,16,28,0.6))',
    padding: 24,
    overflow: 'hidden',
    backdropFilter: 'blur(12px)',
    boxShadow: '0 32px 80px -32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04)',
  },
  cardRow: { display:'flex', alignItems:'center', gap: 14 },
  avatar: {
    width: 56, height: 56, borderRadius: 14, flexShrink: 0,
    background: 'radial-gradient(circle at 30% 25%, #C4A7FF, #7C3AED 55%, #2A1A52 100%)',
    boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.12), 0 10px 30px -10px rgba(139,92,246,0.7)',
    display:'flex', alignItems:'center', justifyContent:'center',
    fontFamily: "'Instrument Serif', serif", fontStyle:'italic',
    fontSize: 28, color: '#F5F1FF', textShadow:'0 1px 0 rgba(0,0,0,0.3)',
  },
  name: { fontSize: 16, fontWeight: 600, color:'#F5F1FF' },
  role: { fontSize: 12, color:'#A8A0BC', marginTop: 2, fontFamily:"'JetBrains Mono', monospace" },
  divider: { height: 1, background: 'linear-gradient(90deg, transparent, #2A2238 40%, #38304A 60%, transparent)', margin: '20px 0' },

  stats: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 },
  stat: { padding: '2px 0' },
  statNum: {
    fontFamily: "'Instrument Serif', serif", fontSize: 28, color:'#F5F1FF', lineHeight: 1,
  },
  statLabel: { fontSize: 11, color:'#6E6782', marginTop: 6, fontFamily:"'JetBrains Mono', monospace", letterSpacing: 1 },

  links: { marginTop: 20, display:'flex', gap: 10, flexWrap:'wrap' },
  socialBtn: {
    fontSize: 12, padding:'8px 12px', borderRadius: 10,
    border: '1px solid #2A2238', color:'#C8C0DC',
    display:'inline-flex', alignItems:'center', gap: 8,
    background:'rgba(14,11,22,0.4)',
    transition: 'border-color 0.2s ease, color 0.2s ease',
  },

  decorLine: {
    position:'absolute', right: -60, top: -60, width: 240, height: 240,
    border:'1px solid rgba(139,92,246,0.15)', borderRadius:'50%',
    pointerEvents:'none',
  },
  decorLine2: {
    position:'absolute', right: -30, top: -30, width: 180, height: 180,
    border:'1px dashed rgba(139,92,246,0.1)', borderRadius:'50%',
    pointerEvents:'none',
  },
  /* Shimmer overlay on the card */
  shimmer: {
    position: 'absolute', inset: 0, borderRadius: 18, pointerEvents: 'none',
    background: 'linear-gradient(135deg, rgba(180,154,255,0.04) 0%, transparent 50%, rgba(139,92,246,0.03) 100%)',
  },
};

function Hero(){
  return (
    <section id="about" style={heroStyles.wrap}>
      <div className="inner">

        {/* Kicker */}
        <span className="anim d1" style={heroStyles.kicker}>
          <span style={{width:5,height:5,borderRadius:999,background:'#B49AFF',boxShadow:'0 0 8px #B49AFF'}}/>
          ESTABLISHED · 2021 · TOKYO / KYOTO
        </span>

        <div style={heroStyles.grid}>

          {/* Left: Title */}
          <div>
            <div className="anim d2" style={heroStyles.titleWrap}>
              <div style={heroStyles.titleAccent}/>
              <h1 style={heroStyles.title}>
                書くことは、<br/>
                <span style={heroStyles.italic}>考えること</span><br/>
                <span style={heroStyles.underline}>そのもの</span>。
              </h1>
            </div>
            <div className="anim d3" style={heroStyles.issueTag}>
              <span style={{width:16,height:1,background:'#4A4460',display:'inline-block'}}/>
              VOL.01 · FIELD NOTES · ONGOING
            </div>
          </div>

          {/* Right: Profile card */}
          <div className="anim d3" style={{position:'relative'}}>
            <div style={heroStyles.decorLine}/>
            <div style={heroStyles.decorLine2}/>
            <div style={heroStyles.card}>
              <div style={heroStyles.shimmer}/>
              <div style={heroStyles.cardRow}>
                <div style={heroStyles.avatar}>M</div>
                <div>
                  <div style={heroStyles.name}>湊 / Minato Aikawa</div>
                  <div style={heroStyles.role}>WRITER · ENGINEER · READER</div>
                </div>
              </div>

              <div style={heroStyles.divider}/>

              <p style={heroStyles.intro}>
                ソフトウェアを書く傍らで、思考のかたちを言葉に移す実験を続けています。
                このブログは、日々のメモと読んだ本と夜の散歩を束ねた、私的なフィールドノートです。
              </p>

              <div style={heroStyles.stats}>
                <div style={heroStyles.stat}>
                  <div style={heroStyles.statNum}>142</div>
                  <div style={heroStyles.statLabel}>ESSAYS</div>
                </div>
                <div style={heroStyles.stat}>
                  <div style={heroStyles.statNum}>5</div>
                  <div style={heroStyles.statLabel}>SERIES</div>
                </div>
                <div style={heroStyles.stat}>
                  <div style={heroStyles.statNum}>3.2k</div>
                  <div style={heroStyles.statLabel}>READERS</div>
                </div>
              </div>

              <div style={heroStyles.links}>
                <a href="#" style={heroStyles.socialBtn}>
                  <span style={{opacity:0.6}}>@</span> minato.log
                </a>
                <a href="#" style={heroStyles.socialBtn}>
                  <span style={{opacity:0.6}}>✱</span> Bluesky
                </a>
                <a href="#" style={heroStyles.socialBtn}>
                  <span style={{opacity:0.6}}>◧</span> GitHub
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Topic chips */}
        <div className="anim d5" style={heroStyles.meta}>
          <span style={heroStyles.chip}>TOPIC · ENGINEERING</span>
          <span style={heroStyles.chip}>TOPIC · LITERATURE</span>
          <span style={heroStyles.chip}>TOPIC · TRAVEL</span>
          <span style={heroStyles.chip}>TOPIC · DESIGN</span>
          <span style={heroStyles.chip}>LANG · JA / EN</span>
          <span style={heroStyles.chip}>LAST UPDATE · 2026.04.22</span>
        </div>

      </div>
    </section>
  );
}

window.Hero = Hero;