// Shared wireframe primitives for concion.io landing page explorations
// Mid-fi: cream bg, gray boxes, dashed borders, striped placeholders

const C = {
  cream: '#F4EEE0',
  creamDeep: '#EDE4D0',
  creamLight: '#FAF5EA',
  ink: '#1A1815',
  inkSoft: '#4A4640',
  inkMute: '#8A8378',
  line: '#D4C9B3',
  lineSoft: '#E3D8C1',
  terracotta: '#E85D3A',
  terracottaSoft: '#F4B8A5',
  navy: '#2B4B7C',
  navySoft: '#A8B5CC',
  glass: 'rgba(255, 250, 238, 0.55)',
  glassLine: 'rgba(26, 24, 21, 0.08)',
};

// Striped placeholder — use instead of drawing SVG imagery
const Placeholder = ({ label, h = 200, w = '100%', tone = 'ink', style = {} }) => {
  const stripeColor = tone === 'terracotta' ? C.terracotta : tone === 'navy' ? C.navy : C.inkMute;
  return (
    <div style={{
      width: w, height: h,
      background: `repeating-linear-gradient(135deg, ${C.creamDeep} 0 8px, ${C.cream} 8px 16px)`,
      border: `1px solid ${C.line}`,
      borderRadius: 12,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
      fontSize: 11, color: stripeColor, letterSpacing: '0.08em', textTransform: 'uppercase',
      ...style,
    }}>
      {label}
    </div>
  );
};

// Dashed box — "content TBD"
const Dashed = ({ children, h, style = {} }) => (
  <div style={{
    border: `1.5px dashed ${C.line}`,
    borderRadius: 10,
    padding: 16,
    height: h,
    color: C.inkSoft,
    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
    fontSize: 11, letterSpacing: '0.04em',
    ...style,
  }}>
    {children}
  </div>
);

// Glass panel — subtle frosted. Forwards data-* / aria-* / id so responsive
// CSS (e.g. [data-email-card], [data-pricing]) can match the rendered div.
const Glass = ({ children, style = {}, strong = false, ...rest }) => (
  <div
    {...rest}
    style={{
      background: strong ? 'rgba(255, 250, 238, 0.75)' : C.glass,
      backdropFilter: 'blur(20px) saturate(1.2)',
      WebkitBackdropFilter: 'blur(20px) saturate(1.2)',
      border: `1px solid ${C.glassLine}`,
      borderRadius: 16,
      boxShadow: '0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(26,24,21,0.04)',
      ...style,
    }}
  >
    {children}
  </div>
);

// Waveform — animated-looking bars with optional progress + live animation
const Waveform = ({ bars = 32, height = 40, color = C.ink, active = false, progress = null }) => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    let raf; let last = performance.now();
    const loop = (now) => {
      if (now - last > 80) { setTick(t => t + 1); last = now; }
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [active]);

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 3, height, width: '100%' }}>
      {Array.from({ length: bars }).map((_, i) => {
        const baseH = active
          ? 18 + 70 * Math.abs(Math.sin((i + tick) * 0.45) * Math.cos((i + tick * 0.3) * 0.3))
          : 18 + 55 * Math.abs(Math.sin(i * 0.7));
        const pos = (i + 0.5) / bars;
        const passed = progress != null && pos <= progress;
        const isPlayhead = progress != null && Math.abs(pos - progress) < (1 / bars);
        let opacity = 0.85;
        if (progress != null) opacity = passed ? 0.95 : 0.25;
        if (isPlayhead) opacity = 1;
        return (
          <div key={i} style={{
            flex: 1,
            height: `${baseH}%`,
            background: color,
            borderRadius: 2,
            opacity,
            transition: progress != null ? 'opacity 0.1s' : undefined,
          }} />
        );
      })}
    </div>
  );
};

