// wire-shared.jsx — common low-fi primitives for all wireframe variants
// Sketchy paper aesthetic: monochrome ink, pink CTA accent only, gold for authority.

const ink = '#1a1a1a';
const dim = '#6b6b6b';
const fade = '#bdbdbd';
const paper = '#faf8f3';
const pink = '#e6196b';
const gold = '#b8923f';

// Wobble: slight rotation for hand-drawn feel
const wob = (n = 0) => ({ transform: `rotate(${n}deg)` });

// Section label (top-left of each section)
function SectionTag({ n, title, wall }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'baseline', gap: 10,
      fontFamily: "'Caveat', cursive", color: dim, fontSize: 18,
      borderLeft: `3px solid ${ink}`, paddingLeft: 10, marginBottom: 18,
    }}>
      <span style={{ color: ink, fontWeight: 700, letterSpacing: '.02em' }}>S{n}</span>
      <span style={{ fontFamily: "'Zen Kurenaido', sans-serif", fontSize: 15, color: ink }}>{title}</span>
      {wall && <span style={{
        marginLeft: 6, fontSize: 12, color: dim, fontStyle: 'italic',
        border: `1px solid ${fade}`, padding: '2px 8px', borderRadius: 999,
      }}>{wall}の壁</span>}
    </div>
  );
}

// Photo placeholder — diagonal stripes with cross + monospace caption
function Photo({ w = '100%', h = 200, label = 'photo', tilt = 0, ratio, dark }) {
  const bg = dark ? '#222' : '#ece8df';
  const stroke = dark ? '#444' : '#cfc9b8';
  const fg = dark ? '#e8e3d4' : '#3a3a3a';
  const style = {
    width: w, height: ratio ? undefined : h,
    aspectRatio: ratio, background: bg,
    backgroundImage:
      `repeating-linear-gradient(135deg, ${stroke} 0 1px, transparent 1px 14px)`,
    border: `1.5px solid ${dark ? '#2a2a2a' : ink}`,
    position: 'relative', display: 'flex',
    alignItems: 'center', justifyContent: 'center',
    ...wob(tilt),
  };
  return (
    <div style={style}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: .25 }}>
        <line x1="0" y1="0" x2="100" y2="100" stroke={stroke} strokeWidth=".5" />
        <line x1="100" y1="0" x2="0" y2="100" stroke={stroke} strokeWidth=".5" />
      </svg>
      <span style={{
        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
        fontSize: 11, color: fg, letterSpacing: '.05em',
        background: dark ? 'rgba(0,0,0,.4)' : 'rgba(250,248,243,.85)',
        padding: '4px 10px', border: `1px dashed ${stroke}`, zIndex: 1,
      }}>{label}</span>
    </div>
  );
}

// Text-line placeholder — for body copy mock
function Lines({ count = 3, width = '100%', last = '70%', gap = 9, c }) {
  const col = c || dim;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap }}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} style={{
          height: 8, background: col, opacity: .35, borderRadius: 2,
          width: i === count - 1 ? last : width,
        }} />
      ))}
    </div>
  );
}

// Heading placeholder — real text in handwritten font (so wireframe reads)
function H({ children, size = 28, c, weight = 700, lh = 1.4, tilt, font }) {
  return (
    <div style={{
      fontFamily: font || "'Zen Kurenaido', sans-serif",
      fontSize: size, fontWeight: weight, color: c || ink, lineHeight: lh,
      letterSpacing: '.02em', ...wob(tilt || 0),
    }}>{children}</div>
  );
}

// Small caption (handwritten English / Roman)
function Cap({ children, c, size = 13 }) {
  return (
    <div style={{
      fontFamily: "'Caveat', cursive",
      fontSize: size, color: c || dim, letterSpacing: '.02em',
    }}>{children}</div>
  );
}

// CTA button — pink, the only saturated color used in wireframes
function CTA({ label = '予約・問い合わせはLINEから', size = 'lg', tilt = 0, variant }) {
  const big = size === 'lg';
  const isGhost = variant === 'ghost';
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: big ? '16px 28px' : '12px 20px',
      background: isGhost ? 'transparent' : pink,
      color: isGhost ? pink : 'white',
      border: `2px ${isGhost ? 'dashed' : 'solid'} ${pink}`,
      borderRadius: 4, fontFamily: "'Zen Kurenaido', sans-serif",
      fontSize: big ? 16 : 14, fontWeight: 700, letterSpacing: '.05em',
      boxShadow: isGhost ? 'none' : `3px 3px 0 ${ink}`,
      ...wob(tilt),
    }}>
      <span style={{
        width: 14, height: 14, border: `1.5px solid ${isGhost ? pink : 'white'}`,
        borderRadius: 2, display: 'inline-block',
      }} />
      {label}
    </div>
  );
}

// Authority badge — gold thin frame
function Authority({ children, tilt = 0 }) {
  return (
    <div style={{
      display: 'inline-block', padding: '6px 14px',
      border: `1px solid ${gold}`, color: gold,
      fontFamily: "'Zen Kurenaido', sans-serif", fontSize: 12,
      letterSpacing: '.1em', ...wob(tilt),
    }}>{children}</div>
  );
}

