/* Page sections */

const Hero = ({ heroVariant }) => {
  const [time, setTime] = React.useState(getPacificTime());
  React.useEffect(() => {
    const id = setInterval(() => setTime(getPacificTime()), 30000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="top" className="hero">
      <div className="container container--wide">
        <div className="hero__topbar">
          <ColumnLabel num="A—001">Index / Studio</ColumnLabel>
          <div className="hero__meta">
            <span className="mono">49.1798° N · 123.8336° W</span>
            <span className="hero__sep" />
            <span className="mono">{time} PT</span>
          </div>
        </div>

        <div className="hero__main">
          <p className="mono hero__eye">
            <span className="hero__eye-dot" />
            Independent studio · Est. 2025
          </p>

          {heroVariant === "duality" ? (
            <h1 className="hero__title">
              <span className="hero__line">Alternate routes.</span>
              <span className="hero__line hero__line--accent">Alternate roots.</span>
              <span className="hero__line hero__line--sm">One studio.</span>
            </h1>
          ) : (
            <h1 className="hero__title">
              <span className="hero__line">Design, web &amp; tech</span>
              <span className="hero__line hero__line--accent">for the good work.</span>
            </h1>
          )}

          <p className="hero__lead lead">
            AR Communications is a one-person studio on Gabriola Island, building brand identities,
            websites and supporting small-office technology for non-profits and small businesses of
            coastal British Columbia.
          </p>

          <div className="hero__ctas">
            <a href="#contact" className="btn btn--primary btn--arrow">
              Start a project <NavArrow />
            </a>
            <a href="#work" className="btn btn--ghost">
              See selected work
            </a>
          </div>
        </div>

        <hr className="rule" />

        <div className="hero__grid">
          <div className="hero__cell">
            <ColumnLabel num="01">Discipline</ColumnLabel>
            <p className="hero__cell-body">Brand · Web · Office tech · Installations</p>
          </div>
          <div className="hero__cell">
            <ColumnLabel num="02">Clients</ColumnLabel>
            <p className="hero__cell-body">Non-profits, small businesses, civic projects.</p>
          </div>
          <div className="hero__cell">
            <ColumnLabel num="03">Availability</ColumnLabel>
            <p className="hero__cell-body">
              <span className="hero__avail">●</span> Booking July → September 2026
            </p>
          </div>
        </div>
      </div>

      <Marquee />

      <style>{`
        .hero { padding-top: 140px; padding-bottom: 56px; position:relative; overflow:hidden; }
        .hero__topbar {
          display:flex; justify-content:space-between; align-items:center;
          padding-bottom: 72px;
        }
        .hero__meta { display:inline-flex; align-items:center; gap:12px; color: var(--ink-3); }
        .hero__sep { width:4px; height:4px; border-radius:50%; background: var(--ink-4); }

        .hero__eye { display:inline-flex; align-items:center; gap:10px; color: var(--ink-2); margin: 0 0 36px; }
        .hero__eye-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }

        .hero__title { margin: 0 0 40px; }
        .hero__line {
          display:block;
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(3.5rem, 11.5vw, 11.5rem);
          line-height: 0.92;
          letter-spacing: -0.05em;
          color: var(--ink);
        }
        .hero__line--accent { color: var(--accent); font-style: italic; font-weight: 400; }
        .hero__line--sm { font-size: clamp(2rem, 4vw, 3.5rem); color: var(--ink-3); letter-spacing: -0.03em; }

        .hero__lead { max-width: 60ch; margin: 0 0 40px; font-size: clamp(1.05rem, 1.2vw, 1.25rem); }

        .hero__ctas { display:flex; gap: 12px; flex-wrap: wrap; margin-bottom: 88px; }

        .hero__grid {
          display:grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--col-gap);
          padding: 32px 0 0;
        }
        .hero__cell-body {
          margin: 16px 0 0; font-size: 15px; line-height:1.5; color: var(--ink);
        }
        .hero__amp { color: var(--ink-4); margin: 0 4px; }
        .hero__avail { color: var(--accent); font-size: 10px; vertical-align: middle; }

        @media (max-width: 900px) {
          .hero__grid { grid-template-columns: repeat(2, 1fr); }
          .hero__topbar { flex-direction:column; align-items:flex-start; gap: 12px; padding-bottom: 48px; }
        }
      `}</style>
    </section>
  );
};

function getPacificTime() {
  try {
    return new Date().toLocaleTimeString("en-CA", {
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
      timeZone: "America/Vancouver",
    });
  } catch {
    return "—:—";
  }
}

const Marquee = () => {
  const items = [
    "Brand identity",
    "Web design",
    "Technical support",
    "Non-profit specialist",
    "Gabriola, BC",
  ];
  const row = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <hr className="rule" />
      <div className="marquee__track">
        {row.map((t, i) => (
          <span key={i} className="marquee__item">
            <span className="marquee__dot" />
            <span>{t}</span>
          </span>
        ))}
      </div>
      <hr className="rule" />
      <style>{`
        .marquee { margin-top: 64px; }
        .marquee__track {
          display:flex; gap: 56px; align-items:center;
          padding: 22px 0;
          white-space: nowrap;
          animation: marquee 48s linear infinite;
          width: max-content;
        }
        .marquee__item {
          display:inline-flex; align-items:center; gap: 18px;
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-2);
        }
        .marquee__dot { width:5px; height:5px; border-radius:50%; background: var(--accent); }
      `}</style>
    </div>
  );
};

/* ---------- SERVICES ---------- */

const SERVICES = [
  {
    num: "01",
    title: "Brand identity",
    sub: "Logos, marks & visual systems",
    body: "A clear name, a confident mark, and a set of rules that hold up on a hand-painted sign or a 4K screen. Built for organisations that need their identity to last more than a season.",
    deliverables: ["Logo & wordmark", "Type & colour system", "Guidelines PDF", "Signage & print", "Stationery"],
  },
  {
    num: "02",
    title: "Web design",
    sub: "Sites that work as hard as you do",
    body: "Plain-spoken websites for small teams. Easy to update, easy to find, easy to read on a slow rural connection. Built on WordPress, Webflow or hand-coded — whichever fits the work.",
    deliverables: ["Site design", "Content & copy", "Build & launch", "Accessibility audit", "Annual care"],
  },
  {
    num: "03",
    title: "Tech support",
    sub: "On-call help for small offices",
    body: "When the printer won't print, when the email is bouncing, when nobody can find the Wi-Fi password. A friendly local you can phone, on a monthly retainer or per visit.",
    deliverables: ["Remote support", "On-site visits", "Backups & security", "Email & calendar setup", "Vendor liaison"],
  },
  {
    num: "04",
    title: "Office builds",
    sub: "Setting up small offices, properly",
    body: "Network cabling, workstations, projectors, video-call rooms. The boring infrastructure that makes a small organisation feel like a real one. Done once, done well.",
    deliverables: ["Network & Wi-Fi", "Workstation setup", "Meeting-room AV", "Cabling & tidy-up", "Documentation"],
  },
];

const Services = () => {
  return (
    <section id="services" className="services">
      <hr className="rule" />
      <div className="container container--wide services__inner">
        <div className="section-head">
          <ColumnLabel num="§ 01">Services</ColumnLabel>
          <h2 className="section-head__title">
            Four things, done<br />
            <span className="accent" style={{fontStyle:"italic", fontWeight:400}}>thoroughly.</span>
          </h2>
        </div>

        <div className="services__grid">
          {SERVICES.map((s, i) => (
            <ServiceRow key={s.num} {...s} last={i === SERVICES.length - 1} />
          ))}
        </div>
      </div>
      <style>{`
        .services { padding: 120px 0; }
        .services__grid { display:flex; flex-direction:column; }
      `}</style>
    </section>
  );
};

const ServiceRow = ({ num, title, sub, body, deliverables, last }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`srow ${open ? "is-open" : ""}`}>
      <hr className="rule" />
      <button className="srow__head" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
        <span className="mono srow__num">{num}</span>
        <span className="srow__title">{title}</span>
        <span className="srow__sub">{sub}</span>
        <span className="srow__toggle" aria-hidden="true">
          <span className="srow__toggle-bar" />
          <span className="srow__toggle-bar srow__toggle-bar--v" />
        </span>
      </button>
      <div className="srow__panel">
        <div className="srow__panel-inner">
          <div className="srow__copy">
            <p className="body" style={{ margin: 0, maxWidth: "52ch", fontSize: "1.05rem" }}>{body}</p>
          </div>
          <div className="srow__deliv">
            <ColumnLabel num="—">Deliverables</ColumnLabel>
            <ul className="srow__list">
              {deliverables.map((d) => (
                <li key={d} className="srow__list-item">
                  <span className="srow__list-dash" />
                  <span>{d}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      {last && <hr className="rule" />}
      <style>{`
        .srow__head {
          display:grid;
          grid-template-columns: 80px minmax(220px, 1fr) 2fr 40px;
          gap: var(--col-gap);
          align-items:center;
          width:100%;
          padding: 32px 0;
          text-align:left;
          transition: color var(--t-fast);
        }
        .srow__head:hover { color: var(--accent); }
        .srow__head:hover .srow__sub { color: var(--ink-2); }
        .srow__num { color: var(--ink-3); }
        .srow__title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(1.6rem, 3vw, 2.6rem);
          letter-spacing: -0.03em;
          line-height: 1.05;
        }
        .srow__sub {
          color: var(--ink-3);
          font-size: 14px;
          transition: color var(--t-fast);
        }
        .srow__toggle {
          position:relative; width: 18px; height: 18px; justify-self:end;
        }
        .srow__toggle-bar {
          position:absolute; left:0; top:50%; width:18px; height:1.5px;
          background: currentColor; transform: translateY(-50%);
          transition: transform var(--t);
        }
        .srow__toggle-bar--v { transform: translateY(-50%) rotate(90deg); }
        .srow.is-open .srow__toggle-bar--v { transform: translateY(-50%) rotate(0deg); }

        .srow__panel {
          display:grid; grid-template-rows: 0fr;
          transition: grid-template-rows var(--t);
        }
        .srow.is-open .srow__panel { grid-template-rows: 1fr; }
        .srow__panel-inner {
          overflow:hidden;
          display:grid;
          grid-template-columns: 80px minmax(220px, 1fr) 2fr 40px;
          gap: var(--col-gap);
          padding: 0 0 0;
        }
        .srow.is-open .srow__panel-inner { padding: 0 0 40px; }
        .srow__copy { grid-column: 2 / 3; }
        .srow__deliv { grid-column: 3 / 4; }
        .srow__list { list-style:none; padding: 0; margin: 14px 0 0; display:grid; gap: 10px; }
        .srow__list-item {
          display:flex; align-items:center; gap: 14px;
          font-size: 15px; color: var(--ink);
        }
        .srow__list-dash { display:inline-block; width:14px; height:1px; background: var(--ink-3); }

        @media (max-width: 900px) {
          .srow__head { grid-template-columns: 50px 1fr 28px; }
          .srow__sub { display:none; }
          .srow__panel-inner { grid-template-columns: 50px 1fr 28px; }
          .srow__copy, .srow__deliv { grid-column: 2 / 3; }
          .srow__deliv { padding-top: 24px; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { Hero, Services, Marquee });