// Liquid blob background element
const Blob = ({ size = 400, color = C.terracotta, opacity = 0.18, style = {} }) => (
  <div style={{
    position: 'absolute',
    width: size, height: size,
    borderRadius: '50%',
    background: `radial-gradient(circle at 35% 35%, ${color} 0%, transparent 65%)`,
    opacity,
    filter: 'blur(40px)',
    pointerEvents: 'none',
    ...style,
  }} />
);

// Button — filled. Supports onClick or href. Defaults to opening the lead form.
const Btn = ({ children, variant = 'primary', size = 'md', style = {}, onClick, href, target, rel }) => {
  const sizes = {
    sm: { padding: '8px 16px', fontSize: 13 },
    md: { padding: '12px 22px', fontSize: 14 },
    lg: { padding: '16px 28px', fontSize: 15 },
  };
  const variants = {
    primary: { background: C.ink, color: C.cream, border: `1px solid ${C.ink}` },
    accent: { background: C.terracotta, color: C.cream, border: `1px solid ${C.terracotta}` },
    ghost: { background: 'transparent', color: C.ink, border: `1px solid ${C.line}` },
    glass: {
      background: 'rgba(255, 250, 238, 0.6)',
      backdropFilter: 'blur(16px)',
      WebkitBackdropFilter: 'blur(16px)',
      color: C.ink,
      border: `1px solid ${C.glassLine}`,
    },
  };
  const baseStyle = {
    ...sizes[size], ...variants[variant],
    fontFamily: 'Inter, sans-serif',
    fontWeight: 500,
    borderRadius: 999,
    cursor: 'pointer',
    letterSpacing: '-0.01em',
    textDecoration: 'none',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    ...style,
  };
  const lf = (typeof window !== 'undefined' && window.useLeadForm) ? window.useLeadForm() : null;
  const handleClick = onClick || (href ? undefined : (lf ? lf.open : undefined));
  if (href) {
    return <a href={href} target={target} rel={rel} style={baseStyle}>{children}</a>;
  }
  return <button style={baseStyle} onClick={handleClick}>{children}</button>;
};

// Logo wordmark — Inclamo brand SVG
const Logo = ({ color = C.ink, height = 32 }) => (
  <img
    src="inclamo_logo.svg"
    alt="Inclamo"
    style={{
      height,
      width: 'auto',
      display: 'block',
      // Invert to cream when used on dark surfaces
      filter: color === C.cream ? 'brightness(0) invert(1)' : 'none',
    }}
  />
);

// Nav bar (shared)
const Nav = ({ glass = false }) => (
  <div style={{
    position: 'sticky', top: 0, zIndex: 10,
    padding: '14px 24px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: 16,
    background: glass ? 'rgba(244, 238, 224, 0.7)' : C.cream,
    backdropFilter: glass ? 'blur(20px)' : 'none',
    WebkitBackdropFilter: glass ? 'blur(20px)' : 'none',
    borderBottom: glass ? `1px solid ${C.glassLine}` : 'none',
  }}>
    <Logo height={22} />
    <div
      data-nav-links
      style={{
        display: 'flex', gap: 24,
        fontFamily: 'Inter, sans-serif', fontSize: 14, color: C.inkSoft,
      }}
    >
      <a href="#how-it-works" style={{ color: 'inherit', textDecoration: 'none' }}>How it works</a>
      <a href="#roadmap" style={{ color: 'inherit', textDecoration: 'none' }}>Roadmap</a>
      <a href="#pricing" style={{ color: 'inherit', textDecoration: 'none' }}>Pricing</a>
      <a href="#faq" style={{ color: 'inherit', textDecoration: 'none' }}>FAQ</a>
    </div>
    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
      <Btn variant="primary" size="sm">Talk to us</Btn>
    </div>
  </div>
);

// Section label (tiny caps)
const Eyebrow = ({ children, color = C.terracotta }) => (
  <div style={{
    fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
    fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
    color, marginBottom: 16,
  }}>
    {children}
  </div>
);

