// shared.jsx — common components used across all 3 variations

/* ---------- Photo placeholder / real image ---------- */
const Photo = ({ label, tone = 'default', style, children, src, alt = '', objectPosition = 'center' }) => {
  // When a real image src is provided, render it full-bleed inside the frame.
  if (src) {
    return (
      <div className="photo-ph has-img" style={{ position: 'relative', overflow: 'hidden', ...style }}>
        <img
          src={src}
          alt={alt}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition, display: 'block' }}
        />
        {children}
      </div>
    );
  }
  const cls = 'photo-ph' + (tone !== 'default' ? ' ' + tone : '');
  return (
    <div className={cls} style={style}>
      {label && <span className="photo-ph__label">{label}</span>}
      {children}
    </div>
  );
};

/* ---------- Logo (image) ---------- */
const LogoMark = ({ size = 56, bg = 'transparent' }) => (
  <div
    style={{
      width: size,
      height: size,
      background: bg,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
    }}
  >
    <img src="assets/logo.png" alt="SARABASE.estate" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
  </div>
);

/* ---------- Text logo (clean type-only) ---------- */
const TextLogo = ({ color = 'var(--ink)', size = 22 }) => (
  <div
    style={{
      fontFamily: 'var(--serif-en)',
      fontSize: size,
      letterSpacing: '0.08em',
      color,
      fontWeight: 500,
      lineHeight: 1,
    }}
  >
    SARABASE<span style={{ opacity: 0.5 }}>.</span>estate
  </div>
);

/* ---------- Responsive breakpoint hook ----------
   desktop > 1024px,  tablet 641–1024px,  mobile ≤ 640px  */
