/* global React, PageIntro, useViewport */
const { useState: useStateD } = React;

/* ------------------------------------------------------------------ */
/* Distributors                                                        */
/*                                                                    */
/* The "Contact a distributor" page. Content verbatim from the live   */
/* Derlot dealers.html page — Brisbane HQ + Europe + NA contacts, then */
/* an expandable ANZ region (7 distributors, some multi-branch), then */
/* North America (Founded by Garcia / Toronto), then a fallback for    */
/* regions we don't cover yet. Editorial tone; no map gymnastics.     */
/* ------------------------------------------------------------------ */

/* ----- Data ------------------------------------------------------- */

const DERLOT_OFFICES = [
  {
    region: "Australia & Asia Pacific",
    email: "contact@derlotgroup.com",
    phones: ["+61 7 3397 8886"],
    address: ["Level 6, 371 Queen Street", "Brisbane QLD 4000"],
  },
  {
    region: "Europe",
    email: "ulrick@derlotgroup.com",
    phones: ["+41 79 30 20 400", "+45 31 31 56 41"],
  },
  {
    region: "North America",
    email: "sussan@derlotgroup.com",
    phones: ["+1 424 335 5215", "+1 469 400 7877"],
  },
];

const REGIONS = [
  {
    key: "anz",
    name: "Australia and New Zealand",
    distributors: [
      {
        name: "Living Edge",
        branches: [
          { city: "Brisbane",  address: ["171 Robertson Street", "Fortitude Valley QLD 4006"], email: "info@livingedge.com.au", phones: ["+61 3137 2900"] },
          { city: "Melbourne", address: ["650 Church Street", "Richmond VIC 3121"],              email: "info@livingedge.com.au", phones: ["+61 3 9009 3900"] },
          { city: "Sydney",    address: ["The Woolstores, Shed 74", "4D Huntley Street", "Alexandria NSW 2015"], email: "info@livingedge.com.au", phones: ["+61 2 9640 5600"] },
          { city: "Perth",     address: ["7 Queen Street", "Perth WA 6000"],                      email: "info@livingedge.com.au", phones: ["+61 8 6466 7400"] },
        ],
      },
      {
        name: "Estilo Furniture",
        branches: [
          { city: "Adelaide",  address: ["Level 1, 192 Waymouth Street", "Adelaide SA 5000"], email: "sales@estilo.furniture", phones: ["+61 8 8118 6222"] },
        ],
      },
      {
        name: "Designcraft",
        branches: [
          { city: "Canberra",  address: ["Corner Monaro Highway and Sheppard Street", "Hume ACT 2620"], email: "info@designcraft.net.au", phones: ["+61 2 6290 4900"] },
        ],
      },
      {
        name: "Ownworld",
        branches: [
          { city: "Melbourne", address: ["11 Stanley Street", "Collingwood VIC 3066"], email: "sales@ownworld.com.au", phones: ["+61 3 9416 4822"] },
          { city: "Sydney",    address: ["5/50 Stanley Street", "Darlinghurst NSW 2010"], email: "sales@ownworld.com.au", phones: ["+61 2 9358 1155"] },
        ],
      },
      {
        name: "The New Slow",
        branches: [
          { city: "Byron Bay", address: ["3/52 Centennial Circuit", "Byron Bay NSW 2481"], email: "contact@derlotgroup.com", phones: [], note: "By appointment only" },
        ],
      },
      {
        name: "LIMINAL Studio",
        branches: [
          { city: "Hobart",    address: ["100 New Town Road", "New Town TAS 7008"], email: "objects@liminalstudio.com.au", phones: ["+61 3 6231 0166"] },
        ],
      },
      {
        name: "Unison Spaces",
        branches: [
          { city: "Auckland",  address: ["Level 2, 165 The Strand", "Parnell, Auckland 1010", "New Zealand"], email: "sales@unisonspaces.nz", phones: ["+64 9 972 2493"] },
        ],
      },
    ],
  },
  {
    key: "na",
    name: "North America",
    distributors: [
      {
        name: "Founded by Garcia",
        branches: [
          { city: "Toronto",   address: ["1390-1392 Dufferin Street", "Toronto, Ontario", "M6H 4C8"], email: "contact@foundedbygarcia.com", phones: ["+1 416 688 9562"] },
        ],
      },
    ],
  },
];

/* ----- UI atoms --------------------------------------------------- */

