// v1-editorial.jsx — OpenLines landing page.
// Editorial / restrained direction: cream paper, italic serif headline, muted
// oxblood accent. Fully responsive using Cross-Device Unified Experience
// Foundation Tokens (see shared.jsx injection + style.css authoritative block):
// desktop (≥ --bp-tablet-landscape 1024px+), tablet (≤1023px / --bp-tablet-landscape),
// mobile (≤700px / --bp-mobile + --bp-small 480px for tighter tweaks).
// HeroStory swaps to stacked on mobile via useIsMobile (aligns --bp-tablet).

(function () {
  const { WF_CONTENT, PALETTE, ImagePlaceholder, SectionLabel, LiveDot, HeroStory, OLButton, useIsMobile, PricingSection, PhoneTimeValue } = window;
  const conversations = window.OL_CONVERSATIONS;

  const serif = `"Iowan Old Style", "Hoefler Text", "Georgia", "Times New Roman", serif`;
  const sans = `"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif`;
  const mono = `ui-monospace, SFMono-Regular, Menlo, monospace`;

  // Inject the responsive stylesheet once. Uses !important to override the
  // inline styles set on each element below.
  if (typeof document !== "undefined" && !document.getElementById("v1-responsive-styles")) {
    const s = document.createElement("style");
    s.id = "v1-responsive-styles";
    s.textContent = `
      /* ───── TABLET ( ≤ 1023px ) ───── */
      /* aligns to --bp-tablet-landscape: 1024px (and --bp-tablet 768px for reference) */
      @media (max-width: 1023px) {
        .v1-nav { padding: 22px 32px !important; }
        .v1-hero { padding: 56px 32px 0 !important; }
        .v1-hero h1 { font-size: 76px !important; letter-spacing: -2px !important; }
        .v1-hero .v1-value-prop { font-size: 19px !important; }
        .v1-section { padding-left: 32px !important; padding-right: 32px !important; }
        .v1-how h2, .v1-contact h2 { font-size: 48px !important; }
        .v1-contact-grid { gap: 48px !important; }
        .v1-contact-col { padding-right: 24px !important; }
        .v1-trust-card { padding: 48px 40px !important; }
        .v1-step { gap: 32px !important; }
        .v1-step-num { font-size: 64px !important; }
      }

      /* ───── MOBILE ( ≤ 700px ) ───── */
      /* aligns to --bp-mobile: 700px (see also --bp-small: 480px in tokens) */
      @media (max-width: 700px) {
        .v1-nav { padding: 18px 20px !important; }
        .v1-nav-links { display: none !important; }
        .v1-brand-text { font-size: 18px !important; }

        .v1-hero { padding: 36px 20px 0 !important; }
        .v1-hero h1 { font-size: 48px !important; letter-spacing: -1.4px !important; }
        .v1-hero .v1-value-prop { font-size: 16px !important; margin-bottom: 28px !important; }
        .v1-hero .v1-ctas { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
        .v1-hero .v1-ctas > a { width: 100% !important; box-sizing: border-box !important; }
        .v1-hero-text { margin-bottom: 40px !important; }
        .v1-hero-story-wrap { height: 720px !important; margin-bottom: 40px !important; }

        .v1-section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 60px !important; padding-bottom: 60px !important; }
        .v1-how h2 { font-size: 32px !important; letter-spacing: -0.8px !important; margin-bottom: 40px !important; }
        .v1-step { grid-template-columns: 56px 1fr !important; gap: 16px !important; padding: 24px 0 !important; }
        .v1-step-num { font-size: 40px !important; }
        .v1-step-title { font-size: 20px !important; grid-column: 1 / -1 !important; margin-top: 4px !important; }
        .v1-step-body { font-size: 15px !important; grid-column: 1 / -1 !important; }

        .v1-trust-card { padding: 36px 24px !important; }
        .v1-trust-card h2 { font-size: 28px !important; letter-spacing: -0.6px !important; }
        .v1-trust-card p { font-size: 15px !important; margin-bottom: 32px !important; }
        .v1-trust-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

        .v1-who { grid-template-columns: 1fr !important; gap: 40px !important; }
        .v1-who h2 { font-size: 30px !important; letter-spacing: -0.6px !important; }
        .v1-who p { font-size: 15px !important; }
        .v1-who li { font-size: 16px !important; }

        .v1-founder { grid-template-columns: 1fr !important; gap: 20px !important; max-width: 100% !important; }
        .v1-founder-portrait { width: 220px !important; height: auto !important; }
        .v1-founder p { font-size: 18px !important; }

        .v1-contact h2 { font-size: 36px !important; letter-spacing: -0.9px !important; }
        .v1-contact p { font-size: 16px !important; }
        .v1-contact-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
        .v1-contact-col { padding: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(36,28,18,0.18) !important; padding-bottom: 56px !important; }
        .v1-contact-col:last-child { border-bottom: none !important; padding-bottom: 0 !important; }

        .v1-footer { padding: 24px 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
      }
    `;
    document.head.appendChild(s);
  }

  function V1Editorial({ buttonVariant = "block", emailMode = "borderless" }) {
    const isMobile = useIsMobile(768); /* aligns to --bp-tablet from foundation tokens */

    return (
      <div
        style={{
          background: PALETTE.bg,
          color: PALETTE.ink,
          fontFamily: serif,
          width: "100%",
          minHeight: "100%",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {/* SVG duotone filter — maps B&W images to the cream/ink palette so
            photography fuses with the page typography. */}
        <svg width="0" height="0" style={{ position: "absolute", pointerEvents: "none" }} aria-hidden="true">
          <defs>
            <filter id="ol-duotone" colorInterpolationFilters="sRGB">
              <feColorMatrix
                type="matrix"
                values="
                  0.173 0.583 0.059 0 0.141
                  0.174 0.586 0.059 0 0.110
                  0.172 0.580 0.059 0 0.071
                  0     0     0     1 0
                "
              />
            </filter>
          </defs>
        </svg>
        {/* Paper grain texture */}
        <div
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "repeating-linear-gradient(90deg, rgba(36,28,18,0.02) 0 1px, transparent 1px 3px)",
            pointerEvents: "none",
          }}
        />

        {/* === NAV === */}
        <nav
          className="v1-nav"
          style={{
            position: "relative",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "28px 80px",
            borderBottom: `1px solid ${PALETTE.line}`,
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <BrandMark />
            <div className="v1-brand-text" style={{ fontFamily: serif, fontSize: 22, fontWeight: 600, letterSpacing: -0.3 }}>
              OpenLines
            </div>
          </div>
          <div className="v1-nav-links" style={{ display: "flex", gap: 28, alignItems: "center" }}>
            {[
              { label: "How it works", anchor: "how" },
              { label: "What we don't do", anchor: "trust" },
              { label: "Who it's for", anchor: "who" },
              { label: "Pricing", anchor: "pricing" },
              { label: "Contact", anchor: "contact" },
            ].map((l) => (
              <NavLink key={l.anchor} href={`#${l.anchor}`}>
                {l.label}
              </NavLink>
            ))}
          </div>
        </nav>

        {/* === HERO === */}
        <section
          className="v1-hero"
          style={{
            position: "relative",
            padding: "80px 80px 0",
            maxWidth: 1320,
            margin: "0 auto",
          }}
        >
          <div className="v1-hero-text" style={{ textAlign: "center", maxWidth: 900, margin: "0 auto 64px" }}>
            <SectionLabel style={{ marginBottom: 28 }} accent>
              Est. 2026 · Canby, Oregon
            </SectionLabel>
            <h1
              style={{
                fontFamily: serif,
                fontSize: 104,
                lineHeight: 0.96,
                letterSpacing: -3,
                margin: "0 0 32px",
                fontWeight: 500,
                fontStyle: "italic",
              }}
            >
              Every call,
              <br />
              <span style={{ fontStyle: "normal" }}>answered.</span>
            </h1>
            <p
              className="v1-value-prop"
              style={{
                fontFamily: serif,
                fontSize: 22,
                lineHeight: 1.5,
                maxWidth: 700,
                margin: "0 auto 44px",
                opacity: 0.85,
              }}
            >
              {WF_CONTENT.valueProp}
            </p>
            <div className="v1-ctas" style={{ display: "flex", justifyContent: "center", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
              <OLButton variant={buttonVariant} tone="primary" href={WF_CONTENT.primaryCta.href}>
                Get started
              </OLButton>
              <OLButton variant={buttonVariant} tone="secondary" href={WF_CONTENT.secondaryCta.href}>
                Email Lucas
              </OLButton>
            </div>
          </div>

          {/* Story zone */}
          <div
            className="v1-hero-story-wrap"
            style={{
              position: "relative",
              height: isMobile ? 720 : 620,
              width: "100%",
              marginBottom: 80,
            }}
          >
            <HeroStory conversations={conversations} emailMode={emailMode} isMobile={isMobile} />
          </div>
        </section>

        {/* === HOW IT WORKS === */}
        <section
          id="how"
          className="v1-section v1-how"
          style={{
            position: "relative",
            padding: "120px 80px 100px",
            borderTop: `1px solid ${PALETTE.line}`,
            maxWidth: 1280,
            margin: "0 auto",
          }}
        >
          <SectionLabel style={{ marginBottom: 20 }} accent>
            How it works
          </SectionLabel>
          <h2
            style={{
              fontFamily: serif,
              fontSize: 56,
              lineHeight: 1,
              letterSpacing: -1.4,
              margin: "0 0 80px",
              maxWidth: 760,
              fontWeight: 500,
            }}
          >
            Four things happen, every time the phone rings.
          </h2>

          {WF_CONTENT.steps.map((s, i) => (
            <div
              key={i}
              className="v1-step"
              style={{
                display: "grid",
                gridTemplateColumns: "160px 1fr 1.4fr",
                gap: 48,
                padding: "44px 0",
                borderTop: `1px solid ${PALETTE.line}`,
                alignItems: "start",
              }}
            >
              <div
                className="v1-step-num"
                style={{
                  fontFamily: serif,
                  fontStyle: "italic",
                  fontSize: 84,
                  lineHeight: 0.9,
                  color: PALETTE.ink,
                  opacity: 0.85,
                }}
              >
                {s.n}
              </div>
              <h3
                className="v1-step-title"
                style={{
                  fontFamily: serif,
                  fontSize: 28,
                  lineHeight: 1.2,
                  margin: 0,
                  fontWeight: 500,
                  letterSpacing: -0.5,
                }}
              >
                {s.title}
              </h3>
              <p
                className="v1-step-body"
                style={{
                  fontFamily: serif,
                  fontSize: 17,
                  lineHeight: 1.55,
                  margin: 0,
                  opacity: 0.78,
                }}
              >
                {s.body}
              </p>
            </div>
          ))}
        </section>

        {/* === WHAT WE DON'T DO === */}
        <section
          id="trust"
          className="v1-section"
          style={{
            position: "relative",
            padding: "80px 80px 100px",
            maxWidth: 1280,
            margin: "0 auto",
          }}
        >
          <div
            className="v1-trust-card"
            style={{
              background: PALETTE.bg2,
              border: `1px solid ${PALETTE.line}`,
              padding: "64px 64px",
              position: "relative",
            }}
          >
            <SectionLabel style={{ marginBottom: 16 }} accent>
              What we don't do
            </SectionLabel>
            <h2
              style={{
                fontFamily: serif,
                fontSize: 42,
                lineHeight: 1.1,
                letterSpacing: -0.9,
                margin: "0 0 16px",
                fontWeight: 500,
              }}
            >
              We'd rather tell you the truth.
            </h2>
            <p
              style={{
                fontFamily: serif,
                fontSize: 17,
                lineHeight: 1.5,
                maxWidth: 560,
                margin: "0 0 56px",
                opacity: 0.75,
              }}
            >
              An answering service that overpromises is worse than one that's honest about its limits.
            </p>
            <div className="v1-trust-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
              {WF_CONTENT.doesnt.map((d, i) => (
                <div key={i}>
                  <DoesntIcon />
                  <h3
                    style={{
                      fontFamily: serif,
                      fontSize: 24,
                      margin: "20px 0 10px",
                      fontWeight: 500,
                      letterSpacing: -0.3,
                    }}
                  >
                    {d.title}
                  </h3>
                  <p style={{ fontFamily: serif, fontSize: 16.5, lineHeight: 1.55, opacity: 0.78, margin: 0 }}>
                    {d.body}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* === WHO IT'S FOR === */}
        <section
          id="who"
          className="v1-section v1-who"
          style={{
            position: "relative",
            padding: "60px 80px 100px",
            maxWidth: 1280,
            margin: "0 auto",
            display: "grid",
            gridTemplateColumns: "1fr 1.1fr",
            gap: 80,
            alignItems: "center",
          }}
        >
          <div>
            <SectionLabel style={{ marginBottom: 20 }} accent>
              Who it's for
            </SectionLabel>
            <h2
              style={{
                fontFamily: serif,
                fontSize: 46,
                lineHeight: 1.05,
                letterSpacing: -1.1,
                margin: "0 0 24px",
                fontWeight: 500,
              }}
            >
              {WF_CONTENT.forWhoTitle}
            </h2>
            <p style={{ fontFamily: serif, fontSize: 17, lineHeight: 1.55, opacity: 0.78, margin: "0 0 36px" }}>
              {WF_CONTENT.forWhoBody}
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
              {WF_CONTENT.forWho.map((w, i) => (
                <li
                  key={i}
                  style={{
                    fontFamily: serif,
                    fontSize: 18,
                    paddingLeft: 28,
                    position: "relative",
                  }}
                >
                  <span style={{ position: "absolute", left: 0, top: "0.85em", width: 16, height: 1, background: PALETTE.accent }} />
                  {w}
                </li>
              ))}
            </ul>
          </div>
          <DuotoneImage
            src="assets/hero-phone.png"
            alt="Hard light through venetian blinds across a desk phone"
            aspectRatio="4/5"
          />
        </section>

        {/* === FOUNDER NOTE === */}
        <section
          className="v1-section v1-founder"
          style={{
            position: "relative",
            padding: "60px 80px 100px",
            maxWidth: 1100,
            margin: "0 auto",
            display: "grid",
            gridTemplateColumns: "280px 1fr",
            gap: 64,
            alignItems: "start",
          }}
        >
          <DuotoneImage
            src="assets/lucas-portrait.png"
            alt="Lucas Navallo"
            aspectRatio="4/5"
            wrapClassName="v1-founder-portrait"
            wrapStyle={{ width: 280 }}
            objectPosition="center 30%"
          />
          <div>
            <SectionLabel style={{ marginBottom: 16 }} accent>
              A note from the operator
            </SectionLabel>
            <p
              style={{
                fontFamily: serif,
                fontSize: 24,
                lineHeight: 1.4,
                margin: "0 0 24px",
                fontStyle: "italic",
                fontWeight: 400,
              }}
            >
              "{WF_CONTENT.founder.note}"
            </p>
            <div style={{ fontFamily: sans, fontSize: 14, color: PALETTE.sub }}>
              {WF_CONTENT.founder.name} · {WF_CONTENT.founder.location}
            </div>
          </div>
        </section>

        {/* === BALLPARK PRICING === */}
        <PricingSection buttonVariant={buttonVariant} />

        {/* === VALUE COMPARISON (vs hourly hire) === */}
        <PhoneTimeValue />

        {/* === CONTACT === */}
        <section
          id="contact"
          className="v1-section v1-contact"
          style={{
            position: "relative",
            padding: "120px 80px 140px",
            borderTop: `1px solid ${PALETTE.line}`,
            maxWidth: 1280,
            margin: "0 auto",
          }}
        >
          <SectionLabel style={{ marginBottom: 56, textAlign: "center" }} accent>
            Get in touch
          </SectionLabel>

          <div
            className="v1-contact-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 80,
            }}
          >
            {/* Inquiries */}
            <div
              className="v1-contact-col"
              style={{
                paddingRight: 40,
                borderRight: `1px solid ${PALETTE.line}`,
              }}
            >
              <SectionLabel style={{ marginBottom: 16 }}>Inquiries</SectionLabel>
              <h2
                style={{
                  fontFamily: serif,
                  fontSize: 52,
                  lineHeight: 1.02,
                  letterSpacing: -1.4,
                  margin: "0 0 20px",
                  fontWeight: 500,
                  fontStyle: "italic",
                }}
              >
                Want to hear it?
              </h2>
              <p
                style={{
                  fontFamily: serif,
                  fontSize: 17,
                  lineHeight: 1.5,
                  margin: "0 0 32px",
                  opacity: 0.78,
                }}
              >
                Send a quick note and we'll set up a 15-minute call where you can listen to the agent answer a sample of your own questions.
              </p>
              <OLButton variant={buttonVariant} tone="primary" href={WF_CONTENT.secondaryCta.href}>
                lucas@getopenlines.com
              </OLButton>
            </div>

            {/* Current customers */}
            <div
              className="v1-contact-col"
              style={{
                paddingLeft: 0,
              }}
            >
              <SectionLabel style={{ marginBottom: 16 }}>Current customers</SectionLabel>
              <h2
                style={{
                  fontFamily: serif,
                  fontSize: 52,
                  lineHeight: 1.02,
                  letterSpacing: -1.4,
                  margin: "0 0 20px",
                  fontWeight: 500,
                  fontStyle: "italic",
                }}
              >
                Need a change?
              </h2>
              <p
                style={{
                  fontFamily: serif,
                  fontSize: 17,
                  lineHeight: 1.5,
                  margin: "0 0 32px",
                  opacity: 0.78,
                }}
              >
                Update your script, tweak your business profile, or just ask a question. We read every message and reply the same day.
              </p>
              <OLButton variant={buttonVariant} tone="primary" href="mailto:support@getopenlines.com">
                support@getopenlines.com
              </OLButton>
            </div>
          </div>
        </section>

        {/* === FOOTER === */}
        <footer
          className="v1-footer"
          style={{
            position: "relative",
            padding: "32px 80px",
            borderTop: `1px solid ${PALETTE.line}`,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 16,
            flexWrap: "wrap",
            fontFamily: sans,
            fontSize: 13,
            color: PALETTE.sub,
          }}
        >
          <div>OpenLines — operated by Lucas Navallo, Canby OR</div>
          <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
            <a
              href="/privacy"
              style={{ color: PALETTE.sub, textDecoration: "underline" }}
            >
              Privacy
            </a>
            <span>© 2026</span>
          </div>
        </footer>
      </div>
    );
  }

  // --- Helpers ---------------------------------------------------------

  // DuotoneImage — picks up the brutalist button DNA: sharp ink frame +
  // oxblood offset shadow. Duotone filter binds the photo to the page palette.
  // When bgCutout is true, applies mix-blend-mode: darken so cream-mapped
  // pixels vanish into the cream page, leaving just the dark subject +
  // shadows floating inside the frame.
  function DuotoneImage({ src, alt, aspectRatio, wrapClassName, wrapStyle, objectPosition = "center", bgCutout = false }) {
    return (
      <figure
        className={wrapClassName}
        style={{
          margin: 0,
          padding: 0,
          display: "block",
          ...wrapStyle,
        }}
      >
        <div
          className="ol-duotone-frame"
          style={{
            position: "relative",
            width: "100%",
            height: wrapStyle && wrapStyle.height ? "100%" : undefined,
            aspectRatio: aspectRatio || undefined,
            boxShadow: `inset 0 0 0 1.5px ${PALETTE.ink}, 5px 5px 0 0 ${PALETTE.accent}`,
            background: bgCutout ? "transparent" : PALETTE.soft,
            overflow: "hidden",
            transition: "transform .25s ease, box-shadow .25s ease",
          }}
        >
          <img
            src={src}
            alt={alt}
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition,
              display: "block",
              filter: bgCutout
                ? "url(#ol-duotone) contrast(1.15)"
                : "url(#ol-duotone)",
              WebkitFilter: bgCutout
                ? "url(#ol-duotone) contrast(1.15)"
                : "url(#ol-duotone)",
              mixBlendMode: bgCutout ? "darken" : "normal",
            }}
          />
        </div>
        <style>{`
          .ol-duotone-frame:hover {
            transform: translate(2px, 2px);
            box-shadow: inset 0 0 0 1.5px ${PALETTE.ink}, 3px 3px 0 0 ${PALETTE.accent};
          }
        `}</style>
      </figure>
    );
  }

  function BrandMark() {
    return (
      <div
        style={{
          width: 24,
          height: 24,
          borderRadius: 999,
          border: `1.5px solid ${PALETTE.ink}`,
          position: "relative",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: 5,
            borderRadius: 999,
            background: PALETTE.accent,
          }}
        />
      </div>
    );
  }

  function NavLink({ href, num, children }) {
    return (
      <a href={href} className="v1-nav-link">
        {num ? <span className="v1-nav-link-num">{num}</span> : null}
        <span className="v1-nav-link-label">{children}</span>
        <style>{`
          .v1-nav-link {
            position: relative;
            display: inline-flex;
            align-items: baseline;
            gap: 7px;
            text-decoration: none;
            padding: 6px 0 8px;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 11px;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: ${PALETTE.sub};
            font-weight: 600;
            transition: color .25s ease;
          }
          .v1-nav-link-num {
            color: ${PALETTE.accent};
            opacity: 0.8;
            font-size: 10px;
            letter-spacing: 1px;
            transition: opacity .25s ease;
          }
          .v1-nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: ${PALETTE.accent};
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s cubic-bezier(.7,0,.2,1);
          }
          .v1-nav-link:hover {
            color: ${PALETTE.ink};
          }
          .v1-nav-link:hover .v1-nav-link-num {
            opacity: 1;
          }
          .v1-nav-link:hover::after {
            transform: scaleX(1);
          }
        `}</style>
      </a>
    );
  }

  function DoesntIcon() {
    return (
      <div
        style={{
          width: 32,
          height: 32,
          borderRadius: 999,
          border: `1.5px solid ${PALETTE.ink}`,
          position: "relative",
        }}
      >
        <div
          style={{
            position: "absolute",
            top: "50%",
            left: 6,
            right: 6,
            height: 1.5,
            background: PALETTE.ink,
            transform: "translateY(-50%)",
          }}
        />
      </div>
    );
  }

  window.V1Editorial = V1Editorial;
})();