const useBreakpoint = () => {
  const get = () => {
    if (typeof window === 'undefined') return 'desktop';
    const w = window.innerWidth;
    return w <= 640 ? 'mobile' : w <= 1024 ? 'tablet' : 'desktop';
  };
  const [bp, setBp] = React.useState(get);
  React.useEffect(() => {
    const on = () => setBp(get());
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return bp;
};
// pick a value by breakpoint; falls back desktop→tablet→mobile when undefined
const pick = (bp, d, t, m) =>
  bp === 'mobile' ? (m !== undefined ? m : (t !== undefined ? t : d))
  : bp === 'tablet' ? (t !== undefined ? t : d)
  : d;

/* ---------- Navigation bar (responsive: hamburger ≤1024px) ---------- */
const NavBar = ({ variant = 'light', items = ['MISSION', 'ABOUT', 'PROFILE', 'VOICE', 'CONTACT'] }) => {
  const isDark = variant === 'dark';
  const bp = useBreakpoint();
  const isDesktop = bp === 'desktop';
  const [open, setOpen] = React.useState(false);
  const fg = isDark ? 'var(--warm-white)' : 'var(--ink)';

  // Lock body scroll while the overlay is open
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <header
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 60,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: isDesktop ? '26px 56px' : '18px 24px',
        color: '#fff',
        background: 'linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.14) 55%, rgba(0,0,0,0) 100%)',
      }}
    >
      <a href="#" aria-label="SARABASE.estate" style={{ display: 'flex', alignItems: 'center' }}>
        <img
          src="assets/logo-header-v2.png"
          alt="SARABASE.estate"
          style={{ height: isDesktop ? 72 : 52, width: 'auto', display: 'block' }}
        />
      </a>

      {isDesktop ? (
        <React.Fragment>
          <nav style={{ display: 'flex', gap: 36, fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.16em' }}>
            {items.map(i => (
              <a key={i} href={'#' + i.toLowerCase()} className="nav-link" style={{ color: '#fff' }}>{i}</a>
            ))}
          </nav>
          <div style={{ width: 140 }}></div>
        </React.Fragment>
      ) : (
        <button
          aria-label="メニュー"
          onClick={() => setOpen(true)}
          style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            width: 40, height: 40, display: 'flex', flexDirection: 'column',
            justifyContent: 'center', alignItems: 'flex-end', gap: 6, padding: 0,
          }}
        >
          <span style={{ width: 26, height: 1.5, background: '#fff', display: 'block' }}></span>
          <span style={{ width: 26, height: 1.5, background: '#fff', display: 'block' }}></span>
          <span style={{ width: 18, height: 1.5, background: '#fff', display: 'block' }}></span>
        </button>
      )}

      {/* Mobile / tablet overlay menu */}
      {!isDesktop && (
        <div
          style={{
            position: 'fixed', inset: 0, zIndex: 80,
            background: 'var(--ink)',
            color: 'var(--warm-white)',
            display: 'flex', flexDirection: 'column',
            padding: '28px 24px 48px',
            transform: open ? 'translateY(0)' : 'translateY(-100%)',
            opacity: open ? 1 : 0,
            pointerEvents: open ? 'auto' : 'none',
            transition: 'transform 0.45s cubic-bezier(0.5,0,0,1), opacity 0.3s ease',
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <TextLogo color="var(--warm-white)" size={18} />
            <button
              aria-label="閉じる"
              onClick={() => setOpen(false)}
              style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--warm-white)', fontSize: 28, lineHeight: 1, padding: 8 }}
            >×</button>
          </div>
          <nav style={{ marginTop: 56, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {items.map((i, idx) => (
              <a
                key={i}
                href={'#' + i.toLowerCase()}
                onClick={() => setOpen(false)}
                style={{
                  fontFamily: 'var(--serif-en)', fontSize: 34, color: 'var(--warm-white)',
                  padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.12)',
                  letterSpacing: '0.02em',
                }}
              >
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: 0.5, marginRight: 14 }}>0{idx + 1}</span>
                {i.charAt(0) + i.slice(1).toLowerCase()}
              </a>
            ))}
          </nav>
          <div style={{ marginTop: 'auto', paddingTop: 40 }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', opacity: 0.5, marginBottom: 14 }}>CONTACT</div>
            <a href="tel:0776433334" style={{ fontFamily: 'var(--serif-en)', fontSize: 26, color: 'var(--warm-white)', display: 'block' }}>0776-43-3334</a>
            <a href="mailto:info@sarabase-estate.jp" style={{ fontFamily: 'var(--sans-jp)', fontSize: 14, color: 'rgba(255,255,255,0.7)', display: 'block', marginTop: 10 }}>info@sarabase-estate.jp</a>
            <div style={{ marginTop: 24 }}>
              <SnsRow color="var(--warm-white)" size={20} />
            </div>
          </div>
        </div>
      )}
    </header>
  );
};

/* ---------- SNS icons row (Instagram / Mail / Tel) ---------- */
const SnsRow = ({ color = 'var(--ink)', size = 16 }) => {
  const ic = { width: size, height: size, fill: 'none', stroke: color, strokeWidth: 1.4 };
  return (
    <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
      {/* Instagram */}
      <a href="https://instagram.com/sarabase.estate" aria-label="Instagram" style={{ display: 'flex' }}>
        <svg viewBox="0 0 24 24" style={ic}>
          <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={color} stroke="none"/>
        </svg>
      </a>
      {/* Mail */}
      <a href="mailto:info@sarabase-estate.jp" aria-label="Mail" style={{ display: 'flex' }}>
        <svg viewBox="0 0 24 24" style={ic}>
          <rect x="3" y="5" width="18" height="14" rx="1"/>
          <path d="M3 7l9 6 9-6"/>
        </svg>
      </a>
      {/* Tel */}
      <a href="tel:0776433334" aria-label="Tel" style={{ display: 'flex' }}>
        <svg viewBox="0 0 24 24" style={ic}>
          <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
        </svg>
      </a>
    </div>
  );
};