function BranchCard({ branch }) {
  return (
    <div style={{ minWidth: 0 }}>
      <div style={{
        fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
        fontWeight: 500, color: "#1a1917", marginBottom: 12,
      }}>
        {branch.city}
      </div>
      <div style={{ fontSize: 14, lineHeight: 1.55, color: "#3a3833" }}>
        {branch.address.map((l, i) => (<div key={i}>{l}</div>))}
      </div>
      <div style={{ fontSize: 13, lineHeight: 1.6, color: "#1a1917", marginTop: 12 }}>
        <a
          href={`mailto:${branch.email}?subject=New%20Enquiry`}
          style={{ color: "inherit", borderBottom: "0.5px solid rgba(26,25,23,0.35)" }}
        >{branch.email}</a>
        {branch.phones.map((p, i) => (
          <div key={i} style={{ marginTop: 2, color: "#3a3833" }}>{p}</div>
        ))}
        {branch.note && (
          <div style={{ marginTop: 8, color: "#6c6862", fontStyle: "italic" }}>{branch.note}</div>
        )}
      </div>
    </div>
  );
}

function DistributorBlock({ d, isMobile }) {
  return (
    <div style={{ marginTop: 40 }}>
      <div style={{
        fontFamily: "var(--font-display, Poppins, sans-serif)",
        fontWeight: 500,
        fontSize: isMobile ? 22 : 26,
        letterSpacing: "-0.015em",
        color: "#1a1917", marginBottom: 20,
      }}>
        {d.name}
      </div>
      {/* Always lay branches out on the same 4-column grid so column width
          matches across distributors (e.g. Living Edge's 4 branches and
          Ownworld's 2 branches use the same column width). On mobile,
          single-column stack. */}
      <div style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "repeat(4, minmax(0, 1fr))",
        gap: isMobile ? 32 : 40,
      }}>
        {d.branches.map((b, i) => <BranchCard key={i} branch={b} />)}
      </div>
    </div>
  );
}

function RegionAccordion({ region, defaultOpen = true, isMobile }) {
  const [open, setOpen] = useStateD(defaultOpen);
  return (
    <div style={{
      borderTop: "0.5px solid rgba(26,25,23,0.18)",
    }}>
      <button
        onClick={() => setOpen(v => !v)}
        aria-expanded={open}
        style={{
          width: "100%", background: "transparent", border: 0, padding: isMobile ? "24px 0" : "36px 0",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          cursor: "pointer", textAlign: "left", color: "#1a1917",
        }}
      >
        <h2 style={{
          margin: 0,
          fontFamily: "var(--font-display, Poppins, sans-serif)",
          fontWeight: 500,
          fontSize: isMobile ? "clamp(24px, 6vw, 30px)" : "clamp(28px, 2.4vw, 38px)",
          letterSpacing: "-0.02em", lineHeight: 1.1,
        }}>{region.name}</h2>
        <span style={{
          fontSize: 22, lineHeight: 1, color: "#1a1917",
          transform: open ? "rotate(45deg)" : "rotate(0deg)",
          transition: "transform 250ms ease", display: "inline-block",
        }}>+</span>
      </button>
      {open && (
        <div style={{ padding: isMobile ? "0 0 32px" : "0 0 56px" }}>
          {region.distributors.map((d, i) => (
            <DistributorBlock key={i} d={d} isMobile={isMobile} />
          ))}
        </div>
      )}
    </div>
  );
}

/* ----- Derlot Group office card ---------------------------------- */

function OfficeCard({ office, isMobile }) {
  return (
    <div style={{ minWidth: 0 }}>
      <h3 style={{
        margin: 0,
        fontFamily: "var(--font-display, Poppins, sans-serif)",
        fontWeight: 500,
        fontSize: isMobile ? 18 : 20,
        letterSpacing: "-0.01em",
        color: "#1a1917", marginBottom: 14,
      }}>
        {office.region}
      </h3>
      <div style={{ fontSize: 14, lineHeight: 1.65, color: "#1a1917" }}>
        <a
          href={`mailto:${office.email}?subject=New%20Enquiry`}
          style={{ color: "inherit", borderBottom: "0.5px solid rgba(26,25,23,0.35)" }}
        >{office.email}</a>
        {office.phones.map((p, i) => (
          <div key={i} style={{ marginTop: 2, color: "#3a3833" }}>{p}</div>
        ))}
        {office.address && (
          <div style={{ marginTop: 14, color: "#3a3833" }}>
            {office.address.map((l, i) => <div key={i}>{l}</div>)}
          </div>
        )}
      </div>
    </div>
  );
}

/* ----- Page ------------------------------------------------------- */

