// SKEight — shared visual primitives

// Brand mark: an original octagonal SK monogram. Eight sides for "eight".
// Two interior strokes form a stylised SK + an axial cross.
function SKMark({ size = 26, color = "currentColor" }) {
  const r = size / 2;
  // octagon points
  const pts = [];
  for (let i = 0; i < 8; i++) {
    const a = (Math.PI / 4) * i + Math.PI / 8;
    pts.push([r + r * Math.cos(a) * 0.95, r + r * Math.sin(a) * 0.95]);
  }
  const poly = pts.map(p => p.join(",")).join(" ");
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" aria-hidden="true">
      <polygon points={poly} stroke={color} strokeWidth="1.1" />
      {/* axial cross */}
      <line x1={r} y1={2} x2={r} y2={size - 2} stroke={color} strokeWidth="0.6" opacity="0.55" />
      <line x1={2} y1={r} x2={size - 2} y2={r} stroke={color} strokeWidth="0.6" opacity="0.55" />
      {/* center dot */}
      <circle cx={r} cy={r} r="1.6" fill={color} />
    </svg>
  );
}

// A small SVG icon for App Store apple
function AppleGlyph({ size = 22, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <path d="M16.4 12.6c0-2.5 2-3.7 2.1-3.8-1.2-1.7-2.9-1.9-3.6-2-1.5-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.3 1.9 2.6 3.3 2.6 1.3-.1 1.8-.9 3.3-.9 1.5 0 2 .9 3.3.8 1.4 0 2.3-1.3 3.1-2.5.7-1 1.2-2.1 1.5-3.3-1.4-.5-3-1.8-3-3.6zM14 5.8c.7-.8 1.2-2 1-3.2-1 .1-2.2.7-2.9 1.5-.7.7-1.3 1.9-1.1 3.1 1.1.1 2.3-.5 3-1.4z"/>
    </svg>
  );
}

// Decorative "bagua-inspired" eight-radial mark for hero (original, not the actual bagua)
function EightMark({ size = 200, color = "currentColor", opacity = 0.5 }) {
  const r = size / 2;
  const strokes = [];
  for (let i = 0; i < 8; i++) {
    const a = (Math.PI / 4) * i;
    const x1 = r + Math.cos(a) * r * 0.32;
    const y1 = r + Math.sin(a) * r * 0.32;
    const x2 = r + Math.cos(a) * r * 0.88;
    const y2 = r + Math.sin(a) * r * 0.88;
    strokes.push(
      <g key={i} opacity={opacity}>
        <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth="0.6" />
        <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth="0.6"
          transform={`rotate(8 ${x1} ${y1})`} opacity="0.4" />
      </g>
    );
  }
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" aria-hidden="true">
      <circle cx={r} cy={r} r={r - 2} stroke={color} strokeWidth="0.6" opacity={opacity * 0.6} />
      <circle cx={r} cy={r} r={r * 0.3} stroke={color} strokeWidth="0.6" opacity={opacity * 0.8} />
      {strokes}
      <circle cx={r} cy={r} r="2" fill={color} opacity={opacity} />
    </svg>
  );
}

// Footer + nav for static sub-pages can be rendered via this
function SiteNav({ active }) {
  const links = [
    { href: "index.html#features", label: "Features" },
    { href: "features.html", label: "Method", id: "features" },
    { href: "support.html", label: "Support", id: "support" },
    { href: "privacy.html", label: "Privacy", id: "privacy" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="brand">
          <span className="brand-mark"><img src="app-icon.png" alt="" /></span>
          <span>SKEight</span>
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.label} href={l.href} className={active === l.id ? "active" : ""}>{l.label}</a>
          ))}
        </div>
        <div className="nav-actions">
          <a href="zh-Hant/index.html" className="nav-lang">繁體中文</a>
          <a href="#download" className="btn btn-primary">
            <AppleGlyph size={14} color="#1a1208" /> App Store
          </a>
        </div>
      </div>
    </nav>
  );
}

function SiteFooter() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="brand" style={{ marginBottom: 16 }}>
              <span className="brand-mark"><img src="app-icon.png" alt="" /></span>
              <span>SKEight</span>
            </div>
            <p className="small" style={{ maxWidth: 320, margin: 0 }}>
              A Chinese metaphysics report app for understanding birth charts, Ming Yun, and daily rhythm.
            </p>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="index.html#features">Features</a></li>
              <li><a href="features.html">Method</a></li>
              <li><a href="index.html#download">App Store</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Support</h4>
            <ul>
              <li><a href="support.html">Help &amp; Contact</a></li>
              <li><a href="mailto:hello@skeight.xyz">hello@skeight.xyz</a></li>
              <li><a href="support.html#faq">Frequently asked</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="privacy.html">Privacy policy</a></li>
              <li><a href="terms.html">Terms of use</a></li>
              <li><a href="support.html#disclaimer">Disclaimer</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 SKEight. Independent studio.</span>
          <span>Chinese metaphysics, birth charts, and Ming Yun.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SKMark, AppleGlyph, EightMark, SiteNav, SiteFooter });