/* ---------- Sketch property illustration (hand-drawn, Instagram-ish) ---------- */
const SKETCH_VARIANTS = [
  // 0 — 2LDK（縦割り：左にLDK、右に洋室＋水回り）
  (s) => (
    <g fill="none" stroke={s} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="14" y="12" width="92" height="72"/>
      <path d="M62 12 V84 M62 50 H106 M84 50 V84"/>
      <path d="M14 12 a14 14 0 0 1 14 14"/>
      <path d="M62 62 a10 10 0 0 1 10 -10"/>
      <rect x="90" y="16" width="12" height="10"/>
      <rect x="68" y="56" width="12" height="9"/>
    </g>
  ),
  // 1 — 3LDK（中央廊下＋3部屋）
  (s) => (
    <g fill="none" stroke={s} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="12" y="14" width="96" height="68"/>
      <path d="M12 48 H108 M48 14 V48 M78 14 V48 M60 48 V82"/>
      <path d="M30 48 a9 9 0 0 1 9 -9"/>
      <path d="M60 48 a9 9 0 0 1 9 9"/>
      <rect x="86" y="18" width="16" height="12"/>
    </g>
  ),
  // 2 — 1LDK（広いLDK＋小部屋）
  (s) => (
    <g fill="none" stroke={s} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="16" y="16" width="88" height="64"/>
      <path d="M74 16 V80 M74 48 H104"/>
      <path d="M74 60 a11 11 0 0 1 11 -11"/>
      <rect x="20" y="20" width="14" height="10"/>
      <circle cx="90" cy="64" r="6"/>
    </g>
  ),
  // 3 — 4LDK（田の字）
  (s) => (
    <g fill="none" stroke={s} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="14" y="12" width="92" height="72"/>
      <path d="M60 12 V84 M14 48 H106"/>
      <path d="M44 48 a9 9 0 0 1 9 -9 M60 60 a9 9 0 0 1 9 9"/>
      <rect x="86" y="16" width="16" height="11"/>
    </g>
  ),
  // 4 — LDK広々（リビング中心）
  (s) => (
    <g fill="none" stroke={s} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="14" y="18" width="94" height="60"/>
      <path d="M80 18 V78 M80 44 H108"/>
      <rect x="20" y="60" width="22" height="14"/>
      <path d="M80 56 a10 10 0 0 1 10 -10"/>
      <circle cx="95" cy="60" r="5"/>
    </g>
  ),
  // 5 — 2DK（コンパクト）
  (s) => (
    <g fill="none" stroke={s} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="20" y="16" width="80" height="64"/>
      <path d="M60 16 V80 M60 48 H100 M20 48 H60"/>
      <path d="M40 48 a8 8 0 0 1 8 -8 M60 56 a8 8 0 0 1 8 8"/>
      <rect x="84" y="20" width="12" height="9"/>
    </g>
  ),
];

const SketchCard = ({ index = 0, label, height = 200, width = 280 }) => {
  const draw = SKETCH_VARIANTS[index % SKETCH_VARIANTS.length];
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative',
      background: 'var(--warm-white)',
      border: '1px solid var(--line)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 18px 8px' }}>
        <svg viewBox="0 0 120 96" style={{ width: '90%', height: 'auto', maxHeight: '100%' }}>
          {draw('var(--pink-500)')}
        </svg>
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 14px 12px', fontFamily: 'var(--mono)', fontSize: 9,
        letterSpacing: '0.12em', color: 'var(--ink-mid)',
      }}>
        <span>{label}</span>
        <span style={{ opacity: 0.6 }}>SARABASE</span>
      </div>
    </div>
  );
};
const MiniMap = ({ height = 280 }) => (
  <div style={{ width: '100%', height, position: 'relative', overflow: 'hidden', background: '#e9eef0' }}>
    <iframe
      title="SARABASE.estate 地図"
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3225.889402337188!2d136.23197887580426!3d36.04740497247132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5ff8bd001da7ce9f%3A0x4acd153090fe88f1!2z5qCq5byP5Lya56S-Ti1MRVg!5e0!3m2!1sja!2sjp!4v1781344693267!5m2!1sja!2sjp"
      width="100%"
      height="100%"
      style={{ border: 0, display: 'block', filter: 'grayscale(0.15) contrast(1.02)' }}
      allowFullScreen=""
      loading="lazy"
      referrerPolicy="no-referrer-when-downgrade"
    ></iframe>
  </div>
);

