// Shared reusable bits for all wireframes
// Exports to window for cross-script use

const LoremLine = ({ w = "long", thin = false }) => (
  <span className={`lorem ${w} ${thin ? "thin" : ""}`} />
);

const Chip = ({ children, c = "" }) => (
  <span className={`chip ${c}`}>{children}</span>
);

const Note = ({ children, style }) => (
  <div className="note" style={style}>{children}</div>
);

// Arrow annotation pointing to a design feature
const ArrowNote = ({ text, x, y, dx = 60, dy = 20, color = "var(--accent-2)" }) => (
  <div className="arrow-note" style={{ left: x, top: y, color }}>
    <div style={{ maxWidth: 180, marginBottom: 2 }}>{text}</div>
    <svg width={dx + 20} height={Math.abs(dy) + 20} style={{ overflow: "visible" }}>
      <path
        d={`M 2,2 Q ${dx/2},${dy} ${dx},${dy}`}
        stroke={color} strokeWidth="1.5" fill="none"
        strokeDasharray="3 3"
      />
      <path d={`M ${dx-6},${dy-4} L ${dx},${dy} L ${dx-4},${dy+5}`}
        stroke={color} strokeWidth="1.5" fill="none" />
    </svg>
  </div>
);

// Browser frame wrapping each page mock
const BrowserFrame = ({ children, url = "algoviax.co.jp", style }) => (
  <div className="frame" style={style}>
    <div className="frame-bar">
      <span className="dot" style={{ background: "#ff5c3a" }} />
      <span className="dot" style={{ background: "#ffd84a" }} />
      <span className="dot" style={{ background: "#2fbf71" }} />
      <span className="url">{url}</span>
    </div>
    <div className="frame-body">{children}</div>
  </div>
);

// Section label in the corner of a page mock
const SectionTag = ({ children }) => (
  <span className="section-label">{children}</span>
);

// Header of each wireframe variant
const VariantHeader = ({ num, name, desc }) => (
  <div className="wf-header">
    <span className="num">#{num}</span>
    <span className="name">{name}</span>
    <span className="desc">— {desc}</span>
  </div>
);

// Tiny nav bar sketch
const NAV_HREFS = {
  "サービス": "Services.html",
  "Services": "Services.html",
  "導入事例": "Works.html",
  "Works": "Works.html",
  "会社概要": "Company.html",
  "Company": "Company.html",
  "ニュース": "News.html",
  "News": "News.html",
  "採用情報": "Careers.html",
  "Careers": "Careers.html",
  "Contact": "Contact.html",
};
// Hand-drawn Algoviax logo mark (matches the brand "A" but in our handdrawn tone)
const AlgoviaxLogo = ({ size = 30, textSize = 22, color = "var(--ink)" }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
    <svg viewBox="0 0 40 36" style={{ width: size, height: size * 0.9, flexShrink: 0 }} aria-hidden="true">
      {/* outer A — left stroke */}
      <path d="M 4 33 L 18 4 Q 20 0.5 22 4 L 36 33" stroke={color} strokeWidth="3.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      {/* inner A — small filled wedge */}
      <path d="M 13 26 L 20 11 L 27 26 Z" fill={color} stroke={color} strokeWidth="1.5" strokeLinejoin="round"/>
      {/* cross bar — slight wobble */}
      <path d="M 11 24 Q 20 22.5 29 24" stroke={color} strokeWidth="2.4" fill="none" strokeLinecap="round"/>
    </svg>
    <span style={{ fontFamily: "Caveat, cursive", fontWeight: 700, fontSize: textSize, color, letterSpacing: "0.01em", lineHeight: 1 }}>Algoviax</span>
  </span>
);

// Tiny nav bar sketch
const MockNav = ({ bg = "transparent", color = "var(--ink)", logo = "Algoviax", items = ["Services","Works","Company","News","Careers","Contact"], variant = "default" }) => (
  <div style={{
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "10px 20px", borderBottom: "2px solid var(--line)",
    background: bg, color,
  }}>
    <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", color: "inherit" }}>
      <AlgoviaxLogo size={26} textSize={20} color={color}/>
    </a>
    <div style={{ display: "flex", gap: 14, fontFamily: "JetBrains Mono, monospace", fontSize: 10 }}>
      {items.map(i => (
        <a key={i} href={NAV_HREFS[i] || "#"} style={{ color: "inherit", textDecoration: "none" }}>{i}</a>
      ))}
    </div>
    <a href="Contact.html" style={{
      border: `1.5px solid ${color}`, padding: "3px 10px", borderRadius: 16,
      fontFamily: "Caveat, cursive", fontSize: 14,
      background: variant === "filled" ? "var(--accent-3)" : "transparent",
      textDecoration: "none", color: "inherit",
    }}>Contact →</a>
  </div>
);

// Service list - 4 columns
const FourServices = ({ accent = "var(--accent-1)", style = "circle" }) => {
  const services = [
    { en: "FDE", jp: "常駐開発", d: "完全オーダーメイド" },
    { en: "RPA", jp: "業務自動化", d: "手作業を機械に" },
    { en: "AI", jp: "AI自動化", d: "判断を機械に" },
    { en: "CON", jp: "ITコンサル", d: "戦略〜伴走" },
  ];
  return services.map((s, i) => (
    <div key={i} className="wf-box" style={{ padding: 12, flex: 1 }}>
      <div className="ico" style={{ background: accent, color: "var(--paper)", marginBottom: 6 }}>
        {s.en}
      </div>
      <div className="hand" style={{ fontSize: 18, fontWeight: 700 }}>{s.jp}</div>
      <div className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>{s.d}</div>
      <LoremLine w="mid" thin />
      <LoremLine w="short" thin />
    </div>
  ));
};

Object.assign(window, {
  LoremLine, Chip, Note, ArrowNote, BrowserFrame, SectionTag,
  VariantHeader, MockNav, FourServices, AlgoviaxLogo,
});