const contactStyles = {
  wrap: { padding: '140px 0 120px', position:'relative' },
  eyebrow: {
    fontFamily:"'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 2,
    color:'#B49AFF'
  },
  grid: {
    marginTop: 20,
    display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 72, alignItems:'start'
  },
  h2: {
    fontFamily:"'Instrument Serif', serif", fontSize: 'clamp(56px, 7vw, 104px)',
    lineHeight: 0.95, letterSpacing: '-0.02em', margin: 0, fontWeight: 400
  },
  italic: { fontStyle:'italic', color:'#B49AFF' },

  lead: {
    marginTop: 28, fontSize: 16.5, lineHeight: 1.75, color:'#C8C0DC',
    maxWidth: 520
  },

  card: {
    position:'relative', overflow:'hidden',
    borderRadius: 22,
    padding: 40,
    background:
      'linear-gradient(180deg, rgba(139,92,246,0.18), rgba(29,23,41,0.9) 60%), linear-gradient(180deg, rgba(23,18,31,0.9), rgba(18,16,28,0.9))',
    border: '1px solid rgba(139,92,246,0.4)',
    boxShadow: '0 40px 120px -60px rgba(139,92,246,0.7)'
  },
  cardLabel: {
    fontFamily:"'JetBrains Mono', monospace", fontSize: 11,
    letterSpacing: 2, color:'#B49AFF',
    display:'inline-flex', alignItems:'center', gap:8
  },
  cardTitle: {
    fontFamily:"'Instrument Serif', serif", fontSize: 40, lineHeight:1.05,
    letterSpacing:'-0.01em', margin:'16px 0 8px', color:'#F5F1FF'
  },
  cardDesc: { fontSize: 14.5, color:'#C8C0DC', lineHeight: 1.7, margin: 0 },
  ctaRow: { marginTop: 28, display:'flex', gap: 12, flexWrap:'wrap' },
  primary: {
    display:'inline-flex', alignItems:'center', gap: 10,
    padding:'14px 20px', borderRadius: 999,
    background: 'linear-gradient(180deg, #B49AFF, #7C3AED)',
    color:'#fff', fontWeight:600, fontSize:14,
    boxShadow:'inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 30px -10px rgba(139,92,246,0.8)'
  },
  secondary: {
    display:'inline-flex', alignItems:'center', gap: 10,
    padding:'14px 20px', borderRadius: 999,
    border:'1px solid #38304A', color:'#F5F1FF', fontSize:14,
    background:'rgba(29,23,41,0.6)'
  },

  bigX: {
    position:'absolute', right: -80, bottom: -80,
    width: 260, height: 260, pointerEvents:'none',
    fontFamily:"'Instrument Serif', serif", fontStyle:'italic',
    fontSize: 400, color:'rgba(180,154,255,0.06)',
    lineHeight: 0.8, userSelect:'none'
  },

  previewStack: { display:'flex', flexDirection:'column', gap: 14 },
  row: {
    display:'flex', alignItems:'center', gap: 14,
    padding: '18px 20px', borderRadius: 14,
    border: '1px solid #2A2238', background: 'rgba(23,18,31,0.6)'
  },
  rowIcon: {
    width: 38, height: 38, borderRadius: 10,
    background: 'rgba(139,92,246,0.12)', border:'1px solid rgba(139,92,246,0.3)',
    display:'flex', alignItems:'center', justifyContent:'center',
    color:'#B49AFF', fontFamily:"'Instrument Serif', serif", fontSize: 18
  },
  rowTitle: { fontSize: 14, color:'#F5F1FF', fontWeight: 500 },
  rowSub: { fontSize: 12, color:'#A8A0BC', marginTop: 2 },
  rowArrow: { marginLeft:'auto', color:'#6E6782', fontSize: 18 },

  footer: {
    marginTop: 96,
    borderTop: '1px solid #2A2238',
    paddingTop: 28, display:'flex', justifyContent:'space-between', alignItems:'center',
    color:'#6E6782', fontSize: 12, fontFamily:"'JetBrains Mono', monospace", letterSpacing: 1
  }
};

function Contact(){
  const rows = [
    { icon:'✎', title:'寄稿・対談の相談',    sub:'media / publication inquiries' },
    { icon:'❦', title:'レビュー・批評依頼',  sub:'book · product reviews' },
    { icon:'☎', title:'登壇・インタビュー',  sub:'talks / interviews' },
  ];
  return (
    <section id="contact" style={contactStyles.wrap}>
      <div className="inner">
        <div style={contactStyles.eyebrow}>§ 03 — GET IN TOUCH</div>

        <div style={contactStyles.grid}>
          <div>
            <h2 style={contactStyles.h2}>
              言葉を<span style={contactStyles.italic}>交わす</span><br/>
              きっかけを、<br/>どうぞ。
            </h2>
            <p style={contactStyles.lead}>
              感想も、訂正も、お仕事のご相談も。
              一通の手紙のつもりで書いていただければ、同じ温度で返事をします。
              平日に確認し、遅くとも三日以内に返信します。
            </p>

            <div style={contactStyles.previewStack} aria-label="inquiry categories">
              {rows.map((r,i)=>(
                <a key={i} href="#form" style={contactStyles.row}>
                  <div style={contactStyles.rowIcon}>{r.icon}</div>
                  <div>
                    <div style={contactStyles.rowTitle}>{r.title}</div>
                    <div style={contactStyles.rowSub}>{r.sub}</div>
                  </div>
                  <div style={contactStyles.rowArrow}>→</div>
                </a>
              ))}
            </div>
          </div>

          <div>
            <div style={contactStyles.card}>
              <div style={contactStyles.cardLabel}>
                <span style={{width:6,height:6,borderRadius:999,background:'#B49AFF',boxShadow:'0 0 10px #B49AFF'}}/>
                CONTACT FORM
              </div>
              <h3 style={contactStyles.cardTitle}>お問い合わせ<br/>フォームへ。</h3>
              <p style={contactStyles.cardDesc}>
                フォームは別ページで開きます。返信用のメールアドレスと、お話の概要だけご記入ください。
              </p>
              <div style={contactStyles.ctaRow}>
                <a href="#form" style={contactStyles.primary}>
                  フォームを開く
                  <span>→</span>
                </a>
                <a href="mailto:minato@fieldnotes.log" style={contactStyles.secondary}>
                  minato@fieldnotes.log
                </a>
              </div>
              <div style={contactStyles.bigX}>✎</div>
            </div>

            <div style={{
              marginTop: 20, padding: 16, borderRadius: 12,
              border: '1px dashed #2A2238', color:'#A8A0BC',
              fontSize: 12.5, lineHeight: 1.7
            }}>
              <span style={{color:'#B49AFF', fontFamily:"'JetBrains Mono', monospace"}}>NOTE</span> —
              返信は湊本人が直接行います。定型文やテンプレートは使いません。
              お時間をいただく場合もありますが、必ずお返事します。
            </div>
          </div>
        </div>

        <div style={contactStyles.footer}>
          <div>© 2026 MINATO AIKAWA · FIELD NOTES</div>
          <div>BUILT WITH WORDS · HOSTED IN TOKYO</div>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;