// Display heading (Instrument Serif). Forwards data-* / aria-* / id so the
// responsive CSS (e.g. [data-h-xl]) can match the rendered element.
const H = ({ children, size = 64, style = {}, ...rest }) => (
  <h2
    {...rest}
    style={{
      fontFamily: '"Instrument Serif", serif',
      fontSize: size, lineHeight: 1.02, letterSpacing: '-0.02em',
      color: C.ink, margin: 0, fontWeight: 400,
      ...style,
    }}
  >
    {children}
  </h2>
);

// Body text
const P = ({ children, style = {} }) => (
  <p style={{
    fontFamily: 'Inter, sans-serif',
    fontSize: 16, lineHeight: 1.55, color: C.inkSoft, margin: 0,
    ...style,
  }}>
    {children}
  </p>
);

// Phone-style mock frame
const PhoneMock = ({ children, w = 280, h = 560 }) => (
  <div style={{
    width: w, height: h,
    background: C.creamLight,
    border: `1px solid ${C.line}`,
    borderRadius: 36,
    padding: 14,
    boxShadow: '0 40px 80px -30px rgba(26,24,21,0.18), 0 8px 24px rgba(26,24,21,0.06)',
    position: 'relative',
  }}>
    <div style={{
      width: '100%', height: '100%',
      background: C.cream,
      borderRadius: 24,
      overflow: 'hidden',
      position: 'relative',
    }}>
      {children}
    </div>
  </div>
);

// ——— Install widget ———
// Self-serve Shopify install: takes a shop subdomain, redirects to OAuth.
// During private beta, only whitelisted dev stores succeed; others see a
// clear Shopify-hosted error and can fall back to "Talk to us".
const APP_INSTALL_URL = 'https://concion-admin-app-598953519915.europe-west4.run.app/auth/login';

const sanitizeShop = (v) => String(v || '').toLowerCase().trim()
  .replace(/^https?:\/\//, '')
  .replace(/\.myshopify\.com.*$/, '')
  .replace(/[^a-z0-9-]/g, '');

const InstallWidget = ({ size = 'md', tone = 'light' }) => {
  const [shop, setShop] = React.useState('');
  const [err, setErr] = React.useState('');
  const submit = (e) => {
    e.preventDefault();
    const s = sanitizeShop(shop);
    if (!s) { setErr('Type your store name'); return; }
    setErr('');
    const url = `${APP_INSTALL_URL}?shop=${s}.myshopify.com`;
    window.open(url, '_blank', 'noopener,noreferrer');
  };
  const dark = tone === 'dark';
  const sizes = {
    sm: { pad: '7px 12px', fs: 13, btnPad: '8px 16px', btnFs: 13 },
    md: { pad: '11px 14px', fs: 15, btnPad: '12px 22px', btnFs: 14 },
    lg: { pad: '14px 16px', fs: 16, btnPad: '16px 26px', btnFs: 15 },
  };
  const z = sizes[size];
  return (
    <form onSubmit={submit} data-install-widget style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{
        display: 'flex', alignItems: 'stretch', gap: 0,
        background: dark ? 'rgba(255,255,255,0.04)' : C.cream,
        border: `1px solid ${dark ? 'rgba(255,255,255,0.16)' : C.lineSoft}`,
        borderRadius: 999,
        padding: 4,
        maxWidth: 480,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 0, flex: 1,
          paddingLeft: 12,
        }}>
          <input
            value={shop}
            onChange={(e) => { setShop(e.target.value); if (err) setErr(''); }}
            placeholder="your-store"
            aria-label="Your Shopify store name"
            autoComplete="off"
            spellCheck={false}
            style={{
              flex: 1, minWidth: 60,
              border: 'none', outline: 'none',
              background: 'transparent',
              fontFamily: 'Inter, sans-serif', fontSize: z.fs,
              color: dark ? C.cream : C.ink,
              padding: z.pad,
            }}
          />
          <span style={{
            fontFamily: 'ui-monospace, monospace', fontSize: z.fs - 2,
            color: dark ? 'rgba(244,238,224,0.55)' : C.inkMute,
            paddingRight: 8, whiteSpace: 'nowrap',
          }}>.myshopify.com</span>
        </div>
        <button type="submit" style={{
          padding: z.btnPad,
          background: C.ink, color: C.cream,
          border: 'none', borderRadius: 999,
          fontFamily: 'Inter, sans-serif', fontSize: z.btnFs, fontWeight: 500,
          cursor: 'pointer', letterSpacing: '-0.01em',
          whiteSpace: 'nowrap',
        }}>Install →</button>
      </div>
      {err && (
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.terracotta, paddingLeft: 14 }}>{err}</div>
      )}
    </form>
  );
};

