/* global React, SectionLabel, PrimaryButton, SecondaryButton, Ornament */
const { useState } = React;

// ============================================================
// ACCESS — address, hours, map placeholder
// ============================================================
function AccessSection() {
  return (
    <section id="access" data-screen-label="05 access" style={{
      padding: '160px 56px',
      background: 'var(--sonon-bg-2)',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <SectionLabel
          kicker="access"
          title="how to find us."
          jp="アクセス"
        />

        <div style={{
          marginTop: 96,
          display: 'grid', gridTemplateColumns: '6fr 6fr', gap: 0,
          background: '#FFFFFF',
          border: '1px solid var(--border-soft)',
          borderRadius: 4,
          overflow: 'hidden',
        }}>
          {/* Google Map */}
          <div style={{
            position: 'relative',
            minHeight: 480,
            borderRight: '1px solid var(--border-soft)',
            background: '#EDE7DE',
          }}>
            <iframe
              title="sonon · 大阪府池田市槻木町1-8-A"
              src="https://maps.google.com/maps?q=%E5%A4%A7%E9%98%AA%E5%BA%9C%E6%B1%A0%E7%94%B0%E5%B8%82%E6%A7%BB%E6%9C%A8%E7%94%BA1-8-A&output=embed"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                border: 0,
                filter: 'grayscale(0.25) contrast(0.96) saturate(0.85)',
              }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
            {/* corner label */}
            <div style={{
              position: 'absolute', bottom: 16, left: 16,
              padding: '6px 12px',
              background: 'rgba(245,242,238,0.92)',
              backdropFilter: 'blur(6px)',
              WebkitBackdropFilter: 'blur(6px)',
              fontFamily: 'var(--font-sans)', fontSize: 9,
              letterSpacing: '0.4em', textTransform: 'uppercase',
              color: 'var(--fg2)',
              border: '1px solid var(--border-soft)',
              borderRadius: 2,
              pointerEvents: 'none',
            }}>— ikeda · osaka</div>
          </div>

          {/* Info */}
          <div style={{
            padding: '56px 56px',
            display: 'flex', flexDirection: 'column', gap: 36,
          }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 10,
                letterSpacing: '0.32em', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 12,
              }}>address · 住所</div>
              <div style={{
                fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.9,
                letterSpacing: '0.12em', color: 'var(--fg1)', fontWeight: 400,
              }}>
                〒 563-0024<br />
                大阪府池田市槻木町 1-8-A<br />
                VIEVLE IKEDA 1階
              </div>
            </div>

            <div style={{ height: 1, background: 'var(--border-soft)' }} />

            <div>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 10,
                letterSpacing: '0.32em', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 12,
              }}>by train · 電車でお越しの方</div>
              <div style={{
                fontFamily: 'var(--font-serif)', fontSize: 15, lineHeight: 1.95,
                letterSpacing: '0.08em', color: 'var(--fg2)',
              }}>
                阪急宝塚線「池田」駅より徒歩5分<br />
                <span style={{ color: 'var(--fg3)', fontSize: 13 }}>5 min walk from Hankyu Ikeda station</span>
              </div>
            </div>

            <div style={{ height: 1, background: 'var(--border-soft)' }} />

            <div>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 10,
                letterSpacing: '0.32em', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 12,
              }}>hours · 営業時間</div>
              <div style={{
                display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '6px 24px',
                fontFamily: 'var(--font-serif)', fontSize: 14,
                letterSpacing: '0.08em', color: 'var(--fg2)',
              }}>
                <span style={{ color: 'var(--fg3)' }}>open</span><span>10:00 — 19:00</span>
                <span style={{ color: 'var(--fg3)' }}>closed</span><span>不定休</span>
                <span style={{ color: 'var(--fg3)' }}>parking</span><span>近隣コインパーキングあり（16台）</span>
                <span style={{ color: 'var(--fg3)' }}>system</span><span>完全予約制</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// RESERVE FORM