/* ---------- Contact form (compact) ---------- */
const ContactForm = ({ accent = 'var(--ink)' }) => {
  const inputStyle = {
    width: '100%',
    padding: '14px 0',
    border: 'none',
    borderBottom: '1px solid var(--line-strong)',
    background: 'transparent',
    fontFamily: 'var(--sans-jp)',
    fontSize: 14,
    outline: 'none',
  };
  const labelStyle = {
    fontFamily: 'var(--mono)',
    fontSize: 10,
    letterSpacing: '0.18em',
    color: 'var(--ink-mid)',
    textTransform: 'uppercase',
    display: 'block',
    marginBottom: 6,
  };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 32px' }}>
      <div>
        <label style={labelStyle}>お名前 / NAME</label>
        <input style={inputStyle} placeholder="山田 美咲" />
      </div>
      <div>
        <label style={labelStyle}>連絡先 / TEL</label>
        <input style={inputStyle} placeholder="090-0000-0000" />
      </div>
      <div style={{ gridColumn: 'span 2' }}>
        <label style={labelStyle}>メール / EMAIL</label>
        <input style={inputStyle} placeholder="example@mail.com" />
      </div>
      <div style={{ gridColumn: 'span 2' }}>
        <label style={labelStyle}>ご相談内容 / MESSAGE</label>
        <textarea style={{ ...inputStyle, resize: 'none', minHeight: 80 }} placeholder="売却を検討しています。一度お話を伺いたいです。" />
      </div>
      <div style={{ gridColumn: 'span 2', marginTop: 8 }}>
        <button
          className="btn-primary"
          style={{ background: accent, width: '100%', justifyContent: 'center' }}
        >
          送信する <span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
};

/* ---------- Footer (shared) ---------- */
const Footer = ({ variant = 'light' }) => {
  const isDark = variant === 'dark';
  const bp = useBreakpoint();
  const bg = isDark ? 'var(--ink)' : 'var(--cream)';
  const fg = isDark ? 'var(--warm-white)' : 'var(--ink)';
  const fgLow = isDark ? 'rgba(255,255,255,0.5)' : 'var(--ink-mid)';
  const cols = pick(bp, '2fr 1fr 1.4fr', '1fr 1fr', '1fr');
  return (
    <footer style={{ background: bg, color: fg, padding: pick(bp, '72px 80px 32px', '56px 48px 28px', '48px 24px 24px') }}>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: pick(bp, 48, 40, 32), marginBottom: pick(bp, 56, 44, 36) }}>
        <div>
          <LogoMark size={92} />
          <p style={{ marginTop: 20, fontSize: 12, color: fgLow, lineHeight: 1.9, fontFamily: 'var(--sans-jp)' }}>
            手放す想いと、はじまる未来をつなぐ。<br />
            やさしい不動産売買のサービスです。
          </p>
          <div style={{ marginTop: 24 }}>
            <SnsRow color={fg} size={18} />
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', color: fgLow, marginBottom: 14 }}>MENU</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontFamily: 'var(--sans-jp)', fontSize: 13, lineHeight: 2.2 }}>
            <li><a href="#mission" className="nav-link" style={{ color: fg }}>Mission</a></li>
            <li><a href="#about" className="nav-link" style={{ color: fg }}>About</a></li>
            <li><a href="#profile" className="nav-link" style={{ color: fg }}>Profile</a></li>
            <li><a href="#consultation" className="nav-link" style={{ color: fg }}>Consultation</a></li>
            <li><a href="#voice" className="nav-link" style={{ color: fg }}>Voice</a></li>
            <li><a href="#contact" className="nav-link" style={{ color: fg }}>Contact</a></li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', color: fgLow, marginBottom: 14 }}>CONTACT</div>
          <div style={{ fontFamily: 'var(--sans-jp)', fontSize: 13, lineHeight: 2 }}>
            年中無休（臨時休業あり）<br />
            10:00 – 18:00<br />
            <span style={{ color: fgLow, fontSize: 11 }}>TEL. 0776-43-3334 ／ FAX. 0776-34-1233</span>
          </div>
        </div>
      </div>
      <hr style={{ border: 0, borderTop: '1px solid ' + (isDark ? 'rgba(255,255,255,0.1)' : 'var(--line)') }} />
      <div style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 8,
        justifyContent: 'space-between',
        marginTop: 24,
        fontFamily: 'var(--mono)',
        fontSize: 10,
        letterSpacing: '0.14em',
        color: fgLow,
      }}>
        <span>© 2026 SARABASE.estate / 宅地建物取引業免許番号 福井県知事 (1) 第1815号</span>
        <span>Privacy / Terms</span>
      </div>
    </footer>
  );
};

