/* Solugenics — Marketing landing page (home).
   Implements templates/marketing-site/MarketingSite.dc.html as a runnable React
   page consuming the bound design system (_ds/solugenics). Static marketing
   content; the only interactive elements are the DS Buttons (hover states). */

const { SectionLabel, Button } = window.SolugenicsDesignSystem_5a9f3a;

const LOGO = "_ds/solugenics/assets/logo.svg";
const CONTACT_URL = "contact/index.html";

/* "What we do" feature card: green icon chip + title + body. */
function Feature({ icon, title, body }) {
  return (
    <div
      style={{
        background: "var(--surface-card)",
        border: "1px solid var(--border-hairline)",
        borderRadius: "var(--radius-lg)",
        padding: "30px",
      }}
    >
      <span
        style={{
          display: "inline-flex",
          width: "44px",
          height: "44px",
          borderRadius: "var(--radius-md)",
          background: "var(--accent-soft)",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {icon}
      </span>
      <h3
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: "var(--fw-medium)",
          fontSize: "20px",
          letterSpacing: "-0.01em",
          color: "var(--text-strong)",
          margin: "22px 0 0",
        }}
      >
        {title}
      </h3>
      <p style={{ fontSize: "15px", lineHeight: 1.6, color: "var(--text-muted)", margin: "10px 0 0" }}>{body}</p>
    </div>
  );
}

const iconProps = {
  width: 22,
  height: 22,
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "var(--accent)",
  strokeWidth: 1.8,
  strokeLinecap: "round",
  strokeLinejoin: "round",
};

