// Round Clock Support — landing page app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2A5FC4",
  "typePairing": "Editorial",
  "showClocks": true,
  "footerTheme": "Ink",
  "footerNewsletter": true
}/*EDITMODE-END*/;

const RC_ACCENTS = ["#2A5FC4", "#1F7A57", "#B85C38"];

/* ── Small live analog clock (circle + hands only) ── */
function ClockFace({ timeZone, size = 56 }) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const parts = new Intl.DateTimeFormat("en-US", {
    timeZone, hour12: false, hour: "numeric", minute: "numeric", second: "numeric",
  }).formatToParts(now);
  const get = (t) => parseInt(parts.find((p) => p.type === t).value, 10) || 0;
  const h = get("hour") % 12, m = get("minute"), s = get("second");
  const c = size / 2;
  const hourAngle = (h + m / 60) * 30;
  const minAngle = (m + s / 60) * 6;
  const rad = (deg) => ((deg - 90) * Math.PI) / 180;
  const tip = (deg, len) => [c + len * Math.cos(rad(deg)), c + len * Math.sin(rad(deg))];
  const [hx, hy] = tip(hourAngle, c * 0.45);
  const [mx, my] = tip(minAngle, c * 0.7);
  return (
    <svg className="rc-clock-face" width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
      <circle cx={c} cy={c} r={c - 1} fill="none" stroke="var(--line)" strokeWidth="1.5"></circle>
      <line x1={c} y1={c} x2={hx} y2={hy} stroke="var(--ink)" strokeWidth="2.5" strokeLinecap="round"></line>
      <line x1={c} y1={c} x2={mx} y2={my} stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round"></line>
      <circle cx={c} cy={c} r="2" fill="var(--accent)"></circle>
    </svg>
  );
}

function DigitalTime({ timeZone }) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return new Intl.DateTimeFormat("en-US", {
    timeZone, hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit",
  }).format(now);
}

function Wordmark() {
  return (
    <a className="rc-wordmark" href="#top">
      <img src="https://roundclock.support/wp-content/uploads/2025/03/Asset-1-2.png" width="120" height="40" style={{ objectFit: "contain" }} alt="Round Clock Support"></img>
    </a>
  );
}

const RC_CLOCK_CITIES = [
  { city: "New York", tz: "America/New_York" },
  { city: "London", tz: "Europe/London" },
  { city: "Singapore", tz: "Asia/Singapore" },
];

const RC_CHANNELS = [
  {
    num: "01", name: "Live chat",
    desc: "Trained agents on your website and in-app messenger, resolving pre-sale questions, order issues, and returns in real time.",
    meta: "median reply 47s",
  },
  {
    num: "02", name: "Email",
    desc: "Every ticket answered in your brand voice, around the clock — with escalation paths you define and full conversation history.",
    meta: "resolved < 4h",
  },
  {
    num: "03", name: "Phone",
    desc: "A real human picks up, day or night. Inbound order support, dedicated lines, and overflow coverage for your in-house team.",
    meta: "24/7 pickup",
  },
];

const RC_STEPS = [
  {
    num: "Step 01", title: "We learn your business",
    desc: "Share your help docs, policies, and tone of voice. We build a playbook and train a dedicated agent pod on your products.",
  },
  {
    num: "Step 02", title: "We plug into your stack",
    desc: "Zendesk, Gorgias, Intercom, Shopify — we work inside the tools you already use. No migration, no new software.",
  },
  {
    num: "Step 03", title: "We answer everything",
    desc: "From day one, every chat, email, and call is covered. You watch quality through weekly reports and live CSAT dashboards.",
  },
];