// Sticky annotation note — visible when annotations are on
function Note({ children, side = 'right', top, bottom, tilt = -1.5, w = 200 }) {
  const pos = side === 'right'
    ? { right: -w - 16, top: top ?? 12 }
    : { left: -w - 16, top: top ?? 12 };
  return (
    <div className="wf-note" style={{
      position: 'absolute', width: w, ...pos,
      background: '#fff6c2', border: `1px solid ${ink}`,
      padding: '10px 12px', fontFamily: "'Zen Kurenaido', sans-serif",
      fontSize: 13, color: ink, lineHeight: 1.5,
      boxShadow: `2px 2px 0 ${ink}`,
      ...wob(tilt),
    }}>
      <div style={{
        fontFamily: "'Caveat', cursive", fontSize: 13, color: pink,
        marginBottom: 4, fontWeight: 700,
      }}>note</div>
      {children}
    </div>
  );
}

// Section wrapper — provides a tag, spacing, optional notes
function Section({ tag, children, pad = 56, bg, dashed, note }) {
  return (
    <section style={{
      position: 'relative',
      padding: `${pad}px 56px`,
      background: bg || 'transparent',
      borderTop: dashed ? `1.5px dashed ${fade}` : 'none',
    }}>
      {tag}
      {children}
      {note}
    </section>
  );
}

// Connector arrow (down)
function ArrowDown({ tilt = 0 }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0', ...wob(tilt) }}>
      <svg width="22" height="34" viewBox="0 0 22 34">
        <path d="M11 2 L11 28 M4 22 L11 30 L18 22" stroke={ink} strokeWidth="1.5"
          fill="none" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

// Horizontal scribble divider
function Scribble({ w = 60, c }) {
  return (
    <svg width={w} height="10" viewBox={`0 0 ${w} 10`} style={{ display: 'block', margin: '4px 0' }}>
      <path d={`M2 5 Q ${w * 0.2} 1, ${w * 0.4} 5 T ${w * 0.8} 5 T ${w - 2} 5`}
        stroke={c || ink} fill="none" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}

// Frame — phone frame for SP variant
function Frame({ children, kind = 'desktop' }) {
  if (kind === 'mobile') {
    return (
      <div style={{
        width: 390, margin: '0 auto', background: paper,
        border: `2px solid ${ink}`, borderRadius: 28, overflow: 'hidden',
        boxShadow: `6px 6px 0 ${ink}`,
      }}>
        <div style={{
          height: 24, background: ink, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{ width: 70, height: 6, background: '#3a3a3a', borderRadius: 999 }} />
        </div>
        {children}
      </div>
    );
  }
  return (
    <div style={{
      width: '100%', maxWidth: 1180, margin: '0 auto', background: paper,
      border: `2px solid ${ink}`, boxShadow: `8px 8px 0 ${ink}`,
    }}>
      {/* Browser chrome */}
      <div style={{
        height: 32, background: '#ece8df', borderBottom: `1.5px solid ${ink}`,
        display: 'flex', alignItems: 'center', padding: '0 12px', gap: 6,
      }}>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#d05a5a' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#d4b048' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#7aa969' }} />
        <div style={{
          marginLeft: 16, padding: '3px 12px', background: paper,
          border: `1px solid ${ink}`, borderRadius: 4,
          fontFamily: "'Caveat', cursive", fontSize: 13, color: dim,
        }}>[サイトURL]</div>
      </div>
      {children}
    </div>
  );
}

// Cushion (S0) — now a SEPARATE PAGE (18+ Cushion.html).
// In the wireframe doc this renders as a reference card pointing to the separate file.
function Cushion({ tilt = -0.4 }) {
  return (
    <Section pad={56}>
      <SectionTag n="0" title="18歳以上クッションページ — 別ファイル" />
      <a href="18+ Cushion.html" target="_blank" rel="noopener" style={{
        display: 'block', textDecoration: 'none',
        border: `1.5px dashed ${ink}`, padding: 24,
        background: '#fff', maxWidth: 640, margin: '0 auto',
        boxShadow: `4px 4px 0 ${ink}`, ...wob(tilt), color: ink,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          {/* mini thumbnail */}
          <div style={{
            width: 120, height: 80, background: '#0a0a0a',
            border: `1.5px solid ${ink}`, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexDirection: 'column', gap: 6,
          }}>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              color: gold, fontSize: 8, letterSpacing: '.3em',
            }}>FOR ADULTS</div>
            <div style={{ display: 'flex', gap: 4, marginTop: 2 }}>
              <span style={{ width: 32, height: 10, background: pink, display: 'inline-block' }} />
              <span style={{ width: 32, height: 10, border: `1px solid #666`, display: 'inline-block' }} />
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <Cap c={pink} size={16}>→ 別ページ参照</Cap>
            <H size={18} tilt={0}>18歳以上 確認ページ</H>
            <div style={{
              fontFamily: "'Zen Kurenaido', sans-serif", fontSize: 12,
              color: dim, lineHeight: 1.8, marginTop: 6,
            }}>
              ・LP本体とは独立した1ページ<br/>
              ・「はい」→ Top Page (このLP)へ遷移<br/>
              ・「いいえ」→ ブラウザバック (history.back)
            </div>
          </div>
          <div style={{
            fontFamily: "'Caveat', cursive", fontSize: 26,
            color: pink, paddingRight: 8,
          }}>↗</div>
        </div>
      </a>
    </Section>
  );
}

Object.assign(window, {
  // tokens
  WF: { ink, dim, fade, paper, pink, gold },
  // primitives
  SectionTag, Photo, Lines, H, Cap, CTA, Authority, Note,
  Section, ArrowDown, Scribble, Frame, Cushion,
});