/* ---------- Section header with eyebrow + JP/EN title ---------- */
const SectionHead = ({ eyebrow, titleJp, titleEn, align = 'left', mb = 56, titleSize = 56 }) => (
  <div style={{ textAlign: align, marginBottom: mb }}>
    {eyebrow && <div className="eyebrow" style={{ marginBottom: 16 }}>{eyebrow}</div>}
    {titleEn && (
      <div style={{
        fontFamily: 'var(--display)',
        fontSize: titleSize,
        lineHeight: 1,
        marginBottom: 14,
        letterSpacing: '0.01em',
      }}>
        {titleEn}
      </div>
    )}
    {titleJp && (
      <div style={{ fontFamily: 'var(--serif-jp)', fontSize: 20, fontWeight: 500, color: 'var(--ink-soft)' }}>
        {titleJp}
      </div>
    )}
  </div>
);

/* ---------- Testimonial data ---------- */
const TESTIMONIALS = [
  {
    name: 'T.K 様',
    age: '50代女性',
    type: 'マンション売却',
    quote: '亡き母の家を手放す決断には時間がかかりました。川崎さんは何度も話を聞いてくださり、私のペースで進めてくださったので、安心して任せられました。',
  },
  {
    name: 'M.S 様',
    age: '40代ご夫婦',
    type: '戸建て住み替え',
    quote: '他社では数字の話ばかりでしたが、SARABASEさんは「どう暮らしたいか」から一緒に考えてくれて、心から納得して住み替えできました。',
  },
  {
    name: 'A.Y 様',
    age: '60代女性',
    type: '実家の売却',
    quote: '不動産屋さんって少し怖いイメージがありましたが、川崎さんは本当に親しみやすくて。最初の相談から契約まで、ずっと心強かったです。',
  },
];

/* ---------- Stats data ---------- */
const STATS = [
  { num: '120+',  unit: '件',  label: '売買サポート実績' },
  { num: '98',    unit: '%',  label: 'お客様満足度' },
  { num: '15',   unit: '年',  label: '不動産業界経験' },
  { num: '4.9',   unit: '/5',  label: 'お客様評価' },
];

/* ---------- Strengths data ---------- */
const STRENGTHS = [
  { num: '01', title: '話しやすさ', body: '専門用語をかみ砕いて、対等な目線で。気兼ねなく相談していただける関係を大切にしています。' },
  { num: '02', title: '丁寧な説明', body: 'なぜその提案なのか、メリットもデメリットも、納得いただけるまでご説明します。' },
  { num: '03', title: '押しつけない姿勢', body: '決めるのはお客様。私たちは選択肢を整理し、判断のサポートをするだけです。' },
  { num: '04', title: '暮らし目線', body: '価格だけでなく、その先の暮らしを一緒に思い描きながらアドバイスします。' },
];

/* ---------- Scroll Reveal (IntersectionObserver) ---------- */
const Reveal = ({ children, delay = 0, variant = '', as: As = 'div', style, ...rest }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // If already in view at mount (top of page), trigger immediately
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          el.classList.add('is-in');
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const cls = 'reveal' + (variant ? ' reveal-' + variant : '');
  return (
    <As ref={ref} className={cls} style={{ transitionDelay: `${delay}ms`, ...style }} {...rest}>
      {children}
    </As>
  );
};

