// Three sections beneath the hero, recreated faithfully from the
// attached Figma "Untitled.fig" / Home frame:
//   1. TSFalls       — "Where Most Messaging Often Falls Short."
//   2. TSDynamic     — "Every Static Touchpoint, Now a Dynamic Connection."
//   3. TSContextual  — "Contextualized Messaging to Meet Every Moment."
//
// Illustrations live in <image-slot> elements so the user can drop in
// the actual PNGs exported from the Figma file.

const FIG_TEXT   = "#212331";
const FIG_NAVY   = "#2F3886";
const FIG_INDIGO = "#6976E7";
const FIG_CHIP_HOVER = "#6976E7"; // light brand-blue used when a chip is hovered
const FIG_CHIP_BORDER = "#7C86D8";
const FIG_WASH = "#F5F6FF";

// ──────────────────────────────────────────────────────────────
// Shared illustration frame — circular indigo backdrop matching
// the Figma. Hosts an <image-slot> the user can drop a PNG into.
// ──────────────────────────────────────────────────────────────
function FigIllustration({ slotId, placeholder, align = "center", src }) {
  // align: 'left' | 'center' | 'right' — controls horizontal anchor of the
  // square circle frame inside its grid column.
  const justify = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
  return (
    <div style={{
      width: "100%",
      display: "flex",
      justifyContent: justify
    }}>
      <div style={{
        position: "relative",
        width: "100%",
        maxWidth: 420,
        aspectRatio: "1 / 1",
        display: "grid",
        placeItems: "center"
      }}>
        <image-slot
          id={slotId}
          src={src || undefined}
          shape="rect"
          placeholder={placeholder}
          class="fig-clean-slot"
          fit="contain"
          style={{
            width: "100%",
            height: "100%",
            background: "transparent",
            border: "none"
          }}
        />
        {/* Pinned placeholder label on top of every illustration — flags
            that the final imagery still needs to be supplied. Suppressed
            once a real `src` is wired in. */}
        {!src &&
        <div aria-hidden="true" style={{
          position: "absolute",
          top: 12,
          left: "50%",
          transform: "translateX(-50%)",
          background: "rgba(15,17,17,0.62)",
          color: "#fff",
          fontFamily: "Montserrat",
          fontWeight: 700,
          fontSize: 12,
          letterSpacing: "0.12em",
          padding: "6px 14px",
          borderRadius: 999,
          pointerEvents: "none",
          textTransform: "uppercase",
          backdropFilter: "blur(3px)",
          WebkitBackdropFilter: "blur(3px)",
          whiteSpace: "nowrap",
        }}>(To Be Replaced)</div>
        }
      </div>
    </div>);

}