// ============================================================
// ============================================================
// RESERVE — flow + cancel policy (form removed)
// ============================================================
function ReserveSection() {
  const steps = [
    {
      n: '01',
      en: 'reserve',
      jp: 'ご予約',
      body: '下のボタンより、\nご希望の日時・メニューを\nお選びください。',
    },
    {
      n: '02',
      en: 'confirmation',
      jp: '確認のご連絡',
      body: 'ご予約後、48時間以内に\nサロンよりご連絡いたします。',
    },
    {
      n: '03',
      en: 'visit',
      jp: 'ご来店',
      body: '当日はカウンセリングから\n丁寧にスタートします。',
    },
  ];

  const policy = [
    {
      key: 'fee',
      label: 'キャンセル料について',
      en: 'cancellation fee',
      items: [
        ['前日18時まで', 'キャンセル料なし'],
        ['前日18時以降〜当日', '施術料金の30%'],
        ['無断キャンセル', '施術料金の100%'],
      ],
    },
    {
      key: 'late',
      label: '遅刻について',
      en: 'late arrival',
      list: [
        '15分以上遅れる場合は必ずご連絡ください',
        '遅刻の場合、施術内容を一部短縮させていただく場合がございます',
        '30分以上の遅刻はキャンセル扱いとなる場合がございます',
      ],
    },
    {
      key: 'contact',
      label: 'キャンセルのご連絡方法',
      en: 'how to contact',
      body: '公式LINE にてご連絡ください。営業時間外のキャンセルも、公式LINEよりお手続きをお願いいたします。',
      line: 'https://lin.ee/QutNisQ',
    },
    {
      key: 'special',
      label: 'やむを得ない事情について',
      en: 'special circumstances',
      body: '体調不良・急病・冠婚葬祭など、やむを得ない事情によるキャンセルにつきましては、個別にご相談ください。',
    },
  ];

  const [open, setOpen] = useState('fee');
  const toggle = (k) => setOpen(open === k ? null : k);

  return (
    <section id="reserve" data-screen-label="06 reserve" style={{
      padding: '160px 56px',
      background: 'var(--sonon-bg)',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <SectionLabel
          kicker="reservation"
          title="reserve a visit."
          jp="ご予約について"
        />

        {/* ─────────── flow ─────────── */}
        <div style={{
          marginTop: 96,
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontSize: 14, letterSpacing: '0.1em', color: 'var(--sonon-gold)',
          justifyContent: 'center', marginBottom: 48,
        }}>
          <span style={{ width: 24, height: 1, background: 'var(--sonon-gold-soft)' }} />
          ご予約の流れ
          <span style={{ width: 24, height: 1, background: 'var(--sonon-gold-soft)' }} />
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
          position: 'relative',
        }}>
          {/* connecting hairline */}
          <div style={{
            position: 'absolute', top: 36, left: '16%', right: '16%',
            height: 1, background: 'var(--sonon-gold-soft)', zIndex: 0,
          }} />
          {steps.map((s) => (
            <div key={s.n} style={{
              position: 'relative', zIndex: 1,
              background: 'var(--sonon-bg)',
              padding: '0 16px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
            }}>
              <div style={{
                width: 72, height: 72, borderRadius: '50%',
                background: '#FFFFFF',
                border: '1px solid var(--sonon-gold-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 28,
              }}>
                <span style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 22, color: 'var(--sonon-gold-deep)', letterSpacing: '0.04em',
                }}>{s.n}</span>
              </div>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 10,
                letterSpacing: '0.36em', textTransform: 'uppercase',
                color: 'var(--sonon-gold-deep)', marginBottom: 10,
              }}>{s.en}</div>
              <div style={{
                fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 300,
                letterSpacing: '0.16em', color: 'var(--sonon-ink)', marginBottom: 18,
              }}>{s.jp}</div>
              <p style={{
                fontFamily: 'var(--font-serif)', fontSize: 13, lineHeight: 2,
                letterSpacing: '0.06em', color: 'var(--fg2)', margin: 0,
                maxWidth: 260,
              }}>{s.body.split('\n').map((line, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <br />}
                  {line}
                </React.Fragment>
              ))}</p>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{
          marginTop: 96, display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 16,
        }}>
          <a href="#" style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            background: 'var(--sonon-brown)', color: '#FFFFFF',
            padding: '20px 56px', borderRadius: 2, textDecoration: 'none',
            fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
            fontFamily: 'var(--font-sans)',
            transition: 'background 200ms var(--ease-out)',
          }}
            onMouseOver={(e) => e.currentTarget.style.background = 'var(--sonon-brown-500)'}
            onMouseOut={(e) => e.currentTarget.style.background = 'var(--sonon-brown)'}
          >
            ご予約はこちら
            <span style={{
              width: 1, height: 12, background: 'rgba(245,242,238,0.4)',
            }} />
            reserve a visit
          </a>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 12, color: 'var(--fg3)', letterSpacing: '0.06em',
          }}>※ ご予約は外部予約ページに移動します</div>
        </div>

        {/* ─────────── policy ─────────── */}
        <div style={{
          marginTop: 140,
          paddingTop: 80,
          borderTop: '1px solid var(--border-soft)',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 14, letterSpacing: '0.1em', color: 'var(--sonon-gold)',
            justifyContent: 'center', marginBottom: 28,
          }}>
            <span style={{ width: 24, height: 1, background: 'var(--sonon-gold-soft)' }} />
            ご予約・キャンセルについて
            <span style={{ width: 24, height: 1, background: 'var(--sonon-gold-soft)' }} />
          </div>

          <p style={{
            textAlign: 'center', maxWidth: 720, margin: '0 auto 56px',
            fontFamily: 'var(--font-serif)', fontSize: 14, lineHeight: 2.1,
            letterSpacing: '0.08em', color: 'var(--fg2)',
          }}>
            sononはすべて<span style={{ color: 'var(--sonon-brown)', borderBottom: '1px solid var(--sonon-gold-soft)', paddingBottom: 1 }}>完全予約制</span>となっております。<br />
            ご予約のお客様に最高の施術をご提供するため、<br />
            以下のキャンセルポリシーをご確認のうえご予約ください。
          </p>

          {/* accordion */}
          <div style={{
            maxWidth: 820, margin: '0 auto',
            border: '1px solid var(--border-soft)',
            borderRadius: 4,
            background: '#FFFFFF',
          }}>
            {policy.map((p, i) => {
              const isOpen = open === p.key;
              return (
                <div key={p.key} style={{
                  borderTop: i === 0 ? 'none' : '1px solid var(--border-soft)',
                }}>
                  <button
                    onClick={() => toggle(p.key)}
                    style={{
                      width: '100%', textAlign: 'left',
                      padding: '28px 32px',
                      background: 'transparent', border: 0, cursor: 'pointer',
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
                      fontFamily: 'inherit',
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
                      <span style={{
                        fontFamily: 'var(--font-display)', fontStyle: 'italic',
                        fontSize: 13, color: 'var(--sonon-gold)', letterSpacing: '0.08em',
                      }}>0{i + 1}.</span>
                      <span style={{
                        fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 300,
                        letterSpacing: '0.14em', color: 'var(--sonon-ink)',
                      }}>{p.label}</span>
                      <span style={{
                        fontFamily: 'var(--font-sans)', fontSize: 9,
                        letterSpacing: '0.36em', textTransform: 'uppercase',
                        color: 'var(--fg4)',
                      }}>{p.en}</span>
                    </div>
                    <span style={{
                      width: 28, height: 28, borderRadius: '50%',
                      border: '1px solid var(--sonon-gold-soft)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0,
                      transition: 'transform 240ms var(--ease-out), background 200ms var(--ease-out)',
                      background: isOpen ? 'var(--sonon-bg-2)' : 'transparent',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    }}>
                      <span style={{ position: 'relative', width: 10, height: 10 }}>
                        <span style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'var(--sonon-brown)' }} />
                        <span style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'var(--sonon-brown)' }} />
                      </span>
                    </span>
                  </button>

                  <div style={{
                    maxHeight: isOpen ? 600 : 0,
                    overflow: 'hidden',
                    transition: 'max-height 360ms var(--ease-out)',
                  }}>
                    <div style={{ padding: '4px 32px 32px 32px' }}>
                      {p.items && (
                        <div style={{
                          display: 'flex', flexDirection: 'column',
                          border: '1px solid var(--sonon-gold-soft)',
                          borderRadius: 4,
                          background: 'var(--sonon-bg-2)',
                        }}>
                          {p.items.map(([k, v], idx) => (
                            <div key={k} style={{
                              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                              padding: '16px 24px', gap: 16,
                              borderTop: idx === 0 ? 'none' : '1px dashed var(--sonon-gold-soft)',
                            }}>
                              <span style={{
                                fontFamily: 'var(--font-serif)', fontSize: 13,
                                letterSpacing: '0.08em', color: 'var(--fg1)',
                              }}>{k}</span>
                              <span style={{
                                fontFamily: 'var(--font-display)', fontSize: 16, fontStyle: 'italic',
                                color: 'var(--sonon-brown)', letterSpacing: '0.04em',
                                whiteSpace: 'nowrap',
                              }}>{v}</span>
                            </div>
                          ))}
                        </div>
                      )}
                      {p.list && (
                        <ul style={{
                          margin: 0, padding: 0, listStyle: 'none',
                          display: 'flex', flexDirection: 'column', gap: 12,
                        }}>
                          {p.list.map((it, idx) => (
                            <li key={idx} style={{
                              display: 'flex', gap: 14, alignItems: 'flex-start',
                              fontFamily: 'var(--font-serif)', fontSize: 13, lineHeight: 1.9,
                              letterSpacing: '0.06em', color: 'var(--fg2)',
                            }}>
                              <span style={{
                                width: 6, height: 6, borderRadius: '50%',
                                background: 'var(--sonon-gold)',
                                marginTop: 9, flexShrink: 0,
                              }} />
                              {it}
                            </li>
                          ))}
                        </ul>
                      )}
                      {p.body && (
                        <p style={{
                          margin: 0,
                          fontFamily: 'var(--font-serif)', fontSize: 13, lineHeight: 2,
                          letterSpacing: '0.06em', color: 'var(--fg2)',
                        }}>
                          {p.body}
                          {p.line && (
                            <>
                              <br />
                              <a href={p.line} target="_blank" rel="noopener noreferrer" style={{
                                display: 'inline-flex', alignItems: 'center', gap: 8,
                                marginTop: 14,
                                fontFamily: 'var(--font-sans)', fontSize: 10,
                                letterSpacing: '0.32em', textTransform: 'uppercase',
                                color: 'var(--sonon-brown)',
                                borderBottom: '1px solid var(--sonon-gold-soft)',
                                paddingBottom: 4, textDecoration: 'none',
                              }}>
                                公式LINE で連絡する →
                              </a>
                            </>
                          )}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <p style={{
            textAlign: 'center', marginTop: 48,
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 12, color: 'var(--fg3)', letterSpacing: '0.08em', lineHeight: 1.9,
          }}>
            ご予約いただいた時点で、上記ポリシーにご同意いただいたものとみなします。
          </p>
        </div>
      </div>
    </section>
  );
}


// ============================================================
// FOOTER
// ============================================================
function FooterSection({ onReserve }) {
  return (
    <footer id="footer" data-screen-label="07 footer" style={{
      background: 'var(--sonon-dark-bg)', color: '#F5F2EE',
      padding: '120px 56px 48px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* warm wash */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(circle at 80% 20%, rgba(196,151,90,0.15), transparent 60%)',
      }} />

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
        {/* CTA bar */}
        <div style={{
          textAlign: 'center', paddingBottom: 96,
          borderBottom: '1px solid rgba(245,242,238,0.15)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32,
        }}>
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 11,
            letterSpacing: '0.4em', textTransform: 'uppercase',
            color: 'var(--sonon-gold-soft)',
          }}>— still here? —</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 300,
            letterSpacing: '0.04em', color: '#F5F2EE', margin: 0, lineHeight: 1.2,
          }}>
            <em style={{ fontStyle: 'italic' }}>let's begin —</em>
          </h2>
          <div style={{
            fontFamily: 'var(--font-serif)', fontSize: 14, letterSpacing: '0.2em',
            color: 'rgba(245,242,238,0.7)',
          }}>
            あなたに似合うを、見つけにきてください。
          </div>
          <button onClick={onReserve}
            style={{
              marginTop: 12,
              background: '#F5F2EE', color: 'var(--sonon-ink)',
              padding: '18px 56px', border: 0, borderRadius: 2,
              fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
              fontFamily: 'var(--font-sans)', cursor: 'pointer',
              transition: 'background 200ms var(--ease-out)',
            }}
            onMouseOver={(e) => e.currentTarget.style.background = '#FFFFFF'}
            onMouseOut={(e) => e.currentTarget.style.background = '#F5F2EE'}
          >ご予約はこちら · reserve a visit</button>
        </div>

        {/* Columns */}
        <div style={{
          padding: '80px 0',
          display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 56,
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <img src="assets/logo_white_yoko.png" alt="sonon"
                 style={{ height: 168, width: 'auto', alignSelf: 'flex-start', marginLeft: -8 }} />
            <p style={{
              fontFamily: 'var(--font-serif)', fontSize: 13, lineHeight: 2,
              color: 'rgba(245,242,238,0.7)', letterSpacing: '0.1em', margin: 0,
            }}>
              一人ひとりに丁寧に寄り添う、<br />
              まつ毛と眉毛のお店です。
            </p>
          </div>

          <FooterColumn label="navigate" items={[
            ['concept', 'concept'],
            ['menu', 'menu'],
            ['features', 'features'],
            ['access', 'access'],
            ['reserve', 'reserve'],
          ]} />

          <FooterColumn label="visit" customItems={[
            <span key="addr" style={footerLink}>大阪府池田市槻木町 1-8-A</span>,
            <span key="bld" style={footerLink}>VIEVLE IKEDA 1階</span>,
            <span key="stn" style={footerLink}>阪急池田駅 徒歩5分</span>,
            <span key="hr" style={footerLink}>10:00 — 19:00 · 不定休</span>,
            <span key="pk" style={footerLink}>近隣コインパーキングあり（16台）</span>,
          ]} />

          <div>
            <div style={{
              fontFamily: 'var(--font-sans)', fontSize: 10,
              letterSpacing: '0.32em', textTransform: 'uppercase',
              color: 'var(--sonon-gold-soft)', marginBottom: 22,
            }}>— follow</div>
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 10,
              alignItems: 'flex-start',
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                fontFamily: 'var(--font-sans)', fontSize: 9,
                letterSpacing: '0.32em', textTransform: 'uppercase',
                color: 'rgba(245,242,238,0.55)',
              }}>
                <SocialIcon kind="line" />
                <span>line</span>
              </div>
              <a href="https://lin.ee/QutNisQ" target="_blank" rel="noopener noreferrer"
                 style={{
                   display: 'inline-block',
                   background: '#FFFFFF', padding: 8, borderRadius: 4,
                   lineHeight: 0,
                 }}>
                <img src="assets/line_qr.png" alt="sonon LINE QR"
                     style={{ width: 140, height: 140, display: 'block' }} />
              </a>
              <span style={{
                fontFamily: 'var(--font-serif)', fontSize: 11,
                color: 'rgba(245,242,238,0.6)', letterSpacing: '0.08em',
              }}>QRコードから友だち追加</span>
            </div>
          </div>
        </div>

        {/* Big wordmark */}
        <div style={{
          paddingTop: 32, paddingBottom: 24,
          borderTop: '1px solid rgba(245,242,238,0.15)',
          display: 'flex', justifyContent: 'center',
        }}>
          <span style={{
            fontFamily: 'var(--font-display)', fontSize: 240, fontWeight: 300,
            letterSpacing: '0.06em', color: 'rgba(245,242,238,0.06)',
            lineHeight: 0.9, userSelect: 'none',
          }}>sonon</span>
        </div>

        {/* Legal */}
        <div style={{
          paddingTop: 24,
          borderTop: '1px solid rgba(245,242,238,0.15)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 10,
          color: 'rgba(245,242,238,0.45)', letterSpacing: '0.18em',
          flexWrap: 'wrap', gap: 16,
        }}>
          <span>© 2026 sonon. all rights reserved.</span>
          <span>ikeda · osaka · japan</span>
        </div>
      </div>
    </footer>
  );
}