function Home() {
  return (
    <div style={{ background: "var(--surface-page)", fontFamily: "var(--font-body)", minHeight: "100vh" }}>
      {/* Header */}
      <header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 50,
          background: "rgba(11,22,32,0.82)",
          backdropFilter: "blur(12px)",
          borderBottom: "1px solid var(--border-hairline)",
        }}
      >
        <div
          style={{
            maxWidth: "var(--content-max)",
            margin: "0 auto",
            padding: "16px var(--gutter)",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: "24px",
          }}
        >
          <span style={{ display: "inline-flex", alignItems: "center", gap: "10px" }}>
            <img src={LOGO} width="30" height="30" alt="Solugenics" style={{ display: "block" }} />
            <span
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: "var(--fw-bold)",
                fontSize: "19px",
                letterSpacing: "-0.02em",
                color: "var(--text-strong)",
              }}
            >
              Solugenics
            </span>
          </span>
          <a href={CONTACT_URL} style={{ textDecoration: "none" }}>
            <Button variant="primary" size="sm">
              Get in touch
            </Button>
          </a>
        </div>
      </header>

      {/* Hero */}
      <section style={{ position: "relative", overflow: "hidden" }}>
        <div
          style={{
            position: "absolute",
            top: "-160px",
            right: "-120px",
            width: "520px",
            height: "520px",
            background: "radial-gradient(circle, rgba(54,172,74,0.16), transparent 62%)",
            pointerEvents: "none",
          }}
        ></div>
        <div
          style={{
            maxWidth: "var(--content-max)",
            margin: "0 auto",
            padding: "104px var(--gutter) 88px",
            position: "relative",
          }}
        >
          <div style={{ maxWidth: "780px" }}>
            <SectionLabel>Customer reactivation</SectionLabel>
            <h1
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: "var(--fw-bold)",
                fontSize: "60px",
                lineHeight: 1.05,
                letterSpacing: "-0.02em",
                color: "var(--text-strong)",
                margin: "20px 0 0",
              }}
            >
              Customer reactivation for local businesses.
            </h1>
            <p
              style={{
                fontSize: "20px",
                lineHeight: 1.6,
                color: "var(--text-muted)",
                margin: "24px 0 0",
                maxWidth: "640px",
              }}
            >
              We help appointment-based businesses win back customers who haven't booked in a while — through
              friendly, automated text message outreach that books them right back in.
            </p>
            <div style={{ display: "flex", gap: "14px", marginTop: "36px", flexWrap: "wrap" }}>
              <a href={CONTACT_URL} style={{ textDecoration: "none" }}>
                <Button variant="primary" size="lg">
                  Get in touch
                </Button>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* What we do */}
      <section style={{ borderTop: "1px solid var(--border-hairline)" }}>
        <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "88px var(--gutter)" }}>
          <div style={{ maxWidth: "720px" }}>
            <SectionLabel>What we do</SectionLabel>
            <h2
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: "var(--fw-bold)",
                fontSize: "38px",
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
                color: "var(--text-strong)",
                margin: "18px 0 0",
              }}
            >
              Dormant customer lists, turned into booked appointments.
            </h2>
            <p style={{ fontSize: "18px", lineHeight: 1.6, color: "var(--text-muted)", margin: "20px 0 0" }}>
              Most local businesses have hundreds of past customers sitting in their booking software who simply
              drifted away. Solugenics reaches out to those customers on the business's behalf with personalized text
              messages, answers their questions, and helps them rebook.
            </p>
          </div>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: "24px",
              marginTop: "56px",
            }}
          >
            <Feature
              title="Personalized outreach"
              body="Messages are sent in the business's own voice to its existing customers."
              icon={
                <svg {...iconProps}>
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                </svg>
              }
            />
            <Feature
              title="Handled conversations"
              body="Replies are answered promptly, and anything sensitive is routed straight to the business's staff."
              icon={
                <svg {...iconProps}>
                  <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z" />
                  <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
                </svg>
              }
            />
            <Feature
              title="Real results"
              body="Businesses recover appointments from customers they'd otherwise have lost."
              icon={
                <svg {...iconProps}>
                  <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
                  <polyline points="16 7 22 7 22 13" />
                </svg>
              }
            />
          </div>
        </div>
      </section>

      {/* Who it's for */}
      <section style={{ background: "var(--surface-page-alt)", borderTop: "1px solid var(--border-hairline)" }}>
        <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "88px var(--gutter)" }}>
          <div style={{ maxWidth: "720px" }}>
            <SectionLabel>Who it's for</SectionLabel>
            <h2
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: "var(--fw-bold)",
                fontSize: "38px",
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
                color: "var(--text-strong)",
                margin: "18px 0 0",
              }}
            >
              Built for appointment-based local businesses.
            </h2>
            <p style={{ fontSize: "18px", lineHeight: 1.6, color: "var(--text-muted)", margin: "20px 0 0" }}>
              Solugenics works with appointment-based local businesses — med spas, clinics, salons, and similar
              practices — that want to re-engage past customers and fill their calendars.
            </p>
          </div>
        </div>
      </section>

      {/* Contact CTA band */}
      <section style={{ borderTop: "1px solid var(--border-hairline)" }}>
        <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "80px var(--gutter)" }}>
          <div
            style={{
              background: "linear-gradient(180deg, var(--surface-card), var(--surface-page))",
              border: "1px solid var(--border-hairline)",
              borderRadius: "var(--radius-lg)",
              padding: "56px",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              gap: "32px",
              flexWrap: "wrap",
            }}
          >
            <div style={{ maxWidth: "560px" }}>
              <h2
                style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: "var(--fw-bold)",
                  fontSize: "36px",
                  letterSpacing: "-0.02em",
                  color: "var(--text-strong)",
                  margin: 0,
                  lineHeight: 1.1,
                }}
              >
                Ready to fill your calendar?
              </h2>
              <p style={{ fontSize: "18px", lineHeight: 1.6, color: "var(--text-muted)", margin: "16px 0 0" }}>
                Reach out and we'll show you how Solugenics rebooks the customers you've already earned.
              </p>
            </div>
            <a href={CONTACT_URL} style={{ textDecoration: "none" }}>
              <Button variant="primary" size="lg">
                Get in touch
              </Button>
            </a>
          </div>
        </div>
      </section>

      <SiteFooter active="" />
    </div>
  );
}

/* Shared footer used across pages. `active` bolds the current legal link. */
function SiteFooter({ active, base = "" }) {
  const linkColor = (name) => (active === name ? { color: "var(--text-strong)" } : {});
  return (
    <footer style={{ borderTop: "1px solid var(--border-hairline)" }}>
      <div
        style={{
          maxWidth: "var(--content-max)",
          margin: "0 auto",
          padding: "32px var(--gutter)",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: "16px",
        }}
      >
        <span style={{ display: "inline-flex", alignItems: "center", gap: "10px" }}>
          <img src={base + LOGO} width="26" height="26" alt="Solugenics" style={{ display: "block" }} />
          <span
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: "var(--fw-bold)",
              fontSize: "16px",
              letterSpacing: "-0.02em",
              color: "var(--text-strong)",
            }}
          >
            Solugenics
          </span>
        </span>
        <div style={{ display: "flex", alignItems: "center", gap: "24px", flexWrap: "wrap" }}>
          <a className="sg-link" href="/privacy" style={{ fontSize: "14px", ...linkColor("privacy") }}>
            Privacy Policy
          </a>
          <a className="sg-link" href="/sms-terms" style={{ fontSize: "14px", ...linkColor("sms") }}>
            SMS Terms
          </a>
          <span style={{ fontSize: "13px", color: "var(--sg-slate-text)" }}>© 2026 Solugenics</span>
        </div>
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;