// Shared primitives: icons, LINE CTA, placeholder image, section wrapper
// Pure presentational — theme tokens come from CSS variables defined per-variant.

const { useState, useEffect, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// Icons — hand-drawn monoline, 1.5 stroke. No icon libraries.
// ─────────────────────────────────────────────────────────────
const Ic = {
  Line: ({ s = 20 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M12 3c-5.52 0-10 3.6-10 8.04 0 3.97 3.58 7.3 8.41 7.93.33.07.78.22.89.5.1.25.06.65.03.91l-.14.86c-.04.25-.2.99.87.54 1.07-.45 5.77-3.4 7.87-5.82 1.45-1.59 2.07-3.2 2.07-4.92C22 6.6 17.52 3 12 3z"/>
    </svg>
  ),
  Arrow: ({ s = 16 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  Spark: ({ s = 20 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6"/>
    </svg>
  ),
  Check: ({ s = 16 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M4 12l5 5L20 6"/>
    </svg>
  ),
  Plus: ({ s = 16 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden>
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  Minus: ({ s = 16 }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden>
      <path d="M5 12h14"/>
    </svg>
  ),
};

// ─────────────────────────────────────────────────────────────
// Placeholder — striped panel with monospace hint
// ─────────────────────────────────────────────────────────────
function Placeholder({ label, ratio = '4/3', tone = 'light', style = {} }) {
  const lightStripe = 'repeating-linear-gradient(135deg, var(--ph-1) 0 14px, var(--ph-2) 14px 28px)';
  return (
    <div
      style={{
        aspectRatio: ratio,
        width: '100%',
        background: lightStripe,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'var(--ph-text)',
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 11,
        letterSpacing: 0.5,
        textTransform: 'uppercase',
        position: 'relative',
        ...style,
      }}
    >
      <span style={{ background: 'var(--bg)', padding: '4px 10px' }}>{label}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LINE CTA — primary button
// ─────────────────────────────────────────────────────────────
function LineCTA({ label = 'LINEで無料相談を始める', size = 'md', variant = 'primary' }) {
  const LINE_URL = 'https://line.me/R/ti/p/@555dmxsh';
  const sz = {
    sm: { padding: '10px 18px', fontSize: 14 },
    md: { padding: '16px 28px', fontSize: 15 },
    lg: { padding: '20px 36px', fontSize: 16 },
  }[size];

  const isPrimary = variant === 'primary';
  const bg = isPrimary ? 'var(--accent)' : 'transparent';
  const color = isPrimary ? 'var(--accent-on)' : 'var(--fg)';
  const border = isPrimary ? 'none' : '1px solid var(--hairline)';

  return (
    <a
      href={LINE_URL}
      target="_blank"
      rel="noopener"
      style={{
        ...sz,
        background: bg,
        color,
        border,
        borderRadius: 'var(--radius-btn)',
        fontWeight: 600,
        fontFamily: 'inherit',
        cursor: 'pointer',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        letterSpacing: 0.2,
        textDecoration: 'none',
        transition: 'transform .15s ease, opacity .15s ease, background .2s ease',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.9'; }}
      onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
    >
      <Ic.Line s={18} />
      <span>{label}</span>
      <Ic.Arrow s={14} />
    </a>
  );
}

// ─────────────────────────────────────────────────────────────
// Section wrapper — centered max-width, label tag optional
// ─────────────────────────────────────────────────────────────
function Section({ id, eyebrow, children, style = {}, inner = {}, bleed = false }) {
  return (
    <section id={id} style={{ padding: bleed ? '0' : 'var(--section-pad) 0', ...style }}>
      <div style={{
        maxWidth: 1200,
        margin: '0 auto',
        padding: '0 clamp(20px, 4vw, 48px)',
        ...inner,
      }}>
        {eyebrow && (
          <div style={{
            fontSize: 12,
            letterSpacing: 2,
            textTransform: 'uppercase',
            color: 'var(--muted)',
            marginBottom: 20,
            fontFamily: 'var(--font-mono)',
          }}>
            {eyebrow}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ accordion item
// ─────────────────────────────────────────────────────────────
function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderTop: '1px solid var(--hairline)' }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%',
          padding: '24px 0',
          background: 'transparent',
          border: 'none',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 16,
          textAlign: 'left',
          cursor: 'pointer',
          color: 'var(--fg)',
          fontFamily: 'inherit',
          fontSize: 16,
          fontWeight: 500,
        }}
      >
        <span style={{ flex: 1 }}>{q}</span>
        <span style={{
          width: 28, height: 28, borderRadius: '50%',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          border: '1px solid var(--hairline)',
          color: 'var(--fg)',
          flexShrink: 0,
        }}>
          {open ? <Ic.Minus s={14} /> : <Ic.Plus s={14} />}
        </span>
      </button>
      <div style={{
        maxHeight: open ? 320 : 0,
        overflow: 'hidden',
        transition: 'max-height .3s ease',
      }}>
        <div style={{
          paddingBottom: 24,
          color: 'var(--muted)',
          fontSize: 15,
          lineHeight: 1.8,
          maxWidth: 720,
        }}>
          {typeof a === 'string' && a.includes('<')
            ? <div dangerouslySetInnerHTML={{ __html: a }} />
            : a}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Ic, Placeholder, LineCTA, Section, FAQItem });