const RC_INDUSTRIES = [
  { label: "Ecommerce & DTC", featured: true },
  { label: "Marketplaces" },
  { label: "SaaS" },
  { label: "Subscriptions" },
  { label: "Logistics & delivery" },
  { label: "Travel & bookings" },
  { label: "Fintech" },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    if (t.typePairing === "Grotesk") {
      root.style.setProperty("--font-display", '"Space Grotesk", "Helvetica Neue", sans-serif');
    } else {
      root.style.setProperty("--font-display", '"Instrument Serif", Georgia, serif');
    }
  }, [t.accent, t.typePairing]);

  return (
    <div className="rc-page" id="top">

      <nav className="rc-nav" data-screen-label="Nav">
        <div className="rc-shell rc-nav-inner">
          <Wordmark></Wordmark>
          <div className="rc-nav-links">
            <a href="#channels">Channels</a>
            <a href="#coverage">Coverage</a>
            <a href="#how">How it works</a>
            <a href="#industries">Industries</a>
          </div>
          <a className="rc-btn rc-btn-primary rc-btn-sm" href="#cta">Book a call</a>
        </div>
      </nav>

      <header className="rc-hero" data-screen-label="Hero">
        <div className="rc-shell">
          <div className="rc-eyebrow">
            <span className="rc-eyebrow-dot"></span>
            <span>24/7 support, as a service</span>
          </div>
          <h1 className="rc-h1">Your customers don't sleep. <em>Neither do we.</em></h1>
          <p className="rc-hero-sub">
            Round Clock Support runs your chat, email, and phone support around the clock —
            trained agents who know your products, working inside your tools, answering
            every customer at any hour.
          </p>
          <div className="rc-hero-ctas">
            <a className="rc-btn rc-btn-primary rc-btn-lg" href="#cta">Book a call</a>
            <a className="rc-btn rc-btn-ghost rc-btn-lg" href="#how">How it works</a>
          </div>

          {t.showClocks && (
            <div className="rc-clocks">
              {RC_CLOCK_CITIES.map((c) => (
                <div className="rc-clock" key={c.city}>
                  <ClockFace timeZone={c.tz}></ClockFace>
                  <div>
                    <div className="rc-clock-city">{c.city}</div>
                    <div className="rc-clock-time"><DigitalTime timeZone={c.tz}></DigitalTime></div>
                    <div className="rc-clock-status">Agents online</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </header>

      <section className="rc-stats" data-screen-label="Stats">
        <div className="rc-shell">
          <div className="rc-stats-grid">
            <div className="rc-stat">
              <div className="rc-stat-value">47s</div>
              <div className="rc-stat-label">Median first response on live chat</div>
            </div>
            <div className="rc-stat">
              <div className="rc-stat-value">24/7</div>
              <div className="rc-stat-label">Coverage, 365 days a year</div>
            </div>
            <div className="rc-stat">
              <div className="rc-stat-value">98%</div>
              <div className="rc-stat-label">CSAT maintained across accounts</div>
            </div>
            <div className="rc-stat">
              <div className="rc-stat-value">14 days</div>
              <div className="rc-stat-label">From kickoff to fully live</div>
            </div>
          </div>
        </div>
      </section>

      <section className="rc-section" id="channels" data-screen-label="Channels">
        <div className="rc-shell">
          <div className="rc-section-head">
            <div>
              <div className="rc-kicker">Channels</div>
              <h2 className="rc-h2">Every channel your customers reach for</h2>
            </div>
            <p className="rc-section-note">
              One team, one playbook, one quality bar — across all three channels.
            </p>
          </div>
          <div className="rc-channels">
            {RC_CHANNELS.map((ch) => (
              <div className="rc-channel" key={ch.num}>
                <div className="rc-channel-num">{ch.num}</div>
                <div className="rc-channel-name">{ch.name}</div>
                <div className="rc-channel-desc">{ch.desc}</div>
                <div className="rc-channel-meta">{ch.meta}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="rc-section" id="coverage" data-screen-label="Coverage">
        <div className="rc-shell">
          <div className="rc-section-head">
            <div>
              <div className="rc-kicker">Coverage</div>
              <h2 className="rc-h2">Close the 9-to-5 gap</h2>
            </div>
            <p className="rc-section-note">
              Most support requests arrive outside business hours. That's exactly when
              carts get abandoned.
            </p>
          </div>
          <div className="rc-coverage">
            <div className="rc-coverage-row">
              <div>
                <div className="rc-coverage-label">Typical in-house team</div>
                <div className="rc-coverage-sub">Mon–Fri, 9am–5pm</div>
              </div>
              <div className="rc-coverage-track">
                <div className="rc-coverage-fill partial" style={{ left: "37.5%", width: "33.3%" }}></div>
              </div>
            </div>
            <div className="rc-coverage-row">
              <div>
                <div className="rc-coverage-label">Round Clock</div>
                <div className="rc-coverage-sub">Every hour, every day</div>
              </div>
              <div className="rc-coverage-track">
                <div className="rc-coverage-fill full" style={{ left: 0, width: "100%" }}>
                  <span>24 / 7 / 365</span>
                </div>
              </div>
            </div>
            <div className="rc-coverage-row" style={{ marginTop: "-22px" }}>
              <div></div>
              <div className="rc-hours-scale">
                <span>00</span><span>06</span><span>12</span><span>18</span><span>24</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="rc-section" id="how" data-screen-label="How it works">
        <div className="rc-shell">
          <div className="rc-section-head">
            <div>
              <div className="rc-kicker">How it works</div>
              <h2 className="rc-h2">Live in two weeks, not two quarters</h2>
            </div>
          </div>
          <div className="rc-steps">
            {RC_STEPS.map((s) => (
              <div className="rc-step" key={s.num}>
                <div className="rc-step-num">{s.num}</div>
                <div className="rc-step-title">{s.title}</div>
                <p className="rc-step-desc">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="rc-section" id="industries" data-screen-label="Industries">
        <div className="rc-shell">
          <div className="rc-section-head">
            <div>
              <div className="rc-kicker">Industries</div>
              <h2 className="rc-h2">Built for ecommerce. Ready for more.</h2>
            </div>
          </div>
          <div className="rc-industries">
            {RC_INDUSTRIES.map((i) => (
              <span className={"rc-industry" + (i.featured ? " featured" : "")} key={i.label}>{i.label}</span>
            ))}
          </div>
        </div>
      </section>

      <section className="rc-section" data-screen-label="Testimonial">
        <div className="rc-shell">
          <blockquote className="rc-quote">
            “We switched our overnight queue to Round Clock and our response time went
            from twelve hours to <em>under a minute</em>. Customers noticed in week one.”
          </blockquote>
          <div className="rc-quote-attr">
            <div className="rc-quote-avatar"></div>
            <div>
              <div className="rc-quote-name">Head of Customer Experience</div>
              <div className="rc-quote-role">8-figure DTC apparel brand</div>
            </div>
          </div>
        </div>
      </section>

      <section className="rc-section" id="cta" data-screen-label="CTA">
        <div className="rc-shell">
          <div className="rc-cta-band">
            <h2 className="rc-h2">Put your support on the clock.</h2>
            <p className="rc-cta-sub">
              Tell us about your volume and channels — we'll send a coverage plan and
              quote within one business day.
            </p>
            <a className="rc-btn rc-btn-primary rc-btn-lg" href="https://calendly.com/roundclock-info/30min">Book a call</a>
          </div>
        </div>
      </section>

      <footer className={"rc-footer" + (t.footerTheme === "Ink" ? " ink" : "")} data-screen-label="Footer">
        <div className="rc-shell">
          <div className="rc-footer-grid">
            <div>
              <Wordmark></Wordmark>
              <p className="rc-footer-blurb">
                24/7 chat, email, and phone support for ecommerce and growing
                businesses — trained agents, your tools, every hour.
              </p>
            </div>
            <div>
              <div className="rc-footer-col-title">Services</div>
              <ul className="rc-footer-links">
                <li><a href="#channels">Live chat support</a></li>
                <li><a href="#channels">Email support</a></li>
                <li><a href="#channels">Phone support</a></li>
                <li><a href="#coverage">Overflow coverage</a></li>
              </ul>
            </div>
            <div>
              <div className="rc-footer-col-title">Company</div>
              <ul className="rc-footer-links">
                <li><a href="#how">How it works</a></li>
                <li><a href="#industries">Industries</a></li>
                <li><a href="#cta">Get a quote</a></li>
                <li><a href="mailto:careers@roundclock.support">Careers</a></li>
              </ul>
            </div>
            <div className="rc-footer-newsletter">
              <div className="rc-footer-col-title">Contact</div>
              <ul className="rc-footer-links" style={{ marginBottom: "24px" }}>
                <li><a href="mailto:hello@roundclock.support">hello@roundclock.support</a></li>
                <li><a href="tel:+18005550247">+1 (800) 555-0247</a></li>
              </ul>
              {t.footerNewsletter && (
                <div>
                  <p>Support benchmarks and CX notes, once a month.</p>
                  <form className="rc-footer-form" onSubmit={(e) => e.preventDefault()}>
                    <input type="email" placeholder="Work email" aria-label="Work email"></input>
                    <button className="rc-btn rc-btn-primary rc-btn-sm" type="submit">Subscribe</button>
                  </form>
                </div>
              )}
            </div>
          </div>
          <div className="rc-footer-bottom">
            <span>© 2026 Round Clock Support. All rights reserved.</span>
            <div className="rc-footer-bottom-links">
              <a href="#top">Privacy</a>
              <a href="#top">Terms</a>
              <span className="rc-footer-status">
                <span className="rc-footer-status-dot"></span>
                <span>All agents online</span>
              </span>
            </div>
          </div>
        </div>
      </footer>

      <TweaksPanel>
        <TweakSection label="Theme"></TweakSection>
        <TweakColor label="Accent" value={t.accent} options={RC_ACCENTS}
          onChange={(v) => setTweak("accent", v)}></TweakColor>
        <TweakRadio label="Display type" value={t.typePairing} options={["Editorial", "Grotesk"]}
          onChange={(v) => setTweak("typePairing", v)}></TweakRadio>
        <TweakSection label="Hero"></TweakSection>
        <TweakToggle label="Timezone clocks" value={t.showClocks}
          onChange={(v) => setTweak("showClocks", v)}></TweakToggle>
        <TweakSection label="Footer"></TweakSection>
        <TweakRadio label="Footer theme" value={t.footerTheme} options={["Ink", "Paper"]}
          onChange={(v) => setTweak("footerTheme", v)}></TweakRadio>
        <TweakToggle label="Newsletter signup" value={t.footerNewsletter}
          onChange={(v) => setTweak("footerNewsletter", v)}></TweakToggle>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App></App>);