// ──────────────────────────────────────────────────────────────
// Section 1 — Where Most Messaging Often Falls Short
// Layout: text left, illustration right; white background
// ──────────────────────────────────────────────────────────────
function TSFalls() {
  return (
    <section data-screen-label="Falls Short" style={{
      background: "#fff",
      padding: "64px clamp(20px, 5vw, 64px)",
      fontFamily: "Montserrat"
    }}>
      <div className="ts-fig-row" style={{
        maxWidth: 1180, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 64,
        alignItems: "center"
      }}>
        <div>
          <h2 style={{
            fontWeight: 900, fontSize: 32, lineHeight: 1.15,
            margin: 0, color: FIG_TEXT, letterSpacing: "-0.01em"
          }}>
            Where Brand Touchpoints<br />Lose Value<span style={{ color: "#FFB855" }}>.</span>
          </h2>
          <p style={{
            fontWeight: 500, fontSize: 16, lineHeight: 1.55,
            color: FIG_TEXT, marginTop: 24, marginBottom: 0
          }}>
            Organizations invest heavily in packaging, displays, signage, media, service materials, and campaign assets, but once those touchpoints are in market, it can be difficult to know what was delivered, what was experienced, and what actually drove action.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <window.TSGlobe />
          <div style={{
            display: "flex", alignItems: "flex-start", gap: 6,
            fontWeight: 600, fontSize: 12, lineHeight: 1.4,
            color: "#9598A8", textAlign: "center",
            textTransform: "uppercase", letterSpacing: "0.04em",
          }}>
            <span style={{ display: "inline-flex", color: "#9598A8", flexShrink: 0, marginTop: 1 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 11.5V5a2 2 0 1 1 4 0v6" />
                <path d="M13 11V8a2 2 0 1 1 4 0v5" />
                <path d="M17 11V9a2 2 0 1 1 4 0v7a6 6 0 0 1-6 6h-2a6 6 0 0 1-5.2-3l-3.6-6a2 2 0 0 1 3.4-2L9 13.5" />
              </svg>
            </span>
            <span>
              <span className="ts-hint-hover">Hover</span><span className="ts-hint-tap">Tap</span>{" a marker to see the visibility most brands have today"}
            </span>
          </div>
        </div>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────
// Section 2 — Every Static Touchpoint, Now a Dynamic Connection
// Layout: illustration left, text + chip cloud right; lavender wash
// ──────────────────────────────────────────────────────────────
const FIG_CHIPS = [
  { label: "Merchandise Displays",    description: "TapScan embeds dynamic QR codes directly into product and floor displays, turning static promotions into live destinations where shoppers can access offers, content, and loyalty enrollment." },
  { label: "In Store Signage",        description: "Aisle and category signage carry TapScan codes that surface retailer-specific content in real time, adapting to language, time of day, or location without a reprint." },
  { label: "Product Packaging",       description: "Every pack becomes a direct-to-consumer channel with access to ingredient traceability, certifications, recipes, reorder options, and SKU-specific content." },
  { label: "Billboards",              description: "Turn high-traffic out-of-home placements into measurable digital entry points with location-aware content and real-time engagement reporting by placement." },
  { label: "Social Media Advertising", description: "Connect physical campaign assets to digital and social channels, helping brands measure engagement across one connected campaign journey." },
  { label: "Broadcast Advertising",   description: "QR codes on TV, streaming, and companion screens turn broadcast moments into measurable interactions by capturing engagement data like time, daypart, and region." },
  { label: "Print Media",             description: "Newspaper, magazine, and direct-mail placements become trackable touchpoints that provide visibility into campaign performance and attribution." },
  { label: "Trade Show Booths",       description: "Booth and event collateral capture leads instantly through a branded TapScan experience, connecting sign-ups, preferences, and follow-up automation." },
  { label: "Support & Service Workflows", description: "Connect customer support and service workflows to real-time tracking, reporting, and intelligence that improves decision-making." },
  { label: "& More Custom Solutions", description: "TapScan can be deployed on any printed or physical surface where a static interaction needs to become a live, measurable digital experience." },
];

// AI-disclaimer suffix appended to every chip tooltip until the copy is
// reviewed by humans.
const FIG_CHIP_AI_DISCLAIMER = " (AI Generated Text \u2014 needs to be reviewed/revised)";

function FigChip({ label, description, onHoverChange }) {
  const [hover, setHover] = React.useState(false);
  const enter = () => { setHover(true); onHoverChange && onHoverChange(label); };
  const leave = () => { setHover(false); onHoverChange && onHoverChange(null); };
  return (
    <span
      onMouseEnter={enter}
      onMouseLeave={leave}
      onFocus={enter}
      onBlur={leave}
      tabIndex={0}
      style={{
        position: "relative",
        display: "inline-flex",
        alignItems: "center",
        padding: "4px 12px",
        borderRadius: 1500,
        background: hover ? FIG_CHIP_HOVER : FIG_NAVY,
        border: "0.5px solid " + FIG_CHIP_BORDER,
        boxShadow: hover
          ? "0 4px 14px rgba(105,118,231,0.35)"
          : "1px 1px 1px rgba(0,0,0,0.25)",
        fontFamily: "Montserrat",
        fontWeight: 700,
        fontSize: 12,
        lineHeight: "16px",
        color: "#fff",
        whiteSpace: "nowrap",
        cursor: "help",
        transition: "background 180ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 180ms cubic-bezier(0.2,0.8,0.2,1), transform 180ms cubic-bezier(0.2,0.8,0.2,1)",
        transform: hover ? "translateY(-1px)" : "none",
        outline: "none",
      }}>
      {label}
      {/* Tooltip — absolutely positioned, only mounts while hovered/focused
          so it never blocks pointer events when idle. */}
      {hover && description && (
        <span role="tooltip" style={{
          position: "absolute",
          left: "50%",
          bottom: "calc(100% + 10px)",
          transform: "translateX(-50%)",
          background: "#1C2250",
          color: "#fff",
          padding: "12px 14px",
          borderRadius: 8,
          fontFamily: "Montserrat",
          fontWeight: 500,
          fontSize: 12,
          lineHeight: 1.5,
          whiteSpace: "normal",
          width: 280,
          boxShadow: "0 12px 28px rgba(15,17,17,0.30)",
          zIndex: 30,
          textAlign: "left",
          pointerEvents: "none",
          animation: "figChipTipFade 160ms cubic-bezier(0.2,0.8,0.2,1) both",
        }}>
          {description}
          {/* Triangle pointer */}
          <span aria-hidden="true" style={{
            position: "absolute",
            left: "50%",
            top: "100%",
            transform: "translateX(-50%)",
            width: 0, height: 0,
            borderLeft: "7px solid transparent",
            borderRight: "7px solid transparent",
            borderTop: "7px solid #1C2250",
          }} />
        </span>
      )}
    </span>);

}

function TSDynamic() {
  const [active, setActive] = React.useState(null);
  return (
    <section data-screen-label="Dynamic Connection" style={{
      background: FIG_WASH,
      padding: "64px clamp(20px, 5vw, 64px)",
      fontFamily: "Montserrat"
    }}>
      <div className="ts-fig-row" style={{
        maxWidth: 1180, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 64,
        alignItems: "stretch"
      }}>
        <window.TSDashViz />
        <div>
          <h2 style={{
            fontWeight: 900, fontSize: 32, lineHeight: 1.15,
            margin: 0, color: FIG_TEXT, letterSpacing: "-0.01em"
          }}>
            From Static Touchpoints to Measurable Experiences<span style={{ color: "#FFB855" }}>.</span>
          </h2>
          <p style={{
            fontWeight: 500, fontSize: 16, lineHeight: 1.55,
            color: FIG_TEXT, marginTop: 24, marginBottom: 32
          }}>
            TapScan connects physical touchpoints to adaptive digital experiences that deliver the right content based on language, location, product, retailer, campaign, time, or user need. Each interaction creates measurable data, helping teams understand which touchpoints are working, where engagement is happening, and how to improve future performance.
          </p>
          {/* Subtle nudge — tells the user the chips below are interactive.
              The cursor pointer/wiggle keeps it discoverable without shouting. */}
          <div className="ts-fig-chip-hint" aria-hidden="true" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "Montserrat", fontWeight: 600, fontSize: 12,
            color: FIG_NAVY, opacity: 0.75,
            letterSpacing: "0.04em", textTransform: "uppercase",
            marginBottom: 14,
          }}>
            <span className="ts-fig-chip-hint-cursor" aria-hidden="true" style={{
              display: "inline-flex", color: FIG_NAVY,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 11.5V5a2 2 0 1 1 4 0v6" />
                <path d="M13 11V8a2 2 0 1 1 4 0v5" />
                <path d="M17 11V9a2 2 0 1 1 4 0v7a6 6 0 0 1-6 6h-2a6 6 0 0 1-5.2-3l-3.6-6a2 2 0 0 1 3.4-2L9 13.5" />
              </svg>
            </span>
            <span><strong>
              <span className="ts-hint-hover">Hover</span>
              <span className="ts-hint-tap">Tap</span>
              {" any tag to see how it works"}
            </strong></span>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {FIG_CHIPS.map((c, i) => <FigChip key={i} label={c.label} description={c.description} onHoverChange={setActive} />)}
          </div>
        </div>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────
// Section 3 — Contextualized Messaging to Meet Every Moment
// Layout: text left, illustration right; white background
// ──────────────────────────────────────────────────────────────
function TSContextual() {
  return (
    <section data-screen-label="Contextualized" style={{
      background: "#fff",
      padding: "64px clamp(20px, 5vw, 64px)",
      fontFamily: "Montserrat"
    }}>
      <div className="ts-fig-row" style={{
        maxWidth: 1180, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 64,
        alignItems: "center"
      }}>
        <div>
          <h2 style={{
            fontWeight: 900, fontSize: 32, lineHeight: 1.15,
            margin: 0, color: FIG_TEXT, letterSpacing: "-0.01em"
          }}>
            The Right Experience<span style={{ color: "#FFB855" }}>.</span><br />Every Time<span style={{ color: "#FFB855" }}>.</span> Everywhere<span style={{ color: "#FFB855" }}>.</span>
          </h2>
          <p style={{
            fontWeight: 500, fontSize: 16, lineHeight: 1.55,
            color: FIG_TEXT, marginTop: 24, marginBottom: 0
          }}>
            TapScan&rsquo;s dynamic experiences adapt content in real time by retailer, region, day, time, language, and more, ensuring every interaction feels personal and relevant. Your audience sees the right message, in the right moment, everywhere your organization connects.
          </p>
        </div>
        <div>
          <window.ContextualPhone />
        </div>
      </div>
    </section>);

}

// Responsive: stack on small screens
(function injectFigCss() {
  if (document.getElementById("fig-sections-css")) return;
  const s = document.createElement("style");
  s.id = "fig-sections-css";
  s.textContent = `
    @media (max-width: 900px) {
      .ts-fig-row { grid-template-columns: 1fr !important; gap: 40px !important; }
    }
    /* Strip the default frame/ring chrome from the homepage figma illustrations */
    .fig-clean-slot::part(frame) { background: transparent !important; }
    .fig-clean-slot::part(ring)  { display: none !important; }
    @keyframes figChipTipFade { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
    /* Gentle nudge animation on the chip-hint cursor — slow tap motion every
       few seconds so the hint catches the eye without being noisy. */
    @keyframes figChipHintTap {
      0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
      78%           { transform: translateY(2px) rotate(-4deg); }
      86%           { transform: translateY(-1px) rotate(2deg); }
      94%           { transform: translateY(0) rotate(0deg); }
    }
    .ts-fig-chip-hint-cursor { animation: figChipHintTap 3.6s ease-in-out infinite; transform-origin: 50% 80%; }
    @media (prefers-reduced-motion: reduce) {
      .ts-fig-chip-hint-cursor { animation: none; }
    }
  `;
  document.head.appendChild(s);
})();

window.TSFalls = TSFalls;
window.TSDynamic = TSDynamic;
window.TSContextual = TSContextual;