// Shared chrome: nav, footer, primitives, CTA band.

const { useState: useStateS, useEffect: useEffectS } = React;

// Canonical app.sfuma.in URLs — the only place these are written out.
// Every CTA on the site links to one of these, in a new tab.
const appUrls = {
  signup: "https://app.sfuma.in/signup",
  login: "https://app.sfuma.in/signin",
  privacy: "https://app.sfuma.in/privacy",
  terms: "https://app.sfuma.in/terms",
  guide: "https://app.sfuma.in/guides/sfuma-api-keys-guide.pdf"
};

const colors = {
  primary: "#1D9E75",
  primarySoft: "#9FE1CB",
  primaryDeep: "#0F6E56",
  surface: "#FFFFFF",
  surface2: "#FAFAF8",
  hairline: "#D0D0D0",
  body: "#1A1A1A",
  muted: "#6B6B6B"
};

const fontStack =
'-apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif';

// ——— Primary teal button
function PrimaryButton({ children, onClick, size = "md", className = "", as = "button", href, type = "button", target, rel }) {
  const pad =
  size === "sm" ? "py-[8px] px-[16px] text-[13.5px]" :
  size === "md" ? "py-[12px] px-[22px] text-[14px]" :
  "py-[14px] px-[28px] text-[15px]";
  const cls =
  `inline-flex items-center justify-center gap-2 rounded-[12px] ` +
  `text-white font-medium transition-colors duration-150 ` +
  `${pad} ${className}`;
  const style = { background: colors.primary, fontWeight: 500, letterSpacing: "-0.005em" };
  const onMouseEnter = (e) => e.currentTarget.style.background = colors.primaryDeep;
  const onMouseLeave = (e) => e.currentTarget.style.background = colors.primary;
  if (as === "a") {
    return (
      <a href={href} target={target} rel={rel} className={cls} style={style} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
        {children}
      </a>);

  }
  return (
    <button type={type} onClick={onClick} className={cls} style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      {children}
    </button>);

}

// ——— Subtle teal text link
function TealLink({ children, onClick, href, className = "", target, rel }) {
  const cls = `inline-flex items-center gap-1.5 font-medium transition-opacity duration-150 ${className}`;
  const style = { color: colors.primary, fontWeight: 500 };
  return href ?
  <a className={cls} style={style} href={href} target={target} rel={rel} onClick={onClick}>
      {children}
    </a> :

  <button className={cls} style={style} onClick={onClick} type="button">
      {children}
    </button>;

}

// ——— Small teal-bordered pill
function Eyebrow({ children, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="inline-flex items-center gap-2 text-[12.5px] font-medium transition-colors"
      style={{
        color: colors.primaryDeep,
        background: "rgba(29,158,117,0.06)",
        border: `0.6px solid rgba(29,158,117,0.4)`,
        padding: "6px 14px",
        borderRadius: 999,
        letterSpacing: "-0.005em",
        fontWeight: 500
      }}>
      
      <span style={{ width: 6, height: 6, borderRadius: 999, background: colors.primary }} />
      {children}
    </button>);

}

// ——— Brand mark (icon) — color via prop, sized via size prop
function BrandMark({ size = 24, color = colors.primary, className = "", style }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 96 96"
      width={size}
      height={size}
      className={className}
      style={style}
      aria-label="Sfuma"
      role="img">
      
      <line x1="48" y1="28" x2="24" y2="72" stroke={color} strokeWidth="6" strokeLinecap="round" />
      <line x1="48" y1="28" x2="72" y2="72" stroke={color} strokeWidth="6" strokeLinecap="round" />
      <circle cx="48" cy="28" r="12" fill={color} />
      <circle cx="24" cy="72" r="9" fill={color} />
      <circle cx="72" cy="72" r="9" fill={color} />
    </svg>);

}

// ——— Brand lockup (icon + wordmark text inline)
function BrandLockup({ size = 22, mark = 22, gap = 10, markColor = colors.primary, textColor = colors.body }) {
  return (
    <span className="inline-flex items-center" style={{ gap }}>
      <BrandMark size={mark} color={markColor} />
      <span
        style={{
          fontSize: size,
          fontWeight: 500,
          letterSpacing: "-0.02em",
          color: textColor,
          lineHeight: 1
        }}>
        
        sfuma
      </span>
    </span>);

}