/* ---------- Side Rail (fixed SNS bar) ---------- */
const SideRail = () => (
  <aside className="side-rail" aria-label="SNS Links">
    <div className="side-rail__label">FOLLOW</div>
    <div className="side-rail__divider"></div>
    <a className="side-rail__icon" data-label="Instagram" href="https://instagram.com/sarabase.estate" aria-label="Instagram">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <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>
    </a>
    <a className="side-rail__icon" data-label="Mail" href="mailto:info@sarabase-estate.jp" aria-label="Mail">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <rect x="3" y="5" width="18" height="14" rx="1"/>
        <path d="M3 7l9 6 9-6"/>
      </svg>
    </a>
    <a className="side-rail__icon" data-label="Tel" href="tel:0776433334" aria-label="Tel">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
      </svg>
    </a>
    <div className="side-rail__divider"></div>
    <div className="side-rail__label">SARABASE</div>
  </aside>
);

/* ---------- Hero crossfade slideshow (3 images, gentle Ken Burns) ---------- */
const HeroSlideshow = ({ images = [], interval = 5000 }) => {
  const [state, setState] = React.useState({ idx: 0, prev: -1 });
  const go = (next) => setState(s => ({ idx: next, prev: s.idx }));
  React.useEffect(() => {
    if (images.length <= 1) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    const t = setInterval(() => {
      setState(s => ({ idx: (s.idx + 1) % images.length, prev: s.idx }));
    }, interval);
    return () => clearInterval(t);
  }, [images.length, interval]);
  const { idx, prev } = state;
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      {images.map((im, i) => (
        <div
          key={i}
          className={'hero-slide' + (i === idx ? ' is-active' : (i === prev ? ' is-prev' : ''))}
          style={{ backgroundImage: `url(${im.src})`, backgroundPosition: im.pos || 'center center' }}
          role="img"
          aria-label={im.alt || ''}
        />
      ))}
      <div style={{ position: 'absolute', right: 28, bottom: 28, display: 'flex', gap: 9, zIndex: 5 }}>
        {images.map((_, i) => (
          <button
            key={i}
            aria-label={'写真 ' + (i + 1)}
            onClick={() => go(i)}
            style={{
              width: i === idx ? 26 : 9, height: 9, padding: 0, border: 'none', cursor: 'pointer',
              borderRadius: 9, background: i === idx ? '#fff' : 'rgba(255,255,255,0.5)',
              transition: 'width 0.5s cubic-bezier(.2,.7,.2,1), background 0.4s ease',
            }}
          ></button>
        ))}
      </div>
    </div>
  );
};

/* ---------- Marquee Strip (flowing horizontal images) ---------- */
const MarqueeStrip = ({ direction = 'left', items = 6, tone = 'warm', height = 200, width = 280, speed = 'normal', labels }) => {
  const bp = useBreakpoint();
  // shrink cards on smaller screens
  const w = pick(bp, width, Math.round(width * 0.82), Math.round(width * 0.62));
  const h = pick(bp, height, Math.round(height * 0.82), Math.round(height * 0.62));
  // Duplicate items so the loop is seamless (track translates -50%)
  const arr = [...Array(items)].map((_, i) => i);
  const cls = 'marquee' + (direction === 'right' ? ' marquee--right' : '') + (speed === 'slow' ? ' marquee--slow' : '');
  const defaultLabels = [
    '2LDK ・ 角部屋', '3LDK ・ 南向き', '1LDK ・ コンパクト', 'LDK ・ 広々',
    '4LDK ・ 戸建て', '2DK ・ リノベ', '3LDK ・ 中庭', 'LDK ・ 吹抜け',
  ];
  const ls = labels || defaultLabels;
  return (
    <div className={cls}>
      <div className="marquee__track">
        {[...arr, ...arr].map((_, i) => (
          <div key={i} className="marquee__item" style={{ width: w, height: h }}>
            <SketchCard index={i} label={ls[i % ls.length]} height={h} width={w} />
          </div>
        ))}
      </div>
    </div>
  );
};

// Export to global scope so other Babel scripts can use them
Object.assign(window, {
  Photo, LogoMark, TextLogo, NavBar, SnsRow, MiniMap,
  ContactForm, Footer, SectionHead,
  Reveal, SideRail, MarqueeStrip, SketchCard, HeroSlideshow,
  useBreakpoint, pick,
  TESTIMONIALS, STATS, STRENGTHS,
});
