import Link from "next/link"
import ContactForm from "@/components/ContactForm"
import { CONTACT_CHANNELS, SITE_BRAND } from "@/lib/site-content"

const HERO_CHANNELS = [
  {
    ...CONTACT_CHANNELS[0],
    headline: "申请产品演示",
    icon: "mail",
  },
  {
    ...CONTACT_CHANNELS[1],
    headline: "私有化与采购",
    icon: "phone",
  },
] as const

export default function HeroSection() {
  return (
    <section className="section-small top overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div className="w-layout-grid contact-grid">
          <div data-w-id="f1d777b6-f289-d52f-017b-af3a4a212cde" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _430px _100-tablet">
            <div className="subtitle">Contact</div>
            <div className="mg-top-4x-extra-small">
              <h1>
                和 {SITE_BRAND} 团队聊聊你的真实场景
              </h1>
            </div>
            <div className="mg-top-4x-extra-small">
              <p>
                无论你想申请试用、评估企业方案，还是讨论 Skills / 插件生态，都建议先把团队背景、
                代码栈、交付约束和预期目标告诉我们，后续沟通会更高效。
              </p>
            </div>
          </div>
          <div id="w-node-_77c06870-1d0c-5ed5-aea2-38d8dab4dc54-60eb3ba7" className="position-relative---z-index-2">
            <div data-w-id="29536b1c-822f-a212-7a3f-cf3cd12237b3" style={{"opacity": "0", "filter": "blur(8px)"}} className="corner-gradient-container">
              <div className="border-wrapper">
                <ContactForm />
              </div>
              <div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
                <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
                </div>
                <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
                </div>
                <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
                </div>
                <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
                </div>
              </div>
            </div>
          </div>
          <div id="w-node-a2c7d873-a197-1a9e-135d-10f912dd9a40-60eb3ba7" data-w-id="a2c7d873-a197-1a9e-135d-10f912dd9a40" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _430px _100-tablet">
            <div className="w-layout-grid contact-links-grid">
              {HERO_CHANNELS.map((channel) => {
                const isExternal = channel.href.startsWith("http")

                const content = (
                  <>
                    <div className="contact-icon-wrapper">
                      <div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
                      </div>
                      {channel.icon === "mail" ? (
                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="contact-icon">
                          <path fillRule="evenodd" clipRule="evenodd" d="M0 2H24V4.31556L12.0001 10.861L0 4.31546V2ZM0 6.59364V22H24V6.59373L12.0001 13.1391L0 6.59364Z" fill="currentColor">
                          </path>
                        </svg>
                      ) : (
                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 32 33" fill="none" className="contact-icon">
                          <g clipPath="url(#contact-hero-phone)">
                            <path fillRule="evenodd" clipRule="evenodd" d="M17.4208 23.0719L19.6275 19.3745L20.2074 18.403L21.2951 18.7137L30.7718 21.4215L31.9775 21.7659L31.8283 23.011L30.907 30.7015L30.7429 32.0718L29.3648 31.9954C24.7899 31.7419 20.2596 30.4521 16.1565 28.1239C13.8427 26.8111 11.6667 25.1692 9.69696 23.1995C7.72725 21.2298 6.08529 19.0538 4.77246 16.74C2.44438 12.6369 1.15446 8.1065 0.901036 3.53162L0.824707 2.1536L2.19504 1.98942L9.8854 1.06812L11.1305 0.918945L11.4751 2.12475L14.1827 11.6014L14.4934 12.6892L13.522 13.269L9.82445 15.4758C10.8063 16.9482 11.9474 18.3468 13.2482 19.6476C14.5492 20.9486 15.9481 22.0899 17.4208 23.0719Z" fill="currentColor">
                            </path>
                          </g>
                          <defs>
                            <clipPath id="contact-hero-phone">
                              <rect width="32" height="32" fill="white" transform="translate(0 0.5)" />
                            </clipPath>
                          </defs>
                        </svg>
                      )}
                    </div>
                    <div className="contact-v1-link-content">
                      <div>{channel.title}</div>
                      <div className="mg-top-5x-extra-small">
                        <div className="display-2 medium text-titles">{channel.headline}</div>
                      </div>
                      <div className="mg-top-5x-extra-small">
                        <p>{channel.description}</p>
                      </div>
                    </div>
                    <div className="bottom-right-button-wrapper">
                      <div className="icon-button">
                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
                          <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
                          </path>
                        </svg>
                      </div>
                    </div>
                  </>
                )

                return (
                  <div key={channel.title} className={`corner-gradient-container${channel.icon === "phone" ? " row" : ""}`}>
                    {isExternal ? (
                      <a data-w-id={`contact-channel-${channel.title}`} href={channel.href} className="contact-v1-link w-inline-block" target="_blank" rel="noopener noreferrer">
                        {content}
                      </a>
                    ) : (
                      <Link href={channel.href} className="contact-v1-link w-inline-block">
                        {content}
                      </Link>
                    )}
                    <div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
                      <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
                      </div>
                      <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
                      </div>
                      <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
                      </div>
                      <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}