// Integration chip
const Chip = ({ label, glass = false }) => (
  <div style={{
    padding: '10px 16px',
    background: glass ? 'rgba(255,250,238,0.6)' : C.creamLight,
    backdropFilter: glass ? 'blur(14px)' : 'none',
    WebkitBackdropFilter: glass ? 'blur(14px)' : 'none',
    border: `1px solid ${glass ? C.glassLine : C.lineSoft}`,
    borderRadius: 999,
    fontFamily: 'Inter, sans-serif', fontSize: 13, color: C.ink,
    display: 'flex', alignItems: 'center', gap: 8,
  }}>
    <div style={{ width: 16, height: 16, background: C.inkMute, borderRadius: 4 }} />
    {label}
  </div>
);

// Footer
const Footer = () => (
  <footer
    data-footer
    style={{
      padding: '64px 48px 40px',
      borderTop: `1px solid ${C.lineSoft}`,
      display: 'grid',
      gridTemplateColumns: '2fr 1fr 1fr',
      gap: 48,
      color: C.inkSoft,
      fontFamily: 'Inter, sans-serif', fontSize: 14,
    }}
  >
    <div data-footer-brand>
      <Logo height={22} />
      <P style={{ marginTop: 16, fontSize: 14, maxWidth: 320 }}>
        AI voice agent for Shopify stores. Auto-syncs your store's knowledge, summarizes every call, captures callbacks.
      </P>
      <div style={{ marginTop: 18, fontSize: 13, color: C.inkMute, lineHeight: 1.7 }}>
        <div style={{ color: C.ink, fontWeight: 500 }}>Aceverse LLC</div>
        <a href="mailto:hi@aceverse.co" style={{ color: C.inkSoft, textDecoration: 'none' }}>hi@aceverse.co</a>
      </div>
    </div>

    <div>
      <div style={{ color: C.ink, marginBottom: 16, fontWeight: 500 }}>Product</div>
      <div style={{ marginBottom: 8 }}><a href="#how-it-works" style={{ color: 'inherit', textDecoration: 'none' }}>How it works</a></div>
      <div style={{ marginBottom: 8 }}><a href="#roadmap" style={{ color: 'inherit', textDecoration: 'none' }}>Roadmap</a></div>
      <div style={{ marginBottom: 8 }}><a href="#pricing" style={{ color: 'inherit', textDecoration: 'none' }}>Pricing</a></div>
      <div style={{ marginBottom: 8 }}><a href="#faq" style={{ color: 'inherit', textDecoration: 'none' }}>FAQ</a></div>
    </div>

    <div>
      <div style={{ color: C.ink, marginBottom: 16, fontWeight: 500 }}>Contact</div>
      <div style={{ marginBottom: 8 }}><a href="mailto:hi@aceverse.co" style={{ color: 'inherit', textDecoration: 'none' }}>hi@aceverse.co</a></div>
      <div style={{ marginBottom: 8 }}><a href="https://www.linkedin.com/in/roman-poliashenko/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>LinkedIn</a></div>
      <div style={{ marginBottom: 8 }}><a href="https://aceverse.co" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>aceverse.co</a></div>
    </div>
  </footer>
);

Object.assign(window, {
  C, Placeholder, Dashed, Glass, Waveform, Blob, Btn, Logo, Nav, Eyebrow, H, P, PhoneMock, Chip, Footer,
  InstallWidget,
});