function Distributors() {
  const vw = useViewport();
  const isMobile = vw < 900;

  return (
    <>
      <PageIntro
        eyebrow="Distributors"
        title="Contact a distributor."
        body="Ready to experience our furniture and lighting collections? Our distributors are available worldwide — find your regional contact below. For regions we don't yet cover, reach us directly and we'll route your enquiry."
      />

      {/* Derlot Group offices ---------------------------------------- */}
      <section style={{
        padding: isMobile ? "0 20px 72px" : "0 max(32px, 4vw) 96px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{
          fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 24 : 36,
        }}>
          Derlot Group
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, minmax(0, 1fr))",
          gap: isMobile ? 40 : 56,
          borderTop: "0.5px solid rgba(26,25,23,0.18)",
          paddingTop: isMobile ? 32 : 48,
        }}>
          {DERLOT_OFFICES.map((o, i) => <OfficeCard key={i} office={o} isMobile={isMobile} />)}
        </div>
      </section>

      {/* Regional distributors -------------------------------------- */}
      <section style={{
        padding: isMobile ? "0 20px 72px" : "0 max(32px, 4vw) 96px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{
          fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 16 : 24,
        }}>
          Appointed distributors
        </div>
        {REGIONS.map((r) => (
          <RegionAccordion key={r.key} region={r} isMobile={isMobile} defaultOpen={true} />
        ))}
        {/* Bottom border to close the last accordion visually */}
        <div style={{ borderTop: "0.5px solid rgba(26,25,23,0.18)" }} />
      </section>

      {/* Become a distributor --------------------------------------- */}
      <section style={{
        background: "#ecebe5",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
        borderBottom: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{
          maxWidth: 1440, margin: "0 auto",
          padding: isMobile ? "64px 20px" : "96px max(32px, 4vw)",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 5fr) minmax(0, 6fr)",
          gap: isMobile ? 20 : 64,
          alignItems: "start",
        }}>
          <div style={{
            fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, paddingTop: isMobile ? 0 : 10,
          }}>
            Become a distributor
          </div>
          <div>
            <h2 style={{
              margin: 0,
              fontFamily: "var(--font-display, Poppins, sans-serif)",
              fontWeight: 500,
              fontSize: isMobile ? "clamp(26px, 6.5vw, 34px)" : "clamp(28px, 2.6vw, 40px)",
              lineHeight: 1.12, letterSpacing: "-0.02em", color: "#1a1917",
              maxWidth: "22ch", textWrap: "balance",
            }}>
              Want to represent our brand in your region?
            </h2>
            <div style={{ marginTop: isMobile ? 20 : 28, fontSize: 15, lineHeight: 1.65, color: "#3a3833", maxWidth: 560 }}>
              We partner with a small number of appointed distributors who share the standards — specification-grade detailing, local aftercare, and a long view. If your showroom serves architects and contract specifiers and we don't yet have a presence in your market, we'd like to talk.
            </div>
            <a
              href="mailto:contact@derlotgroup.com?subject=Distributor%20partnership%20enquiry"
              style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                marginTop: isMobile ? 24 : 32,
                fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
                color: "#1a1917", fontWeight: 500,
                borderBottom: "0.5px solid #1a1917", paddingBottom: 4,
              }}
            >
              Contact us about representation →
            </a>
          </div>
        </div>
      </section>

      {/* Fallback --------------------------------------------------- */}
      <section style={{
        padding: isMobile ? "40px 20px 96px" : "72px max(32px, 4vw) 140px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 5fr) minmax(0, 6fr)",
          gap: isMobile ? 20 : 64,
          alignItems: "start",
        }}>
          <div style={{
            fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, paddingTop: isMobile ? 0 : 10,
          }}>
            Another part of the world?
          </div>
          <div>
            <h2 style={{
              margin: 0,
              fontFamily: "var(--font-display, Poppins, sans-serif)",
              fontWeight: 500,
              fontSize: isMobile ? "clamp(26px, 6.5vw, 34px)" : "clamp(28px, 2.6vw, 40px)",
              lineHeight: 1.12, letterSpacing: "-0.02em", color: "#1a1917",
              maxWidth: "24ch", textWrap: "balance",
            }}>
              We ship everywhere. If your region isn't listed, write to us directly.
            </h2>
            <div style={{ marginTop: isMobile ? 24 : 32, fontSize: 15, lineHeight: 1.6, color: "#3a3833" }}>
              Send an email to{" "}
              <a
                href="mailto:contact@derlotgroup.com?subject=Distributor%20enquiry"
                style={{ color: "#1a1917", borderBottom: "0.5px solid rgba(26,25,23,0.45)" }}
              >contact@derlotgroup.com</a>{" "}
              and we'll route your enquiry to the closest appointed distributor, or — where none exists — direct to our team in Brisbane.
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.Distributors = Distributors;
