/* Contact — final CTA */

const Contact = () => {
  const [copied, setCopied] = React.useState(false);

  const copyBrief = () => {
    const brief = `Project brief · eth3r Systems

WHAT NEEDS BUILDING:
[the system you want planted. inventory, website, restaurant platform, etc.]

CONSTRAINTS:
  Timeline.
  Budget range.
  Existing systems to graft onto.

CONTEXT:
[the business, the goal, the people you serve.]

  sent from eth3r.ai`;
    navigator.clipboard?.writeText(brief);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <section
      id="contact"
      className="section"
      style={{
        background: "var(--ink)",
        color: "var(--paper)",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Botanical decoration */}
      <div className="sway" style={{ position: "absolute", top: "10%", right: "6%", color: "var(--accent)", opacity: 0.4, pointerEvents: "none" }}>
        <Botanical kind="seedhead" size={200} stroke={1} />
      </div>
      <div className="sway sway-2" style={{ position: "absolute", bottom: "8%", left: "4%", color: "var(--paper-3)", opacity: 0.25, pointerEvents: "none" }}>
        <Botanical kind="fern" size={240} stroke={1} />
      </div>

      <div style={{ position: "relative", zIndex: 2 }}>
        <div className="reveal label" style={{ marginBottom: 16, color: "var(--paper-3)" }}>// 05 · start a project</div>
        <h2 className="reveal display" style={{ fontSize: "var(--t-h1)", maxWidth: "16ch", lineHeight: 0.96, "--reveal-delay": "100ms" }}>
          Tell me what
          <br />
          needs to <span style={{ fontStyle: "italic", color: "var(--accent-2)" }}>take root</span>
          <span style={{ color: "var(--accent)" }}>.</span>
        </h2>

        <div
          className="reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
            gap: "clamp(28px, 4vw, 64px)",
            marginTop: "clamp(40px, 5vw, 64px)",
            "--reveal-delay": "200ms",
          }}
        >
          <p style={{ fontSize: "var(--t-h3)", lineHeight: 1.45, color: "var(--paper-2)", maxWidth: "36ch" }}>
            Tell me what you'd like planted. I'll tell you what it costs and
            when it ships. One operator, no handoffs, no four-month discovery
            phase.
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <button
              onClick={copyBrief}
              className="btn"
              style={{
                background: "var(--accent)",
                color: "var(--ink)",
                borderColor: "var(--accent)",
                justifyContent: "space-between",
                width: "100%",
                padding: "16px 22px",
              }}
            >
              <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span>⎘</span> {copied ? "Copied — paste into email" : "Copy project brief"}
              </span>
              <span className="arrow">↗</span>
            </button>
            <a
              href="mailto:alhassan97@gmail.com"
              className="btn btn--ghost"
              style={{
                color: "var(--paper)",
                borderColor: "var(--paper-3)",
                justifyContent: "space-between",
                width: "100%",
                padding: "16px 22px",
              }}
            >
              <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span>✉</span> alhassan97@gmail.com
              </span>
              <span className="arrow">→</span>
            </a>
            <p className="mono" style={{ fontSize: 11, color: "var(--paper-3)", marginTop: 4, lineHeight: 1.5 }}>
              On Gmail iOS? Use copy-brief. mailto won't pre-fill there.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

/* Footer */

const Footer = () => {
  return (
    <footer
      style={{
        position: "relative",
        zIndex: 2,
        padding: "32px var(--pad-x)",
        borderTop: "1px solid var(--line)",
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "space-between",
        alignItems: "center",
        gap: 16,
        fontFamily: "JetBrains Mono, monospace",
        fontSize: 11,
        letterSpacing: "0.08em",
        textTransform: "uppercase",
        color: "var(--ink-mute)",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Botanical kind="sprig" size={18} stroke={1.2} style={{ color: "var(--moss)" }} />
        <span>© 2026 ETH3R Systems LLC</span>
      </div>
      <span>Engineering modern digital infrastructure</span>
      <a href="#top" style={{ color: "var(--ink)", textDecoration: "none" }}>
        Back to top ↑
      </a>
    </footer>
  );
};

window.Contact = Contact;
window.Footer = Footer;