const footerLink = {
  fontFamily: 'var(--font-serif)', fontSize: 13,
  color: 'rgba(245,242,238,0.85)', letterSpacing: '0.1em',
  cursor: 'pointer',
  transition: 'color 200ms var(--ease-out)',
};

function FooterColumn({ label, items, customItems }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 10,
        letterSpacing: '0.32em', textTransform: 'uppercase',
        color: 'var(--sonon-gold-soft)', marginBottom: 22,
      }}>— {label}</div>
      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        {customItems
          ? customItems.map((c, i) => <li key={i}>{c}</li>)
          : items.map(([id, label]) => (
              <li key={id}>
                <a href={`#${id}`}
                   style={{ ...footerLink, textDecoration: 'none', borderBottom: '1px solid transparent' }}
                   onMouseOver={(e) => e.currentTarget.style.color = '#F5F2EE'}
                   onMouseOut={(e) => e.currentTarget.style.color = 'rgba(245,242,238,0.85)'}
                >{label}</a>
              </li>
          ))}
      </ul>
    </div>
  );
}

function SocialIcon({ kind }) {
  const common = { width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'instagram') return (
    <svg viewBox="0 0 24 24" {...common}>
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none" />
    </svg>
  );
  if (kind === 'line') return (
    <svg viewBox="0 0 24 24" {...common}>
      <path d="M21 11c0 4.4-4 8-9 8a10 10 0 0 1-2.5-.3l-4 1.8.9-3.4A7.7 7.7 0 0 1 3 11c0-4.4 4-8 9-8s9 3.6 9 8z" />
    </svg>
  );
  if (kind === 'mail') return (
    <svg viewBox="0 0 24 24" {...common}>
      <rect x="3" y="5" width="18" height="14" rx="1.5" />
      <path d="M3 7l9 6 9-6" />
    </svg>
  );
  return null;
}

function SocialLink({ icon, label, handle }) {
  return (
    <a href="#" style={{
      ...footerLink, textDecoration: 'none', borderBottom: '1px solid transparent',
      display: 'flex', alignItems: 'center', gap: 12,
    }}
      onMouseOver={(e) => e.currentTarget.style.color = '#F5F2EE'}
      onMouseOut={(e) => e.currentTarget.style.color = 'rgba(245,242,238,0.85)'}>
      <SocialIcon kind={icon} />
      <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{
          fontFamily: 'var(--font-sans)', fontSize: 9,
          letterSpacing: '0.32em', textTransform: 'uppercase',
          color: 'rgba(245,242,238,0.55)',
        }}>{label}</span>
        <span style={{ fontFamily: 'var(--font-serif)', fontSize: 13 }}>{handle}</span>
      </span>
    </a>
  );
}

Object.assign(window, { AccessSection, ReserveSection, FooterSection });