/* About + Contact views. */

function About({ onNav }) {
  const values = [
    { k: "Confidence grounded in expertise", d: "We lead with knowledge, never noise." },
    { k: "Global, plural and situated", d: "One reference, read in 160+ countries and 13 languages." },
    { k: "Educational with intent", d: "Driven by service to the people who build." },
  ];
  return (
    <div>
      <section style={{ background: "var(--ad-deep)", color: "var(--ad-grey-100)" }}>
        <Container style={{ padding: "var(--space-9) var(--space-6)" }}>
          <Eyebrow color="var(--ad-grey-100)">Who we are</Eyebrow>
          <h1 style={{ fontSize: "var(--fs-display)", lineHeight: "var(--lh-tight)", letterSpacing: "var(--ls-tight)", color: "var(--ad-grey-100)", margin: "var(--space-4) 0 var(--space-5)", maxWidth: 820 }}>
            We empower the people shaping our built environment.
          </h1>
          <p style={{ fontSize: "var(--fs-body-lg)", color: "var(--ad-grey-100)", lineHeight: "var(--lh-relaxed)", maxWidth: 560, margin: 0 }}>
            For brands, that means a partner who understands architects because we serve them every day — through insight, knowledge, and tools.
          </p>
        </Container>
      </section>

      <section style={{ padding: "var(--space-9) 0" }}>
        <Container size="md">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)" }}>
            <div>
              <Eyebrow>Our mission</Eyebrow>
              <p style={{ fontSize: "var(--fs-h3)", lineHeight: "var(--lh-snug)", color: "var(--text-primary)", marginTop: "var(--space-3)" }}>
                Empower architects and creative minds to drive the next chapter of architecture together.
              </p>
            </div>
            <div>
              <Eyebrow>Our vision</Eyebrow>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h2)", lineHeight: "var(--lh-snug)", color: "var(--ad-editorial)", marginTop: "var(--space-3)" }}>
                A world built with care.
              </p>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)", marginTop: "var(--space-8)" }}>
            {values.map((v) => (
              <div key={v.k} style={{ borderTop: "2px solid var(--ad-electric)", paddingTop: "var(--space-4)" }}>
                <h3 style={{ fontSize: "var(--fs-h4)", margin: "0 0 6px" }}>{v.k}</h3>
                <p style={{ fontSize: "var(--fs-sm)", color: "var(--text-secondary)", margin: 0 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>
    </div>
  );
}

function Contact() {
  const { Button, Input } = window.ArchDailyDesignSystem_788ad7;
  const [sent, setSent] = React.useState(false);
  return (
    <section style={{ padding: "var(--space-8) 0 0" }}>
      <Container size="md">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: "var(--space-8)", alignItems: "start" }}>
          <div>
            <h1 style={{ fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-4)" }}>Start a conversation.</h1>
            <p className="ad-lead" style={{ color: "var(--text-secondary)" }}>
              Tell us about your brand and who you want to reach. We'll follow up with a tailored approach.
            </p>
            <div style={{ marginTop: "var(--space-6)", display: "grid", gap: "var(--space-3)" }}>
              <span style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--text-secondary)", fontSize: "var(--fs-sm)" }}><Icon n="mail" size={18} /> sales@daaily.com</span>
            </div>
          </div>
          <div style={{ background: "var(--surface-card)", border: "var(--hairline)", borderRadius: "var(--radius-md)", padding: "var(--space-6)", boxShadow: "var(--shadow-sm)" }}>
            {sent ? (
              <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "var(--space-3)", padding: "var(--space-5) 0" }}>
                <div style={{ width: 44, height: 44, borderRadius: "var(--radius-pill)", background: "rgba(5,76,216,0.10)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ad-electric)" }}><Icon n="check" size={22} /></div>
                <h3 style={{ margin: 0 }}>Thank you.</h3>
                <p style={{ margin: 0, color: "var(--text-secondary)" }}>We'll be in touch within two business days.</p>
              </div>
            ) : (
              <div style={{ display: "grid", gap: "var(--space-4)" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                  <Input label="First Name" placeholder="Jane" />
                  <Input label="Last Name" placeholder="Architect" />
                </div>
                <Input label="Email" type="email" placeholder="you@brand.com" />
                <Input label="Company" placeholder="Your brand" />
                <Input label="Street" placeholder="123 Main St" />
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
                  <Input label="Zip Code" placeholder="8008" />
                  <Input label="City" placeholder="Zurich" />
                </div>
                <Input label="Country" placeholder="Switzerland" />
                <Input label="WHAT ARE YOU INTERESTED IN?" placeholder="Brand partnership, membership, awards…" />
                <Button variant="primary" size="lg" fullWidth onClick={() => setSent(true)}>Send enquiry</Button>
              </div>
            )}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { About, Contact });