// ——— Tiny small-caps section label
function SectionLabel({ children, className = "" }) {
  return (
    <div
      className={`uppercase ${className}`}
      style={{
        color: colors.muted,
        fontSize: 11,
        letterSpacing: "0.16em",
        fontWeight: 500
      }}>
      
      {children}
    </div>);

}

// ——— Top nav
function TopNav({ page, setPage, scrolled }) {
  const { IconMenu, IconX } = window.Icons;
  const [open, setOpen] = useStateS(false);

  const links = [
  { id: "home", label: "Home" },
  { id: "features", label: "Features" },
  { id: "pricing", label: "Pricing" },
  { id: "download", label: "Download" },
  { id: "contact", label: "Contact" }];


  const bg = scrolled ? "rgba(255,255,255,0.85)" : "transparent";
  const border = scrolled ? `0.6px solid ${colors.hairline}` : "0.6px solid transparent";

  const go = (id) => {
    setPage(id);
    setOpen(false);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  return (
    <>
      <nav
        className="fixed top-0 left-0 right-0 z-40 transition-all duration-200"
        style={{
          height: 64,
          background: bg,
          backdropFilter: scrolled ? "blur(14px)" : "none",
          WebkitBackdropFilter: scrolled ? "blur(14px)" : "none",
          borderBottom: border
        }}>
        
        <div className="max-w-[1240px] mx-auto h-full px-6 md:px-10 flex items-center justify-between">
          <button
            onClick={() => go("home")}
            aria-label="Sfuma — home">
            
            <BrandLockup size={22} mark={22} />
          </button>

          <div className="hidden md:flex items-center gap-8">
            {links.map((l) =>
            <button
              key={l.id}
              onClick={() => go(l.id)}
              className="text-[14px] transition-colors duration-150"
              style={{
                color: page === l.id ? colors.primary : colors.body,
                fontWeight: page === l.id ? 500 : 400
              }}
              onMouseEnter={(e) => {if (page !== l.id) e.currentTarget.style.color = colors.primary;}}
              onMouseLeave={(e) => {if (page !== l.id) e.currentTarget.style.color = colors.body;}}>
              
                {l.label}
              </button>
            )}
          </div>

          <div className="hidden md:flex items-center gap-6">
            <TealLink href={appUrls.login} target="_blank" rel="noopener" className="text-[14px]">Sign in</TealLink>
            <PrimaryButton size="sm" as="a" href={appUrls.signup} target="_blank" rel="noopener">Sign up</PrimaryButton>
          </div>

          <button
            className="md:hidden"
            onClick={() => setOpen(true)}
            style={{ color: colors.body }}
            aria-label="Open menu">
            
            <IconMenu size={22} />
          </button>
        </div>
      </nav>

      {/* Mobile overlay */}
      {open &&
      <div
        className="fixed inset-0 z-50 md:hidden"
        style={{ background: "#fff" }}>
        
          <div className="h-16 px-6 flex items-center justify-between" style={{ borderBottom: `0.6px solid ${colors.hairline}` }}>
            <button
            onClick={() => go("home")}
            aria-label="Sfuma — home">
            
              <BrandLockup size={22} mark={22} />
            </button>
            <button onClick={() => setOpen(false)} aria-label="Close menu" style={{ color: colors.body }}>
              <IconX size={22} />
            </button>
          </div>
          <div className="px-6 py-8 flex flex-col gap-6">
            {links.map((l) =>
          <button
            key={l.id}
            onClick={() => go(l.id)}
            className="text-left text-[28px]"
            style={{
              color: page === l.id ? colors.primary : colors.body,
              fontWeight: 500,
              letterSpacing: "-0.02em"
            }}>
            
                {l.label}
              </button>
          )}
            <div className="pt-6 flex flex-col gap-5">
              <PrimaryButton as="a" href={appUrls.signup} target="_blank" rel="noopener" className="w-full">Sign up</PrimaryButton>
              <TealLink href={appUrls.login} target="_blank" rel="noopener" className="w-full justify-center text-[15px]">Sign in</TealLink>
            </div>
          </div>
        </div>
      }
    </>);

}

// ——— Final CTA band
function CTABand() {
  return (
    <section
      className="w-full"
      style={{
        background: colors.surface2,
        padding: "clamp(80px,12vw,180px) 0",
        borderTop: `0.6px solid ${colors.hairline}`,
        borderBottom: `0.6px solid ${colors.hairline}`
      }}>
      
      <div className="max-w-[860px] mx-auto px-6 text-center">
        <div className="flex justify-center mb-8">
          <BrandMark size={42} color={colors.primary} />
        </div>
        <h2
          className="mb-5"
          style={{
            fontSize: "clamp(40px,6vw,72px)",
            fontWeight: 500,
            letterSpacing: "-0.035em",
            lineHeight: 1.02,
            color: colors.body
          }}>
          
          Stop waiting on renders.
        </h2>
        <p className="mb-10 mx-auto" style={{ fontSize: 19, lineHeight: 1.55, color: colors.muted, maxWidth: 560 }}>
          Sfuma is available now in India. ₹399/month — bring your own AI keys, unlimited renders.
        </p>

        <div className="flex flex-col sm:flex-row gap-5 items-center justify-center">
          <PrimaryButton as="a" href={appUrls.signup} target="_blank" rel="noopener">
            Get started
          </PrimaryButton>
          <TealLink href={appUrls.login} target="_blank" rel="noopener">
            Already have an account? Sign in
          </TealLink>
        </div>

        <p className="mt-5 text-[12.5px]" style={{ color: colors.muted }}>
          Windows · SketchUp &amp; 3ds Max plugins included · Cancel anytime
        </p>
      </div>
    </section>);

}

// ——— Footer
function Footer({ setPage }) {
  return (
    <footer
      className="w-full"
      style={{ background: "#fff", padding: "72px 0 40px", borderTop: `0.6px solid ${colors.hairline}` }}>
      
      <div className="max-w-[1240px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-2 md:grid-cols-5 gap-10 mb-16">
          <div className="col-span-2">
            <BrandLockup size={26} mark={26} />
            <p className="mt-4 text-[13.5px] max-w-[280px]" style={{ color: colors.muted, lineHeight: 1.55 }}>From viewport to photoreal render in seconds. A desktop app for working architects.

            </p>
          </div>

          <FooterCol title="Product">
            <FooterLink onClick={() => setPage("features")}>Features</FooterLink>
            <FooterLink onClick={() => setPage("pricing")}>Pricing</FooterLink>
            <FooterLink onClick={() => setPage("download")}>Download</FooterLink>
          </FooterCol>

          <FooterCol title="Company">
            <FooterLink onClick={() => setPage("contact")}>Contact</FooterLink>
          </FooterCol>

          <FooterCol title="Legal">
            <FooterLink href={appUrls.privacy} target="_blank" rel="noopener">Privacy</FooterLink>
            <FooterLink href={appUrls.terms} target="_blank" rel="noopener">Terms</FooterLink>
          </FooterCol>
        </div>

        <div
          className="flex flex-col sm:flex-row justify-between text-[12px] pt-6"
          style={{ color: colors.muted, borderTop: `0.6px solid ${colors.hairline}` }}>
          
          <div>© 2026 Sfuma</div>
          <div className="mt-3 sm:mt-0">Built for visual thinkers.</div>
        </div>
      </div>
    </footer>);

}

function FooterCol({ title, children }) {
  return (
    <div>
      <SectionLabel className="mb-4">{title}</SectionLabel>
      <div className="flex flex-col gap-2.5">{children}</div>
    </div>);

}
function FooterLink({ children, onClick, href, target, rel }) {
  const style = { color: colors.body, fontSize: 13.5, textAlign: "left" };
  return href ?
  <a href={href} target={target} rel={rel} style={style} className="hover:opacity-60 transition-opacity">{children}</a> :

  <button onClick={onClick} style={style} className="hover:opacity-60 transition-opacity text-left">{children}</button>;

}

// ——— Screenshot placeholder (dark)
function ScreenshotPlaceholder({ height = 380, label = "Screenshot placeholder", className = "" }) {
  return (
    <div
      className={`w-full flex items-center justify-center ${className}`}
      style={{
        height,
        background: "#1A1A1A",
        borderRadius: 10,
        border: `0.6px solid ${colors.hairline}`,
        color: "rgba(255,255,255,0.35)",
        fontSize: 11,
        letterSpacing: "0.16em",
        textTransform: "uppercase",
        fontWeight: 500
      }}>
      
      {label}
    </div>);

}

Object.assign(window, {
  colors, fontStack, appUrls,
  PrimaryButton, TealLink, Eyebrow, SectionLabel, BrandMark, BrandLockup,
  TopNav, CTABand, Footer, ScreenshotPlaceholder
});